被慣性思維牢籠禁錮的產品色彩“方法”

被慣性思維牢籠禁錮的產品色彩“方法”

被慣性思維牢籠禁錮的產品色彩“方法”,觀點,負能量補給站,原創文章站酷網,中國設計師互動平台。

不知道大家有沒有聽過這麼一個故事:某家餐廳銷量一直不太好,老闆究其原因也沒有查明白到底是為啥,明明選址在鬧市區,價格也很實惠,就是賣不出去;後來老闆請了個“大師”幫忙一探究竟,大師說你家盤子顏色不行,換成橙色保准牛X;老闆立馬認購了一批橙色盤子,從那以後以後這家餐廳火爆了,王境澤都覺著香的不行…

聽完這個故事,自此我幼小的心靈裡把橙色和食慾劃了等號。這個烙印直到我從業前幾年還一直這麼覺著。同時間段,在9年義務教育的美術課本上,我得到了有生以來第一次對色彩這門學問的細緻輸入,了解到了各種顏色對應的含義與情緒:

這種色彩與情緒的映射關係在我的腦袋裡根深蒂固/ 無法磨滅,直到有那麼一場面試或者匯報,面試官/老闆問我,“為什麼你要選擇這個顏色作為品牌色呢?”

面對著一手塑造出來的社交應用,我解釋到:“因為紅色代表著熱鬧,這個顏色會賦予這款產品熱鬧的氛圍”。坦誠的講,這個解釋自信但空洞,顏色本身並無好壞和指向,只看你用在了什麼地方,不講究場景就別輕易定性。

這也側面反映出來慣性思維的不斷吞噬著你我的思路,過往的“經驗”可以讓人習以為常,也可以讓人尷尬不已,取決於是否洞察的到。如果拋棄慣性思維,到底如何去定義一款產品的主色呢?

STEP 1


說實話選取一個顏色作為品牌色是一個戰略決策過程,一般來說行業裡一定存在一種主流顏色,像旅遊行業的攜程/去哪兒和途牛,還有以淘寶為代表的電商行業通常是喜慶的大紅大橙。

顯而易見基於這個邏輯下,有3個做法,一條路是順勢而為,一條是逆向而去,還有一條是另闢蹊徑。這塊的選擇一定程度上並不是設計師可以決定的,需要結合整個業務的方向去判斷;在旅遊行業里馬蜂窩選擇了逆向而去,在直播行業裡抖音就選擇了另闢蹊徑。

我們試著揣測下抖音和馬蜂窩的想法,在產品的定位和策略的打法上,他們更注重的是差異化,走反方向的路突出品牌,試圖在用戶的心里站得住。通過這個例子你或許會發現,黑色未必死氣沉沉,ta也可以色彩斑斕;黃色未必只象徵尊貴,ta也可以代表青春和希望;顏色沒有偏向,只看使用在什麼場景上。

主色的選擇更需要貼合業務戰略的發展,也更多的偏向於主觀。給業務提供思路和方向,判斷不好業務方向的時候,多提供思路幫助其更好的匹配顏色。

STEP 2

以往的面試裡,我這種好事的面試官就特別喜歡問侯選人一個問題:“一個色相裡有那麼多色號,為什麼你定了這個色號作為品牌色?”大部分候選人乍一聽都是面露難色,心里大概想著這人是個傻X吧,能問這種問題,哈哈哈哈哈哈;廢話不多說,我來簡單分享下我的方法:

首先以黑白兩色(#000000-#FFFFFF)作為起始點設置10個梯度,然後把第一個模塊定義的色相扔進去,只需要調整HSB中的H就可以,這樣一頓操作下來你就得到了一個完整的色彩序列:

第二步,基於序列主觀調整下顏色,確定主色的同時確保其在黑白2種背景上對比度大於4.5:1(wcag色彩可用性標準),理論上來講梯度中間是最合適的,飽和和亮度足夠就可以。

上圖是我用到的色彩可用性測試工具-color review(https://color.review/)

STEP 3

當你準備好了以上所有工作,最後一步就是拓展色係了;這裡採用負能量補給站小商店的品牌色“叛逆橙” #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

總結一下

隨著工作經驗/時長的不多增加,我們往往會對事物的存在習以為常,思維的慣性會困住我們追根溯源的想法,但需求和場景是千變萬化的,所有的方法也都針對的是通用場景,標準化的解決方案未必適用你當下的處境;試著在熟悉的環境用敏銳的洞察和科學的方法突圍也許是最好的辦法。

但需求和場景千變萬化,實際操作不能那麼程式化,最終還是要回歸到具體使用場景去定義,文章裡面的規則和公式只是指導,在必要的時候可以打破。

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。