你好，设计师，欢迎加入翻阅计划 2025 ，和我们一起提升产品和设计思维，成为改变世界的新时代设计师。目标每年至少共读 100 篇文章，接下来，我们一起开始今天的阅读 📖 。
设计系统是产品能够呈现好体验的基础，是非常重要的组成部分，因此，我们所参与的每一个产品，我们都会积极构建或完善设计系统。其中，我们在重构大多数产品中发现，色彩应用往往是最容易混乱的，也最容易导致产品观感不佳的因素之一。我们通常会根据需要逐步引入颜色。如果二级文本需要一种灰色，那么，我们就直接新增一个灰色。同样，如果图标需要更浅一点的灰色，那么，我们也直接新增。这是一种非常普遍的工作流程。
如果，此时我需要一种灰色来勾勒文本框。然而，这种灰色对于分隔线而言又太深，对于文本而言又太浅。其实，问题已经开始出现，接下来，就会像滚雪球一样越滚越大，直至到某个阶段，一个产品所使用的颜色越来越多，导致系统失去连贯性。这种情况是不是很熟悉呢？（不过，也有很多不专业的设计师根本不在意这些细节）在我们服务众多不同行业，不同终端的产品，几乎所有界面的色彩处理流程都是极为相似的。4. 负面、正面和警告状态分别使用红色❤️、绿色💚和橙色🧡。5. 在强调色或深色背景上的表面及元素使用白色🤍。6. 另外，图表或比标签还会用到几种额外的颜色🩵💜🩷💛 。接下来，我分享在重构 Aloha 浏览器所采用的方法，和大家一起探讨。我通常从强调色开始入手。它往往是品牌色，赋予产品界面的独特性。同时，我还需要这个颜色的不同深浅色调。那么，我就开始准备这些色调。为确保色调之间过渡自然，保持色调一致性，我会使用渐变分割法。这是我从前阿里的同事那学到的技巧。现在，将渐变分成 9 个等份，把渐变的端点移到第一段和最后一段的中心位置。有时候，在界面中使用同一色调的不同深浅，可能会显得单调。注意看，如果把较浅的色调调得暖一些，整体看起来就会更活泼。如果想让色板更丰富多样，不要害怕改变渐变端点的色调。在这个例子，我把深色调得更偏紫，浅色调得更偏绿。我发现某些颜色看起来不太理想。通过在渐变中添加额外的点并调整亮度，色板仍能保持精准，而且所有颜色现在看起来都还不错！直至对强调色的色板满意后，用同样的方法为红色、绿色和橙色创建色板。如果通过加黑色来加深橙色，橙色会变得暗淡。加点红色来加深橙色会更好。直至对这些初始颜色感到满意后，就把注意力转移到黑色和灰色上。此时，我就可以为文本和描边挑选合适的色调了。我会把黑色、灰色和白色的色板分开，即便它们只是同一颜色的不同深浅。界面通常需要多种灰色和黑色，尤其在支持深色模式时。因此，将它们分成不同色板使用会更方便。此外，透明色调的使用，这一点我们稍后也会讲到。到目前为止，我们只讨论了不透明的纯色。然而，在实际运用中，我们经常会需要透明色，比如：用于遮罩或各种视觉效果。在多数情况下，这些透明色指的是黑色和白色的透明色调。如果需要鲜艳颜色的透明元素，那就选该颜色的某个色调，以不同透明度添加到调色板里。如果界面要实现深色模式，那么，就为降低亮度后的鲜明色彩单独建立色板。黑色和灰色的色板在深色和浅色模式下都能顺畅适配。在重构 Aloha 浏览器的时候，我将额外的颜色用于图表和标签。虽然这些颜色不一定需要多种色调，但是，我还是决定把它们整合到一个调色板里。现在，可以把这些颜色融入到界面里了。首先，我会给每一个颜色命名。在每个色板中，我给深浅不同的颜色从 100 到 900 编号。为什么用这种编号方式而不是 1、2、3… 呢？这种方式能让我们根据需要在中间插入任意多的色调，比如 550、575，或者 950、975 等等。很好，构建一个最基础的色板，完成。此时，把它想象成我们设计界面的颜料盒。不要着急开始使用，下一步，我还要制定颜色使用准则，以免在这一堆颜色在使用过程中造成混乱。下一章，我们在一起深入了解色板，并引入语义层。最后，我们希望这篇文章能够为你提供一些小小的启发。对了，不要忘记给我们一键三连哟！（点赞👍 、推荐 🩷 和分享🤝），你的支持是我们坚持分享的动力。如果你对【设计】感兴趣，可以持续关注我们的公众号【三分设】并添加为常读。如果你在【职业】【副业】【创业】遇到疑惑，欢迎加入我们的【知识星球】，你可以找到答案和伙伴。我们会在每周六的晚上，通过视频号（📱）直播，和设计师们连麦，解答用户体验设计相关案例、职业和创业方面的问题。欢迎你来连麦。- END -
该文章部分观点和图片均来自网络
内容为个人职场生涯或阅读国外文章的所思所想
如在阅读过程中发现错误与疏漏之处
欢迎广大粉丝家人不吝指出
如需转载，请注明来自#三分设
本文已获得原作者授权翻译和转载
如需获取授权截图和原文链接
可联系小助手【小小虫】
期待与更优秀产品设计师一起成长
👇👇👇
共创 / 交流 / 成长
扫码进群
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
