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