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

 

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

 

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

 

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

 

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

 

一個格子（卡片）即為一個交互區域

 

2.使整個卡片可被點擊

 

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

 

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

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

 

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

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

 

引用：Piper Lawson

 

在實際設計卡片時，請注意以下內容：

 

圖片

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

 

引用：Dave Gamache

 

陰影與漸變

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

 

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

 

 

文字

也可以通過運用文字來吸引用戶。卡片上的所有內容都應易讀且容易理解，保證設計最大程度的可讀性，可通過：

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

·字體也應有所限制，對于大多數卡片設計來說，一種字體就足夠了。

 

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

引用：maconprinting

 

 

4.限制卡片上的內容

 

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

 

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

 

引用：Piotr Adam Kwiatkowski

 

5. 運用動畫及動效的優勢

 

正確合理的使用動畫可以很大程度的提高用戶體驗。它能夠幫助用戶適應卡片類的界面并對不同狀態的卡片從視覺上建立關聯。

 

視覺提示

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

 

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

 

視覺反饋

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

 

給卡片運用鼠標懸停的動畫。 引用：uxpin

 

鼠標懸停也可以提供一些功能選項。如下圖，鼠標懸停時添加了彩色邊框，進行回復、轉發或者刪除該信息的功能。 

引用：Roman Shkolny

 

放大

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

 

動效可以幫助你將詳情頁面與縮略圖關聯起來。引用:Charies Patterson

 

結語

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

 

-完-