“色彩是我們感知世界的重要媒介撵彻，對于信息傳達有著重要的作用，能使人們能夠更有效的感知設(shè)計的意圖和內(nèi)涵，使傳達更高效千康。且人對色彩的視覺感知與想象能力，能夠指導(dǎo)人做出預(yù)測铲掐、理解和決策拾弃。”
——lyft kevyn arnott
前言
隨著世界的數(shù)字化轉(zhuǎn)型進程大爆發(fā)摆霉，科技把每一張有形的辦公桌移到了云端豪椿，用戶沉浸在數(shù)字構(gòu)建的世界中。騰訊文檔作為先進的生產(chǎn)力工具携栋，產(chǎn)品生態(tài)越來越多元豐富搭盾，多品類多終端的復(fù)雜環(huán)境展現(xiàn)在我們面前，開始真正的朝復(fù)雜龐大的大規(guī)模設(shè)計邁進婉支。我們希望能以更加專業(yè)鸯隅、高效的設(shè)計姿態(tài)迎接騰訊文檔的未來挑戰(zhàn)。
色彩是體現(xiàn)品牌與基因的關(guān)鍵因素向挖，構(gòu)建科學(xué)高效的色彩系統(tǒng)蝌以，建立產(chǎn)品的品牌形象，對產(chǎn)品設(shè)計極具指導(dǎo)意義何之。
騰訊文檔在色彩上也進行了一些深入的挖掘和沉淀跟畅，一方面希望帶給用戶全新的品牌印象和認知，另一方面構(gòu)建科學(xué)有效的色彩系統(tǒng)溶推，為產(chǎn)品的發(fā)展提供優(yōu)質(zhì)高效的設(shè)計系統(tǒng)基礎(chǔ)徊件。本文將聚焦于色彩系統(tǒng)的構(gòu)建。
一蒜危、品牌標準色進化
騰訊文檔代表著效率協(xié)作的先進生產(chǎn)力虱痕，從云端創(chuàng)作到云端協(xié)作，打破了辦公空間的實體界限辐赞。我們希望皆疹，新的品牌色，能夠為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和認知占拍。
我們將標準色由平靜的天藍色略就，升級為更加生動、進取晃酒、科技表牢、可靠的明亮清澈的鈷藍色。這種藍色具有更多的電子意味贝次，蘊含了更多的活力和想象力崔兴，承載了騰訊文檔對未來數(shù)字世界新挑戰(zhàn)的態(tài)度和形象的進化。
同時我們認為灰色在騰訊文檔的色彩系統(tǒng)中起著至關(guān)重要的作用，為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)敲茄、表達邊界位谋、建立信息層次。我們將灰色賦予了統(tǒng)一的品牌認知感受堰燎，將藍色加入到中性灰色里掏父，生成了騰訊文檔特有的藍灰色。
至此秆剪，騰訊文檔標準色進化升級赊淑，它體現(xiàn)了騰訊文檔對可靠穩(wěn)定的技術(shù)、產(chǎn)品體驗的追求仅讽，以及對未來智能的數(shù)字世界的不斷創(chuàng)新和進取陶缺，蘊藏著無限的可能性。
二洁灵、豐富多元的輔助色
在一個科學(xué)有效的色彩系統(tǒng)里饱岸，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產(chǎn)品體系的整體色彩感受徽千，減少用戶在產(chǎn)品體驗中對反復(fù)出現(xiàn)的主色的視覺疲勞伶贰。
騰訊文檔的產(chǎn)品生態(tài)愈來愈豐富多元。我們擁有多品類的產(chǎn)品罐栈，為用戶提供了豐富的產(chǎn)品功能黍衙，其中云端協(xié)作、文檔資產(chǎn)的沉淀管理是騰訊文檔的非常重要的能力荠诬，在線文檔琅翻、在線表格、在線幻燈片柑贞、在線收集表方椎、在線思維導(dǎo)圖、在線流程圖以及文件夾等的品類圖標钧嘶，又是用戶在對文檔進行協(xié)作分享及沉淀時棠众，識別不同類型文件的關(guān)鍵因素∮芯觯基于此闸拿，騰訊文檔相較于其他產(chǎn)品需要更多的輔助色。
于是书幕，如何有效的選擇既符合品牌調(diào)性又有區(qū)別度的輔助色是構(gòu)建騰訊文檔色彩系統(tǒng)的關(guān)鍵新荤。在輔助色選擇上，我們以鄰近色台汇、互補色苛骨、對比色為主要方法構(gòu)建了輔助色彩體系篱瞎。
1. 創(chuàng)建色相色板，保持相同明度痒芝、相同飽和度
我們以騰訊文檔標準色#1E6FFF（H 218 S 88 B 100) 為起始點俐筋，S（飽和度）、B（明度）保持不變严衬，H（色相）以218°為起點澄者，以15°為增量或減量標準，生成24色色板瞳步。這個色板是我們選取輔助色的重要依據(jù)闷哆。
2. 以鄰近色腰奋、互補色单起、對比色為原則選擇豐富的輔助色彩
?鄰近色：在色相環(huán)中，相差15°的顏色為鄰近色劣坊，凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍嘀倒。鄰近色之間往往是我中有你，你中有我局冰，色彩之間比較和諧测蘑。
?對比色：在色相環(huán)中，角度相差120°-180°之間的色彩康二，文檔使用了120°為角度來選擇對比色碳胳。
?互補色：在色相環(huán)中成180°角的兩種顏色，互為補色沫勿，當這兩種顏色彼此相鄰放置時挨约，它們會為這兩種特定顏色創(chuàng)造最強烈的對比度。
為了保持騰訊文檔的基礎(chǔ)品牌調(diào)性产雹，并保證其具有極清晰的識別度诫惭，我們以品牌藍色為起點，選擇了相對較多的鄰近色蔓挖，以保證在色溫上保持騰訊文檔整體色調(diào)的清爽感夕土。并利用對比色及互補色，選擇更加豐富多元的色相瘟判，以保證能夠滿足各種使用場景下對色彩的需求怨绣。
總的原則是利用鄰近色構(gòu)建有質(zhì)感、品牌感的色彩家族拷获，利用對比色及互補色擴展色相梨熙，以制造更強烈的色彩對比，滿足一些沖突性場景刀诬。
3. 校正輔助色
雖然我們保持相同的飽和度和明度咽扇，使用科學(xué)的方法得到了較為合適的色相邪财，但由于色彩本身自帶感官明度屬性，導(dǎo)致在視覺感受上的感官體驗并不同頻质欲。
黃色树埠、綠色的明度即發(fā)光度較高，藍色就稍微偏暗一些嘶伟，導(dǎo)致色板看起來不一致怎憋。為了讓不同色相看起來更加協(xié)調(diào)，需要調(diào)整色板的明度和飽和度九昧，以保證視覺感官體驗同頻且更加和諧舒適绊袋。
校正原則：
?色相必須保持是同類色（色相環(huán)中15°夾角內(nèi)的顏色）
?保持感官明度同頻
?保證視障群體的識別度
校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色铸鹰。并且針對視障群體進行了色彩測試癌别。
三、易用的中性灰色
灰色是產(chǎn)品體驗設(shè)計中至關(guān)重要的一節(jié)蹋笼，工具型產(chǎn)品大部分是由各種各樣的容器展姐、面板、列表組成剖毯』浚灰色為產(chǎn)品界面創(chuàng)造結(jié)構(gòu)、表達邊界逊谋、建立信息層次擂达，保持舒適的對比度是提高可讀性和吸引用戶注意力的關(guān)鍵。
前面我們已經(jīng)定義了騰訊文檔的藍灰色胶滋，在界面的設(shè)計中板鬓，我們將其與中性的灰色結(jié)合，共同構(gòu)建灰色的色彩體系?镀钓。
?擴展藍灰色相穗熬，應(yīng)用于圖標、容器丁溅，構(gòu)建有層次唤蔗、舒適清爽的產(chǎn)品界面 。
?用帶透明度的黑色窟赏，應(yīng)用于字體等妓柜。
為構(gòu)建一個高效易用的灰色調(diào)色板，我們將藍灰色彩作為Y軸涯穷，有透明度的中性灰色作為X軸棍掐，兩者透明度保持一致，建立起騰訊文檔有梯度的拷况、豐富的灰色調(diào)色板作煌。
對比度是否合理是閱讀體驗是否舒適的重要評價維度掘殴，過高或者過低的對比度都會影響閱讀體驗及識別度。下圖是對比度的鐘型曲線圖粟誓，隨著對比度的增加奏寨，舒適度和識別度都在上升，但一旦超過一個界點鹰服，對比度越增加病瞳，識別度和友好度亦會逐步下降。
為保證視障用戶的使用悲酷，保證足夠的對比度套菜，遵守?WCAG 2.0?的標準，我們對調(diào)色板灰色的對比度進行了可用性測試设易，以指導(dǎo)騰訊文檔體驗設(shè)計中灰色調(diào)色板的使用逗柴。
四知染、高效易用的調(diào)色板
定義好文檔的主色、輔助色以及中性色后斑胜，我們需建立完整的調(diào)色板來滿足不同場景下顏色的使用控淡。以傳達品牌精神，建立色彩層級止潘，或傳達信息掺炭，或強化界面層級。
在色彩系統(tǒng)中凭戴，很多產(chǎn)品使用 Tints and shades 系統(tǒng)涧狮，通過在顏色上面增加白色，或者增加黑色么夫，來改變它的明度和飽和度者冤，形成同色系的調(diào)色板。但這種方法得到的調(diào)色板往往比較刻板僵硬档痪，故騰訊文檔采用了另一種方式涉枫，將已生成的灰色色板與色相疊加，在符合無障標準的區(qū)域腐螟，選擇不同明度飽和度的色彩愿汰，形成有梯度困后、有層級的彩色調(diào)色板。
現(xiàn)在衬廷，我們有一個梯度豐富操灿，能夠支持騰訊文檔設(shè)計系統(tǒng)的調(diào)色板了～
實際案例
實踐才是硬道理，我們嘗試以這個調(diào)色板為指導(dǎo)來調(diào)整優(yōu)化騰訊文檔鏈接色的優(yōu)化調(diào)整泵督。
為保證用戶閱讀體驗的舒適度趾盐，鏈接之類的彩色文本，要求顏色在背景下可以達到4.5:1對比度以上小腊，以使它能夠清晰的從灰色文本救鲤、背景中脫穎而出。于是秩冈，我們放棄了品牌藍_1E6FFF本缠，選擇了品牌藍70_175CEB 作為鏈接色。
結(jié)束語
這個長長的制作調(diào)色板的故事就要結(jié)束了入问，我在這項工作中丹锹，重新審視過去設(shè)計中的設(shè)計決策方法，在其中學(xué)到了很多東西芬失，希望本文對您也有所幫助楣黍。
我們經(jīng)常快速的動手棱烂，依靠主觀情感去選擇顏色租漂，在剛開始可能沒遇到什么特別的問題，但隨著產(chǎn)品的壯大和發(fā)展颊糜，往往會越來越凌亂哩治。抽絲剝繭的搭建色彩系統(tǒng)，真正讓色彩為設(shè)計服務(wù)衬鱼，簡化團隊的工作业筏，相信您會有更愉快的工作體驗～
