《如何更好的统一颜色规范？.docx》由会员分享，可在线阅读，更多相关《如何更好的统一颜色规范？.docx（24页珍藏版）》请在课桌文档上搜索。
1、咱们平时在做Ul组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。文末福利：今日素材分享bthereoryinteriordmoge?我们花了几个月的时间改进了设计系统CObaIt中颜色的处理方式。颜色是UI的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。但如果我们在使用颜色上没有明确的指导原则，如颜色被团队中的设计师按喜好使用时，将会导致
2、产品看起来非常混乱。TitteIndigoOarkBackgroundWMIconmdClXKKWfQUfOXdBackgroundGrtyTKI8Uck我们APP中的不一致例子接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单： 如何通过Getaround在设计和技术方面管理颜色 概述这个系统的局限性，并说明我们如何改进它 什么是语义颜色 我们是如何实现它的，以及它带来的优势！1、我们之前在Getaround中如何管理颜色？在设计方面lightDescriptionProperties+757575100%ColorStylesQ
3、QggEditstyleXQSearchindigo.dark basesystmgraphit base lightsystem/grey.darkbase和许多设计团队一样，我们使用Figma作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOSAndroidWeb、电子邮件）。颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。在技术方面ColorsColorsSemanticCobalt.TertSurxJMClCC*GW).Pu
4、,i(M01AA7)TertOetoi(CotMAGrapNteLioht).TurquoiM(*5EC0)TxtActv(C0Mtm*90*).S呷3Me).IMirMCeMlCObaLMieOOHk).woOrt(m44)ToxtPcoMc(CbM5(加若用.A2(C4EOiriO.&2h*4血7)在我们的APP中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于iOS,开发用的也不多。2、我们在旧系统中面临的限制在使用这个系统时，团队反复面临同样的问题： 如何确保从一位设计师到另一位设计师以相同的方式使用颜色？ 如果没有适当的指导原则，我们如何确保开发很好的还原？ 如果明天
5、我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一7让我们试着找出我们是如何陷入这种境地的？1）没有明确的颜色使用规范所有设计师都使用相同的色板，但自2019年GetarOUnd品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。Isthereanyinteriordamage?GreydarkGreybaseGreylightGreylighter例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助2）旧品牌的设计包袱以前品牌的一些旧颜色仍在
6、使用（按钮上的蓝色阴影，标题）。到现在也没有真正的行动计划来迭代它们。getaroundFlNAUSeYOURREQUESTYou,realmostdone!AshortcallwillallowustoansweryourquestionsandIplanthefreeinstallationofOpeninyourcarICallmebacknowNotavailable?Scheduleanappointment154ownersregisteredtheircartoday事rdzIavoiturproprIGrcyPurple。EnvoidesphotosVoirmalocation
7、 WhiteAppearancebasedcolorschemeTAMBackgroundAidetPRET? RARTEZ.BackgroufXl,0SoyezPonCtUelpourIeretourIconConduisezPrUdemmen，GordezWVoitUrepropr1StrokeButtonBackground,*EnvoidesphotosVoirmaIocatkxvButtonLabelSemanticbasedcolorscheme语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习google：https：/materi
8、al.iodesign/color/the-color-systeni.html#color-theme-creationApple：https：/Shopify：https：/Asana：https：/显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。3）深入研究语义颜色我们的新颜色系统由两部分组成：基础色板语义颜色CMM94tMOoo一一NxtPaletteSemanticcolorsColorsappliedtoUlelements基础调色板我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都
9、采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。PurpteGrmOron9*Others基础调色板语义颜色语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色），而是指Ul元素它们被应用于（文本、图标、按钮、背景）以及该元素的状态（活动、非活动、成功）。请参阅此处的命名法和一些示例：Text.BaseText.SubduedBackgroundJnfoButtonicon.Primary语义颜色结构和示例这意味着来自基础调色
10、板的颜色可以用于多种语义颜色:AbcText.Accentpurple/500Icon.AccentPUrPie/500Purple/500ButtonLabelButtonLabeLAccentAItprpi500AbcText.AccentAltpurple500这就是我们根据这个新原则重新调整颜色命名的方式:OldcolorschemeWhiteGraphiteGraphite-LightGetaroundconnect*Self-servicecar.Unlockwithyourphone.Bookinstantly,evenlastminute.GreyGreyWhitePurple
11、GraphiteGetaroundconnect.Self-servicecar.Unlockwithyourphone.Bkinstantly,evenlastminute.PurplePurplePurplelightNewcolorschemeBackground.PrimaryText.BaseText.SubduedText.AccentAItText.BaseFiILSubduedStroke.BaseBackground-SecondaryGetaroundconnect.Self-servicecar.Unlockwithyourphone.Bkinstantly,evenla
12、stminute.Getaroundconnect,Self-servicecar. Unlock with your phone. Bk instantly, even last minute.FiILAccentStroke.AccentAItBackground.AccentAIt我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。BorderSuccessSubduedIlJlJUlElementColor ro
13、leStateProductsAddproductOTosavethisproduct,2chaiIconCritical)needtobemade:EnteratitleSurfaceCriticalSubdued-O.Addaweightabove0BorderCriticalTitle9-0Enteratitle5、语义颜色的好处）语义色彩嵌入设计原则语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。Text.BseText.SubduedText.Accent例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中，*Ac
14、cent*state用于交互元素。2）解锁黑暗模式语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。PrimaryBackgroundinLightmodeWhiteBlack.500明暗模式下的语义颜色Primary.Background3）语义颜色高效灵活如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调
15、色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。另一种情况可能是更新特定Ul元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新ButtonBackground.Priinary颜色，非常简单。如果没有该系统，更新颜色将需要经过大量QA以确保将更改应用到任何地方。BasescreenMai41AM-(：,MIHM)Isthere any interior damage?Remf to check the tdk sets. under te Mtt,s damaged?Dashboard WMSCrOenBoot Aoor Electr
16、oncsOerUpdate11i.41*MIsthere any interior damage?Remembr to check the tect seats, dr the men nd the trunk.CvvtytNng fw Som(Nng is damaQdWhf$ damaged?DMhboard WMKrMnBoot HOof ElKtronict01MrtUpdate2T41AM-*JIs there any interior damage?ne dam09dWhafsdamaged?ContifMCtiu&4）颜色组合指南这个系统似乎很容易使用，但设计师仍然有一些问题:
17、我什么时候可以使用正常文字颜色？ 我什么时候可以使用次级文本颜色？ 我什么时候可以使用可交互颜色？为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在fgma原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。点击可以查看大图Figma中内置的语义色彩交互指南CobaltColorScheme - Light (Design)结果采用这种新的颜色系统产生了一些变化：1）我们从Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用Figma开关功能轻松地将设计文件从ULight切换到Dark模式。这也使库更轻且更易于维护。ColorsforAppsDarkModeColorsforApps LightModeColorsDarkEdited 20 days agoColorsLightEdited21minutesago2）语义颜色已在我们的iOS和Android应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。
