很多人對 APP 中的卡片設計習以為常，但對于卡片設計流行的原因、優點，以及如何做好卡片設計卻可能不甚了解。關于這些問題，彩云之前也寫過一篇非常受歡迎的卡片設計經驗原創文章《想做好卡片設計，原來要注意這么多細節》，文章中講了非常多的卡片設計實用技巧。今天這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設計，一起來學習吧。

從 Instagram 和 Facebook 這樣的社交媒體應用到亞馬遜這樣的電商平臺，卡片設計似乎是無處不在的，這些大廠廣泛應用使得卡片設計很快流行了起來。

作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有 UI 元素。基于這些內容，卡片設計可以根據不同的設備和屏幕調整其大小，平衡界面視覺和用戶體驗。

什么是卡片設計？

卡片是一個 UI 組件，包含了某一個內容的信息和操作。卡片可以包含各種元素，但它們都應該屬于同一個主題。

卡片樣式

這樣做的目的是為了避免冗長的文字，并呈現更多的內容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）

為什么它會如此流行？

卡片之所以流行，是因為它們能更好的把控內容。卡片是模塊化的，所以不同的內容可以堆疊在一起，而不需要注意它們的差異。

卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容，而無需擔心設計會變得雜亂無章。

卡片可以將內容分解成易于理解的小塊，以便用戶與之互動。通過給內容一個容器，卡片向用戶表明內容是真實和感性的。

卡片 UI 設計流行的原因還有很多：

• 直觀：卡片在界面中看起來與現實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網絡應用中的流行元素之前，它們在現實生活中無處不在：名片、棒球卡、便簽。卡片代表了一種有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內容聯系起來，就像在現實生活中一樣。
• 易于閱讀：卡片不占用太多空間，并敦促設計師優先考慮其內容。不同的是，每張卡片都變成了易于閱讀的內容。卡片讓用戶更容易找到他們感興趣的內容。
• 有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內容對用戶更具吸引力。
• 有利于響應式設計：卡片是矩形的，可以平滑地調整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統一的體驗。
• 便于分享：卡片可以鼓勵用戶在社交媒體上分享內容，因為它允許用戶只分享特定的內容，而不是整個頁面。

什么時候應用卡片設計？

這通常是當你有:

• 基于搜索的界面: 卡片能通過模塊的內容快速顯示合適的內容，這使得用戶可以深入了解自己的興趣。基于卡片的設計是一種非常適合呈現這類內容的方式。
• 信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。
• 任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。
• 類似項目：卡片最適合于異構項目的集合（當并非所有內容都是相同的基本類型時）。
• 可視化分析: 儀表板通常在同一頁上同時顯示各種內容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創造出更明顯的差異，其中每張卡片可以適應不同的角色。

卡片解構

卡片的布局可以不同，以支持它們包含的內容類別。下面的組件通常可以在多種卡片樣式中找到。

1. 富媒體：卡片可以包含縮略圖，以顯示圖片、插圖、頭像、Logo、圖標或圖形。
2. 標題：標題文本可以包含相冊或文章的名稱或標題。
3. 描述：支持文本，如文章摘要或簡短的描述。
4. 行動按鈕: 卡片可以包含用于操作的按鈕。
5. 副標題：副標題文本可以包含詳細介紹，如文章的署名或標記的位置。
6. 圖標：卡片可以包含操作圖標。

設計技巧

有一些小的技巧可以快速提高卡片設計細節。

1. 使用相關主題的圖片

圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內容主題相關。

2. 增加視覺層次

卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部，并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。（彩云注：視覺層級對于信息表達至關重要！）

3. 限制內容長度

一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節，而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯系，因為它不再像一張卡片了。

4. 避免嵌入鏈接

不要包含內聯鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。

5. 區分操作主次

包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。

6. 去掉分割線

對于新手設計師來說，用分割線來區分內容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內容。

如何做到視覺上更美觀？

APP 中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內容中的視覺層次。在卡片的情況下，你可以做幾件事:

1. 使用圓角

在形態上與真實世界的卡片進行視覺對比。

圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。

2. 增加一個輕微的外邊框或者投影

增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創造了一個層次，這有助于我們區分 UI 元素。

然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。

3. 注意字體和留白

重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。

選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。

一些優秀卡片設計的例子

讓我們看看一些真實項目中的卡片設計案例

1. 信息流中的卡片設計

保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。

由 Diseno Constructivo 和 Webpixels 設計

他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發布的內容是否適合他們。

2. 電商卡片設計

產品卡片是一個很重要的東西，它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意，激發人們獲得產品的欲望，激勵人們購買，并在搜索結果中得到高效推廣。

由 Webpixels 設計

產品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質量的產品配圖來設計完美的產品卡片。

如果產品有特價，不僅要在價格欄中注明促銷價格，還要注明常規價格，以及客戶可以節省多少錢。

3. 個人中心卡片設計

簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發揮重要作用。

由 Neelesh Chaudhary 設計

就像每一張卡片一樣，配置文件卡片也是一個 UI 組件，它包含了對它所代表的內容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。

確保只包括必要的信息(例如，照片，名字，職業)，讓你的“關于”頁面有剩余的細節來完善你的個人資料。

4. 儀表盤卡片設計

儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。

由 Simmmple 設計

儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的 UI，允許用戶精確地控制哪些數據需要在儀表板的前端做好。

只包括最相關的信息，為用戶使用方便。當你的數據集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。

5. 日常計劃卡片設計

看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。

由 Neelesh Chaudhary 設計

卡片上包含的信息包括任務的名稱和重要的細節，如任務的類型和誰擁有它。看板卡放在狀態類別下。最基本的狀態類別是“計劃要做”、“正在進行中”和“完成”，但是狀態可能因項目而異。

卡片結構最適用于添加或刪除任務這樣的小改變，而不是像你改變總體目標這樣的大想法。

總結

有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動。卡片在提供許多不同種類內容摘要的環境中尤其有效，而不是簡單地作為內容列表的現代替代品。

歡迎關注作者的微信公眾號：「彩云譯設計」