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