他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

如何為你的UI制定一套色彩系統?

2020-7-24    資深UI設計者

色彩在UI設計中的作用:加深品牌印象與品牌感、引導用戶視覺凹增加易讀性、區分信息交互的狀態、營造氛圍傳遞熱度……

前言

不管是做 UI 設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但配色都是有講究的。

一個設計作品呈現到用戶面前,第一眼進入眼簾的就是產品的視覺表現,而產品的色彩在其中起到了舉足輕重的作用,毫無疑問色彩搭配對于設計師來說是非常重要的。那么具體到實際項目中該使用什么怎樣的色彩,需要怎么做呢?

用戶界面是一個設計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以克制,界面可能會顯得花哨而沒有主次;但過于拘謹又容易使界面保守,難以激發用戶情緒,下面以Bee express項目的實例來理性推導制定一套色彩系統。

切勿直奔主題

做過設計的同學應該都知道顏色模式:RGB、CMYK、Lab 等等,這里不做過多的解釋了。另外每個顏色具有一定的性格特征和表達方式,而且都會有正反兩面。雖然每種色彩都有正向性格特征,但是我們在定位主體色之前一定要知道所選擇色彩的負面特征對企業是否會帶來負面的影響,

開始之前我們需要了解在配色過程中需要避免出現的問題,如果你經常出現下列的問題,保證你在試用期內一次性就能拿到全部薪資,emmm……

  • 高飽和度的色彩會造成我們的視覺疲勞及視幻;
  • 灰部使用過多的配色會使界面有一種臟兮兮、霧蒙蒙的感覺,甚至心情低落;
  • 沒有規律且過多的配色。如果你不是做五彩斑斕的黑,建議6、3、1的色彩配比,輔助色不超過3種;
  • 熒光色。使用這種色彩的,建議跟色彩對視,看誰堅持的更久,除非是你贏了;
  • 太輕柔的顏色-沒有重點且輕飄飄的感覺;
  • 現在很火的新擬物化設計對于部分(沒有絕對)產品可能會造成信息識別性很差;
  • 不要將對抗色重疊,否則你會很浮躁。

定位品牌色

雖然設計是相通的,但是在不同的設計領域進行配色時,依然會存在巨大的區別。更換品牌的主體色,都不會是因為設計師自己的決定,而是公司在商業策略上優先做出了調整,然后通過品牌視覺上的變更將這個信息傳遞給消費者。

Bee Express快遞、速遞柜業務為主,前期的主色及視覺形象以橙黃色為主,為了避免視覺跳躍性太大,以及后期IP形象(蜜蜂吉祥物)打造,本次品牌色彩升級在原有基礎上優化了色調,以保證后期產品的易用性和延展性,并利用最科學、最適用的方式推導出輔助色,以提升應用視覺的豐富性和感官體驗。

express原主色:

如何為你的UI制定一套色彩系統?來看這個實戰案例!

為了不影響原有色調前期的視覺傳播,即在原有主體色的基礎上調整SHB的數值,讓色彩更具視覺沖擊力,在色彩襯托(字體、圖標)更清晰。

  • H(Hue:色相)
  • S(Saturation:飽和度)
  • B(Brightness:明度)

如何為你的UI制定一套色彩系統?來看這個實戰案例!

通過調整后的主體色也能看出,明亮清晰的主體色(品牌色)也更適合在界面中的運用,為信息傳遞、引導操作、品牌價值帶來更大的提升。

  • 信息傳遞:產品的首要目的是傳遞用戶所需要的信息,這就需要界面有清晰的層級關系,明確、舒適的閱讀體驗。
  • 引導操作:清晰合理的操作引導,讓用戶能夠準確地根據引導進行下一步操作。
  • 品牌價值:很多同學會忽略這一點,導致產品的界面與品牌關聯性差,整體界面沒有品牌感。

根據主體色推理同色系

同色系為統一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時可以讓界面保持色彩上的一致性,整體感較強,產生低對比度的和諧美感,給人協調統一的感覺。

具體是指與品牌色 H(色相)一致,通過改變 S(飽和度)與 B(明度)變化產生的色組。分別往淺色/深色方向按均勻數據增減,各產生5個坐標值。

如何為你的UI制定一套色彩系統?來看這個實戰案例!

綜上能看出,使用同一色系即可完成一個項目,但是對于中大型項目來說實在是過于單調,沒有太多的層次感,因此我們需要多色搭配為輔。多色的輔助顏色可設定不同的任務屬性和情感表達,再搭配中性色黑白灰,能賦予更多的變化和層次。

提取24色-鋪墊輔助色

根據主體色 H(色相)為基礎,不斷地遞增、遞減 15,在 0-360 之間可以得出 24 個顏色,也就是將 360° 色環分割為 24 份,(24份在360°色環上,每一個色相的角度為15°),最終得到下圖24色。

如何為你的UI制定一套色彩系統?來看這個實戰案例!

選取輔助色

輔助色需要滿足的兩個條件:

和品牌色有明顯區分:避免所選輔助色感官上給用戶視覺區別與品牌色差距不大,傳遞的調性太過一致;

不能過于突兀:根據色彩原理,互補色是最能與品牌色本色產生視覺感官對比的顏色,但可能會有些突兀。為了讓顏色的輔助起到豐富畫面的作用,而不是反而讓整個版面顯得不和諧,所以選擇互補色的鄰近色作為輔助色,避免直接使用互補色。

  • 鄰近色:色相差值 15° 以內的顏色為鄰近色;
  • 類似色:色相差值 30° 以內的顏色為類似色;
  • 互補色:色相差值 180° 的顏色為互補色。

基于品牌色可衍生出 3 個輔助色:一個與品牌色傳遞調性有明顯區分的類似色;兩個互補色的鄰近色。

如何為你的UI制定一套色彩系統?來看這個實戰案例!

類似色搭配:使用色相相近的顏色,頁面元素不會相互沖突,更加協調有質感。

互補色搭配:選擇使用互補色,最佳搭配是一種作為主色,另一種用于強調。它們有著非常強烈的對比度,用在需要特別強調某個元素時會非常有效。

視覺統一感官校準

每一種顏色都有自己的「感官明度」,也就是發光度。根據現有的使用場景,類似色和互補色大都用在同層級的信息展示上,而當我們將最終得到的輔助色擺放在一起之后發現,雖然我們提取出的輔助色明度色值都一致,因為顏色本身自帶的感官明度屬性有所區別,導致視覺上會有明顯的明暗差別。需要通過發光度來進行最終的顏色校正。

校準方式:依次在輔助色上疊加一層純黑圖層,將該純黑圖層顏色模式調整為 Hue(色相),就可以通過無彩色系下的明度色值,進行對比,使色彩視覺感官保持一致(青色和藍色屬冷色調,固需加深)。

如何為你的UI制定一套色彩系統?來看這個實戰案例!

全色系輸出

根據上面同色系的明度、純度對比規則,對所有定義的輔助色進行明度和純度的輔助色彩輸出,最終得到輔助色色板。H(色相)一致,通過改變 S(飽和度)與 B(明度)變化產生色組。分別往淺色/深色方向按均勻數據增減,各產生5個坐標值

如何為你的UI制定一套色彩系統?來看這個實戰案例!

刪除最左側的3種同色系,因明度過低時,顏色已經非常接近于黑色,色相在肉眼上幾乎已經趨于一致。最后得到基于品牌色推導出的全色系色階色板。

如何為你的UI制定一套色彩系統?來看這個實戰案例!

如何為你的UI制定一套色彩系統?來看這個實戰案例!

總結

配色常常從確定主色開始,根據行業類型和視覺訴求的需要,選擇一種居于支配的色彩作為主調色彩,構成畫面的整體色彩傾向。然后選擇輔色,添加點綴色,最后按照色彩組合的原則完成設計中的需求。

雖然有了以上的配色方式,但一套標準的色彩系統還會包含中性色規范、顏色的使用規范等等。相信解決了大部分的需求,剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學的方法,如果想更加優秀,還需要進一步深入地去學習色彩理論知識,多看優秀的配色作品提升審美,總之要多看、多實踐和多思考。

文章來源:優設    作者:能量眼球

藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔