|
當開始動手設計卡片時，你應當特別注意以下幾個方面： 圖片基于卡片的設計通常主要依靠視覺設計，而使用大量圖片就是卡片設計的一大亮點。研究發現已證實，圖片可以提升網頁或 app 的整體設計。所以，加入圖片也使得基于卡片的設計更加引人入勝。
圖片來源：Dave Gamache 陰影和漸變加入陰影和漸變這兩種元素，可以有效地讓用戶將你設計的卡片與現實生活中的對應實物聯系在一起。 但在設計時，一定要仔細思考如何運用這兩種元素：如果卡片四周和角落都加上陰影，要再想讓用戶將它與現實生活中的對應實物聯系在一起就有點難了。
帶有圓角的卡片從視覺上看來就像是一張撲克牌。圖片來源：Material Design 排版當然，要想吸引用戶注意力，還可以通過排版來實現。卡片所有內容都應該簡單易懂，不妨試試從最大可讀性角度來設計：
小提示：卡片主內容文本，選用 sans-serif 字體正常粗細的效果非常好。
圖片來源：maconprinting 4. 限制卡片內容篇幅卡片通常不大，其作為用戶了解更多細節信息的「入口」，所以它本身不需要承載過多細節內容。當你試圖在卡片里添加大量內容，導致卡片變得過寬或過長，那它就會失去其原有的「擬物」效果。 下圖是一個采用基于卡片設計的用戶界面示例。注意中間的卡片，它的問題主要是因為大量內容過多，以至于難以閱讀。
圖片來源：Piotr Adam Kwiatkowski 5. 加入動畫和動效動畫如果運用得好，可以大大提升用戶體驗。其可以幫助用戶在基于卡片的界面中更好地定位，并建立不同卡片狀態之間的視覺關聯。 視覺提示視覺提示幫助用戶更好地了解如何與界面進行交互。當需要向用戶展示某些具體功能如何操作時，它就顯得頗為有用了。
展示導航功能的提示。圖片來源：Barthelemy Chalvet 視覺反饋視覺反饋在界面設計中相當重要，因為它能直接和用戶的自然期望相關聯。 在現實生活中，各種物品通常都會對我們的行為作出反應，這也是大眾習以為常的反饋。比如電腦的開關按鈕，當你按下開關鍵時，你可以感受到按鈕被按下的力量反饋，同時還有聲音反饋。 在電腦端，你可以通過「懸停效果」來顯示相關元素的交互行為。懸停動畫可以增加功能的可發現性，同時，也使用戶體驗更加有趣。
在卡片中加入懸停動畫。圖片來源：uxpin 使用懸停效果還可以激活更多選項。下圖中，光標懸停后，用戶可以進行顏色標記、回復、轉發或刪除當前信息。
圖片來源：Roman Shkolny 放大放大可以呈現從原圖到細節視圖的過渡：用戶選中卡片就可以直接看到相關詳細信息。不過要注意，要確認讓用戶感覺他們仍在相同背景框架下進行交互。
動畫可以將縮略圖和細節視圖相關聯。圖片來源：Charles Patterson 結束語卡片是界面設計領域創新型新元素。它不僅僅是一張卡片，它還是創造優質內容和設計最佳用戶體驗最靈活的布局方式之一。 謝謝! 作者 | Nick Babich 軟件工程師，關注UI和UX。 翻譯 | Jorri 題圖來自 Pexels 原文鏈接 Best Practices for Cards，已獲原作者授權翻譯。 |
|
|
