網(wǎng)頁和手機(jī) app 逐漸擯棄了傳統(tǒng)單一的頁面設(shè)計(jì)，向完全個(gè)性化的用戶體驗(yàn)發(fā)展霍殴。這種發(fā)展也是基于大量獨(dú)立內(nèi)容模塊的流行。其中，卡片就是最新一種獨(dú)具創(chuàng)新的概念立膛。

圖片發(fā)自簡(jiǎn)書App

一同衣、什么是卡片

卡片是含有圖片和文字在內(nèi)的小矩形模塊糊饱，它是用戶了解更多細(xì)節(jié)信息的入口魔市。要平衡界面的美學(xué)和可用性，卡片基本是一個(gè)默認(rèn)選擇讲婚。因?yàn)榭ㄆ闷饋矸浅７奖隳蚩祝€可以展示包含不同元素的內(nèi)容。

圖片發(fā)自簡(jiǎn)書App

二筹麸、卡片式設(shè)計(jì)的特點(diǎn)

1. 完美的擬物

在用戶界面加入卡片設(shè)計(jì)可謂完美的擬物活合，因?yàn)樗鼈兛雌饋砭拖袢粘Ｉ钪姓鎸?shí)存在的卡片。其實(shí)早在手機(jī)設(shè)備出現(xiàn)之前物赶，卡片就已經(jīng)存在了白指，比如名片、健身卡酵紫、撲克卡等等告嘲。當(dāng)今错维，卡片可謂是目前使用較廣泛的一種交互模型。因此橄唬，對(duì)用戶而言赋焕，其更能憑直覺認(rèn)識(shí)到，這些卡片就代表真實(shí)生活中的某物仰楚。

圖片發(fā)自簡(jiǎn)書App

此外隆判，就小故事推廣而言，卡片也是非常棒的選擇缸血，桌游卡就是一個(gè)典例蜜氨。你所需要了解的某角色基本信息都顯示在小卡片的正反面。

圖片發(fā)自簡(jiǎn)書App

每張卡片都代表一個(gè)角色的職能捎泻。

2. 內(nèi)容架構(gòu)

卡片將內(nèi)容劃分成多個(gè)有意義的部分，這樣還節(jié)省了一定的屏幕空間埋哟。類似于「字詞句段篇」的組成形式笆豁，卡片也是由最小信息單元組成，并匯總形成連貫的整體內(nèi)容赤赊。

圖片發(fā)自簡(jiǎn)書App

3. 視覺享受

基于卡片的設(shè)計(jì)通常主要依靠視覺設(shè)計(jì)闯狱，而使用大量圖片就是卡片設(shè)計(jì)的一大亮點(diǎn)。研究發(fā)現(xiàn)已證實(shí)抛计，圖片可以提升網(wǎng)頁或 app 的整體設(shè)計(jì)哄孤，因?yàn)閳D片可以快速有效地吸引用戶的注意力。所以吹截，加入圖片也使得基于卡片的設(shè)計(jì)更加引人入勝瘦陈。

比如 Dribble，一個(gè)面向設(shè)計(jì)師等創(chuàng)意類作品的人群波俄，提供作品在線服務(wù)晨逝，供網(wǎng)友查看的交流類網(wǎng)站。要展示這類內(nèi)容懦铺，基于卡片的設(shè)計(jì)是再合適不過的選擇了捉貌。

圖片發(fā)自簡(jiǎn)書App

三、如何設(shè)計(jì)卡片

在同一頁面布局中冬念，卡片寬度應(yīng)保持不變趁窃，但高度可以相應(yīng)調(diào)整〖鼻埃卡片最大高度限于該平臺(tái)可用空間的高度醒陆，但也可以臨時(shí)延伸。例如叔汁，在顯示評(píng)論框的時(shí)候统求。

圖片發(fā)自簡(jiǎn)書App

卡片高度既可固定检碗，又可調(diào)整。

從設(shè)計(jì)角度來看码邻，卡片各角最好是圓角折剃，并且最好稍有一點(diǎn)陰影。圓角使卡片看起來更像一個(gè)內(nèi)容塊像屋，陰影則可以反映出深度怕犁。

圖片發(fā)自簡(jiǎn)書App

這些元素在沒有分散用戶注意力的前提下己莺，能給設(shè)計(jì)帶來一些視覺亮點(diǎn)奏甫。另外，還能給人一種卡片像是要從頁面中跳出來的感覺凌受。

四阵子、卡片的優(yōu)勢(shì)

設(shè)計(jì)恰當(dāng)?shù)脑挘ㄆ梢蕴嵘?app 的用戶體驗(yàn)感胜蛉。因?yàn)槠涔δ苄砸约巴庑蔚脑蚰咏鼈兂闪擞脩艚缑娴囊粋€(gè)增值元素，對(duì)用戶來說誊册，也更能憑直覺交互领突。

1. 易于理解的形式

卡片是一個(gè)可以裝入任何內(nèi)容的設(shè)計(jì)盒子。將不同內(nèi)容置于卡片之中案怯，可以方便用戶理解君旦。

這樣一來，用戶可以輕松了解其最關(guān)注的內(nèi)容嘲碱。這也使用戶可以通過各種方式來交互金砍。

圖片發(fā)自簡(jiǎn)書App

包含不同內(nèi)容形式的卡片集。

2. 響應(yīng)式設(shè)計(jì)以及移動(dòng)界面設(shè)計(jì)

關(guān)于卡片悍汛，最重要的是它們基本上極度容易被掌控捞魁。不管在臺(tái)式桌面還是手機(jī)客戶端，加入卡片設(shè)計(jì)的效果都非常好离咐，因?yàn)閮?nèi)容可以通過更易理解的卡片呈現(xiàn)給用戶谱俭。就響應(yīng)式設(shè)計(jì)而言，它是不錯(cuò)的選擇宵蛀，因?yàn)橐詢?nèi)容盒子呈現(xiàn)的卡片可以方便地?cái)U(kuò)展或收縮昆著。

最后，加入卡片术陶，在跨平臺(tái)設(shè)備上設(shè)計(jì)出統(tǒng)一的美感也就不會(huì)步步維艱了凑懂。這也是為什么通過卡片可以在不同設(shè)備上輕松設(shè)計(jì)出相同的用戶體驗(yàn)感。

圖片發(fā)自簡(jiǎn)書App

3. 設(shè)計(jì)時(shí)不要忘了「心中的拇指」

卡片是為拇指而設(shè)計(jì)梧宫。這句話聽起來好像卡片是專為 app 設(shè)計(jì)的一樣接谨。手機(jī) app 設(shè)計(jì)可作為卡片普及的一個(gè)核心部分摆碉。數(shù)字卡片其實(shí)和實(shí)體卡一樣，它還可以給用戶帶來舒適的體驗(yàn)脓豪。

用戶也不必太關(guān)注于這些到底是怎么做到的巷帝。他們就喜歡卡片的簡(jiǎn)單，并可憑直覺了解相關(guān)物理性扫夜，比如如何翻轉(zhuǎn)卡片以獲取更多信息楞泼，或者左右滑動(dòng)以獲取其他卡片信息。

設(shè)計(jì)的時(shí)候一定要思考用戶會(huì)如何使用他的拇指在界面上交互笤闯。所以堕阔，界面內(nèi)容的大小一定不要讓用戶在交互時(shí)感到不適。

卡片手勢(shì)也應(yīng)該一并考慮并置于卡片集內(nèi)颗味。在同一頁面盡量減少滑動(dòng)手勢(shì)的數(shù)量超陆，這樣就可以減少互相重疊的可能性。

比如浦马，可滑動(dòng)的卡片不應(yīng)該包含可滑動(dòng)的滾動(dòng)圖片侥猬，這樣就能保證在滑動(dòng)卡片時(shí)只出現(xiàn)一次交互。

圖片發(fā)自簡(jiǎn)書App

左右滑動(dòng)捐韩。

五、何時(shí)使用卡片

1. 信息流

卡片以信息流形式呈現(xiàn)鹃锈，制造了一條自然的事件時(shí)間軸荤胁。想想 Facebook 如何通過卡片防止用戶快速掃覽新聞動(dòng)態(tài)里最新事件，錯(cuò)失重點(diǎn)屎债。

Facebook 的信息動(dòng)態(tài)是一條無窮盡的信息流仅政，而卡片則是獨(dú)立的信息流集合∨杈裕卡片的作用就在于分散信息流圆丹，它們將事件從無窮盡信息流中分離出來，打包后再共享出去躯喇。

圖片發(fā)自簡(jiǎn)書App

2. 發(fā)現(xiàn)

卡片可以使相關(guān)內(nèi)容自然地呈現(xiàn)出來辫封，讓用戶發(fā)掘其自身興趣所在。下圖中探探的卡片廉丽，向左或向右滑動(dòng)倦微，系統(tǒng)就會(huì)自動(dòng)推薦可能入你眼的人。

圖片發(fā)自簡(jiǎn)書App

Pinterest 在內(nèi)容架構(gòu)方面通過圖釘將頁面設(shè)計(jì)成類似 masonry 的動(dòng)態(tài)布局正压，以吸引用戶進(jìn)一步瀏覽欣福。

圖片發(fā)自簡(jiǎn)書App

注：Masonry 是一個(gè)對(duì)系統(tǒng) NSLayoutConstraint 進(jìn)行封裝的第三方自動(dòng)布局框架，采用鏈?zhǔn)骄幊痰姆绞教峁┙o開發(fā)者 API焦履。

他們將信息從功能中分離出來拓劝，使其與當(dāng)下情景相關(guān)雏逾。

3. 對(duì)話

因?yàn)榭ㄆ莾?nèi)容盒子，所以把它們用作行為號(hào)召再適合不過了郑临∑懿卡片最主要的行為其實(shí)就是卡片本身。比如蘋果設(shè)備上的 AirDrop 功能牧抵，當(dāng)收到數(shù)據(jù)傳輸?shù)慕邮照?qǐng)求時(shí)笛匙，帶有通知的卡片會(huì)自動(dòng)跳出，讓用戶選擇接收或拒絕數(shù)據(jù)傳輸犀变。

圖片發(fā)自簡(jiǎn)書App

4. 工作流程

利用卡片妹孙，還可以簡(jiǎn)單地將一堆任務(wù)歸類。要說很好的案例不得不提 Teambition获枝。在 Teambition看板界面可以添加很多卡片蠢正，每個(gè)卡片都代表獨(dú)立的一項(xiàng)任務(wù)。

圖片發(fā)自簡(jiǎn)書App

六省店、不適用卡片的情景

1. 同類內(nèi)容

對(duì)于不需要太多用戶交互的同類內(nèi)容嚣崭，不推薦使用卡片∨嘲可快速掃覽的列表（或柵格）則是比較合適的選擇雹舀。

圖片發(fā)自簡(jiǎn)書App

左圖中，卡片會(huì)分散用戶注意力粗俱，阻礙用戶快速掃覽说榆。

在圖片集或相冊(cè)中，也不推薦使用卡片寸认。展示圖片集签财，柵格本身就是簡(jiǎn)潔輕便之選。下圖是一個(gè)示例偏塞。

圖片發(fā)自簡(jiǎn)書App

左圖：圖片中加入卡片唱蒸。右圖：直接使用柵格視圖。

2. 大屏幕

基于卡片的信息設(shè)計(jì)可能在小屏幕上非常適用灸叼，但若在大屏幕上神汹，就會(huì)感覺像一個(gè)無法辨識(shí)邊界的雜亂組合。從視覺角度來看怜姿，看起來還不錯(cuò)慎冤。但一些客觀指標(biāo)方面，比如閱讀速度或閱讀理解方面沧卢，就顯得十分差勁了蚁堤。下圖是大屏幕上的 Pinterest 頁面。

圖片發(fā)自簡(jiǎn)書App

卡片設(shè)計(jì)在短期內(nèi)還暫時(shí)不會(huì)被淘汰，畢竟卡片是設(shè)計(jì)持續(xù)用戶體驗(yàn)最靈活的布局之一披诗。

現(xiàn)如今撬即，用戶希望快速地發(fā)現(xiàn)有用信息，無論在什么設(shè)備上呈队，卡片的反饋總是很好剥槐。而且較好的用戶體驗(yàn)永遠(yuǎn)都是「以人為本」。