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