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

卡片是信息的小容器，在平衡美學(xué)與簡單易用的設(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è)備的可用性。

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

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

3.使卡片視覺上看起來賞心悅目

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

引用：Piper Lawson

在實(shí)際設(shè)計(jì)卡片時(shí)，請注意以下內(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í)體感覺便被毀了。

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

文字

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

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

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

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

引用：maconprinting

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

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

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

引用：Piotr Adam Kwiatkowski

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

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

視覺提示

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

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

視覺反饋

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

給卡片運(yùn)用鼠標(biāo)懸停的動(dòng)畫。 引用：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)前停留的頁面。

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

結(jié)語

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