手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?|北京藍(lán)藍(lán)UI設(shè)計(jì)公司

2023-12-6    周周

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

大概每一位 B 端設(shè)計(jì)師在做組件設(shè)計(jì)時(shí),都會(huì)對(duì)色板印象深刻,同時(shí)也會(huì)有不少的疑問(wèn):

  1. 為什么一套組件需要有這么多的顏色?
  2. 為什么一個(gè)顏色需要有這么多的色階?
  3. 衍生出來(lái)的梯度色階到底該如何使用呢?

一、色板和色階的作用

經(jīng)??次椅恼碌呐笥褜?duì)于“基礎(chǔ)組件”和“業(yè)務(wù)組件”的區(qū)別應(yīng)該耳熟能詳了。

對(duì)于相對(duì)底層的、開(kāi)源的、通用的基礎(chǔ)組件庫(kù)來(lái)說(shuō),批量生產(chǎn)多種顏色的色板成本相對(duì)較低、準(zhǔn)確性也更高,且可以滿足中后臺(tái)設(shè)計(jì)中的開(kāi)發(fā)者和設(shè)計(jì)者對(duì)于顏色的大部分使用需求。例如基礎(chǔ)組件庫(kù) Ant Design、Arco Design 都提供了相對(duì)全面和豐富的平臺(tái)系統(tǒng)級(jí)別的色彩體系,包括 10+ 顏色的基礎(chǔ)色板、中性色板和功能色板:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

Ant Design 的基礎(chǔ)色板(部分)、中性色板和功能色板

而對(duì)于更具備專業(yè)性和業(yè)務(wù)屬性的、高級(jí)的業(yè)務(wù)組件來(lái)說(shuō),色板的搭建則是圍繞著產(chǎn)品和業(yè)務(wù)的品牌色來(lái)完成。設(shè)計(jì)師不需要在一開(kāi)始搭建業(yè)務(wù)組件庫(kù)時(shí)就產(chǎn)出十幾種不同顏色的色板,可以先做出業(yè)務(wù)必用的品牌色板、中性色板和功能色板,之后在設(shè)計(jì)需求中,再基于品牌色進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的輔助色板:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

某產(chǎn)品的品牌色色板、中性色板和功能色板

色板和其梯度色階的作用如下:

1. 操作狀態(tài),有效反饋。

色階中的顏色可以用在頁(yè)面模塊的層級(jí)、組件操作的狀態(tài)上,顏色上的微妙變化可以為用戶提供有效的交互反饋:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

按鈕不同狀態(tài)的顏色,可以從色階中選擇

2. 全局托底,以防萬(wàn)一

即使是視覺(jué)表現(xiàn)力相對(duì)較弱的 B 端產(chǎn)品,也會(huì)有多種顏色使用的需求,比如 Tag 標(biāo)簽、插畫、營(yíng)銷海報(bào)等等。為了使產(chǎn)品的視覺(jué)元素更具備一致性,設(shè)計(jì)師可以借鑒通用組件庫(kù)的基礎(chǔ)色板,并結(jié)合自己產(chǎn)品的品牌色板制定產(chǎn)品的輔助色,最大限度的保證配色的合理性和用色的一致性:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

Ant Design 預(yù)設(shè)的 Tag 類型和顏色,也支持按需定制

3. 縱向推衍,確保精確

色階的每一階顏色都是由相鄰階層的顏色通過(guò)色值的計(jì)算推演得到的。一個(gè)色板中的色階數(shù)量越多,漸變關(guān)系就會(huì)越精確和微妙,顏色的精確度也會(huì)越高。為了方便使用,通常一個(gè)色板做 1015 級(jí)的色階即可:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

Arco Design 的基礎(chǔ)色板,從顏色的 HSB 值中可以看出色階中的顏色存在一些數(shù)值規(guī)律。

4. 橫向比較,層級(jí)一致

假設(shè)我們將每一個(gè)色板都做了 10 級(jí)色階,這樣就可以保證不同的顏色在同一層色階層級(jí)上的明度、純度和飽和度相對(duì)一致。比如下圖中:第 6 級(jí)的紅色(Red 60)和第 6 級(jí)藍(lán)色(Blue 60)就都是這兩個(gè)色板中的主色,都可以用于按鈕的默認(rèn)狀態(tài);而第 3 級(jí)的紅色(Red 30)和第 3 級(jí)的藍(lán)色(Blue 30)就都可以用于按鈕的禁用狀態(tài):

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

產(chǎn)品中顏色是會(huì)傳遞信息語(yǔ)義和內(nèi)容層級(jí)的,這樣使用色階來(lái)規(guī)范顏色的選擇,可以保證同一個(gè)或同一類信息層級(jí)上的色彩搭配是相對(duì)協(xié)調(diào)和合理的。

二、色板創(chuàng)建工具

很多同學(xué)都想了解組件系統(tǒng)中的色板的計(jì)算和推演方式,其實(shí)色板是由設(shè)計(jì)師和前端統(tǒng)一協(xié)作完成的,設(shè)計(jì)師提供色彩學(xué)的理論基礎(chǔ),前端開(kāi)發(fā)完成算法推演。色板的演算方式并不簡(jiǎn)單,給大家推薦幾個(gè)色板使用或生成工具 ,可以省去推演過(guò)程和時(shí)間:

1. Ant Design:Sketch 插件 Kitchen

網(wǎng)站鏈接:https://kitchen.alipay.com/

優(yōu)勢(shì):在最新版的 Kitchen 色板中可以直接選擇和填充顏色,支持一鍵將 AntD 的基礎(chǔ)色板導(dǎo)入至本地文件色板或者創(chuàng)建本地樣式:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

不足:

  1. 沒(méi)有給出顏色的應(yīng)用建議,無(wú)法判斷色彩是否符合 WCAG(Web 內(nèi)容無(wú)障礙指南)的標(biāo)準(zhǔn);
  2. 除了 12 個(gè)主色以外,暫時(shí)無(wú)法選擇其他顏色生成衍生色板,不具備定制性。

2. Material Design:Figma 插件 Material Theme Builder

網(wǎng)站鏈接:https://goo.gle/m3designkit

優(yōu)勢(shì):可以選擇你想要的任何一種顏色,插件會(huì)幫你計(jì)算并生成整套衍生色板,同時(shí)還會(huì)檢驗(yàn)出不符合 WCAG 規(guī)則的主題色,并直接利用系統(tǒng)算法幫你做優(yōu)化:

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

不足:

  1. 要使用魔法,并保證網(wǎng)絡(luò)暢通;
  2. 無(wú)法確定具體色彩的應(yīng)用和搭配方式是否符合 WCAG 標(biāo)準(zhǔn)。

3. Acro Design:色彩配置工具網(wǎng)站

Arco Color Palette

網(wǎng)站鏈接:https://arco.design/palette/list

優(yōu)勢(shì):提供了 13 個(gè)基礎(chǔ)主色色板,設(shè)計(jì)師可以自行調(diào)整這些主色,定制新的色板及色階;同時(shí)提供 WCAG 色彩標(biāo)準(zhǔn)檢測(cè)工具,可以對(duì)色彩的應(yīng)用和搭配做全方位的檢測(cè):

設(shè)計(jì)系統(tǒng)中的色板和色階,到底有什么用?

不足:暫時(shí)沒(méi)有提供插件,只支持導(dǎo)出 json 和 less 格式。

 

文章來(lái)源:優(yōu)設(shè)網(wǎng)    作者:Ant Design 元堯

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

 

藍(lán)藍(lán)設(shè)計(jì)(m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI設(shè)計(jì)公司、界面設(shè)計(jì)公司UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔