探探和 LinkedIn 都在用的卡片設計，怎樣才給你好的體驗？ #016

俊鐵導讀：

最近，越來越多 app 開始使用「卡片式設計」，例如我們所熟知的高端職場社區 LinkedIn 領英和 Facebook。到底這種卡片式設計怎麼用，才能給我們良好的體驗？這篇文章為你帶來了 5 個實踐原則和案例。

卡片是簡潔小巧的信息盒子。在界面設計中，要平衡界面的審美和可用性，卡片基本是一個通用選擇。卡片這一設計概念最先被 Pinterest 和 Facebook 使用，而如今卡片的使用已經滲入了各行各業。

如果運用恰當的話，卡片可以提升 app 的用戶體驗。這篇文章介紹了 5 種卡片運用的最佳實踐，並提供相關的實用案例。

1. 遵循「一卡一概念」原則

卡片的所有內容只能和一個主題相關。一個卡片可以包含多種元素，但應該主要體現同類信息或內容。這樣用戶才能更輕鬆地選擇他們所喜愛或願意分享的內容。

2. 保證整個卡片都可點擊

遵循菲茲定律（Fitts』s Law），要讓用戶可以點擊或觸擊卡片的任何部分，而不只是文字鏈接或圖片。無論在移動端的觸擊屏幕，還是需要滑鼠操作的主桌面端，有相對大面積的觸擊區都可大大提高卡片的可用性。

俊鐵註：菲茲定律是人機交互領域一個非常重要的法則。其基本觀點是，當一個人用滑鼠來移動滑鼠指針時，屏幕上的目標其某些特徵會使得點擊變得輕鬆或困難。目標離得越遠，到達就越費勁；目標越小，就越難點中。

小提示：推薦使用一點陰影來呈現深度，讓大家知道卡片是可點擊的。

3. 保證卡片的視覺享受感

要說什麼樣的卡片才是成功的，那必然是有良好設計和可用性的卡片了。對卡片稍加打磨，加入少許美學特徵，卡片會讓人感覺熟悉，同時創意十足。

當開始動手設計卡片時，你應當特別注意以下幾個方面：

圖片

基於卡片的設計通常主要依靠視覺設計，而使用大量圖片就是卡片設計的一大亮點。研究發現已證實，圖片可以提升網頁或 app 的整體設計。所以，加入圖片也使得基於卡片的設計更加引人入勝。

陰影和漸變

加入陰影和漸變這兩種元素，可以有效地讓用戶將你設計的卡片與現實生活中的對應實物聯繫在一起。

但在設計時，一定要仔細思考如何運用這兩種元素：如果卡片四周和角落都加上陰影，要再想讓用戶將它與現實生活中的對應實物聯繫在一起就有點難了。

排版

當然，要想吸引用戶注意力，還可以通過排版來實現。卡片所有內容都應該簡單易懂，不妨試試從最大可讀性角度來設計：

• 選擇簡單的字體和易於閱讀的配色方案（文本內容在純色背景下，且背景顏色和文字顏色有鮮明對比的，這樣的文本才是最清晰易讀的）。
• 盡量控制字體的種類數量。對於絕大多數情況而言，單一的字體足矣。

小提示：卡片主內容文本，選用 sans-serif 字體正常粗細的效果非常好。

4. 限制卡片內容篇幅

卡片通常不大，其作為用戶了解更多細節信息的「入口」，所以它本身不需要承載過多細節內容。當你試圖在卡片里添加大量內容，導致卡片變得過寬或過長，那它就會失去其原有的「擬物」效果。

下圖是一個採用基於卡片設計的用戶界面示例。注意中間的卡片，它的問題主要是因為大量內容過多，以至於難以閱讀。

5. 加入動畫和動效

動畫如果運用得好，可以大大提升用戶體驗。其可以幫助用戶在基於卡片的界面中更好地定位，並建立不同卡片狀態之間的視覺關聯。

視覺提示

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

視覺反饋

視覺反饋在界面設計中相當重要，因為它能直接和用戶的自然期望相關聯。

在現實生活中，各種物品通常都會對我們的行為作出反應，這也是大眾習以為常的反饋。比如電腦的開關按鈕，當你按下開關鍵時，你可以感受到按鈕被按下的力量反饋，同時還有聲音反饋。

在電腦端，你可以通過「懸停效果」來顯示相關元素的交互行為。懸停動畫可以增加功能的可發現性，同時，也使用戶體驗更加有趣。

使用懸停效果還可以激活更多選項。下圖中，游標懸停後，用戶可以進行顏色標記、回復、轉發或刪除當前信息。

放大

放大可以呈現從原圖到細節視圖的過渡：用戶選中卡片就可以直接看到相關詳細信息。不過要注意，要確認讓用戶感覺他們仍在相同背景框架下進行交互。

結束語

卡片是界面設計領域創新型新元素。它不僅僅是一張卡片，它還是創造優質內容和設計最佳用戶體驗最靈活的布局方式之一。

作者 | Nick Babich 軟體工程師，關注UI和UX。

譯者 | 俊鐵

題圖 | Pexels

原文鏈接 Best Practices for Cards，已獲原作者授權翻譯。

本文首發於愛范兒。商業轉載請聯繫獲得授權，非商業轉載請註明出處。