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