五大優(yōu)勢(shì)！卡片設(shè)計(jì)的最佳實(shí)踐

卡片是信息的小容器，在平衡美學(xué)與簡(jiǎn)單易用的設(shè)計(jì)中，它幾乎成了默認(rèn)的選項(xiàng)。它是由Pinterest 和Facebook最先引入的，如今眾多的行業(yè)都有它的足跡。

由Pinterest 引入這樣的概念，即與同一個(gè)主題相關(guān)的內(nèi)容都可以用一個(gè)容器被組織在一起

恰當(dāng)使用的卡片可以提高應(yīng)用的用戶體驗(yàn)。本文將融入實(shí)例詳細(xì)介紹5種有用的卡片使用方法。

1.遵循一個(gè)原則“一張卡片，一個(gè)主題”

一張卡片的所有內(nèi)容都應(yīng)與該卡片的主題相關(guān)。設(shè)計(jì)一張卡片時(shí)可以包含多個(gè)元素，但是每一張卡片應(yīng)集中表現(xiàn)一個(gè)信息或者內(nèi)容，這樣用戶在使用時(shí)就有機(jī)會(huì)選擇你所表達(dá)內(nèi)容的某些部分進(jìn)行使用或者分享。

一個(gè)格子（卡片）即為一個(gè)交互區(qū)域

2.使整個(gè)卡片可被點(diǎn)擊

遵循費(fèi)茨定律并允許用戶點(diǎn)擊/輕擊卡片的任何位置，而不是其上面的文本鏈接或者圖片。更大的點(diǎn)擊區(qū)域可以顯著的提升觸摸屏及使用鼠標(biāo)設(shè)備的可用性。

小技巧：使卡片在視覺(jué)上看起來(lái)可點(diǎn)擊很重要，給它加上輕微的投影來(lái)表現(xiàn)它的深度是個(gè)不錯(cuò)的方法。

給卡片加上輕微的投影以提示整個(gè)卡片是可以點(diǎn)擊的 。引用：nngroup的研究

3.使卡片視覺(jué)上看起來(lái)賞心悅目

能使卡片成為好的設(shè)計(jì)并具有良好的可用性，需運(yùn)用一點(diǎn)美學(xué)知識(shí)來(lái)優(yōu)化卡片，使卡片看起來(lái)似曾相識(shí)但卻不乏創(chuàng)意。

引用：Piper Lawson

在實(shí)際設(shè)計(jì)卡片時(shí)，請(qǐng)注意以下內(nèi)容：

圖片

強(qiáng)調(diào)圖片是卡片設(shè)計(jì)的重點(diǎn)，研究表明，圖片可以提升設(shè)計(jì)。因此，使用圖片可以使卡片的設(shè)計(jì)更加吸引用戶。

引用：Dave Gamache

陰影與漸變

投影與漸變的使用能夠大大幫助用戶將卡片與實(shí)際物理認(rèn)知的卡片產(chǎn)生聯(lián)系， 但要謹(jǐn)慎使用：如果將投影與漸變運(yùn)用到卡片的各個(gè)角落，那卡片的物理實(shí)體感覺(jué)便被毀了。

與撲克牌相似的圓角卡片設(shè)計(jì)。引用：Material Design

文字

也可以通過(guò)運(yùn)用文字來(lái)吸引用戶?？ㄆ系乃袃?nèi)容都應(yīng)易讀且容易理解，保證設(shè)計(jì)最大程度的可讀性，可通過(guò)：

·選用簡(jiǎn)單的字體以及容易閱讀的配色方案（文字在純色背景上以足夠的對(duì)比度顯示時(shí)最易讀）。

·字體也應(yīng)有所限制，對(duì)于大多數(shù)卡片設(shè)計(jì)來(lái)說(shuō)，一種字體就足夠了。

小技巧：無(wú)襯線字體與正常字體一起可以很好的展示卡片內(nèi)容。

引用：maconprinting

4.限制卡片上的內(nèi)容

一張卡片通常擁有簡(jiǎn)短內(nèi)容并作為提供更多信息的入口，而不是將所有細(xì)節(jié)都暴露于卡片之上。若將大量?jī)?nèi)容嘗試放置在一張卡片上時(shí)，卡片則要么變得更寬，要么變得更長(zhǎng)，如此卡片便看起來(lái)不再像卡片了，它也失去了作為卡片的喻意。

下圖是基于卡片的界面設(shè)計(jì)舉例。界面中央的那張卡片的問(wèn)題便是內(nèi)容過(guò)多，導(dǎo)致很難對(duì)卡片內(nèi)容進(jìn)行快速掃描。

引用：Piotr Adam Kwiatkowski

5.運(yùn)用動(dòng)畫(huà)及動(dòng)效的優(yōu)勢(shì)

正確合理的使用動(dòng)畫(huà)可以很大程度的提高用戶體驗(yàn)。它能夠幫助用戶適應(yīng)卡片類的界面并對(duì)不同狀態(tài)的卡片從視覺(jué)上建立關(guān)聯(lián)。

視覺(jué)提示

視覺(jué)上的提示能夠幫助用戶更好的理解如何與他們的界面進(jìn)行交互。這類型的動(dòng)畫(huà)可以被運(yùn)用來(lái)展示設(shè)計(jì)的某些特定功能的操作方法。

導(dǎo)航功能的提示展示。引用：Barthelemy Chalvet

視覺(jué)反饋

視覺(jué)反饋在界面設(shè)計(jì)中極其重要，因?yàn)樗c用戶潛在的預(yù)期相符。在實(shí)際生活中，當(dāng)我們與實(shí)際物體交互，我們會(huì)收到來(lái)自他們的反饋，這與人們的期望是一致的。對(duì)于桌面類應(yīng)用或者網(wǎng)站，可通過(guò)提供鼠標(biāo)懸停時(shí)的視覺(jué)反饋來(lái)表示當(dāng)前這個(gè)元素是被激活的，而動(dòng)畫(huà)則增加了元素的可發(fā)現(xiàn)性，同時(shí)也使體驗(yàn)變得更有趣。

給卡片運(yùn)用鼠標(biāo)懸停的動(dòng)畫(huà)。 引用：uxpin

鼠標(biāo)懸停也可以提供一些功能選項(xiàng)。如下圖，鼠標(biāo)懸停時(shí)添加了彩色邊框，進(jìn)行回復(fù)、轉(zhuǎn)發(fā)或者刪除該信息的功能。 

引用：Roman Shkolny

放大

放大的動(dòng)效提供了在詳情視圖與縮略圖直接的切換：用戶選擇一張卡片，可以馬上看到與其相關(guān)的具體信息。該動(dòng)效的難點(diǎn)是讓用戶感知到他們當(dāng)前停留的頁(yè)面。

動(dòng)效可以幫助你將詳情頁(yè)面與縮略圖關(guān)聯(lián)起來(lái)。引用:Charies Patterson

結(jié)語(yǔ)

卡片是新的具有創(chuàng)造性的畫(huà)布，它不僅僅是看起來(lái)的樣子，它是一種能夠創(chuàng)造豐富內(nèi)容的非常靈活布局模式。