六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南:配色

2021-3-19    ui設(shè)計(jì)分享達(dá)人

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

B 端設(shè)計(jì)也是 UI 設(shè)計(jì)的一種,它的輸出環(huán)境只存在于電子屏幕中,所以統(tǒng)一使用 RGB 色彩顯示模式即可。

RGB 即光的三原色,因?yàn)槊總€(gè)像素點(diǎn)是由 R 紅色、G 綠色、B 藍(lán)色三種顏色的不同色彩強(qiáng)度混合而成。所以 RGB 色的表示可以由 3 個(gè)顏色各自使用 0-255 中的數(shù)值來呈現(xiàn),比如:

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

這是 RGB 色彩最標(biāo)準(zhǔn)的記錄方式,但顯然看起來特別的不直觀,或者說不方便。所以在計(jì)算機(jī)中,為了方便記錄和調(diào)用,使用了一串十六進(jìn)制的代碼來指代具體的 RGB 色。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

理論上,我們只要使用 RGB 模式,隨便你怎么選色,只要記錄 16 進(jìn)制碼進(jìn)行復(fù)用,你就可以在任何文件、設(shè)備中獲得相同的色彩。

但在實(shí)際顯示效果上,不同的系統(tǒng)、設(shè)備、瀏覽器都有自己的調(diào)色板,“解釋” RGB 代碼后給出的色彩就有偏差。比如一樣的中文不同方言、語系、背景的人可能聽出不同的意思,比如牛子,我以為它是類似“晴子”這樣的姓名,至于你們的理解嘛……

相關(guān)行業(yè)為了避免這樣的問題,提出了 WEB 安全色的概念,即這些色彩在不同的顯示環(huán)境下,能實(shí)現(xiàn)最接近的色彩效果。

那么安全色都有哪些呢?網(wǎng)上有很多地方都有對(duì)應(yīng)的色卡或者工具幫助我們選色。建議使用 Google 的 MD 色卡,這套色彩最全,使用范圍也最廣的顏色。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

我們可以通過下面這個(gè)鏈接中的網(wǎng)頁工具,幫助我們快速實(shí)現(xiàn)選色和復(fù)制色彩代碼的操作。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

網(wǎng)站鏈接:https://www.materialpalette.com/colors

當(dāng)然,設(shè)計(jì) B 端界面并不是只能使用安全配色,這只是一種建議,可以盡量確保主色,尤其是輔助色使用安全色,而中性色可以自由定義(下面會(huì)提)。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

第 2 件事,自然就是講講該怎么配色了。和 C 端設(shè)計(jì)類似,我們主要的目標(biāo)就是在項(xiàng)目設(shè)計(jì)過程中定義出 主色、輔助色、中性色 三種色彩類型,并把它們應(yīng)用到合理的位置中去。

只是,針對(duì) C 端來講,B 端的配色更功能化,更理性,也更簡單。我們要學(xué)習(xí) B 端配色首先要排除那些花里胡哨的案例,比如下圖這種。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

過度花哨的顏色會(huì)干擾我們對(duì)界面的實(shí)用和對(duì)信息的識(shí)別、檢索效率,除非是一些政績工程用來當(dāng) “花瓶” 的數(shù)據(jù)大屏,否則我們首先要排除顏色過度應(yīng)用的選項(xiàng)。

那么什么主色、輔助色、中性色,我們先簡單做個(gè)說明。

主色,即你這套產(chǎn)品中的品牌色彩,是整套項(xiàng)目最核心,重要性最高的顏色。主色的選擇通常和你的品牌相關(guān)聯(lián),比如騰訊云的藍(lán)色,阿里云的橙色,七麥的綠色。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

輔助色,則是用來在系統(tǒng)中進(jìn)行強(qiáng)調(diào)、標(biāo)識(shí)、區(qū)分的彩色系統(tǒng)。品牌或者 C 端設(shè)計(jì)可能會(huì)通過輔助色和主色搭配實(shí)現(xiàn)個(gè)性化的配色方案,但是在 B 端是沒有這種訴求的。輔助色應(yīng)用的目的性更強(qiáng),是完全貼合操作效率來制定的。

比如下方是國外流行框架 StarBootstrap Admin 中使用的輔助色,它們都有對(duì)應(yīng)的功能寓意場(chǎng)景。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

中性色,則是這套系統(tǒng)中色彩使用的相關(guān)灰色,因?yàn)榛疑菦]有色相、冷暖的區(qū)別,所以我們也稱它們?yōu)橹行陨V饕獞?yīng)用在文字、背景、分割線等基礎(chǔ)元素中。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

B 端的配色,即了解這三個(gè)色彩類型以后,能正確制定合理的顏色,并應(yīng)用進(jìn)項(xiàng)目中去。下面,我們分別對(duì)每個(gè)類別進(jìn)行簡單的講解。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

1. 主色的應(yīng)用規(guī)則

B 端的主色也就是產(chǎn)品的品牌色,多數(shù) B 端項(xiàng)目中,主色不需要 B 端設(shè)計(jì)師自己選,在項(xiàng)目開始前就會(huì)有相關(guān)的品牌色、LOGO,直接復(fù)制色號(hào)即可。

和 C 端配色最大的不同是,品牌色在這里很多時(shí)候只是 “吉祥物”,它的存在用來宣示品牌本身的存在,但并不是任何情況下都直接參與界面色彩的填充。

假設(shè)品牌色是紫色、熒光黃、暗棕色之類的,那么這類顏色本身的內(nèi)涵、寓意是難以滿足功能需求的,我們要盡可能減少它們的出現(xiàn)面積、頻次。

在 B 端設(shè)計(jì)中,主色的應(yīng)用是最不需要大面積填充的,即使它是常見、耐用的藍(lán)色、橙色,主色的填充主要只應(yīng)用在下面這些類型內(nèi)容中:

  • LOGO
  • 關(guān)鍵按鈕
  • 選中狀態(tài)
  • 高亮文本、圖標(biāo)
  • 標(biāo)簽用色

2. 輔助色的應(yīng)用規(guī)則

有了主色,我們就要為項(xiàng)目添加其它色彩了。

B 端彩色的搭配原則只有一個(gè),那就是 —— 能省就省。我們不是設(shè)計(jì)一個(gè)讓用戶發(fā)出感嘆的色彩豐富絢麗、細(xì)節(jié)眾多的視覺平面,而是設(shè)計(jì)一個(gè)用來使用的軟件系統(tǒng)。所以前面舉例的那些花里胡哨的反面案例,就一定要在正式項(xiàng)目中敬而遠(yuǎn)之。

用專業(yè)術(shù)語來說,配色過程要遵守 “奧卡姆剃刀原則”,如無必要,勿增輔色。

而為了滿足功能性需求,可以為 B 端項(xiàng)目添加的輔助色類型其實(shí)也非常的有限,按寓意劃分常見的也就以下幾種:

  • 正確、通過
  • 鏈接、選中
  • 警示、錯(cuò)誤
  • 提醒、注意
  • 失效、未完成

相信看到這里,你們腦海中已經(jīng)有畫面了。我們會(huì)為正確使用綠色、鏈接使用藍(lán)色、警示使用紅色等等。這些都是具有普世性的顏色,與用戶的長期經(jīng)驗(yàn)吻合,沒有識(shí)別的成本。

而如果為了個(gè)性而個(gè)性,對(duì)輔助用色另辟蹊徑,相當(dāng)于在異國自駕時(shí)使用藍(lán)燈行棕色停的系統(tǒng),異國風(fēng)情是有了,說翻車也就翻車了。

所以,針對(duì) B 端輔助色的使用上,如果自己沒有把握和經(jīng)驗(yàn),可以套用下方我們整理的 RGB 安全色,填充到頁面對(duì)應(yīng)的元素中去:

用谷歌色卡各選 3 個(gè)同類色出來,并進(jìn)行標(biāo)記

  • 正確、通過:綠色
  • 鏈接、選中:藍(lán)色
  • 警示、錯(cuò)誤:紅色
  • 提醒、注意:黃色
  • 失效、未完成:藍(lán)灰

3. 中性色的應(yīng)用規(guī)則

B 端的輔助色找起來不難,難的是中性色的使用和搭配上。

任何完整的 B 端的項(xiàng)目,同一個(gè)界面中都包含了多個(gè)模塊、層級(jí),以及數(shù)之不盡的文本字段。在這么多的內(nèi)容中,我們要根據(jù)模塊、文字的權(quán)重,選擇合理的中性色填充。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

新手很容易迷失在中性色的配色過程中,往往一套界面做完以后,使用的灰色或黑色透明度數(shù)量根本無法統(tǒng)計(jì),非常的混亂。

所以,為了避免這樣的情況,我會(huì)建議從開始設(shè)計(jì)之前就定一套中性色,并將它們添加到設(shè)計(jì)軟件的色彩畫板中,每次填充中性色的時(shí)候直接從這個(gè)色板中選擇即可。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

那么如何制定這套中性色?首先要理解在電子顯示器中,人眼對(duì)偏冷的中性色是耐受的(舒適),所以專業(yè)的 B 端項(xiàng)目中,中性色都帶有一定的冷色色相和飽和度,比如下圖是 Element 中性色在拾色器區(qū)域的分布,就并不是全灰的。

超詳細(xì)!總監(jiān)出品的B端設(shè)計(jì)規(guī)范指南(三):配色

所以加入冷色是有必要的,同時(shí),我們用 HSB 色彩模式中的 B 值作為中性色灰度的主要量化標(biāo)準(zhǔn),全黑時(shí) B 值為 0,白色為 100,每個(gè)定義出來的灰度都可以用 B 值作為代號(hào),如 B20、B40 等。

我們根據(jù)這個(gè)標(biāo)準(zhǔn),定義出 5-8 級(jí)的中性色,就可以滿足項(xiàng)目中的大多數(shù)場(chǎng)景。

雖然會(huì)有一些項(xiàng)目會(huì)使用透明度來制定灰度等級(jí),比如黑色的 80%、40% 透明度,但我更建議將透明度使用場(chǎng)景和實(shí)際色值定義區(qū)分開來,只有在色彩的不同狀態(tài)(選中/失效等)下再應(yīng)用透明度。

結(jié)尾

有關(guān) B 端配色的部分也就先說到這里,B 端配色遠(yuǎn)遠(yuǎn)比 C 端更簡單,也更枯燥??梢允褂玫纳史秶?,套路也更一致。我們要做的,就是將它們合理進(jìn)行填充。


分享本文至:

日歷

鏈接

個(gè)人資料

存檔