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 個主色來當對比色點提畫重點用，就很有型，看是要走專業路線、還是要時尚潮流都沒問題！（回到上方那個股市看盤軟體…不大量使用灰黑白去配色、我實在不知道要怎麼樣才能讓畫面變的更乾淨啊…）