RELAAAY是由京東孵化出來的一款設(shè)計協(xié)作工具，繼承京東的文化基因。著重表達產(chǎn)品和市場營銷，凸顯產(chǎn)品的活力與進取的精神。4.0版本升級RELAAAY面臨著對外商業(yè)化的巨大挑戰(zhàn)，我們需要一個更加兼容并包的，具有普適性的產(chǎn)品調(diào)性。為此我們對RELAAAY的色彩系統(tǒng)進行了重構(gòu)。

產(chǎn)品定位升級

4.0版本升級之后，RELAAAY將覆蓋更多的設(shè)計協(xié)作場景，面向更多類型使用人群，此外還要對外商業(yè)化，脫離電商設(shè)計這個范疇，面對復(fù)雜更多樣的使用場景，對RELAAAY我們也提出了設(shè)計的核心價值--輕盈，綜上色彩系統(tǒng)進行了如下工作。

主題色

首先我們重新審視了新的產(chǎn)品定位應(yīng)該具備的素質(zhì)。我們的全新平臺將具備：專業(yè)、協(xié)同、效率、便捷、創(chuàng)意的特質(zhì)。

而我們都知道顏色對人的情緒，心理有很大的影響，顏色也會影響人的時間感。我這里摘錄了一些關(guān)于顏色的特質(zhì)，大家可以酌情跳過：

藍色暗含有和平友誼的意思。能讓人變得更率真，更具創(chuàng)造性，增加信任感。能增進友誼，開闊視野，拓寬思維。

綠色環(huán)境能緩解壓力，舒緩精神疲勞，有利于人解決難題，激發(fā)出創(chuàng)造性思維。

黃色的紙和便簽?zāi)茏屓烁蛹凶⒁饬?，有利于解決問題。利用黃色來集中注意力、傳遞能量和潛質(zhì)、促進問題的解決。

從事簡單的體力勞動時，紅色能增加績效，但紅色對于解決問題和創(chuàng)造性思維無益。紅色有利于激發(fā)競爭力，卻不利于合作行為。在學(xué)習(xí)、測試和合作場所要避免使用紅色。過多凝視大紅顏色，會影響視力，而且易產(chǎn)生頭暈?zāi)垦Ｖ小?/span>

白色是純潔的象征，具有潔凈感和膨脹感。白色為主，使空間增加寬敞感。

灰色會增加縱深感，具有與任何顏色搭配的多樣性。

綜上，結(jié)合從RELAAAY現(xiàn)有品牌的顏色，我們決定將主題色改為藍色，來適配我們更加開放的市場品牌定位

本次升級的顏色均采用HSB模式調(diào)教 。主題色色相已經(jīng)確定使用藍色，接下來就要確定具體的藍色色值，主題色要求在以下場景均有較高對比度，能清晰的分辨前景和背景。

要求顏色在填充，邊框，文字單獨使用能夠清晰辨別，RELAAAY目前沒有黑夜模式，所以主要考慮和白色或高亮度灰的適配情況。為此我們決定在色相環(huán)H208～220之間選取一個相對“標(biāo)準(zhǔn)的藍色”，主要目的是為了和淺色有較強的對比，保證信息展示得足夠清晰。

亮度選擇了95%，而飽和度都選擇了較高的數(shù)值80%，是為了增加色彩的柔性，不會過于濃艷，過多引起用戶注意。使主題色在平臺里展示得更加自然和諧。

輔助色應(yīng)用

中性色

• 背景色

在最大面積鋪設(shè)的背景色需要配合RELAAAY這次升級空間優(yōu)化策略，輔助完成空間優(yōu)化的工作。前文提到白色具有潔凈感和膨脹感，而灰色會增加縱深感，為了達到系統(tǒng)扁平化的目的，將主體背景色改為純白色（#FFF），增加干凈輕盈的質(zhì)感同時，利用白色的膨脹感抵消留白空間壓縮帶來的密集感。

• 結(jié)構(gòu)顏色

除文字外，本次在空間灰度的調(diào)教上也做了一些工作，不再使用原來的純灰色調(diào)。

單純的灰色配合一般其他顏色的主題，都會使得人在肉眼觀察灰色時產(chǎn)生一定的視覺偏色。比如原來的純灰搭配紅色，會顯得屏幕發(fā)黃，不夠干凈。這就是比較典型的其他顏色和純灰色對人感官的影響。

所以我們講背景灰像藍色發(fā)色進行了一定的偏置，搭配藍色主題時候能夠相互輝映，在能夠感知到結(jié)構(gòu)縱深的前提下提升整體的亮度和潔凈感。

標(biāo)記色

在很多場景，如設(shè)計走查、稿件詳情、組建詳情等都需要圖層標(biāo)注功能。我們需要找到一些不常用的，能足夠和內(nèi)容區(qū)分開的顏色來幫助我們識別標(biāo)注。

所以在顏色選擇上采用了高亮、高飽和的偏熒光色。需要這些顏色在不同亮度的背景下盡量保持有很高的對比度，以便于能突出顯示這部分內(nèi)容。

提示色

• 紅：高級警示作用

紅色在系統(tǒng)中擁有會場高級別的指示意義，通常代表重要提醒、嚴(yán)重警告和嚴(yán)重錯誤。主題色改為藍色之后，紅色就能更好的來表達此類含義，如刪除不可恢復(fù)的內(nèi)容，系統(tǒng)級別錯誤，和系統(tǒng)通知。

與紅色配合的情況，圖形設(shè)計也要更加醒目，比如提示用的紅點，實色填充的按鈕等，會采用更大的尺寸來保證足夠引起用戶注意

• 藍：常駐弱提醒

對于用戶不常用，或者非目標(biāo)用戶，或者非必要動作的提示，我們采用了者藍色來提示用戶，采用系統(tǒng)級別的藍色有一個優(yōu)勢，就是能“恰好”引起用戶注意，又能很容易融入背景之中，使得用戶能夠很容易忽略掉其存在，不至于一直拉扯著用戶的視線，屬于強迫癥福音。如插件的新功能更新，設(shè)計規(guī)范的新版本更新提示等，我們判斷這種提示對于用戶是可以關(guān)注的程度，所以采用藍色提示色。

與顏色配合的是，弱提醒一般會常駐，所以盡管顏色的注意力不夠強，還是要壓縮提示元件的尺寸，通常點的尺寸會更小一些。

其他顏色

功能色

顏色和啟動效應(yīng)關(guān)聯(lián)密切，所以在選色上盡量貼合客觀事物的發(fā)色，讓用戶可以直接聯(lián)想從而快速理解產(chǎn)品的功能。

如白板中的便簽功能，我們選取了8種生活中常見的馬卡龍色系的便簽紙的顏色作為官方預(yù)設(shè)。

常見文件類型的圖標(biāo)，也采用了貼近其品牌的顏色。

又如白板功能的系統(tǒng)色板，針對這里我們做了幾輪調(diào)整，早期版本會給相對“正”的顏色，但是這些顏色在實際繪制時候搭配起來效果比較糟糕。為此我們專門為每一個顏色做了“矯正”。使之更加貼合我們輕盈的設(shè)計風(fēng)格。

漸變和陰影效果

秉承干凈輕盈的風(fēng)格準(zhǔn)則，我們在漸變色和陰影的使用也做了相應(yīng)的規(guī)范。

為了配合整體偏扁平化的系統(tǒng)設(shè)計，在小面積情況下可以使用簡便來豐富效果。漸變均采用同色系，不超過兩個顏色節(jié)點，且色差不宜過大，不要增加立體感知。

陰影我們根據(jù)組件的使用場景和背景色給出了幾種預(yù)設(shè)值，整體原則是有足夠的結(jié)構(gòu)感知即可，在此前提下應(yīng)該盡量克制的使用，不要使界面顯臟。

總結(jié)

全新的RELAAAY不再局限于之前的瀏覽查找等操作，在RELAAAY上可以完成更多的動作，如創(chuàng)作，管理，檢索，溝通等。我們希望全新的RELAAAY是更加多元的，更加包容的，更加豐富多彩的。所有的顏色都是為功能和體驗服務(wù)，希望用戶能更加沉浸的使用我們的產(chǎn)品，有一個更加輕松舒適的體驗。

本文為轉(zhuǎn)載內(nèi)容 僅供個人學(xué)習(xí)使用