“色彩是我們感覺世界的重要媒介，對于資訊傳達有着重要的作用，能使人們能夠更有效的感覺設計的意圖和内涵，使傳達更高效。且人對色彩的視覺感覺與想象能力，能夠指導人做出預測、了解和決策。”
——lyft kevyn arnott
随着世界的數字化轉型程序大爆發，科技把每一張有形的辦公桌移到了雲端，使用者沉浸在數字建構的世界中。騰訊文檔作為先進的生産力工具，産品生态越來越多元豐富，多品類多終端的複雜環境展現在我們面前，開始真正的朝複雜龐大的大規模設計邁進。我們希望能以更加專業、高效的設計姿态迎接騰訊文檔的未來挑戰。
色彩是展現品牌與基因的關鍵因素，建構科學高效的色彩系統，建立産品的品牌形象，對産品設計極具指導意義。
騰訊文檔在色彩上也進行了一些深入的挖掘和沉澱，一方面希望帶給使用者全新的品牌印象和認知，另一方面建構科學有效的色彩系統，為産品的發展提供優質高效的設計系統基礎。本文将聚焦于色彩系統的建構。
Chapter 1
品牌标準色進化
騰訊文檔代表着效率協作的先進生産力，從雲端創作到雲端協作，打破了辦公空間的實體界限。我們希望，新的品牌色，能夠為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和認知。
我們将标準色由平靜的天藍色，更新為更加生動、進取、科技、可靠的明亮清澈的钴藍色。這種藍色具有更多的電子意味，蘊含了更多的活力和想象力，承載了騰訊文檔對未來數字世界新挑戰的态度和形象的進化。
同時我們認為灰色在騰訊文檔的色彩系統中起着至關重要的作用，為産品界面創造結構、表達邊界、建立資訊層次。我們将灰色賦予了統一的品牌認知感受，将藍色加入到中性灰色裡，生成了騰訊文檔特有的藍灰色。
至此，騰訊文檔标準色進化更新，它展現了騰訊文檔對可靠穩定的技術、産品體驗的追求，以及對未來智能的數字世界的不斷創新和進取，蘊藏着無限的可能性。
Chapter 2
豐富多元的輔助色
在一個科學有效的色彩系統裡，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成産品體系的整體色彩感受，減少使用者在産品體驗中對反複出現的主色的視覺疲勞。
騰訊文檔的産品生态愈來愈豐富多元。我們擁有多品類的産品，為使用者提供了豐富的産品功能，其中雲端協作、文檔資産的沉澱管理是騰訊文檔的非常重要的能力，線上文檔、線上表格、線上幻燈片、線上收集表、線上思維導圖、線上流程圖以及檔案夾等的品類圖示，又是使用者在對文檔進行協作分享及沉澱時，識别不同類型檔案的關鍵因素。基于此，騰訊文檔相較于其他産品需要更多的輔助色。
于是，如何有效的選擇既符合品牌調性又有差別度的輔助色是建構騰訊文檔色彩系統的關鍵。在輔助色選擇上，我們以鄰近色、互補色、對比色為主要方法建構了輔助色彩體系。
1. 建立色相色闆，保持相同明度、相同飽和度
我們以騰訊文檔标準色#1E6FFF（H 218 S 88 B 100) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以218°為起點，以15°為增量或減量标準，生成24色色闆。這個色闆是我們選取輔助色的重要依據。
2. 以鄰近色、互補色、對比色為原則選擇豐富的輔助色彩
● 鄰近色 在色相環中，相差15°的顔色為鄰近色，凡在60°範圍内的顔色都屬于鄰近色的範圍。鄰近色之間往往是我中有你，你中有我，色彩之間比較和諧。
● 對比色 在色相環中，角度相差120°-180°之間的色彩，文檔使用了120°為角度來選擇對比色。
● 互補色 在色相環中成180°角的兩種顔色，互為補色，當這兩種顔色彼此相鄰放置時，它們會為這兩種特定顔色創造最強烈的對比度。
為了保持騰訊文檔的基礎品牌調性，并保證其具有極清晰的識别度，我們以品牌藍色為起點，選擇了相對較多的鄰近色，以保證在色溫上保持騰訊文檔整體色調的清爽感。并利用對比色及互補色，選擇更加豐富多元的色相，以保證能夠滿足各種使用場景下對色彩的需求。
總的原則是利用鄰近色建構有質感、品牌感的色彩家族，利用對比色及互補色擴充色相，以制造更強烈的色彩對比，滿足一些沖突性場景。
3. 校正輔助色
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合适的色相，但由于色彩本身自帶感官明度屬性，導緻在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高，藍色就稍微偏暗一些，導緻色闆看起來不一緻。為了讓不同色相看起來更加協調，需要調整色闆的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒适。
校正原則：
● 色相必須保持是 同類色（色相環中15°夾角内的顔色）
● 保持感官明度同頻
● 保證視障群體的識别度
校正後我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對視障群體進行了色彩測試。
Chapter 3
易用的中性灰色
灰色是産品體驗設計中至關重要的一節，工具型産品大部分是由各種各樣的容器、面闆、清單組成。灰色為産品界面創造結構、表達邊界、建立資訊層次，保持舒适的對比度是提高可讀性和吸引使用者注意力的關鍵。
前面我們已經定義了騰訊文檔的藍灰色，在界面的設計中，我們将其與中性的灰色結合，共同建構灰色的色彩體系 。
● 擴充藍灰色相，應用于圖示、容器，建構有層次、舒适清爽的産品界面 。
● 用帶透明度的黑色，應用于字型等。
騰訊文檔藍灰色相擴充：
中性灰色色相擴充：
為建構一個高效易用的灰色調色闆，我們将藍灰色彩作為Y軸，有透明度的中性灰色作為X軸，兩者透明度保持一緻，建立起騰訊文檔有梯度的、豐富的灰色調色闆。
對比度是否合理是閱讀體驗是否舒适的重要評價次元，過高或者過低的對比度都會影響閱讀體驗及識别度。下圖是對比度的鐘型曲線圖，随着對比度的增加，舒适度和識别度都在上升，但一旦超過一個界點，對比度越增加，識别度和友好度亦會逐漸下降。
為保證視障使用者的使用，保證足夠的對比度，遵守 WCAG 2.0 的标準，我們對調色闆灰色的對比度進行了可用性測試，以指導騰訊文檔體驗設計中灰色調色闆的使用。
是：對比度在AA标準以上，符合W3C标準，可以使用。
中：僅可用于disable狀态。
否：對比度在AA标準以下，不符合W3C标準，不可使用。
Chapter 4
高效易用的調色闆
定義好文檔的主色、輔助色以及中性色後，我們需建立完整的調色闆來滿足不同場景下顔色的使用。以傳達品牌精神，建立色彩層級，或傳達資訊，或強化界面層級。
在色彩系統中，很多産品使用 Tints and shades 系統，通過在顔色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色闆。但這種方法得到的調色闆往往比較刻闆僵硬，故騰訊文檔采用了另一種方式，将已生成的灰色色闆與色相疊加，在符合無障标準的區域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調色闆。
Tencentdocs_blue：
生成主色-藍色色階：
用同樣的方法将輔助色生成色階：
現在，我們有一個梯度豐富，能夠支援騰訊文檔設計系統的調色闆了～
實際案例
實踐才是硬道理，我們嘗試以這個調色闆為指導來調整優化騰訊文檔連結色的優化調整。
為保證使用者閱讀體驗的舒适度，連結之類的彩色文本，要求顔色在背景下可以達到4.5:1對比度以上，以使它能夠清晰的從灰色文本、背景中脫穎而出。于是，我們放棄了品牌藍_1E6FFF，選擇了品牌藍70_175CEB 作為連結色。
以後，選擇顔色，so easy～
結束語
這個長長的制作調色闆的故事就要結束了，我在這項工作中，重新審視過去設計中的設計決策方法，在其中學到了很多東西，希望本文對您也有所幫助。
我們經常快速的動手，依靠主觀情感去選擇顔色，在剛開始可能沒遇到什麼特别的問題，但随着産品的壯大和發展，往往會越來越淩亂。抽絲剝繭的搭建色彩系統，真正讓色彩為設計服務，簡化團隊的工作，相信您會有更愉快的工作體驗～
以下是騰訊文檔APP和小程式二維碼連結，歡迎大家掃碼體驗！
看完今天的文章，
也别忘了QQ潮玩展正在火熱開票中，
QTX 2021，你準備好了嗎？
點選馬上購票
?
PS: ISUX 開通微信粉絲群啦！
歡迎掃碼加入一起聊設計
（入群暗号：ISUX）
以下ISUX文章，你可能也感興趣
▽
年輕化設計｜重塑傳統符号的春節活動
金木水火土，哪個不一樣？
小世界品牌視覺探索
高端限定！鵝大王·牛牛系列手辦QTX早鳥首發
[第二波] QTX個人藝術家限定品公布！
[第一波] QTX首批限定品發售資訊公布！
感謝閱讀，以上文章由騰訊ISUX團隊創作，版權歸騰訊ISUX所有,轉載請注明出處，違者必究，謝謝您的合作。