老生常談的卡片式設計

老生常談的卡片式設計

來自專欄交互設計師的自我成長27 人贊了文章

說明：喜歡翻譯國外交互設計體驗設計網站優秀文章案例，僅供互相學習探討，翻譯有版權，表述包含譯者個人理解，如有錯誤，請多指正~

原文作者：Nick Babich

原文地址鏈接：Designing Card-Based User Interfaces

前言

PC網頁和移動APP正在從頁面過渡到完全的個性化的體驗。這種新體驗建立在許多獨立內容的集合之上。而這些獨立內容的展現方式就是卡片式設計。

在這篇文章里，作者會闡述卡片式設計對於UI設計師來說意味著什麼，並且來審視一下三種流行的卡片式設計的項目案例。

本文分為四個部分：

?什麼是卡片設計

?卡片式設計的優點

?好的卡片式設計案例

?三個需要注意的設計細節

---

一.什麼是卡片設計

原文：「Cards are those little rectangles full of inclusive images and text that serve as

entry points to more detailed information. Before web and mobile apps, cards were

always all around us?—?business cards, baseball cards, and even sticky notes.Thus, it is more intuitive for us to know that these cards are representing piece of content just like in real life...」

這裡廢話不多說，簡單理解就是包含圖片以及文案並且有明顯邊界的信息區塊，它可以是一個完整的信息區塊，也可以作為更多具體內容的一個入口。

---

二.卡片式設計的優點

2-1.便於組織信息

2-2.易於閱讀

2-3.視覺美觀

2-4.適應不同尺寸的設備

2-5.適合手指操作

2-1.便於組織信息

卡片式設計將信息組織成區塊增加可讀性：它避免了閱讀起來費勁費時的文字牆式的布局，並且讓用戶更快的找到他們感興趣的內容並沉浸其中 — 有效組織信息成塊，增加瀏覽識別度

卡片式設計將內容劃分成有序的部分，就像段落將一篇文章中的句子劃分成不同的組塊一樣，它可以將許多不同的信息有效的組合成一個連貫的整體 — 將不同內容劃分成有序的部分

2-2.易於閱讀

卡片是用來給用戶傳遞故事內容的有效方式，把相關內容放進一張卡片上使用戶很容易理解，並且用戶能通過不同的卡片來快速找到他們感興趣的內容 — 這裡主要涉及到格式塔心理學的接近原則，即卡片具有明顯的邊界(現在一般用色塊+陰影來做區隔)，相關聯的信息都位於此邊界之內

2-3.視覺美觀

卡片式設計通常很依賴視覺元素，實際上很強的視覺元素恰恰是卡片式設計的一種優勢。有研究確認圖片能夠提升網站和app的設計質量，因為圖片可以快速有效的吸引用戶的注意力。卡片式設計依賴圖片的使用這一特性能更好的的吸引用戶。

2-4.適應不同尺寸的設備

卡片式最重要的特性就是它幾乎可以隨意編輯。自從卡片式作為內容承載起可以隨意放大或縮小它就是響應式設計中的常用設計方法。卡片式的這種特性使得我們可以只需要設計一種視覺樣式就可以放在不同的設備上並且保持體驗上的一致性 — 這裡主要指由於卡片可以自由編輯(橫排或豎排數量，單張卡片大小)因此非常適用於不同尺寸的屏幕

2-5.適合手指操作

卡片很適合手指操作，這樣看起來卡片式設計確實是為了app而量身定做。虛擬世界裡的卡片其實與實物卡片的操作原理是差不多的。用戶喜歡卡片簡單易用的特性並且很自然的就能理解把卡片反過來看更多信息和滑走來看下一張的信息 — 這裡主要指卡片的操作方式(卡片反過來查看更多信息、滑走查看下一張卡片)便於用戶的直觀理解，符合用戶的操作預期

---

三.好的卡片式設計案例

3-1.feed流(這裡作者使用「stream」這個詞，更傾向於表達為以時間為順序的事件流)

3-2.發現

3-3.計劃管理類應用

3-4.操作對話框(彈窗)

3-5.面版

3-6.微軟的設計語言

3-1.feed流

卡片可以排成列來構成事件的時間線，例如 Facebook就在新鮮事中用成列卡片來展示讓用戶總覽最近發生的一系列事件。Facebook的新鮮事是一個沒有盡頭的卡片序列並且每一張卡片(上的內容)都是獨立的，這裡卡片序列的關鍵就是非集合式，他們把無盡的信息從信息流中提煉出來然後打包，使得每一條獨立的信息都有很強的可讀性和分享性。這種行為同樣也刺激用戶在社交媒體去分享這些內容。

3-2.發現 — 同質信息的大批量展示

卡片可以使相關內容很自然的展示出來，讓用戶能深入他們所感興趣的內容。比如

Behance，一個線上的創意社區，卡片式設計恰恰是用來展示這類內容最合適的方法

Tinder是一個利用操作卡片來探索下一個內容的很好的案例以至於這種交互方式讓這個app變成最火的手機app之一。Tinder 有一個極其簡單的卡片滑動界面 — 向左滑代表不喜歡，向右滑代表喜歡。這種卡片滑動機制具有神奇的魔力，因為每一次的滑動它都能收集到信息 — 卡片可能呈現的內容基於用戶之前作出的選擇。

— 這裡的左右滑動邏輯是基於人類從左往右的一般閱讀習慣，即往左滑是為了看到右邊更多的美女，而為了看到更多美女的原因就是不喜歡當前的這位，因而往左滑是unlike，往右滑是like

3-3.計劃管理類應用

卡片可以有效的組織成一系列的任務，Trello這款任務管理軟體就是使用卡片式設計來建立單獨的任務面板進行管理的非常好的案例 — 作者在這裡並未做太多贅述，個人推斷是想表達卡片式設計是一個個獨立的信息區塊，便於管理

3-4.操作對話框(彈窗)

因為卡片是內容承載器因此尤其適合展示操作行為。想想蘋果產品在 airdrop上的服務，當你有一個文件傳輸的請求進來時，一張提示接受或者拒絕傳輸的卡片就出現了。如左圖顯示，蘋果設備截圖的重心在照片，但是開發者可以放各種東西到卡片上 — 優惠券，歌曲或者網站鏈接。

3-5.面版

卡片式設計在針對不同內容的布局時非常的精準，你可以通過使用卡片式設計來把一堆信息組織並整理成有邏輯結構的部分，並讓所有信息看起來像一個有機的整體。一個從不同渠道篩選過後的信息內容可以很容易被收集並重新布局成互相關聯的面板。

3-6.微軟的設計語言

2010年，微軟公布了其新的設計語言，它的一個核心設計原則就是最好關注app的內容本身 — 通過使用扁平化設計元素和卡片式設計以及排版本身來實現(其設計語義)。一個 Metro

design 卡片不僅僅是一個設計元素，它更是一種提供便捷交互方式的一個關鍵的功能部分。

---

四.三個需要注意的設計細節

4-1.信息要簡單

4-2.符合響應式設計

4-3.注意排版

4-1.信息要簡單

當你想到卡片式設計時，簡單一定是其精髓。Carrie Cousins 就說過：「每張卡片只承載一個信息」— 你可以把卡片設計成囊括各種元素，但每張卡片只能包含一個信息或者內容，這可以讓用戶選擇自己想要的內容去閱讀或者分享 。

— 作者在這裡應該是想表達卡片式設計要突出展示最關鍵的信息，並且不同質的信息不能放在同一張卡片裡面

4-2.符合響應式設計

我們都知道app或者網站在各端保持一致是有多重要，所以當我們在不同尺寸的屏幕進行設計時，我們應該因地制宜地利用卡片的特性調整卡片的內容(尺寸、布局)來快速適應不同尺寸的屏幕。卡片對於響應式的結構有著出色的兼容性 — 卡片布局可以重塑並適應各種屏幕尺寸。

4-3.注意排版

卡片式設計應該簡單易讀便於理解，設計時應該注意將可讀性最大化：

— 選擇最簡單的字體和容易識別的色彩方案(當文案被放置於純色背景時應該保證其對比度以使得文案能被閱讀)

— 盡量少用不同的字體，對於一個卡片式設計的應用來說一種字體就足夠了

---

結語

相信大部分人都對為何卡片式設計如此流行有了更深的理解了。這種流行趨勢在短時間內不會結束，並且卡片將繼續成為app設計時必不可少的部分。

卡片式設計之所以這麼流行是因為好的設計感和很強的易用性，卡片不僅僅只是好看，它是設計海量內容時最有效和靈活的布局形式。現如今，人們快速查找信息，卡片式設計能很好的滿足人們這種需求。

推薦閱讀：