腾讯文档 - 色彩系统应用篇.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悔.训H»IttQattM)Gray.05MDCMOOOOtXXXMCoMCMaAfBOMM)(0Q00M)MsaZaaM)MM(oqqmGrayj)2GCay-OIMnt4S40MG(M.JQ)MS.OlMlMIGrayblUe.06MX1MTBOB<mIM1430MSamM卬GSyblg.05hrccMiM(2M20)Nt(at2)GrayMue.04MnfWWOK(.W)Ntt(21<13)Grayblue-03ICXnnF7Mt(MMUQ0ixf7)GmyblUe.02MaR>M0CMa4S1)Hta(MIW)GSybIUe-OlMtX2AMM2(UMlM)IndigoMueeOIMXMSlUMW(1M91MDHn(M43M)lnchgoblue.02HEXM0ffM(M134QldiMue.03mumw*(M3MIMflobiU¢.04XXMt9*0<MIMS)0CMtMM)ldgoblue.05MtXDttWf*G(1M1M)IndigoMUe.06MtXflMlfHQ(1M9124SMW<M3M)lndigoblu.07同时我们也使用了其他颜色以满足一些冲突性任务（警示等）的颜色使用，这些颜色需要谨慎、有目的地使用。criticalcolorMOttt2424>Q (22AMMMW (VMM)Re(LOlKKCBMMa (2MMf7) Mie(m.n«z)RedqMaR4PQ 0UT1E HaB(OngRedJnNu*rrmQeyER<L04KKBAW1cm 143 IM) MSB e XwOIRed.O5<xrrceccao (m 204.200 w(on>oo)Re<L06KK9ftut wot (nsMM0) Mn p&gRd,07MXHFCt*mM2S223f)YdloW_072、根据任务定义颜色的使用规则经常会有设计师问，"这里我能用这个灰色吗？"出现这种问题，根本上还是颜色使用规则定义的不够清晰，含混的相传的规则会导致更多的混乱。于是，需要我们根据任务和使用场景把颜色的使用规则清晰的定义。首先定义在界面中占主导地位的灰色、蓝色的使用规则。蓝灰色Grayblue:在腾讯文档中，蓝灰色与品牌蓝共同建立品牌印象，由此，蓝灰色主要应用于与风格相关的场景。包括：图标色、填充底色及大面积的背景色等。GraybluePaleneMCX4S40MRM:(H.W)HW(2V23.35)MCXIIMfRGO(1291M143)KS(JItIOM)Hex：ccooRG(2O>m2O9)MSB(2203S2)MtXCMMOAGft(mnnMSB(210293)HCX;FWV7RGr(2432U247)HS8:(21OX")MtXFWAFtRG(249190.2S1)MSBC210.1.M)GrayblueJ)IGrayblg02Grayblue_03Grayblue_04GraybIue-OSGrayblue_06堵:标*堵:境充色埼，：主图睇；展色button色；pcaew*；“助IB嫁；索松；gut；灰色Ugltll；MobileMe#，；*mh.中性灰色_Gray:中性灰色主要应用于一些全局系统行为。如：文本、分割线及交互反馈hover、PreSS等场景。GrayPaletteXXOOOoOoMXMtX000000M%MtloomomMtXOOOOoO24、MtX0000001，、oooooomNtXOOOOOO¼MtX0000004Xhgh(OOOOM)RGiA(00.00M>HCA(0004)IlGaA:(0QOQ4)RGA(000ai>AG<000012)HGA(OOOCM)RGK(006004)Mse(o©OOghsooeo.M)M»(000.0.4)M5(OOOA24)MSt:<0A00.U)Mie(Q.0.0A12)(0.000f)MM：¢000004)GraySPjnGrayjsp_02Grayjsp.03GraySPQGrayjsp_05Gray.tsp.06Grayjsp.07Grayjsp_08t*：文色一线主文本；二爆4助文本；三UM助文本；引用字色；W助文本；不可网文本；引号住文本；i*：分flift交互质0工友Vl技；浸友分幕线；list停底色bver；BBMZIist点由底色PrCg；品牌蓝色.PrimaybIUe:品牌蓝色主要应用于系统中的各种行为，如蓝色图标、button.文本链接等。BluePaletteHeC134AtORO8(1S124S)HSa(23.M)KX175CEBRGB(1M.9124S)M»:(2*e3M)HEXIEWfRG(1M.91145)MDtSCWFHGB(1M9)14S)MSB;(2HM.M)MEXsMetFfa(1M.9124S)HSP91M>MtX:CnMF,RG:(15t1.2O)KS8:pet«3蜘HCXrCDfMFFR0a(16S91.245)HSft(263gPrimaybIueeOIPrimayblUej)2PrimaybIUeJ)3PrimaybIUjo4Primayblue.05PrimayblUj06PrimaybIg07：交互友馆第：交互质0:HtfUBJB««：交互皮0««：交互反0增量：宴色BBbuttonpmBfttxittonhow;fibuttor;augprws;afttaghow;nE色SB标prrs；越色BB标bver；巨色BB标；Bftu(增：文*文*匿僵色；其次定义在界面中用于警示、状态提醒的其他颜色的使用规则。红色_Red:红色主要应用于系统中需要警示的场景，如红色警示图形、错误文本、红色tag等。BluePaletteHEX:424Mfr<224MM)KS»(OMM)HEXmRG*(m54.57)H8(3977W)MeLFW7Xft(2Sm71)MSB(OTlIOQ)hexmmHGftOSSlM114)HAmuiooiHEXRAMSM3&(2SS.1M.143)Q(OXiOO)HEXFFCCCCM8(2SS204204)HSah>jooo)hexmmMB(2S5M.240)Hsa(O6ioo)Red。Red.02Red.03RMo4Red.05Red.06RecL07埸：Slfifll埸：SIfttB增：V9HB埸：S£fi«埸：SKfitStv：承色充tlbutto-presi;ilbuttonover;il色button;tlftug-preis;fttag-hover;Uftutil色BB标PreSS；UfeBIthover；t色国标；f>iI<VmW*bover；埸It：承文/稽谡文本；其他颜色：在腾讯文档中，会针对不同的任务应用不同的颜色，如左滑操作、成功提示、高亮显示等。缮：左滑n成功8B标；品类图标基准色：在腾讯文档中，不同的品类有不同的基准色。ExtendedcolorM*124S)MSaPurpe.03HEXM60FFRGB (4IO9 2S6)HSB (21167 100)lnd9blue.03HEXIEMFFRG8 (3ft1112S5)HS8 (21*M100)PrknyMu.O3eVa)Mndfnp8nowdagrm文0Q萼记XfIRHoder SmartSheetmOOAASO RGeglmtI)MS8 (1S2.YM47)Aliexcel«B«Form»0FF4747 noB：(mn ) Mse (amoo)RWl.03POFPart 4颜色变量的语义化命名定义了颜色在系统设计中的使用规则后，我们需要根据颜色变量的使用用途对其进行语义化命名。一套好的语义化命名规则需要易于维护且具备可拓展性，如果只是将调色板的色值命名为blue-01.blue-02.,语义化的收益并不明显。哪天设计团队需要调整品牌风格，或是苹果又掀起什么新潮流，把所有命名为blue.x的变量改为gradient,serenity,对于开发来说也是巨大的灾难。根据HIG的建议，语义化命名不应该描述外观或者色值,而是指明这个颜色的任务用途标签Labels,分割线Sepatators或者填充Fill0在思考如何赋予颜色语义化的命名时，设计师也需要用更概括和结构化的视角来看待界面设计，同时也需与开发同学达成一致，使用同样的命名，满足以更好地维护一套收敛和统一的设计语言。在腾讯文档中，颜色的任务用途定义为为以下几种：背景色Background.文本色Text、图标色ICOn、分割线Border、透明填充Transparentfillx实色填充OPaqUefill、默认交互反馈Feedback.语义Intent0统一使用Ultrastrongxstrong,medium,weakxUItraWeak作为后缀来表达颜色强度。在需要更明确的用途说明的任务中，直接描述其用途，例如：hoverfpressed,disabled等。OTncnt Docs _ Color Pal<tVisualDesign2020-.2021JTncent Docs _ Color PalttleVisualDes>gn 20202021*腾讯文档颜色变量语义化命名卡Part5建设团队协同工作流以上种种，最终目的在于建设团队的协同工作流，将颜色变量(colortoken)嵌入设计组件中与开发代码形成联动，便于设计利用变量及组件、开发利用程序中的变量来做全局修改，横向提升团队的协作效率。1、设计内协同：在Figma中生成颜色变量在设计系统中，颜色变量属于底层的设计原子，需要将其生成为颜色变量并嵌入到设计组件中，便于设计内部使用。我们将已根据任务用途命名的色值，生成figma中的颜色样式(colorstyle),后续无论是进行组件的设计，还是项目的设计，都可以直接赋予设计元素明确的颜色样式。颜色样式基础色阶腾讯文档TDoC文本Text text-ultrastrong text-strong4，text-mediumtext-weaktext-ultraweak text-link text-critical图标Icon icon-strong icon-mediumicon-weak分割线Borderborder-ultrastrongborder-strongborder-mediumborder-weak2、设计组件与开发代码联动：利用颜色变量表进行信息同步我们生成了一个面向内部、外部的颜色变量表，进行颜色变量的说明和信息的同步，沉淀落到实处的资料文档。（此处推荐使用腾讯文档，多人协作实时沟通）»1f便网场.讯文档色名十六造色值色文色TextB.Y.-,r.!r,一ifi文本；OreHIpOlOOOOOO88%IMMlmggryg02OOO(XX)64%lxl-mdium三Ift助文本；引用；说描述vr(XXXXX)40%<,«!C4kZM助文本,不可用文本；引号住文本；jw-m><x000024%五级助文本,不可用文*;兜底I的佟文本.OreHiP05O(XXXX)16SIMHinkWOPrVnayMJ*02useeslext-or打电示IZWI漏霰文本；r(MOE363SUkxnCorwtrongIootMrlHBM:gryt>lueO1464OSAcorwndwm叫朋蛹；gr吩202BleeeFCyAr.IMBliU外RffiF助明作；关用in!S色；gryt>lu03C8C1分ImBogborf-wak法的分1线grW)00004¾bortJef<n(um次浅的分1钱ryJ>O7OOOOOO8%borr-1rong第分SmJW-P*00000012%bor-unrlrong里的分XiS0ry-tpO5(XXXXX)16%tnjueFtsp-M<wak半透明的亮色,ffinw.假如控忤M处的nil色不定的.侬使用了材质,财箜用华造明色.flrytM)0000004%tep-MMwdiumgraHM)7OOOOOO¼l*WongOy-ttp(XXXXX)12%pMuratrongQrHspO6000016%,Ag静透明的事亮色.用于朗可厮灶皆景色的元K.在QS中.WOI5B酩处的IiJMI色是定的.WttW赛色.RfinControhSw<chosghOffOvodaySdebefonIyLgrayt>iu<OF9FAFBMnMumlf*VW；灰色Sg;grayt>lue-05F3F5F7'HrC7灰色button；flryWu*04E9E8EDU3grvytMu<3cc交互反0FfbKKIMdbKMiOMf如校件无将义.使用Ii色作为®ti交互反情IB标/M停底色.9rrg900004%IltdbBClMCflkB为整传无特"定义.使Im色作为StiA交H反情IB标”点击底色；(XXXXX)8%fedback-ooM代立品。的高亮色文/ajuc色；IEeFFF8%不作达星的高奥色文本选中庭色；yhow)7FFFCEBbg4v1-dtouBaBWfiPeHMAlHMlwrtFFFFFFbg4v1wMkpc«wtiramgrytMu06FXM8TokenRoieMxvalue*腾讯文档颜色变量表最终形成了设计组件库与开发组件库的联动，构建了一个协同工作流,横向提升工作效率。