腾讯文档 - 色彩系统应用篇.docx

在设计系统的实际运行中，我们也需要着眼于如何应用调色板，建设协同工作流，并给各个角色提供有关色彩的扩展指导，以达到在腾讯文档中构建一致且有品牌感的数字界面并有效提升效率的目的。OTncnt Does _ Color Pk<tVisualDes9n 2020-2021GradientlorGradientlorVtsuaiDesn20202021TnctDocs _ Color Palette在建设腾讯文档色彩系统的工作中，我们首先构建了一个包含品牌色、灰色、辅助色的调色板，但仅有这个调色板不足以支撑我们流畅、无障碍的协同工作。日常工作中，"这里我用哪个蓝色？""这里我用哪个灰色？""开发同学能否快速的变更某些元素的颜色？”等等问题层出不穷，建设系统的协同工作流迫在眉睫。Part 1如何建设？HIG强调不要在APP中使用"硬代码"，即十六进制色值进行编码，但前期我们构建的调色板仅有色值，这种硬代码应用到app中导致项目效率低下，维护也会成本激增。于是在腾讯文档中，我们开始采用颜色变量（colortoken）和主题（theme）来管理颜色，颜色变量（colortoken）基于任务（role）、主题（theme）,为Ul中的任务指定十六进制代码的色值（hexvalue）,以弭平设计师之间、开发与设计师之间的沟壑，将颜色变量（colortoken）嵌入设计组件中与开发代码形成联动，便于开发利用程序中的变量来做全局修改，横向提升团队的协作效率。所谓颜色变量，通俗的意思就是可以将一个颜色按任务用途去抽象，抽象成一个有命名的颜色样式，这个颜色样式就是颜色变量。在设计或者代码中，可以通过修改这个颜色变量的值来进行全局颜色的更新。例如，我们现在需要给button一个颜色，不要将其写为#1E6FFF这样的色值，而是将button的颜色指定为命名是Fill-Ol的颜色变量，如果有重大版本更新，仅需将颜色变量FiIl-Ol的色值更新，即可实现全局颜色的高效更新。如果在不同的主题下（例如浅色/深色模式）button有不同的颜色表现,颜色变量Fill-Ol可以在不同主题下，映射不同的十六进制色值。这就是我们建设协同工作流的基础逻辑。主题(theme)文档的不同主例如：常规模式（浅）/黑夜模式（深）题色变(ColortOken)文档界面元素的代码标记符。变是通用的，不会跨主屈改变。例如：文本/0B标/分割线/背景等。任务(role)飘色变量在系统中的应用；色值(hexvalue)分配给变的具体色值（即十六进制代码）*腾讯文档使用主题/颜色变量/任务/十六进制色值的方式管理颜色Part 2为调色板的基础色值命名调色板的各个色值(hexvalue)是最底层的基础样式，我们将色板上的颜色进行规则化命名，以方便后期将其引用到颜色变量中。腾讯文档包含核心蓝色、蓝灰色、中性灰色及其他辅助色，按照颜色属性，将其命名为：PrimayblUe、Gray、GraybluevPurplesIndigobluexAcidbluexCyan、GreenbluexYellowsOrangexRed,并在命名中加入色阶后缀。MixooocoomMDCM000M¾一MOmm24¾XKMOOMlCmixooommKXWMoOCKXMCOOO4¾acA.aaQM>IiOaiLKeXQA.LaM)HOtJkBQ"1”MOA.(ooaan>MKWM)MA(O0QQZHM(OaQQMlMSeHM(ftM)Q0A13*(Q00Q12)MM(ftM)Het值“gGray.08GmyMGray.06Gray.05Gray-04Gray.03Gray.02Gcay.01MtX4M0MMDLI1M«KXCKDOIMIXKWNOMXB"MU.WAMM(HWW)BM<miM1O)M(3mm(n>muM<3MM7>M(MnmMttCtt7JIM)ElO1MM)Mcno>t2)MW(HHMo2tn*(mi1Gr8yblue.06GrayMue.05Graybiue.04Grayblue.03Grayt>lue.02Grayblue_QHexmffKKtt4M0A5“sMtXCt*MOrt2FCHtXFOOHtMDt,WGS14mmo«7»»«)«M1M)«(心SFKe48xM(WlMSms*mnnMW(M7<7M)M*0a7MW(M3QMW(3M1M)0(31WMiaa.PUrPiejnPurple.02PUrPl£03Purple.04Purple_05Purpe.06PurpIeMKX2A×MK*MMUHCXMtoMfX加修MEX02MffHEXHHR«(1“<1X与KeHglmuaQavj)WeJl“3xeMeM9MS)B6<<134S)MWM1M1MsaMtnMWPMOU)m(MlM)MMTM*XM0(7A3M)MS»(2<MHMSe(M3Flndigobke.01MdigObIueJ)2lndigoblue.03lndigoble.04lndigob!ue.05ldigoble.06ldigoblue.07MCXIMAfOxx7aMfXKWFxxM(Xcnf9XXTGac(1“t124S)nootiM)BG(U11M)MMl(IMktljMIlB0J4S)aG<12MHMNHltMl24S»EM7fMm(2HMM)MeSM<XZHSBXaMIMMI(MUM)KMOH1WMMI(MtASW)Primayblue.OlPrimaytoIUej)2PrnayWue_03PrimaybIUe«04Phmayblue.OSPrimayMue.06PriEayblUej)7Ma201(MnKAiaMDtKSFWKKWFFMCICFFMKXeCfWC(2145224»BMR41*1jntM(M1ffJSmMM0M22S2MM.CmHmMMPMJM2S8)KW(MMM)MMcnzmMtt<hmlootNM(tM22EHsa(mjcoAcidblue.01AdMue.02ACidblgqAadblUe.05ACidbIg.06AddNue.07M(XMtfCCXXMAKeMtXOCCItlMoMfOOnKX八anHCXAAnKKXCrForCC2IRMjm(tH7JM)*Qe0>m2n)KBU1M)AOe(MimxT)a7ttM7m)m(msn»4)HQ(11MMI02W)MH<m47)HWAn99MM(IM4100)Cyanj)ICysn.02CyanJWCyanjMCy.05Cya(VO6CyanJ)7KIWMlMaHVWMaOOAAUlMTXMOMWvUmOHrXAMMMfXCCfVltea.ini"蚂HGt(IMOM)M(0tM1)OQemn4MgCSHZ*(IaXe4iZjWe(2MWMS)Hsa.(mioeoHiaOttmanMMnM-VttX)Msa0»7MU)HttMX2.M)msm懒GreenJ)IGreen_02GreefU03Green.04Green.05Gree.06Green_07MaImMKXmoxrMNetnFU>KXFFFCCBM2M1A5MBCmMAsnCmmg0M2412Ma(ASW2M)Htt(»mM)MMBWayE-HQMM(U.M10HMM(M1WOYeIiOW-OIYeltoW_02Ye<low.05YeHow.06Yellow.07mixmMacamsKXRMVMUggXKKMwMUg”KX,FF"OC(2MWM)Kt<nxnMX5oatmiMwMOMIM144)M(miiti)Bee(miM240)Mt(tMM)mcti)MeftnotIttQHE1001MN<144.tM)Ht.(ZIMloelMMImE0range.01OrangeMOrange.03OrangejM0range.050range.06Oran9e.o7Mnmo4xr*M>vMaFmCMtXifmHKXVWUMmuWaCCMammace(2MMMI1(MS7)MaMH71)MBcmutwR0OM111O)aMM(»5440MO)MM.(0M4)MttAH.WQMSBfM10CHMl0M1)HttIMlgRwLOlRed.02RWLo3RWL(MRed.05Red.06ReCLO7*腾讯文档调色板命名图表Part 3定义颜色使用规则1、从调色板中选择合适的颜色并测试从调色板中根据UI中的任务挑选合适的颜色并进行可用性测试，做具体任务中颜色选择的最优解。例如，我们需要选择一个蓝色作为链接色，作为文本，对比度必须达到4.5:1以上才符合WCAG2.0的可用性标准。经过测试我们选择了PrimayblUe-02作为链接色。6.38:1Q5.57 :104.39 :1O2.65 :1Q1.92 :10膈讯文档错接色则试./用,-Pnmaryblue-Ol腾讯文档链接色测试,.用TPrimaryblue-O2脏讯文档错接色测试、.是用了PrimarybIg。3腾讯文档链接色测试，是用了PrimaryblUe-04腾讯文档链接色测试，是用了PrimaryblUe-05腾讯文档的界面中，灰色系列占主导地位，起着至关重要的作用，为产品界面创造结构、表达边界、建立信息层次。在调色板中，我们选择了两种灰色：中性灰色和蓝灰色，来支撑系统的设计。蓝色系列是腾讯文档产品和体验的主要动作颜色。Standardcolor»«XMOMO6HOtAC8Q,304A1*)Gry.04MtXOMOMmMKiooaomMM(Qo0。EGray.03MIXOOOOOOMAmooM>Htt(OOOeM)Gray.08KXOOOOOOMX-SMMW.AM)Gry.07MtXMMoO34、ka