乾貨丨為什麼那麼多APP的頁面那麼土？原因是卡片式設計沒搞好

今天小編將為大家普及卡片設計的理念，整理一些優質的卡片式設計資源，希望能在設計上為你帶來更多的思考和靈感。

一、什麼是卡片式設計？

卡片是含有圖片和文字在內的小矩形模組，它是使用者瞭解更多細節資訊的入口。要平衡介面的美學和可用性，卡片基本是一個預設選擇。因為卡片用起來非常方便，還可以展示包含不同元素的內容。

二、卡片式設計的優勢是什麼？

Google將它稱之為“Inside Out design”（由內而外式），它的本質是更好的處理資訊集合。那麼卡片式設計具備哪些優勢呢？

（1）增加空間利用率

在傳統列表下，內容一般為縱向滾動操作，展示的內容有限。而採用卡片式的佈局，在縱向的內容流裡，還可以很好的增加橫向滑動的內容區域。

（2）提升可操作性

卡片是一種擬物化元素，可以被覆蓋、堆疊、移動、滑動。這樣能更好的拓展內容視覺深度和可操作性。

比如：iPhone自帶的“提醒事項”APP，就是採用卡片堆疊的方式，使用者可按照標題快速查詢目標備忘錄，同時進行點選操作，開啟或刪除卡片內容。

（3）利於資訊分層和整合

在卡片式設計中，一張卡片就是一個資訊模組，使用者即使快速瀏覽，也不會產生混亂。塊狀的卡片使得頁面更加整齊美觀，同一頁面中卡片的不同大小，還區分了資訊的重要等級。

三、優質卡片式設計例項賞析

網頁類卡片設計例項

1. Google Play – Material Design卡片

Google Play作為谷歌出品的一款網頁應用，不管是顏色搭配還是介面設計都遵循了Material design設計理念。整個網站的設計運用了大量的卡片設計。

無論是首頁推薦還是細分類別，模組化的展示使整個網站介面看起來整潔大方，十分具有條理性。配合上下、左右的滑動互動，給使用者極強的操作感。

2. Quora

作為一個以資訊展示為主的網站，Quora的設計首先考慮的是資訊流的展示。如何在有限的版面內有條不紊的展示網頁內容且兼顧使用者體驗及友好性？Quora機智地使用了卡片設計。從使用者習慣來講，使用者喜歡閱讀成塊的內容，而卡片將資訊以區塊的形式集中在一起，更適合閱讀。

好處在於這種設計讓內容不會以長篇大論的形式出現，避免因為內容太長讓使用者產生畏懼心理。簡單明快的內容更容易引起使用者興趣，使用者也因此能夠選擇是否要繼續閱讀下去。卡片將內容提取、最佳化為有意義的區塊，而且不同型別、屬性的內容可以在卡片上組合成為有機的、連貫的聚合體。

3. Linkedin

根據費茲定律：點選目標越大，使用者的操作速度越快。領英的網站設計中，使用到了文字+圖片+連結的方式。當以上所有的元素框選在同個卡片中時，面積較大的圖片則是卡片的中心，並且也是整張卡片中最大的可點選範圍（詳細內容頁面的進入點）。伴隨滑鼠移入與網頁產生的互動，使用者即可得到“可點選”的反饋。

4. Pinterest

作為早期的卡片式設計先驅者，Pinterest的瀑布流設計的頁面設計方式為使用者提供了無縫式的流暢體驗。同時，減少點選步驟也可以極大限度的留住使用者。卡片式設計和瀑布流的結合也就是常聽說的卡片流了。

與領英的內容題圖展示並且可點選類似，Pinterest圖片流的每一整張圖片都具有可點選性。Material Design中常常會讓卡片擁有微妙的陰影，尤其是與滑鼠互動的時候。這種設計是非常有道理的，陰影和深度會給予使用者以視覺感知力，強化它的可見性，以及知覺上的“可點選性”。使用者將滑鼠移到圖片上方即可得到這樣的點選反饋。

5. Dribbble