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