在扁平化設計興起與最初的 Macintosh 圖形界面問世之間的近 30 年，是擬物化設計從萌芽、發(fā)展、成熟到轉型的階段。上世紀 80 年代，幾乎所有研究機構和 3D 制作公司都聚焦于提高 3D 圖形的真實感。隨著技術成熟，設計師們爭相繪制愈發(fā)逼真復古的圖標，到 2012 年左右，擬物化設計達到極致。然而，過度精細的肌理、裝飾、光影讓人們視覺疲勞，且用單一逼真設備作為圖標，因設備更迭可能導致功能識別斷代，比如年輕一代對指南針喻指地圖、磁帶喻指錄音等設計可能陌生。
近十幾年，互聯(lián)網(wǎng)快速發(fā)展，花大量時間雕琢圖標細節(jié)已無法滿足軟件快速開發(fā)和迭代的需求。2010 年微軟發(fā)布 WindowsPhone，在 Zune 界面基礎上創(chuàng)造出簡潔明亮、扁平磁貼、極具現(xiàn)代感的 Metro 風格，對移動界面影響深遠，其動態(tài)磁貼和大字體界面將扁平化設計推向新高度，交互和層級上也力求貼近用戶，理念超前。這種風格還被應用到 2012 年 10 月發(fā)布的 Windows8 及后續(xù)的 Windows10 上，雖在應用市場兼容等方面受詬病，但仍廣受喜愛，甚至被蘋果效仿。
2013 年 9 月，蘋果發(fā)布 iOS7，這是 iOS 系統(tǒng)面世以來界面最大的一次改變，全面拋棄擬物化設計，去除所有圖標和界面的細節(jié)、質感、光影，進行 “壓扁” 式的顛覆性調整。憑借蘋果龐大的粉絲基礎，國內主流網(wǎng)絡產(chǎn)品如騰訊 QQ、360、新浪微博、微信，以及魅族 flyme3.0、小米 MIUI6 等操作系統(tǒng)，紛紛采用扁平化設計風格，在產(chǎn)品界面、圖標和 logo 上化繁為簡，推動全球掀起扁平化設計熱潮，使其成為移動互聯(lián)和界面設計領域的熱門詞匯。
隨著扁平化設計席卷軟件行業(yè)，卡片式設計也隨之誕生，其實在 iOS7 系統(tǒng)中就能看到最早的卡片式設計界面。
卡片是含有圖片或文本信息的容器，能將所需信息歸納在一起形成獨立個體，將其引用到線上界面中，也具有出色的信息歸納效果。
在界面設計中，常用卡片樣式進行信息分類，加之卡片具有延展性、承載性強且便于設計等特點，深受眾多 UI 設計師青睞。從用戶角度看，一個個卡片將內容分類清晰，使用戶閱讀信息時感覺邏輯分明、頁面整潔，極大提升了使用愉悅感。
在卡片式設計中，每個卡片可看作獨立盒子，同類型信息放在同一盒子，不同盒子放置不同信息，形成分類清晰的信息集合，類似重慶九宮格火鍋，自然實現(xiàn)信息的整合與分類。
清晰的信息分類能減少用戶瀏覽頁面時的思維判斷停留，降低因判斷產(chǎn)生的疑惑感。如順豐小程序、懂車帝 APP、站酷 APP 的頁面設計，都通過卡片式設計清晰承載信息，帶來一目了然的體驗。
卡片式設計通常為規(guī)則矩形容器，拉伸和壓縮都利于內容擴展。這種延展性對設計師而言降低了設計門檻，對用戶來說，更貼近真實生活的設計接受度更高。
常見的卡片內容擴展樣式豐富，如 banner 的滑動切換、卡片內內容滾動、通知條展開等。以喜馬拉雅 APP 為例，首頁 banner 可在 X 軸自動和手動左右切換，切換時位置標識點同步移動，給用戶延伸的空間感；部分卡片初始狀態(tài)下右邊對內容有切割樣式，提示用戶右側有更多內容，用戶形成視覺習慣后會自然左滑查看。
在交互中，常出現(xiàn)點擊卡片內容后，卡片縮放鋪滿全屏進入詳情的交互方式?？ㄆ鳛橐?guī)則形狀的容器，在縮放適配方面優(yōu)勢明顯，能更好地適應各種場景，提升 APP 頁面兼容性。
由于卡片是內容盛放容器，可自由變換大小，因此在跨終端響應中表現(xiàn)出色，在不同平臺展示時，能根據(jù)分辨率自適應調整。
卡片式設計可操作性強，能縱向滑動、橫向滾動、點擊上下伸展、長按拖動等。
卡片設計因自身上下內邊距和卡片間外邊距，往往有充足留白，加上輕投影形成合理層次感，視覺上自然舒適。這種接近真實世界的設計，易讓人們產(chǎn)生熟悉感和親切感，視覺體驗更優(yōu)。
卡片式設計多結合圖像與文字說明傳達信息，在有限矩形空間中創(chuàng)造無限可能，主要應用場景有以下幾種：
流式布局讓單屏能顯示大量信息，在內容較多時，卡片式設計能很好地規(guī)劃內容。
卡片式的 feed 流設計十分常見，F(xiàn)eed 流作為長內容展示方式，用戶需長時間拖動篩選有效信息，卡片式設計能有效區(qū)分內容，使用戶在長屏拖動中也能清晰識別各部分內容。
懸浮卡片分為動態(tài)和靜態(tài)兩種，可懸停在固定位置，無論頁面滑動到何處，用戶都能第一時間操作，一般用于重要級別較高的功能。
作為非頁面固定內容，卡片式設計讓 tips 提示更靈活，在符合用戶體驗的前提下，可出現(xiàn)在用戶需要的任何位置。
要在設計工作中充分發(fā)揮卡片優(yōu)勢，可采用以下設計方法：
為使頁面視覺干凈簡潔，無特殊顏色要求時，卡片通常填充純白色，這可能導致與背景融合，失去信息分類作用?？赏ㄟ^增加適當陰影或填充顏色漸變，使卡片與背景純色區(qū)分開。
適當?shù)膱A角度數(shù)能讓卡片更圓潤可愛，拉近與用戶的視覺距離?？梢?guī)范一個單位圓角度，在此基礎上按倍數(shù)選擇，使所有卡片圓角統(tǒng)一有序。
投影色和投影數(shù)值設置很關鍵，稍不注意會讓頁面顯臟或有強烈割裂感，采用輕淡的方式設置更符合當下視覺流行趨勢。
看清社會現(xiàn)實后，會發(fā)現(xiàn) “加油、努力” 或許只是資本的鞭策，但它也是一個通道，一個增加博弈籌碼的通道。希望我們都能在這個通道前方看到光明。
歸納總結，沉淀出新，讓我們一起努力大步向前！
蘭亭妙微（藍藍設計）m.sdgs6788.com 是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。
