如何打造高效的色彩系統 — 騰訊文檔

Sponsor

前言：色彩是體現品牌與基因的關鍵因素，構建科學高效的色彩系統，建立產品的品牌形象，對產品設計極具指導意義。

“色彩是我們感知世界的重要媒介，對于信息傳達有著重要的作用，能使人們能夠更有效的感知設計的意圖和內涵，使傳達更高效。且人對色彩的視覺感知與想象能力，能夠指導人做出預測、理解和決策?！?/p>

——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

? ? ? ? ??? ? ? ? ? ?

易用的中性灰色

灰色是產品體驗設計中至關重要的一節，工具型產品大部分是由各種各樣的容器、面板、列表組成?；疑珵楫a品界面創造結構、表達邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。

前面我們已經定義了騰訊文檔的藍灰色，在界面的設計中，我們將其與中性的灰色結合，共同構建灰色的色彩體系 。

● 擴展藍灰色相，應用于圖標、容器，構建有層次、舒適清爽的產品界面 。

● 用帶透明度的黑色，應用于字體等。

騰訊文檔藍灰色相擴展：

中性灰色色相擴展：

為構建一個高效易用的灰色調色板，我們將藍灰色彩作為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～

結束語

這個長長的制作調色板的故事就要結束了，我在這項工作中，重新審視過去設計中的設計決策方法，在其中學到了很多東西，希望本文對您也有所幫助。

我們經?？焖俚膭邮?，依靠主觀情感去選擇顏色，在剛開始可能沒遇到什么特別的問題，但隨著產品的壯大和發展，往往會越來越凌亂。抽絲剝繭的搭建色彩系統，真正讓色彩為設計服務，簡化團隊的工作，相信您會有更愉快的工作體驗～

作者 | 騰訊ISUX設計
來源 | 騰訊ISUX （id:tencent_isux）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。