起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識關于卡片式設計，你需要知道這4點
在本文中，作者對卡片式設計進行了梳理：從卡片式設計的由來、到卡片式設計的各種形態和卡片式設計的優缺點，希望通過此文能夠加深你對卡片式設計的認識。
01 卡片式設計的由來
卡片設計來源于早已存在于人類生活的各種現實物品。
舉個例子，顯示器、手機、名片，一封信、等等，都是獨立承載信息的一個個卡片。人們不用把電影院搬走就可以通過電視觀看到不同的內容載體，這時候電視充當的是內容載體的入口。而名片盒書信這種卡片感就更強了，你可以把一封信折疊起來，方便攜帶，等到需要的時候再伸展開來，進行詳細閱讀。
正是人類生活早已充斥著“卡片設計”，所以當我們手中的設備界面有了“卡片式設計”的時候，人們反而覺得使用起來很方便和有熟悉感。
而我們現在用的系統界面的卡片式設計來自哪里呢？
最早應用卡片式設計并不是google 的Material Design 也不是蘋果的iOS Design，而是palm webOS。
2009年palm發布的webOS系統的多任務管理和卡片式窗口征服了發布會現場的所有觀眾?？上б驗楦鞣NBUG和代碼的陳舊導致沒有辦法在市場占好先機。但是卻也留下了很優秀的遺產。
2009年CES發布會
webOS中，傳統意義上的程序概念被弱化，取而代之的是卡片系統。所有的任務均以卡片的形式出現。任何時候點擊手勢區，都會進入卡片視圖?？ㄆ晥D中展現出正在運行的任務，這些任務以多窗口的形式呈現。你可以看到正在運行的全部任務，可以通過滑動進行切換，點擊后進入任務，這樣一種操作方式，是極其美妙的。
更為重要的是webOS 中的多任務的流暢度可以得到很好的保證，可以說webOS的多任務是世界上最好的移動系統多任務平臺。
圖片來自：Tim Schofield
02 卡片式設計中的各種形態
放眼望去，其實我們使用的app或多或少都有用到卡片式的設計，最常見的一種形態則是首頁的輪播Banner
淘寶（左）、Appstore（右）
不論是圖文內容還是視頻內容都可以通過卡片進行承載：
大眾點評（左）、花瓣（右）
大至系統級的App任務界面，小至一個文本條目，卡片式設計的形態各異，多種多樣。幾乎涵蓋了所有能想到的設計。
03 卡片式設計的優點
而為什么那么多設計師熱衷于卡片式設計呢？當然是因為優點極多：
1. 獨立、聚焦
卡片設計因為會跟其他內容有天然的斷層，所以會更容易形成獨立的視覺焦點。
2. 輕便靈活
相比于從傳統列表點擊進內容詳情頁，卡片可以直接點擊展開直接瀏覽詳情，交互體驗更輕，而且隨時可以恢復卡片模式，十分靈活。
Appstore首頁
Appstore首頁
3. 自由組合
參考淘寶首頁和appstore首頁可以看出，不同形態的內容例如輪播廣告、入口、推薦位、列表、文章通過承載于卡片之中，可以進行自由排版組合。沒有了死板的排版規則，對于設計師甚至客戶端工程師來說，都是十分的方便，少了各種各樣的限制。
4. 多終端兼容性好
不同終端由于屏幕的不同，導致做設計的時候需要做設計兼容。比如bootstrap框架在pc端的柵格兼容。屏幕從540一直往上擴展，都能完美顯示。這里應用的正是卡片式設計，用卡片容器包著內容。
Bootstrap card grid
不僅僅是一設計兼容多終端的情況適用，即便是針對不同終端重新做設計也是需要做品牌或者設計元素的延伸。如果能保持樣式的視覺基本一致，會減少很多的學習成本。
5. 多態操作
卡片是可操作性十分強的設計模式，可以縱向滑動，可以橫向滾動，可以點擊進行上下伸展，還可以長按拖動等等。
圖片來自：Behance
6. 視覺舒適感
卡片設計由于卡片本身的上下Padding（內邊距）和卡片間的Margin（外間距），往往帶有很充足的空間留白。加上通過輕投影形成合理的層次感，看上去既自然又舒適，而且對于接近真實世界的設計，人會自然而然產生熟悉感和親切感。所以從視覺體驗上，卡片式設計也是完勝。
圖片來自：Behance
04 卡片式設計的缺點
盡管有這么多的優點，但是我一直都認為世界上是沒有絕對完美的設計體驗。所以人類對交互體驗和美感的探索腳步才會從沒有停過。而卡片式設計也有它的缺點：
浪費空間，導致一屏展現的信息量很少
拋開卡片設計形態不說，單單是卡片設計本身就比普通列表的設計需要占用更多的空間。
圖片來自：我自己
加上很多卡片設計不同的內容（視頻、圖文）都會跟單純的列表有很大的不同，所以需要占用的空間會只多不少。
不適用使用卡片設計的場景
因為有上面提到的缺點，所以有些場景就不適合用卡片式設計了。
1）上下文具有連續性的內容，例如：文章翻頁
具體請體驗下UC瀏覽器的閱讀模式，上滑翻頁的時候，會馬上講刷新出來的下一頁文字無縫連接上一頁的文字，沉浸式閱讀是不應該產生阻礙或者斷層的。
2）依賴于文本進行閱讀的，簡單的，重復的內容，例如：文章列表、聊天列表
今日頭條（左）、微信（右）
3）需要同時獲取并且比較多條列表進行比較的內容，例如：搜索結果
京東（左）、淘寶（右）
上述這些頁面使用了卡片式設計會導致閱讀效率降低，使設計失去優勢。
本文由 @Chamon 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
