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

時間：2023-09-06 11:48:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-06 11:48:02 來源：網(wǎng)站運(yùn)營

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

俊鐵導(dǎo)讀：

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

卡片是簡潔小巧的信息盒子。在界面設(shè)計中，要平衡界面的審美和可用性，卡片基本是一個通用選擇?？ㄆ@一設(shè)計概念最先被 Pinterest 和 Facebook 使用，而如今卡片的使用已經(jīng)滲入了各行各業(yè)。

如果運(yùn)用恰當(dāng)?shù)脑?，卡片可以提?app 的用戶體驗。這篇文章介紹了 5 種卡片運(yùn)用的最佳實踐，并提供相關(guān)的實用案例。

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

卡片的所有內(nèi)容只能和一個主題相關(guān)。一個卡片可以包含多種元素，但應(yīng)該主要體現(xiàn)同類信息或內(nèi)容。這樣用戶才能更輕松地選擇他們所喜愛或愿意分享的內(nèi)容。

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

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

俊鐵注：菲茲定律是人機(jī)交互領(lǐng)域一個非常重要的法則。其基本觀點是，當(dāng)一個人用鼠標(biāo)來移動鼠標(biāo)指針時，屏幕上的目標(biāo)其某些特征會使得點擊變得輕松或困難。目標(biāo)離得越遠(yuǎn)，到達(dá)就越費(fèi)勁；目標(biāo)越小，就越難點中。

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

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

要說什么樣的卡片才是成功的，那必然是有良好設(shè)計和可用性的卡片了。對卡片稍加打磨，加入少許美學(xué)特征，卡片會讓人感覺熟悉，同時創(chuàng)意十足。

當(dāng)開始動手設(shè)計卡片時，你應(yīng)當(dāng)特別注意以下幾個方面：

圖片

基于卡片的設(shè)計通常主要依靠視覺設(shè)計，而使用大量圖片就是卡片設(shè)計的一大亮點。研究發(fā)現(xiàn)已證實，圖片可以提升網(wǎng)頁或 app 的整體設(shè)計。所以，加入圖片也使得基于卡片的設(shè)計更加引人入勝。

陰影和漸變

加入陰影和漸變這兩種元素，可以有效地讓用戶將你設(shè)計的卡片與現(xiàn)實生活中的對應(yīng)實物聯(lián)系在一起。

但在設(shè)計時，一定要仔細(xì)思考如何運(yùn)用這兩種元素：如果卡片四周和角落都加上陰影，要再想讓用戶將它與現(xiàn)實生活中的對應(yīng)實物聯(lián)系在一起就有點難了。

排版

當(dāng)然，要想吸引用戶注意力，還可以通過排版來實現(xiàn)。卡片所有內(nèi)容都應(yīng)該簡單易懂，不妨試試從最大可讀性角度來設(shè)計：

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

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

4. 限制卡片內(nèi)容篇幅

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

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

5. 加入動畫和動效

動畫如果運(yùn)用得好，可以大大提升用戶體驗。其可以幫助用戶在基于卡片的界面中更好地定位，并建立不同卡片狀態(tài)之間的視覺關(guān)聯(lián)。

視覺提示

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



視覺反饋

視覺反饋在界面設(shè)計中相當(dāng)重要，因為它能直接和用戶的自然期望相關(guān)聯(lián)。

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

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



使用懸停效果還可以激活更多選項。下圖中，光標(biāo)懸停后，用戶可以進(jìn)行顏色標(biāo)記、回復(fù)、轉(zhuǎn)發(fā)或刪除當(dāng)前信息。

放大

放大可以呈現(xiàn)從原圖到細(xì)節(jié)視圖的過渡：用戶選中卡片就可以直接看到相關(guān)詳細(xì)信息。不過要注意，要確認(rèn)讓用戶感覺他們?nèi)栽谙嗤尘翱蚣芟逻M(jìn)行交互。

結(jié)束語

卡片是界面設(shè)計領(lǐng)域創(chuàng)新型新元素。它不僅僅是一張卡片，它還是創(chuàng)造優(yōu)質(zhì)內(nèi)容和設(shè)計最佳用戶體驗最靈活的布局方式之一。




作者 | Nick Babich 軟件工程師，關(guān)注UI和UX。

譯者 | 俊鐵

題圖 | Pexels

原文鏈接 Best Practices for Cards，已獲原作者授權(quán)翻譯。

本文首發(fā)于愛范兒。商業(yè)轉(zhuǎn)載請聯(lián)系獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。