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