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

2017/1/3 10:19:09來源：站酷網(wǎng)

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

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

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

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

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

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

2.使整個卡片可被點擊

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

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

給卡片加上輕微的投影以提示整個卡片是可以點擊的。引用：nngroup的研究

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

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

引用：Piper Lawson

在實際設(shè)計卡片時，請注意以下內(nèi)容：

圖片

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

引用：Dave Gamache

陰影與漸變

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

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

文字

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

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

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

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

引用：maconprinting

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

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

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

引用：Piotr Adam Kwiatkowski

5.運用動畫及動效的優(yōu)勢

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

視覺提示

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

導航功能的提示展示。引用：Barthelemy Chalvet

視覺反饋

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