卡片就是交互信息的承載體，通常以矩形的方式呈現。就像信用卡或者棒球卡，網頁卡片以一個濃縮的形式提供了快速並且相關的信息。所有的卡片特點就是交互性。不僅僅是他們提供了信息，而且他們用另外一種委婉的方式去要求一次互動。卡片通常包括按鈕或者發布到社交媒體的方法。卡片是簡潔小巧的信息盒子。在界面設計中，要平衡界面的審美和可用性，卡片基本是一個通用選擇。卡片這一設計概念最先被 Pinterest 和 Facebook 使用，接着是Google,Twitter等，而如今卡片的使用已經滲入了App移動應用及網頁排版布局設計等各行各業。為了讓大家能跟好的理解和應用好卡片式設計技巧，我們通過一些實戰案例講解。
Pinterest 引入卡片這一概念，基本可以將某主題相關的所有信息納入一個信息盒子。
如果運用恰當的話，卡片可以提升 app 的用戶體驗。這篇文章介紹了 5 種卡片運用的最佳實踐，並提供相關的實用案例。
01
-
遵循「一卡一概念」原則
卡片的所有內容只能和一個主題相關。一個卡片可以包含多種元素，但應該主要體現同類信息或內容。這樣用戶才能更輕松地選擇他們所喜愛或願意分享的內容。
一個模塊（或卡片）「包含」一次用戶交互。
02
-
保證整個卡片都可點擊
遵循菲茲定律（Fitts’s Law），要讓用戶可以點擊或觸擊卡片的任何部分，而不只是文字鏈接或圖片。無論在移動端的觸擊屏幕，還是需要鼠標操作的主桌面端，有相對大面積的觸擊區都可大大提高卡片的可用性。
AppSo（微信號 appsolution）注：
菲茲定律是人機交互領域一個非常重要的法則。其基本觀點是，當一個人用鼠標來移動鼠標指針時，屏幕上的目標其某些特征會使得點擊變得輕松或困難。目標離得越遠，到達就越費勁；目標越小，就越難點中。
小提示：推薦使用一點陰影來呈現深度，讓大家知道卡片是可點擊的。
圖片來源：nngroup
03
-
保證卡片的視覺享受感
要說什么樣的卡片才是成功的，那必然是有良好設計和可用性的卡片了。對卡片稍加打磨，加入少許美學特征，卡片會讓人感覺熟悉，同時創意十足。
圖片來源：Piper Lawson
當開始動手設計卡片時，你應當特別注意以下幾個方面：
//圖片
基於卡片的設計通常主要依靠視覺設計，而使用大量圖片就是卡片設計的一大亮點。研究發現已證實，圖片可以提升網頁或 app 的整體設計。所以，加入圖片也使得基於卡片的設計更加引人入勝。
圖片來源：Dave Gamache
//陰影和漸變
加入陰影和漸變這兩種元素，可以有效地讓用戶將你設計的卡片與現實生活中的對應實物聯系在一起。
但在設計時，一定要仔細思考如何運用這兩種元素：如果卡片四周和角落都加上陰影，要再想讓用戶將它與現實生活中的對應實物聯系在一起就有點難了。
帶有圓角的卡片從視覺上看來就像是一張撲克牌。圖片來源：Material Design
//排版
當然，要想吸引用戶注意力，還可以通過排版來實現。卡片所有內容都應該簡單易懂，不妨試試從最大可讀性角度來設計：
選擇簡單的字體和易於閱讀的配色方案（文本內容在純色背景下，且背景顏色和文字顏色有鮮明對比的，這樣的文本才是最清晰易讀的）。
盡量控制字體的種類數量。對於絕大多數情況而言，單一的字體足矣。
小提示：卡片主內容文本，選用 sans-serif 字體正常粗細的效果非常好。
圖片來源：maconprinting
04
-
限制卡片內容篇幅
卡片通常不大，其作為用戶了解更多細節信息的「入口」，所以它本身不需要承載過多細節內容。當你試圖在卡片里添加大量內容，導致卡片變得過寬或過長，那它就會失去其原有的「擬物」效果。
下圖是一個采用基於卡片設計的用戶界面示例。注意中間的卡片，它的問題主要是因為大量內容過多，以至於難以閱讀。
圖片來源：Piotr Adam Kwiatkowski
05
-
加入動畫和動效
動畫如果運用得好，可以大大提升用戶體驗。其可以幫助用戶在基於卡片的界面中更好地定位，並建立不同卡片狀態之間的視覺關聯。
//視覺提示
視覺提示幫助用戶更好地了解如何與界面進行交互。當需要向用戶展示某些具體功能如何操作時，它就顯得頗為有用了。
展示導航功能的提示。圖片來源：Barthelemy Chalvet
//視覺反饋
視覺反饋在界面設計中相當重要，因為它能直接和用戶的自然期望相關聯。
在現實生活中，各種物品通常都會對我們的行為作出反應，這也是大眾習以為常的反饋。比如電腦的開關按鈕，當你按下開關鍵時，你可以感受到按鈕被按下的力量反饋，同時還有聲音反饋。
在電腦端，你可以通過「懸停效果」來顯示相關元素的交互行為。懸停動畫可以增加功能的可發現性，同時，也使用戶體驗更加有趣。
在卡片中加入懸停動畫。圖片來源：uxpin
使用懸停效果還可以激活更多選項。下圖中，光標懸停后，用戶可以進行顏色標記、回復、轉發或刪除當前信息。
圖片來源：Roman Shkolny
//放大
放大可以呈現從原圖到細節視圖的過渡：用戶選中卡片就可以直接看到相關詳細信息。不過要注意，要確認讓用戶感覺他們仍在相同背景框架下進行交互。
動畫可以將縮略圖和細節視圖相關聯。圖片來源：Charles Patterson
小結
-
卡片是界面設計領域創新型新元素。它不僅僅是一張卡片，它還是創造優質內容和設計最佳用戶體驗最靈活的布局方式之一。一張卡片必須具有功能性、獨立性，並且有可翻動性。不論你把薄餅烤的多么光滑，它依然有兩面。查看卡片的需要注意的是：卡片有兩面。並不是說卡片要有一個翻轉動畫，相反地說每張卡片呈現出的一個信息的概覽，並且每一張卡片給你進一步參與的選擇（可點擊性）。一張卡片不僅僅是一條信息，它還總是可以讓人去做更多。卡片是讓你的設計更加全面、人性化、更有互動性的最好方式。它們非常值得你去了解、使用。
相關閱讀
- 卡片式風格讓App移動應用手機網站產品設計更出彩 2018.03.22