騰訊文檔升級了品牌色，它的色彩系統是如何應用？

Sponsor

前言：在《如何打造高效的色彩系統 — 騰訊文檔》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。

在設計系統的實際運行中，我們也需要著眼于如何應用調色板，建設協同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。

在建設騰訊文檔色彩系統的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統的協同工作流迫在眉睫。

Part?1 如何建設？

HIG強調不要在APP中使用“硬代碼”，即十六進制色值進行編碼，但前期我們構建的調色板僅有色值，這種硬代碼應用到app中導致項目效率低下，維護也會成本激增。

于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務（role）、主題（theme），為UI中的任務指定十六進制代碼的色值（hex value），以弭平設計師之間、開發與設計師之間的溝壑，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

所謂顏色變量，通俗的意思就是可以將一個顏色按任務用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。

在設計或者代碼中，可以通過修改這個顏色變量的值來進行全局顏色的更新。例如，我們現在需要給button一個顏色，不要將其寫為

#1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量，

如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現，顏色變量Fill-01可以在不同主題下，映射不同的十六進制色值。這就是我們建設協同工作流的基礎邏輯。

*騰訊文檔使用主題/顏色變量/任務/十六進制色值的方式管理顏色

Part 2 為調色板的基礎色值命名

調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規則化命名，以方便后期將其引用到顏色變量中。

騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。

*騰訊文檔調色板命名圖表

Part 3 定義顏色使用規則

1、從調色板中選擇合適的顏色并測試

從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優解。

例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。

騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。

同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。

2、根據任務定義顏色的使用規則

經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規則定義的不夠清晰，含混的口口相傳的規則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規則清晰的定義。

首先定義在界面中占主導地位的灰色、藍色的使用規則。

藍灰色_Grayblue：

在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。

中性灰色_Gray：

中性灰色主要應用于一些全局系統行為。如：文本、分割線及交互反饋hover、press等場景。

品牌藍色_Primayblue：

品牌藍色主要應用于系統中的各種行為，如藍色圖標、button、文本鏈接等。

其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。

紅色_Red：

紅色主要應用于系統中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。

其他顏色：

在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。

品類圖標基準色：

在騰訊文檔中，不同的品類有不同的基準色。

Part 4 顏色變量的語義化命名

定義了顏色在系統設計中的使用規則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為

blue-01、blue-02… ，語義化的收益并不明顯。哪天設計團隊需要調整品牌風格，或是蘋果又掀起什么新潮流，把所有命名為

blue_x 的變量改為 gradient_serenity， 對于開發來說也是巨大的災難。

根據 HIG 的建議，語義化命名不應該描述外觀或者色值，而是指明這個顏色的任務用途——標簽 Labels，分割線 Sepatators 或者填充 Fill。

在思考如何賦予顏色語義化的命名時，設計師也需要用更概括和結構化的視角來看待界面設計，同時也需與開發同學達成一致，使用同樣的命名，滿足以更好地維護一套收斂和統一的設計語言。

在騰訊文檔中，顏色的任務用途定義為為以下幾種：背景色

Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充

Opaque fill 、默認交互反饋 Feedback、語義

Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中，直接描述其用途，例如：hover，pressed、disabled等。

*騰訊文檔顏色變量語義化命名卡

Part 5 建設團隊協同工作流

以上種種，最終目的在于建設團隊的協同工作流，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于設計利用變量及組件、開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。

1、設計內協同：在Figma中生成顏色變量

在設計系統中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color

style），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。

2、設計組件與開發代碼聯動：利用顏色變量表進行信息同步

我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）

*騰訊文檔顏色變量表

最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。

結語

上篇的調色板設計后，一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時，提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸，溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。

設計師們可以在自己的項目中與開發同學多多溝通，嘗試這種方法，去建設更高效的色彩設計系統。

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

贊助商鏈接

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