很多人對 APP 中的卡片設(shè)計習(xí)以為常，但對于卡片設(shè)計流行的原因、優(yōu)點，以及如何做好卡片設(shè)計卻可能不甚了解。
今天這篇文章，算是從為什么這樣做的角度來分析卡片設(shè)計，一起來學(xué)習(xí)吧。
從 Instagram 和 Facebook 這樣的社交媒體應(yīng)用到亞馬遜這樣的電商平臺，卡片設(shè)計似乎是無處不在的，這些大廠廣泛應(yīng)用使得卡片設(shè)計很快流行了起來。
作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有 UI 元素。基于這些內(nèi)容，卡片設(shè)計可以根據(jù)不同的設(shè)備和屏幕調(diào)整其大小，平衡界面視覺和用戶體驗。
卡片是一個 UI 組件，包含了某一個內(nèi)容的信息和操作？ㄆ梢园鞣N元素，但它們都應(yīng)該屬于同一個主題。
卡片樣式
這樣做的目的是為了避免冗長的文字，并呈現(xiàn)更多的內(nèi)容。即使從設(shè)計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學(xué)中隱喻的運用）
卡片之所以流行，是因為它們能更好的把控內(nèi)容？ㄆ悄K化的，所以不同的內(nèi)容可以堆疊在一起，而不需要注意它們的差異。
卡片通過強制內(nèi)容適應(yīng)卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設(shè)計師喜歡通過卡片混排大量內(nèi)容，而無需擔(dān)心設(shè)計會變得雜亂無章。
卡片可以將內(nèi)容分解成易于理解的小塊，以便用戶與之互動。通過給內(nèi)容一個容器，卡片向用戶表明內(nèi)容是真實和感性的。
卡片 UI 設(shè)計流行的原因還有很多：
- 直觀：卡片在界面中看起來與現(xiàn)實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網(wǎng)絡(luò)應(yīng)用中的流行元素之前，它們在現(xiàn)實生活中無處不在：名片、棒球卡、便簽？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來，就像在現(xiàn)實生活中一樣。
- 易于閱讀：卡片不占用太多空間，并敦促設(shè)計師優(yōu)先考慮其內(nèi)容。不同的是，每張卡片都變成了易于閱讀的內(nèi)容？ㄆ層脩舾菀渍业剿麄兏信d趣的內(nèi)容。
- 有吸引力且對用戶更友好：基于卡片的設(shè)計通常非常依賴視覺效果（尤其是圖片）；就信息架構(gòu)而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設(shè)計比不在卡片中排列的相同內(nèi)容對用戶更具吸引力。
- 有利于響應(yīng)式設(shè)計：卡片是矩形的，可以平滑地調(diào)整大小，以適應(yīng)不同屏幕的水平和垂直正面，這意味著用戶可以在所有設(shè)備上獲得統(tǒng)一的體驗。
- 便于分享：卡片可以鼓勵用戶在社交媒體上分享內(nèi)容，因為它允許用戶只分享特定的內(nèi)容，而不是整個頁面。
這通常是當(dāng)你有:
- 基于搜索的界面: 卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容，這使得用戶可以深入了解自己的興趣；诳ㄆ脑O(shè)計是一種非常適合呈現(xiàn)這類內(nèi)容的方式。
- 信息瀏覽：當(dāng)用戶瀏覽信息時，卡片的兼容性更好。
- 任務(wù)管理：當(dāng)可以將流程中的單個任務(wù)作為卡片進(jìn)行說明時， 可以輕松組織卡片以獲取任務(wù)列表。任務(wù)管理應(yīng)用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好，其中每張卡片代表一個單獨的任務(wù)。
- 類似項目：卡片最適合于異構(gòu)項目的集合（當(dāng)并非所有內(nèi)容都是相同的基本類型時）。
- 可視化分析: 儀表板通常在同一頁上同時顯示各種內(nèi)容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異，其中每張卡片可以適應(yīng)不同的角色。
卡片的布局可以不同，以支持它們包含的內(nèi)容類別。下面的組件通？梢栽诙喾N卡片樣式中找到。
- 富媒體：卡片可以包含縮略圖，以顯示圖片、插圖、頭像、Logo、圖標(biāo)或圖形。
- 標(biāo)題：標(biāo)題文本可以包含相冊或文章的名稱或標(biāo)題。
- 描述：支持文本，如文章摘要或簡短的描述。
- 行動按鈕: 卡片可以包含用于操作的按鈕。
- 副標(biāo)題：副標(biāo)題文本可以包含詳細(xì)介紹，如文章的署名或標(biāo)記的位置。
- 圖標(biāo)：卡片可以包含操作圖標(biāo)。
有一些小的技巧可以快速提高卡片設(shè)計細(xì)節(jié)。
1. 使用相關(guān)主題的圖片
圖片是卡片設(shè)計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標(biāo)或任何其他類型的富媒體，但需要與內(nèi)容主題相關(guān)。
2. 增加視覺層次
卡片內(nèi)的層次結(jié)構(gòu)有助于引導(dǎo)用戶對重要信息的閱讀。將主要內(nèi)容放在卡片的頂部，并使用排版來強化主要內(nèi)容。使用空白和對比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。（彩云注：視覺層級對于信息表達(dá)至關(guān)重要！）
3. 限制內(nèi)容長度
一張卡片應(yīng)該只包含重要的信息，并提出一個相關(guān)的觀點，以獲取額外的細(xì)節(jié)，而不是完整的細(xì)節(jié)本身。當(dāng)我們試圖在一張卡片中放入太多內(nèi)容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯(lián)系，因為它不再像一張卡片了。
4. 避免嵌入鏈接
不要包含內(nèi)聯(lián)鏈接，卡片應(yīng)該自己鏈接。嵌入文字鏈接會讓用戶誤操作。
5. 區(qū)分操作主次
包含不同操作的卡片應(yīng)該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調(diào)而不是主要的按鈕風(fēng)格來降低后續(xù)操作的視覺強度。
6. 去掉分割線
對于新手設(shè)計師來說，用分割線來區(qū)分內(nèi)容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內(nèi)容。
APP 中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下，你可以做幾件事:
1. 使用圓角
在形態(tài)上與真實世界的卡片進(jìn)行視覺對比。
圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。
2. 增加一個輕微的外邊框或者投影
增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個層次，這有助于我們區(qū)分 UI 元素。
然而，在設(shè)計中添加陰影并不像聽起來那么簡單。有時候設(shè)計師會過分強化投影效果，讓原本看起來不錯的設(shè)計看起來很廉價。避免使用純黑色的陰影。
3. 注意字體和留白
重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進(jìn)行視覺重置，有精力看完一張卡再到下一張。
選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。
讓我們看看一些真實項目中的卡片設(shè)計案例
1. 信息流中的卡片設(shè)計
保持信息流卡片簡單是很重要的。它們應(yīng)該有一個一致的、重復(fù)的結(jié)構(gòu)，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。
由 Diseno Constructivo 和 Webpixels 設(shè)計
他們突出特色圖片和標(biāo)題作為最突出的元素，這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。
2. 電商卡片設(shè)計
產(chǎn)品卡片是一個很重要的東西，它可以幫助你將訪問者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠吸引人們的注意，激發(fā)人們獲得產(chǎn)品的欲望，激勵人們購買，并在搜索結(jié)果中得到高效推廣。
由 Webpixels 設(shè)計
產(chǎn)品的名稱應(yīng)該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質(zhì)量的產(chǎn)品配圖來設(shè)計完美的產(chǎn)品卡片。
如果產(chǎn)品有特價，不僅要在價格欄中注明促銷價格，還要注明常規(guī)價格，以及客戶可以節(jié)省多少錢。
3. 個人中心卡片設(shè)計
簡介卡已經(jīng)成為一個應(yīng)用或網(wǎng)站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設(shè)計在這里也能發(fā)揮重要作用。
由 Neelesh Chaudhary 設(shè)計
就像每一張卡片一樣，配置文件卡片也是一個 UI 組件，它包含了對它所代表的內(nèi)容至關(guān)重要的信息。為了達(dá)到你的目標(biāo)，你要向其他人推銷你自己。
確保只包括必要的信息(例如，照片，名字，職業(yè))，讓你的“關(guān)于”頁面有剩余的細(xì)節(jié)來完善你的個人資料。
4. 儀表盤卡片設(shè)計
儀表板的設(shè)計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或?qū)Ш皆O(shè)計元素、關(guān)鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個元素使用了正確類型的卡片。
由 Simmmple 設(shè)計
儀表盤卡設(shè)計允許用戶決定他們想要關(guān)注哪些數(shù)據(jù)。易于理解的 UI，允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。
只包括最相關(guān)的信息，為用戶使用方便。當(dāng)你的數(shù)據(jù)集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。
5. 日常計劃卡片設(shè)計
看板任務(wù)卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數(shù)量。它們還可能包含各種各樣的其他信息，清楚地傳達(dá)了必須做什么。
由 Neelesh Chaudhary 設(shè)計
卡片上包含的信息包括任務(wù)的名稱和重要的細(xì)節(jié)，如任務(wù)的類型和誰擁有它？窗蹇ǚ旁跔顟B(tài)類別下。最基本的狀態(tài)類別是“計劃要做”、“正在進(jìn)行中”和“完成”，但是狀態(tài)可能因項目而異。
卡片結(jié)構(gòu)最適用于添加或刪除任務(wù)這樣的小改變，而不是像你改變總體目標(biāo)這樣的大想法。
有幾種方法可以使卡片設(shè)計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業(yè)的這種設(shè)計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動？ㄆ谔峁┰S多不同種類內(nèi)容摘要的環(huán)境中尤其有效，而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。