卡片設計的修養

前言

卡片作為我們最常用的組件之一，無論作為概念稿還是實際落地的項目中都比比皆是。接下來我們就從結構和功能的角度來了解一下它為什麼這麼優秀！

目錄

1.卡片的定義

2.卡片的優勢

3.卡片設計的建議

4.總結

01

卡片的定義

卡片設計是現實世界向虛擬世界設計的延伸

卡片是我們從現實生活中的物質向虛擬世界的一種延伸，是由我們生活中常見的卡片（會員卡、名片等等）轉換到我們的產品設計當中作為載體的出現。

簡單點理解就是卡片是一個相對完美的處理信息集合。

a.構成分析

卡片的組成簡單點來講是由：

由信息與操作組成。

視覺上由：內容層+承載層組成。

承載層我們可以理解為承載內容的容器，而內容層則是我們設計時的必要元素。

內容層多數為圖片、文字、按鈕等元素。

b.功能分析

卡片最大的作用就是作為功能入口的存在。

由於卡片設計的獨立性，使得單獨的卡片能夠承擔功能入口的作用。

例如我們常常看到的卡片作為功能入口的場景有首頁流量分發、菜單等等。

如下圖：

02

卡片的優點

a.卡片設計視覺統一性強

由於每一個卡片都是由承載層和內容層組成，形式上統一，所以在視覺上有很強的一致性。

例如京東金融和下廚房：

在京東金融和下廚房中卡片都採用了相同的設計樣式，具有極強的視覺一致性，能夠幫助用戶快速簡歷視覺流，提高用戶瀏覽的效率，減少閱讀時其他因素的干擾。

b.卡片設計能夠突出重點內容

卡片具有很強的獨立性，具有空間感。在頁面設計中，我們可以通過卡片與周圍環境的差異，來突出的我們的想要展現的內容。

例如轉轉：

轉轉的 Banner 選用了卡片的形式，利用卡片的獨立性，在設計上通過卡片的陰影建立空間感，提升 Banner 的視覺層級，突出 Banner 。

c.卡片設計能夠區分不同維度的內容與歸納相同維度的信息

由於每張卡片的操作互相獨立，互不干擾，有利於區分不同緯度的內容；同時也可以利用卡片來講相同緯度的信息進行歸類。

keep 通過卡片來區分不同緯度內容展現，以此分別是運動數據、已參加課程、訓練計劃等不用緯度的模塊，可以幫助用戶用戶的可以快速區分內容，進而執行下一步操作。

而京東的個人頁面在區分不同緯度的同時，也將相同維度的信息歸類到卡片當中，例如訂單信息、我的錢包和其他輔助業務的歸類。

d.卡片能讓用戶更加專註當前內容

卡片的圓角設計更容易吸引人的目光，並且通過卡片營造的空間感以及視覺層級的優先順序，卡片能夠更加吸引我們的注意力，讓我們的更加專註當前內容。

例如 app store

App store 今日推薦（Today）通過卡片設計中的陰影，增強當前卡片的空間感以及視覺層級；在設計上使用了圓角的設計形式，更加容易吸引用戶的眼光，讓用戶更加專註當前推薦內容的卡片。

e.卡片設計可以提高空間的利用率

卡片可以利用橫（X）軸交互來提高空間的利用率，將部分內容隱藏在橫軸的空間當中，在屏幕可視的空間範圍內通過交互展示更多的內容。

例如淘票票：

淘票票在熱映電影的模塊中通過橫（X）軸交互，將部分內容隱藏在橫軸的空間中，提高了控制項利用率，在有限的空間內展示更多的電影信息。

f.卡片可變化，適配性強

卡片是可變化的，具有無限擴展的屬性，在適配上更是得天獨厚；在同倍率下只需要按照設計稿件的間距標註做自然適配，不同倍率下只需要進行簡單的換算即可。

g.卡片設計能夠提升界面的可操作性

如上我們提到卡片是一種擬真元素，交互設計可以被覆蓋、堆疊、移動、划去，這樣能更好的拓展內容模塊的視覺深度和可操作性。

例如途家和網易戲精：

途家熱門目的地模塊通過的卡片的堆疊來告訴用戶當前有更加豐富的目的地，並能通過滑動來進行操作。

網易戲精的副本頁面則是通過簡單的左滑右滑來來進行內容選擇。

03

卡片設計的建議

卡片雖好，但不要生搬硬套

朋友們，卡片設計雖然形式感強，具有明顯的設計語言，但是

卡片設計也是有缺點的！最為致命就是「占空間」！例如筆者之前做過的一次改版練習就採用了卡片式設計。

練習改版的設計展示的信息明顯少於原版，導致用戶需要付出更多的時間和交互成本。卡片設計明顯不適合類似的使用場景頁面。

使用什麼樣的設計方式是根據我們所要解決的問題和人們對信息的消費方式決定的，卡片式設計有它的適用範圍，設計時切勿生搬硬套。

04

總結

我們再來回顧一下以上的內容，首先我們講了卡片的定義，其中包含卡片的結構和功能作用，接下來我們講到了最重要的卡片設計的優勢，最後我們同樣告誡大家卡片設計的弊端。每一種設計形式都有優點，我們需要合理應用，切勿生搬硬套。

參考鏈接：

卡片設計有什麼好處https://www.zhihu.com/question/21473866/answer/21474866

海鹽社開放招新，後台回數字「2」，查看詳情