在本文中，作者對卡片式設(shè)計進行了梳理：從卡片式設(shè)計的由來、到卡片式設(shè)計的各種形態(tài)和卡片式設(shè)計的優(yōu)缺點，希望通過此文能夠加深你對卡片式設(shè)計的認識。

01 卡片式設(shè)計的由來

卡片設(shè)計來源于早已存在于人類生活的各種現(xiàn)實物品。

舉個例子，顯示器、手機、名片，一封信、等等，都是獨立承載信息的一個個卡片。人們不用把電影院搬走就可以通過電視觀看到不同的內(nèi)容載體，這時候電視充當(dāng)?shù)氖莾?nèi)容載體的入口。而名片盒書信這種卡片感就更強了，你可以把一封信折疊起來，方便攜帶，等到需要的時候再伸展開來，進行詳細閱讀。

正是人類生活早已充斥著“卡片設(shè)計”，所以當(dāng)我們手中的設(shè)備界面有了“卡片式設(shè)計”的時候，人們反而覺得使用起來很方便和有熟悉感。

而我們現(xiàn)在用的系統(tǒng)界面的卡片式設(shè)計來自哪里呢？

最早應(yīng)用卡片式設(shè)計并不是google 的Material Design 也不是蘋果的iOS Design，而是palm webOS。

2009年palm發(fā)布的webOS系統(tǒng)的多任務(wù)管理和卡片式窗口征服了發(fā)布會現(xiàn)場的所有觀眾?？上б驗楦鞣NBUG和代碼的陳舊導(dǎo)致沒有辦法在市場占好先機。但是卻也留下了很優(yōu)秀的遺產(chǎn)。

2009年CES發(fā)布會

webOS中，傳統(tǒng)意義上的程序概念被弱化，取而代之的是卡片系統(tǒng)。所有的任務(wù)均以卡片的形式出現(xiàn)。任何時候點擊手勢區(qū)，都會進入卡片視圖?？ㄆ晥D中展現(xiàn)出正在運行的任務(wù)，這些任務(wù)以多窗口的形式呈現(xiàn)。你可以看到正在運行的全部任務(wù)，可以通過滑動進行切換，點擊后進入任務(wù)，這樣一種操作方式，是極其美妙的。

更為重要的是webOS 中的多任務(wù)的流暢度可以得到很好的保證，可以說webOS的多任務(wù)是世界上最好的移動系統(tǒng)多任務(wù)平臺。

圖片來自：Tim Schofield

02 卡片式設(shè)計中的各種形態(tài)

放眼望去，其實我們使用的app或多或少都有用到卡片式的設(shè)計，最常見的一種形態(tài)則是首頁的輪播Banner

淘寶（左）、Appstore（右）

不論是圖文內(nèi)容還是視頻內(nèi)容都可以通過卡片進行承載：

大眾點評（左）、花瓣（右）

大至系統(tǒng)級的App任務(wù)界面，小至一個文本條目，卡片式設(shè)計的形態(tài)各異，多種多樣。幾乎涵蓋了所有能想到的設(shè)計。

03 卡片式設(shè)計的優(yōu)點

而為什么那么多設(shè)計師熱衷于卡片式設(shè)計呢？當(dāng)然是因為優(yōu)點極多：

1. 獨立、聚焦

卡片設(shè)計因為會跟其他內(nèi)容有天然的斷層，所以會更容易形成獨立的視覺焦點。

2. 輕便靈活

相比于從傳統(tǒng)列表點擊進內(nèi)容詳情頁，卡片可以直接點擊展開直接瀏覽詳情，交互體驗更輕，而且隨時可以恢復(fù)卡片模式，十分靈活。

Appstore首頁

Appstore首頁

3. 自由組合

參考淘寶首頁和appstore首頁可以看出，不同形態(tài)的內(nèi)容例如輪播廣告、入口、推薦位、列表、文章通過承載于卡片之中，可以進行自由排版組合。沒有了死板的排版規(guī)則，對于設(shè)計師甚至客戶端工程師來說，都是十分的方便，少了各種各樣的限制。

4. 多終端兼容性好

不同終端由于屏幕的不同，導(dǎo)致做設(shè)計的時候需要做設(shè)計兼容。比如bootstrap框架在pc端的柵格兼容。屏幕從540一直往上擴展，都能完美顯示。這里應(yīng)用的正是卡片式設(shè)計，用卡片容器包著內(nèi)容。

Bootstrap card grid

不僅僅是一設(shè)計兼容多終端的情況適用，即便是針對不同終端重新做設(shè)計也是需要做品牌或者設(shè)計元素的延伸。如果能保持樣式的視覺基本一致，會減少很多的學(xué)習(xí)成本。

5. 多態(tài)操作

卡片是可操作性十分強的設(shè)計模式，可以縱向滑動，可以橫向滾動，可以點擊進行上下伸展，還可以長按拖動等等。

圖片來自：Behance

6. 視覺舒適感

卡片設(shè)計由于卡片本身的上下Padding（內(nèi)邊距）和卡片間的Margin（外間距），往往帶有很充足的空間留白。加上通過輕投影形成合理的層次感，看上去既自然又舒適，而且對于接近真實世界的設(shè)計，人會自然而然產(chǎn)生熟悉感和親切感。所以從視覺體驗上，卡片式設(shè)計也是完勝。

圖片來自：Behance

04 卡片式設(shè)計的缺點

盡管有這么多的優(yōu)點，但是我一直都認為世界上是沒有絕對完美的設(shè)計體驗。所以人類對交互體驗和美感的探索腳步才會從沒有停過。而卡片式設(shè)計也有它的缺點：

浪費空間，導(dǎo)致一屏展現(xiàn)的信息量很少

拋開卡片設(shè)計形態(tài)不說，單單是卡片設(shè)計本身就比普通列表的設(shè)計需要占用更多的空間。

圖片來自：我自己

加上很多卡片設(shè)計不同的內(nèi)容（視頻、圖文）都會跟單純的列表有很大的不同，所以需要占用的空間會只多不少。

不適用使用卡片設(shè)計的場景

因為有上面提到的缺點，所以有些場景就不適合用卡片式設(shè)計了。

1）上下文具有連續(xù)性的內(nèi)容，例如：文章翻頁

具體請體驗下UC瀏覽器的閱讀模式，上滑翻頁的時候，會馬上講刷新出來的下一頁文字無縫連接上一頁的文字，沉浸式閱讀是不應(yīng)該產(chǎn)生阻礙或者斷層的。

2）依賴于文本進行閱讀的，簡單的，重復(fù)的內(nèi)容，例如：文章列表、聊天列表

今日頭條（左）、微信（右）

3）需要同時獲取并且比較多條列表進行比較的內(nèi)容，例如：搜索結(jié)果

京東（左）、淘寶（右）

上述這些頁面使用了卡片式設(shè)計會導(dǎo)致閱讀效率降低，使設(shè)計失去優(yōu)勢。

本文由 @Chamon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議