網(wǎng)站建設巧用色彩為卡片式設計加分發(fā)布者：本站     時(shí)間：2022-05-10 10:05:54

得益于Material Design日益增長(cháng)的人氣，卡片式界面已經(jīng)隨處可見(jiàn)了。這種時(shí)尚且注重功能的美學(xué)，運用塊狀的設計元素承載多種多樣的信息。如果想要利用這種多才多藝的手法，你的卡片設計必須別具一格。

色彩就是方法之一。優(yōu)美的色彩選用、令人振奮的色彩搭配、和有趣的結合，能創(chuàng )造重點(diǎn)、提升易用性，并且吸引用戶(hù)深入你的設計項目。

卡片式設計基礎
要運用卡片來(lái)設計，有許多要注意，這些卡片會(huì )突出不同類(lèi)型的數據（例如圖片、文字、按鈕、鏈接、評論、或視頻），這些數據都關(guān)聯(lián)到同一則信息。

這些可點(diǎn)擊的區塊，被設計成復古校園游戲卡牌的樣式，其中一塊區域包含了某種視覺(jué)信息，還有一小塊文字或按鈕?？ㄆL(fēng)格界面的優(yōu)點(diǎn)是，用戶(hù)能很輕易領(lǐng)悟它們的用法，使得它成為大量?jì)热莼螂娚痰睦硐敕桨?。而且，它們易于瀏覽、適于分享、用途廣泛。

巧用色彩為卡片式設計加分

圖片來(lái)源：Urban Ministries of Durham

巧用色彩為卡片式設計加分

圖片來(lái)源：The Clymb

要開(kāi)始運用卡片設計，可以從學(xué)習卡片設計的基礎開(kāi)始，請看UX Pin的《2015-2016的網(wǎng)頁(yè)設計趨勢手冊》。

你還得遵循《有效的卡片式設計完全指南》中的這7條最佳用法：

留白。運用足夠的邊界和邊距來(lái)避免雜亂。
一張卡片一件事?？ㄆ芎?jiǎn)化你的網(wǎng)站結構。不要讓每張卡片過(guò)于復雜，破壞了這層基礎。
合適的圖片?？ㄆ械膱D總是比較小，要確保圖片清晰、裁剪得當，適合相應的場(chǎng)景。
簡(jiǎn)潔的字體。由于文字也很小，簡(jiǎn)潔的字體最易辨識。選用簡(jiǎn)潔優(yōu)美的字體，避免使用裝飾性字體。
發(fā)揮創(chuàng )意。付出額外的努力讓它別具一格，使用諸如動(dòng)畫(huà)效果、視頻、圓角、或新穎的配色。
使用開(kāi)放的柵格。標準的柵格有助于保持間距一致，同時(shí)包容各種尺寸和斷點(diǎn)。
貫徹菲茲定律。正如我們在《交互設計最佳實(shí)踐》中所描述的，菲茲定律（同樣適用于卡片）建議整個(gè)卡片都可以點(diǎn)擊——而不僅僅是上面的文字或圖片。這使得用戶(hù)操作更輕松。
淺色與深色卡片
首先要面臨的抉擇，是使用淺色還是深色的配色。兩種各有利弊；白色或淺色的配色最普遍，但深色在移動(dòng)應用上正在變得流行。

巧用色彩為卡片式設計加分

圖片來(lái)源：Dribbble

Dribbble的卡片很容易分辨、排列、和點(diǎn)擊，讓人了解某個(gè)項目的詳細信息。它的設計在淺色背景上使用了白色的卡片，每張圖片下方有個(gè)內容區域顯示作品。淺色在桌面端表現尤其優(yōu)秀，對于眼睛很友好。

巧用色彩為卡片式設計加分

圖片來(lái)源：SB Joinery

SB Joinery則選用了深色的配色——在深色背景上使用反白文字——并在圖片上疊加了顏色，讓視覺(jué)重心停留在文字和幽靈按鈕上。彈出菜單同樣使用了深色主題。得益于粗字體和高對比度的色彩，深色風(fēng)格的卡片易讀性強，極其實(shí)用。

鮮艷的配色
卡片式設計的運用主要受Material Design的影響——好的影響。設計風(fēng)格強調移動(dòng)端的可用性，借扁平化設計和極簡(jiǎn)風(fēng)格之所長(cháng)，遵循一套用戶(hù)日益習慣的美學(xué)風(fēng)格和技巧。

這種風(fēng)格吸收了鮮艷、高飽和的配色，從藍色到綠色、紅色。雖然不是一定要遵循這些色彩建議，但這是個(gè)好主意。加入大膽、明亮的配色，能夠創(chuàng )造重點(diǎn)和順暢的體驗。

巧用色彩為卡片式設計加分

圖片來(lái)源：Helbak

如何充分利用飽和色？

用在頁(yè)頭、按鈕和行動(dòng)指令元素上。
作為一種有含義的背景元素使用——例如不同類(lèi)型的卡片使用不同顏色。（就像Helbak.的案例）請注意，即使是柔和色和淺色也能美妙地套用這種方式。
將色彩用于主要的文字元素，提升可讀性。
用鮮艷的色彩疊加在圖片上，或使用雙色漸變的技巧來(lái)引導用戶(hù)瀏覽卡片。
用于強調的顏色
最后，大膽的顏色選擇，是一種強調特定元素的手段。例如，彩色元素能打破視覺(jué)單一，促進(jìn)交互行為。

巧用色彩為卡片式設計加分

圖片來(lái)源：Mayors Challenge 2016

The Mayors Challenge的設計充分運用了material design的概念，卻沒(méi)有做出Google產(chǎn)品的感覺(jué)。顏色鮮艷而明亮，同時(shí)卡片在某種程度上卻非常簡(jiǎn)單和“不明確”。圖標、文字和鏈接中都有鮮艷色彩，所有這些暗示，都在引導用戶(hù)在網(wǎng)站上進(jìn)行操作。

關(guān)于卡片式界面設計有一種批判的聲音，它使各種元素看起來(lái)過(guò)于相似了——所以需要揮灑創(chuàng )意、打破陳規。