2020-12-24 濤濤
也不知道從什么時候開始，我們給顏色定了性
不知道大家有沒有聽過這么一個故事：某家餐廳銷量一直不太好，老板究其原因也沒有查明白到底是為啥，明明選址在鬧市區，價格也很實惠，就是賣不出去；后來老板請了個“大師”幫忙一探究竟，大師說你家盤子顏色不行，換成橙色保準牛X；老板立馬認購了一批橙色盤子，從那以后以后這家餐廳火爆了，王境澤都覺著香的不行…
聽完這個故事，自此我幼小的心靈里把橙色和食欲劃了等號。這個烙印直到我從業前幾年還一直這么覺著。同時間段，在9年義務教育的美術課本上，我得到了有生以來第一次對色彩這門學問的細致輸入，了解到了各種顏色對應的含義與情緒：
這種色彩與情緒的映射關系在我的腦袋里根深蒂固 / 無法磨滅，直到有那么一場面試或者匯報，面試官/老板問我，“為什么你要選擇這個顏色作為品牌色呢？”
面對著一手塑造出來的社交應用，我解釋到：“因為紅色代表著熱鬧，這個顏色會賦予這款產品熱鬧的氛圍”。坦誠的講，這個解釋自信但空洞，顏色本身并無好壞和指向，只看你用在了什么地方，不講究場景就別輕易定性。
這也側面反映出來慣性思維的不斷吞噬著你我的思路，過往的“經驗”可以讓人習以為常，也可以讓人尷尬不已，取決于是否洞察的到。如果拋棄慣性思維，到底如何去定義一款產品的主色呢？
說實話選取一個顏色作為品牌色是一個戰略決策過程，一般來說行業里一定存在一種主流顏色，像旅游行業的攜程/去哪兒和途牛，還有以淘寶為代表的電商行業通常是喜慶的大紅大橙。
顯而易見基于這個邏輯下，有3個做法，一條路是順勢而為，一條是逆向而去，還有一條是另辟蹊徑。這塊的選擇一定程度上并不是設計師可以決定的，需要結合整個業務的方向去判斷；在旅游行業里馬蜂窩選擇了逆向而去，在直播行業里抖音就選擇了另辟蹊徑。
我們試著揣測下抖音和馬蜂窩的想法，在產品的定位和策略的打法上，他們更注重的是差異化，走反方向的路突出品牌，試圖在用戶的心里站得住。通過這個例子你或許會發現，黑色未必死氣沉沉，ta也可以色彩斑斕；黃色未必只象征尊貴，ta也可以代表青春和希望；顏色沒有偏向，只看使用在什么場景上。
主色的選擇更需要貼合業務戰略的發展，也更多的偏向于主觀。給業務提供思路和方向，判斷不好業務方向的時候，多提供思路幫助其更好的匹配顏色。
以往的面試里，我這種好事的面試官就特別喜歡問侯選人一個問題：“一個色相里有那么多色號，為什么你定了這個色號作為品牌色？”大部分候選人乍一聽都是面露難色，心里大概想著這人是個傻X吧，能問這種問題，哈哈哈哈哈哈；廢話不多說，我來簡單分享下我的方法：
首先以黑白兩色（#000000-#FFFFFF）作為起始點設置10個梯度，然后把第一個模塊定義的色相扔進去，只需要調整HSB中的H就可以，這樣一頓操作下來你就得到了一個完整的色彩序列：
第二步，基于序列主觀調整下顏色，確定主色的同時確保其在黑白2種背景上對比度大于4.5：1（wcag色彩可用性標準），理論上來講梯度中間是最合適的，飽和和亮度足夠就可以。
上圖是我用到的色彩可用性測試工具-color review（https://color.review/）
當你準備好了以上所有工作，最后一步就是拓展色系了；這里采用負能量補給站小商店的品牌色“叛逆橙” #FF774A（H15 S71 B100） 作為主色并結合下google的方法開始拓展色系。
首先 - 確認同色系輔助色：我們將主色的色相加減 30° （谷歌是以10為梯度，但色相變化不大，為了效果我們以3倍作為最小單位）獲得2個新顏色，即同色系輔助色。
其次 - 確認對比色輔助色，將主色的色相加上 180° 獲得其互補色，即對比色系輔助色。為了和主色的類似色對應，取互補色的同類色（色相加減 15°）和類似色（色相加減 30°）。從中選取需要的顏色作為最終的對比色系輔助色。
根據色彩需求取同類色2和類似色1作為最終的對比色系輔助色，這樣，我們得到了主色和四個輔助色；同理你可以推理出無色彩傾向的中性色系（這里就不展開贅述）。
最后你可以通過編碼的方式，賦予每個顏色一個token（密鑰），方便團隊的配合和使用。
以上就是我在選取色彩的大概思路，市面上也有很多講顏色的好文，分享大家一波：
Ant Design 色板生成算法演進之路 - https://zhuanlan.zhihu.com/p/32422584
設計系統色彩 -https://uxplanet.org/designing-systematic-colors-b5d2605b15c
隨著工作經驗/時長的不多增加，我們往往會對事物的存在習以為常，思維的慣性會困住我們追根溯源的想法，但需求和場景是千變萬化的，所有的方法也都針對的是通用場景，標準化的解決方案未必適用你當下的處境；試著在熟悉的環境用敏銳的洞察和科學的方法突圍也許是最好的辦法。
但需求和場景千變萬化，實際操作不能那么程式化，最終還是要回歸到具體使用場景去定義，文章里面的規則和公式只是指導，在必要的時候可以打破。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務