編者按：卡片式設計依然是目前UI設計的熱門，雖然我們在前幾天的文章《不是萬能！卡片式設計并不能支撐所有的設計需求》當中探討了卡片式設計為數不多的“局限”。今天我們從基本的規則入手，為你展示卡片式設計的最佳實踐~

卡片這種UI元素一直是以小巧整齊的內容容器的形式而存在著。當我們探討清晰平衡、富有美感、簡約時尚而又具備良好可用性的設計方案的時候，卡片式設計幾乎是不二之選。早年間的Pinterest 和Facebook 是卡片式設計的先驅者，隨后Google 通過 Material Design 幾乎標準化了卡片式設計，現在你會發現卡片式設計，幾乎已經深入到各個行業、領域的UI設計當中。

最佳實踐(best practice)，是一個管理學概念，認為存在某種技術或者方法使生產管理實踐的結果達到最優，并減少出錯的可能性。也就是我們常說的“最佳解決方案”。

最初是 Pinterest 采取了這種使用卡片作為信息組織的基本元素的思路，使得網頁中多類型信息組織有了更好的用戶體驗設計方案，并隨后引發了“瀑布流”設計風潮。之后多年的積累和探究，卡片式設計有了長足的進步和相對系統的設計思路，今天的文章，我們將探討最常見也是最實用的5種卡片式設計的最佳實踐。

1、遵循“一卡一概念”的規則

每一個卡片應當承載一種概念，其中內容不應當混搭而復雜。卡片式設計當中，卡片可以橙子啊多種多樣的信息和元素，但是單個卡片應當保持其中內容屬性的純粹性和直觀性。這樣用戶會更輕松的選取他們想要的內容，或者分享他們眼中最合適的內容。

2、讓整個卡片都可被點擊

根據費茨定律（Fitts's Law），用戶應當可以點擊卡片的任何一個部分來觸發其中的內容，而不只是圖片和文本鏈接。更大的觸摸和觸發范疇是卡片本身的優勢所在，不論是在移動端的觸摸屏上，還是以鍵盤鼠標為主桌面端上，讓整個卡片都可被點擊明顯擁有更強的可用性。

小貼士：Material Design 中常常會讓卡片擁有微妙的陰影，這種設計是非常有道理的，陰影和深度會給予用戶以視覺感知力，強化它的可見性，以及知覺上的“可點擊性”。

3、讓卡片具有視覺愉悅感

好的視覺設計和良好的可用性是卡片式設計的拿手好戲。卡片本身的良好承載性，使得它稍加打磨就可以擁有不錯的美學特征，好用和漂亮結合到一起，會讓用戶對卡片式設計著迷的。

當你在設計實戰當中使用卡片的時候，你應當特別注意下面的幾個部分：

圖片

卡片是圖片的“重度用戶”，甚至可以說卡片“特別擅長”展示圖片。研究證明，圖片本身能夠提升設計的質感，而圖片和卡片式設計的結合無疑能夠讓卡片本身對于用戶的吸引力，再往上提升一個高度（前提是圖得找對）。

陰影和漸變

陰影和漸變是最能讓用戶將UI中的卡片和現實中的卡片聯系到一起的元素。在設計的時候，你應當仔細觀察一下卡片在現實世界中的質感，光影的分布和走向，否則陰影和漸變太假就不好了。

排版

當然，你還可以借助文本來吸引用戶的注意力。卡片中的文本內容應該易于閱讀，容易理解，所以，你應當確保它具有最大的可讀性：

·選擇簡單的字體和易于閱讀的配色方案（文本內容應該是清晰可見的，放置在純色背景下，擁有足夠的對比度）
·嘗試控制字體的數量，對于絕大多數的情況，單個字體足以應付。

小貼士：卡片中的正文部分只需要一個Normal 字重的非襯線體就行了。

4、限制卡片中的內容

卡片通常不大，并且大多是作為詳細信息的入口而存在的，所以它本身不應當承載太多細節。當你試圖向一張卡片中加入太多的內容的時候，會讓其變得過于臃腫，不論是太長還是太寬都非常難看，而且會失去它作為一個“卡片”的隱喻。

下面就是一個采用卡片式設計的案例。注意中間的卡片，它的問題在于其中填充了太多的內容，這些內容太難以查看了。

5、充分利用動效

如果動效用的好，用戶體驗會有極大的提升。動效能夠幫助用戶在基于卡片的UI當中更好的定位，并且建立不同卡片狀態之間的視覺關聯。

視覺提示

視覺提示能夠幫助用戶更好的了解如何同界面進行交互。當需要為用戶展示具體的某個功能如何操作的時候，它就顯得頗為有用了。

視覺反饋

在UI設計當中，視覺反饋是極為重要的組成部分。視覺反饋的工作原理很簡單，視覺反饋幫助用戶確認他們的交互已經完成。在現實生活中，物品通常會對我們的操作給予回應，比如點擊開關會有力量的回饋，以及“喀噠”一聲響。在桌面端UI中，鼠標光標懸停在可交互的控件上之時，箭頭會變成按鈕，這也是UI元素給予的反饋。懸停動畫增加了功能的可發現性，同時使得體驗更加有意思。在移動端和卡片式設計當中更是如此。

使用懸停動效觸發更多的選項。比如在下面的案例當中，光標懸停之后，用戶可以標記、回復、轉發或者刪除當前信息。

放大

這個放大的動效連接了預覽和詳情視圖：用戶選中卡片就可以看到對應的詳細信息。這個動效確保了用戶能夠聯系上下文。

結語

卡片是UI設計師發揮創意的畫板，它不僅僅是一個形似卡片的UI控件，它還是創建優質內容，營造優質用戶體驗的重要布局手段。

【關于卡片式設計，你還需要了解更多】

1. 《簡約不簡單!帶你重新審視正在流行的卡片式設計趨勢》
2. 《潤物細無聲!卡片式設計是如何占領設計圈的?》
3. 《僅此一篇,讀懂卡片式設計長盛不衰的秘密》
4. 《來玩撲克吧!深聊使用卡片式設計的優質網站》

原文地址：medium
原文作者：Nick Babich
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com