我的選色技巧


Pochade 我愛用的截色 App

最近在工作上遇到關於配色的大難題…公司 LOGO 是深藍+亮橘,但要做的專案和股市看盤有關,所以要加入紅色和綠色,要求官網、網頁版系統、Desktop App、Mobile App 都要一致性、能讓人一眼就看出來這是該公司的產品,要有企業形象,一定要用上企業色。偏偏扯到「股市看盤」就不會只有兩條線在畫面上跑這麼簡單…


我所找到畫面最花的看盤軟體 (網路上亂翻到、不是我做的。)

有威吧,在這麼多資訊的情況下,什麼顏色通通都上了!真的不誇張,有接觸股市期貨基金這領域的人就會知道,一秒鐘幾百萬上下,稍慢一步就是賠到脫褲子(喂)。很多功能只能攤在第一層,想簡化第一層的資訊都很難。而且還有非常多的專有名詞,沒有好好研究過會被一連串的名詞搞矇,再加上各種分析工具、每位使用者操作和下單的習慣都不一樣…想來個功能收納都辦不到。

先不講功能,這篇我想提的是配色。

從上圖就可以看到這個畫面顏色非常多,資訊量非常龐大,沒什麼刪減空間…最大的問題是:這個畫面第一眼看不到任何重點!剛才就提到,每位使用者都有不同的操作習慣,有的習慣看數字表格、有的擅長看線圖,有的同時需比對各個市場…只能抓出最重要、也共通的部份來統一,也就是下單…最好這麼簡單,下單方式隨便算都有四種以上,有的方式還得搭配線圖或表格、表單,這是要怎麼抓共通點啦!

能做到的就是「簡化色彩」,先把畫面上每個想搶走使用者視線的顏色打平,再來考慮哪個選項最常用。

先講一下基本色彩學…圖是從 Photoshop 裡截出來的,所以看懂了就馬上能活用喔!


框起來這條叫:「色相」,可以當它是「色彩的種類」


這個水平的箭頭代表「彩度」,表示顏色飽和度。


這個垂直的箭頭代表「明度」,表示顏色的亮還是暗。

選色也有很多種模式,如果是做介面的話,我自己常用的是 HSB,H 代表色相、S 代表彩度、B 代表明度。這表示所有顏色都是用3組數字組成,要牢記這個觀念!以後選色很好用,量化了喔!

為什麼最常用到 HSB 呢?如果是 Navication Bar 底色要有光照感,需要上淺下深的感覺,只要調「B 明度」的數字就可以做出漂亮的漸層(我在扁平化設計:基本雛型 也用過這個技巧)。數字越大就越亮。淺色的數字如果是 100(純白),深色就可能會設個 80(淺灰)。我自己喜歡讓深淺差異約在 10~20之 間,視情況而定。

如果是同個畫面色彩要有一致性,先設定好一組 HSB 後,只要動「H 色相」這裡的數字,整個畫面的顏色看起來就很有一致性,但色相這回事比較複雜一點,會牽涉到「能量」。

小知識:色彩學其實是從「光」轉變而來的一門學問,自從牛頓…(其他自己去看光的色散 )。能量其實就是「震波」,聲音是震波、光也是震波。大家都知道人的耳朵只能聽到一定頻率裡的聲音、超過或低於這個範圍的就聽不見。人的眼睛也是,顏色的種類是透過波長來決定,超過和低於某個範圍的色光就會看不到,如紫外線、紅外線等。

回過頭來看「色相」這回事,既然顏色是波長決定,就不可能每個顏色都一樣。所以我們來看看色立體。

可以看到黃色在最上方、藍色大多在底層。簡單來說,即使在明度 100、彩度 100 的情況下,不同色相還是會給人有不同明度的感覺。所以當你要用固定 S 彩度、 B 明度,只調整 H 色相來讓畫面有一致性的時候,還是要加減一下彩度和明度的數字喔…

對了,黑色、灰色、白色,在色彩學裡稱為「無色彩」,也就是飽和度為 0 ,既然飽和度是0,那不管是哪個色相都起不了作用,只有明度會有影響。在考慮介面配色時我不會把這三色當成是配色的一部份(這是個人習慣聽聽就好,可能和很多人的認知不同)。在明度控制好的情況下,任何顏色搭上這 3 色都不會發生互打的情況,所以我超愛用這3色,隨便另抓 2 個主色來當對比色點提畫重點用,就很有型,看是要走專業路線、還是要時尚潮流都沒問題!(回到上方那個股市看盤軟體…不大量使用灰黑白去配色、我實在不知道要怎麼樣才能讓畫面變的更乾淨啊…)

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close