2021-4-20 ui設(shè)計(jì)分享達(dá)人
Meet more beautiful colors.
“色彩是我們感知世界的重要媒介，對于信息傳達(dá)有著重要的作用，能使人們能夠更有效的感知設(shè)計(jì)的意圖和內(nèi)涵，使傳達(dá)更高效。且人對色彩的視覺感知與想象能力，能夠指導(dǎo)人做出預(yù)測、理解和決策?！?/em>
-- lyft kevyn arnott
——————————
隨著世界的數(shù)字化轉(zhuǎn)型進(jìn)程大爆發(fā)，科技把每一張有形的辦公桌移到了云端，用戶沉浸在數(shù)字構(gòu)建的世界中。騰訊文檔作為先進(jìn)的生產(chǎn)力工具，產(chǎn)品生態(tài)越來越多元豐富，多品類多終端的復(fù)雜環(huán)境展現(xiàn)在我們面前，開始真正的朝復(fù)雜龐大的大規(guī)模設(shè)計(jì)邁進(jìn)。我們希望能以更加專業(yè)、高效的設(shè)計(jì)姿態(tài)迎接騰訊文檔的未來挑戰(zhàn)。
色彩是體現(xiàn)品牌與基因的關(guān)鍵因素，構(gòu)建科學(xué)高效的色彩系統(tǒng)，建立產(chǎn)品的品牌形象，對產(chǎn)品設(shè)計(jì)極具指導(dǎo)意義。
騰訊文檔在色彩上也進(jìn)行了一些深入的挖掘和沉淀，一方面希望帶給用戶全新的品牌印象和認(rèn)知，另一方面構(gòu)建科學(xué)有效的色彩系統(tǒng)，為產(chǎn)品的發(fā)展提供優(yōu)質(zhì)高效的設(shè)計(jì)系統(tǒng)基礎(chǔ)。本文將聚焦于色彩系統(tǒng)的構(gòu)建。
騰訊文檔代表著效率協(xié)作的先進(jìn)生產(chǎn)力，從云端創(chuàng)作到云端協(xié)作，打破了辦公空間的實(shí)體界限。我們希望，新的品牌色，能夠?yàn)轵v訊文檔塑造更加有未來科技感及智慧感的視覺感受和認(rèn)知。
我們將標(biāo)準(zhǔn)色由平靜的天藍(lán)色，升級為更加生動、進(jìn)取、科技、可靠的明亮清澈的鈷藍(lán)色。這種藍(lán)色具有更多的電子意味，蘊(yùn)含了更多的活力和想象力，承載了騰訊文檔對未來數(shù)字世界新挑戰(zhàn)的態(tài)度和形象的進(jìn)化。
同時我們認(rèn)為灰色在騰訊文檔的色彩系統(tǒng)中起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次。我們將灰色賦予了統(tǒng)一的品牌認(rèn)知感受，將藍(lán)色加入到中性灰色里，生成了騰訊文檔特有的藍(lán)灰色。
至此，騰訊文檔標(biāo)準(zhǔn)色進(jìn)化升級，它體現(xiàn)了騰訊文檔對可靠穩(wěn)定的技術(shù)、產(chǎn)品體驗(yàn)的追求，以及對未來智能的數(shù)字世界的不斷創(chuàng)新和進(jìn)取，蘊(yùn)藏著無限的可能性。
在一個科學(xué)有效的色彩系統(tǒng)里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產(chǎn)品體系的整體色彩感受，減少用戶在產(chǎn)品體驗(yàn)中對反復(fù)出現(xiàn)的主色的視覺疲勞。
騰訊文檔的產(chǎn)品生態(tài)愈來愈豐富多元。我們擁有多品類的產(chǎn)品，為用戶提供了豐富的產(chǎn)品功能，其中云端協(xié)作、文檔資產(chǎn)的沉淀管理是騰訊文檔的非常重要的能力，在線文檔、在線表格、在線幻燈片、在線收集表、在線思維導(dǎo)圖、在線流程圖以及文件夾等的品類圖標(biāo)，又是用戶在對文檔進(jìn)行協(xié)作分享及沉淀時，識別不同類型文件的關(guān)鍵因素。基于此，騰訊文檔相較于其他產(chǎn)品需要更多的輔助色。
于是，如何有效的選擇既符合品牌調(diào)性又有區(qū)別度的輔助色是構(gòu)建騰訊文檔色彩系統(tǒng)的關(guān)鍵。在輔助色選擇上，我們以鄰近色、互補(bǔ)色、對比色為主要方法構(gòu)建了輔助色彩體系。
我們以騰訊文檔標(biāo)準(zhǔn)色#1E6FFF（H 218 S 88 B 100) 為起始點(diǎn)，S（飽和度）、B（明度）保持不變，H（色相）以218°為起點(diǎn)，以15°為增量或減量標(biāo)準(zhǔn)，生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。
● 鄰近色 在色相環(huán)中，相差15°的顏色為鄰近色，凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍。鄰近色之間往往是我中有你，你中有我，色彩之間比較和諧。
● 對比色 在色相環(huán)中，角度相差120°-180°之間的色彩，文檔使用了120°為角度來選擇對比色。
● 互補(bǔ)色 在色相環(huán)中成180°角的兩種顏色，互為補(bǔ)色，當(dāng)這兩種顏色彼此相鄰放置時，它們會為這兩種特定顏色創(chuàng)造最強(qiáng)烈的對比度。
為了保持騰訊文檔的基礎(chǔ)品牌調(diào)性，并保證其具有極清晰的識別度，我們以品牌藍(lán)色為起點(diǎn)，選擇了相對較多的鄰近色，以保證在色溫上保持騰訊文檔整體色調(diào)的清爽感。并利用對比色及互補(bǔ)色，選擇更加豐富多元的色相，以保證能夠滿足各種使用場景下對色彩的需求。
總的原則是利用鄰近色構(gòu)建有質(zhì)感、品牌感的色彩家族，利用對比色及互補(bǔ)色擴(kuò)展色相，以制造更強(qiáng)烈的色彩對比，滿足一些沖突性場景。
雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導(dǎo)致在視覺感受上的感官體驗(yàn)并不同頻。
黃色、綠色的明度即發(fā)光度較高，藍(lán)色就稍微偏暗一些，導(dǎo)致色板看起來不一致。為了讓不同色相看起來更加協(xié)調(diào)，需要調(diào)整色板的明度和飽和度，以保證視覺感官體驗(yàn)同頻且更加和諧舒適。
校正原則：
● 色相必須保持是 同類色（色相環(huán)中15°夾角內(nèi)的顏色）
● 保持感官明度同頻
● 保證視障群體的識別度
校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對視障群體進(jìn)行了色彩測試。
灰色是產(chǎn)品體驗(yàn)設(shè)計(jì)中至關(guān)重要的一節(jié)，工具型產(chǎn)品大部分是由各種各樣的容器、面板、列表組成。灰色為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達(dá)邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關(guān)鍵。
前面我們已經(jīng)定義了騰訊文檔的藍(lán)灰色，在界面的設(shè)計(jì)中，我們將其與中性的灰色結(jié)合，共同構(gòu)建灰色的色彩體系 。
● 擴(kuò)展藍(lán)灰色相，應(yīng)用于圖標(biāo)、容器，構(gòu)建有層次、舒適清爽的產(chǎn)品界面 。
● 用帶透明度的黑色，應(yīng)用于字體等。
為構(gòu)建一個高效易用的灰色調(diào)色板，我們將藍(lán)灰色彩作為Y軸，有透明度的中性灰色作為X軸，兩者透明度保持一致，建立起騰訊文檔有梯度的、豐富的灰色調(diào)色板。
對比度是否合理是閱讀體驗(yàn)是否舒適的重要評價維度，過高或者過低的對比度都會影響閱讀體驗(yàn)及識別度。下圖是對比度的鐘型曲線圖，隨著對比度的增加，舒適度和識別度都在上升，但一旦超過一個界點(diǎn)，對比度越增加，識別度和友好度亦會逐步下降。
為保證視障用戶的使用，保證足夠的對比度，遵守 WCAG 2.0 的標(biāo)準(zhǔn)，我們對調(diào)色板灰色的對比度進(jìn)行了可用性測試，以指導(dǎo)騰訊文檔體驗(yàn)設(shè)計(jì)中灰色調(diào)色板的使用。
是：對比度在AA標(biāo)準(zhǔn)以上，符合W3C標(biāo)準(zhǔn)，可以使用。
中：僅可用于disable狀態(tài)。
否：對比度在AA標(biāo)準(zhǔn)以下，不符合W3C標(biāo)準(zhǔn)，不可使用。
定義好文檔的主色、輔助色以及中性色后，我們需建立完整的調(diào)色板來滿足不同場景下顏色的使用。以傳達(dá)品牌精神，建立色彩層級，或傳達(dá)信息，或強(qiáng)化界面層級。
在色彩系統(tǒng)中，很多產(chǎn)品使用 Tints and shades 系統(tǒng)，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板。但這種方法得到的調(diào)色板往往比較刻板僵硬，故騰訊文檔采用了另一種方式，將已生成的灰色色板與色相疊加，在符合無障標(biāo)準(zhǔn)的區(qū)域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調(diào)色板。
Tencentdocs_blue：
生成主色-藍(lán)色色階：
用同樣的方法將輔助色生成色階：
現(xiàn)在，我們有一個梯度豐富，能夠支持騰訊文檔設(shè)計(jì)系統(tǒng)的調(diào)色板了～
實(shí)際案例
實(shí)踐才是硬道理，我們嘗試以這個調(diào)色板為指導(dǎo)來調(diào)整優(yōu)化騰訊文檔鏈接色的優(yōu)化調(diào)整。
為保證用戶閱讀體驗(yàn)的舒適度，鏈接之類的彩色文本，要求顏色在背景下可以達(dá)到4.5:1對比度以上，以使它能夠清晰的從灰色文本、背景中脫穎而出。于是，我們放棄了品牌藍(lán)_1E6FFF，選擇了品牌藍(lán)70_175CEB 作為鏈接色。
以后，選擇顏色，so easy～
這個長長的制作調(diào)色板的故事就要結(jié)束了，我在這項(xiàng)工作中，重新審視過去設(shè)計(jì)中的設(shè)計(jì)決策方法，在其中學(xué)到了很多東西，希望本文對您也有所幫助。
我們經(jīng)常快速的動手，依靠主觀情感去選擇顏色，在剛開始可能沒遇到什么特別的問題，但隨著產(chǎn)品的壯大和發(fā)展，往往會越來越凌亂。抽絲剝繭的搭建色彩系統(tǒng)，真正讓色彩為設(shè)計(jì)服務(wù)，簡化團(tuán)隊(duì)的工作，相信您會有更愉快的工作體驗(yàn)～
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com