颜色 语义 系统 Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。我们 APP 中的不一致例子接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：如何通过 Getaround 在设计和技术方面管理颜色概述这个系统的局限性，并说明我们如何改进它什么是语义颜色我们是如何实现它的，以及它带来的优势！我们之前在 Getaround 中如何管理颜色？1. 在设计方面和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。2. 在技术方面在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。我们在旧系统中面临的限制在使用这个系统时，团队反复面临同样的问题：如何确保从一位设计师到另一位设计师以相同的方式使用颜色？如果没有适当的指导原则，我们如何确保开发很好的还原？如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？让我们试着找出我们是如何陷入这种境地的？1）没有明确的颜色使用规范所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助2）旧品牌的设计包袱以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。旧驱动器品牌我们对新系统的设想在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：1）制定指导原则我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。2）颜色能通过可用性标准我们如何确保从一开始就设计出易于使用的颜色？3）易于维护并符合未来趋势我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）我们新的颜色系统：语义颜色在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？1）什么是语义颜色？语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……2）从基于外观的配色方案到基于语义的配色方案语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习google： https://material.io/design/color/the-color-system.html#color-theme-creationApple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify： https://polaris.shopify.com/design/colors#navigationAsana： https://asana.com/brand显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。3）深入研究语义颜色我们的新颜色系统由两部分组成：基础色板语义颜色基础调色板我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。基础调色板语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。请参阅此处的命名法和一些示例：语义颜色结构和示例这意味着来自基础调色板的颜色可以用于多种语义颜色：这就是我们根据这个新原则重新调整颜色命名的方式：我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。语义颜色的好处1）语义色彩嵌入设计原则语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。2）解锁黑暗模式语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。明暗模式下的语义颜色 Primary.Background3）语义颜色高效灵活如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。4）颜色组合指南这个系统似乎很容易使用，但设计师仍然有一些问题：我什么时候可以使用正常文字颜色？我什么时候可以使用次级文本颜色？我什么时候可以使用可交互颜色？为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。Figma 中内置的语义色彩交互指南结果采用这种新的颜色系统产生了一些变化：1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到 Dark 模式。这也使库更轻且更易于维护。2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。总结总结下今天学到的内容：1）发现并准确描述团队在使用颜色时遇到的问题2）如何从提出设想，到以新的方式来定义颜色3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。超详细！凤凰新闻「暗黑模式适配落地」全方位复盘凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/colors-standard
用户 语义 个性 日常生活和工作中，我们与各种各样的界面打交道。作为设计师，我们花很多时间去设计好用便捷的流程，打磨精美的视觉呈现，关注数据带来的变化，亦或是从全局出发制定体验策略。往往会忽略了界面中一个重要的组成——语言文字。本篇将重点介绍UX语义个性，包含语义个性的价值、定义、展示场合、塑造方式、典型文案语体等。本指南适用于交互、UI、视觉、产品设计人员、文字设计工作者，以及所有希望通过语言文字让设计更美好的人 为什么？语义个性的价值1. 对于品牌&产品随着经济水平的不断提高，如今用户的消费导向已经悄然从以前的功能导向转移到体验导向，大家愿意为美好的感受买单。同样，许多互联网产品已经进入成熟期，但很多产品功能模式趋同难以在用户心中拉开差异。在这种大环境下，想让品牌&产品在用户心中占有一席之地，除了规划自身独特的功能、打造品牌之外，设计“一种带有个性的语义”同样能够低成本地让产品脱颖而出，提高其友好度、信任度，甚至产生溢价效应。2. 对于用户带有个性的UX语义，能使用户与产品愉悦沟通，产生情感的连接，调动用户快乐、惊喜、信任等情绪。让用户感觉是和一个“人”或是“朋友”在对话，而不是面对着一个冷冰冰的机器。了解一下，什么是语义个性？个性，亦称为人格，通常指个人面貌或心理特征。语义个性，即通过语言文字表达，展现出的鲜明的人格特质。简单来说，就是定义出与用户对话的，是什么样的人，年龄多少，是男是女，做什么职业，性格如何，甚至还可以构想出TA的长相和行为。虽然大部分的UX文案更注重短期价值，只需达到效力即可，但我们也希望文案能在整个产品中延续、更具生命力和影响力。这就需要文案有「被记住」的力量，让用户能感受到的产品背后的性格，也就是语义个性。一旦语义个性构建起来，产品的所有表达和文案都要符合这个“人设”。注意！在适当的场合展示当我们跃跃欲试，想要开始发挥创意书写个性文案之前，必须要注意的一点是：并不是所有产品和所有场合都适合添加个性。一些大综合类服务平台（如58）需要覆盖更多元的业务，更广泛的用户群体，很难聚焦某一个性去触达所有用户。另外，像一些追求效率的场景，需要用户聚焦当下流程、快速做出决策，过多的个性展现可能会产生干扰。例如：B端管理后台，需要快速高效的执行任务我们常接触到的，有以下4个适合展示语义个性的场景：1. 建立初印象用户与产品初次接触的场景，是建立初印象的过程，第一印象非常重要。社会心理学中，对他人“印象”的形成有一个非常重要的规律：首因效应 (primacy effect) ，即“第一印象效应”，是说人们比较重视最先得到的信息，并据此对他人作出判断。通过个性语义的表达，有助于产品更好地展示特点，在用户心中留下更为深刻、加分的初印象。具体体现在产品中，如启动页、开屏、登陆流程、新手引导等。2. 空置场景某些情况下，由于技术或用户操作原因，导致行为空置，且无需进行决策。此时，用户无法与产品产生交互，可能无事可做，甚至可能产生焦虑或烦躁等负面情绪。这时，个性语义的表达，有助于产品更好地安抚用户，甚至成为加分项。具体体现在产品中，如缺省状态、加载等。3. 对话式场景随着技术的发展，自然对话愈发频繁出现在功能中，用户与产品有些天然的对话式场景。如聊天机器人、微聊、直播等。这时，用户的预期便是与“人”对话，对产品的心理预期也随之提高。个性语义在此时需要为用户塑造一个正在与之聊天的“人”，让用户感受到真实。4. 重品牌传递场景还有一些本身就重品牌传递的场景，需要强化个性，强调品牌展现。如成长体系、个人中心、详情页等。产品需要不断告诉用户我们是谁，我们能为你做什么，让用户记住。写！如何塑造语义个性唠叨了这么多，你一定想知道到底如何写？如何才能塑造语义个性？接下来我们就不废话，直接来实际的！（作者在此处小小施展了一下个性）语义个性的塑造是一个复杂而又迷人的过程，涉及「用户分析」「场景分析」「字词选择」「语言风格选择」「语言结构」等等多个方面。从实用可执行的角度来说，我们总结了以下3个步骤，能够顺利地塑造我们产品独特的语义个性：STEP1. 基于用户与产品产品是表达的主体，需要展示个性；用户是表达的对象，要接纳其个性。这是一个双向的过程。因此，我们在开始塑造个性前，要率先进行双向思考：我们的用户（表达对象）是谁？他们的偏好和诉求是什么？我们的产品（表达主体）想向用户展示什么个性？如何让对方接受并喜欢？58UXD公众号语义塑造案例STEP2. 考虑场景与情绪语义个性是相对统一，可辨认的，但语气是会随着场景产生变化的，不同场景下，表达是有差异的。就像我们在与家人唠家常时的语气和在工作开会时的语气显然是不一样的。我们要充分考虑不同场景特征（欢迎、提供错误消息、庆祝成功…），以及用户在此时的情绪（期待、欢喜、紧张…），去定义文案如何相应变化。58UXD公众号语义塑造案例STEP3. 明确表达方式综合用户与场景的考量，最终落到表达上，需要我们反复斟酌，包括字词选择、句式选择，以及语言组合方式等。热情洋溢或简单直给，走心煽情或高冷忧郁，通过不同的表达方式，会给用户带来截然不同的感受，也会使产品在用户心中留下完全不同的个性印象。58UXD公众号语义塑造案例形成语体，让个性可复刻大多数产品和使用场景下，语义表达具有共性和通用特征。在对公司内部产品以及市面上的产品进行大量分析后，我们总结归纳出了以下5种常用语体，具备一定的辨识度，并对每一种语体的特征、写法及应用场景进行详细解读。1. 服务体特征乐于帮助，谦逊礼让，服务感强，对用户展示尊敬语言1）使用敬语词汇，如“您”“请”“尊敬的xx”..2）句式完整，标点使用规范。3）描述详尽，体现关怀。适用场景1）顾问/客服2）用户遇到问题&困难时2. 霸总体特征霸道酷拽，高冷直率，强硬但不强迫，让用户心服口服语言1）主语为“我”，如：“我只说一遍”2）语句简短有气势：“爱发不发”“点我！”“看我！”适用场景引起用户注意，反向刺激用户做某事3. 可爱体特征乖巧惹人爱，无公害，让用户感到亲近语言1）使用可爱软萌的词汇：“好呢”“么么”“好哒”“嗷嗷”“加油鸭”2）生动活泼的语气：“哇哦”“哦～”“呀”“呦”“吧”“！”适用场景1）鼓励或激励用户做某事2）助手&可爱角色的对话表述4. 专家/导师体特征严肃认真，严谨细致，让用户感到专业语言1）陈述客观事实2）使用专业词汇适用场景1）凸显专业性的产品：如知识类/金融类等2）涉及信任相关的场景：保障3）影响用户重要决策场景：下单/支付5. 销售体特征氛围强烈，相对夸张，善用消费者心理语言1）打造消费氛围：“爆卖xxx件” “直降”“5折快抢”“限时抢购 ”“券后仅需xxx元 ”“秒杀价”“首单惊喜价”等2）低价辅助说明：“近59天最低价，即将恢复3.58元”“比日常省7元”“每人限领1次，11月11日24点内有效”等3）推荐场域营造：“好评如潮”“2000+人付款”“收藏上千”“人气飙升店铺”“您多次消费过的商家”“819个质感女人逛过”“200位达人深度挖掘”“近7天销量上千”等适用场景1）运营营销活动2）电商3）直播写在最后个性化文案构建需要综合产品调性、用户特征、当下场景等多方面因素，选择最合适的语体及合适的出现时机。虽然优秀的个性化文案可以对品牌、产品、用户产生正向影响，但切不可违背在《UX语义设计指南基础篇》中提到的三大基本原则[准确] [清晰] [精炼]，否则将存在让用户产生认知负荷(无法理解产品想传达的信息)的风险，顾此失彼。附.参考文献《小小的文案》《触动人心的体验设计文字的艺术》本篇来源：优设网原文地址：https://www.uisdc.com/ux-semantics
张大湿
