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