你好，设计师，欢迎加入翻阅计划 2025 ，和我们一起提升产品和设计思维，成为改变世界的新时代设计师。目标每年至少共读 100 篇文章，接下来，我们一起开始今天的阅读 📖 。
设计系统是产品能够呈现好体验的基础，是非常重要的组成部分，因此，我们所参与的每一个产品，我们都会积极构建或完善设计系统。其中，我们在重构大多数产品中发现，色彩应用往往是最容易混乱的，也最容易导致产品观感不佳的因素之一。我们通常会根据需要逐步引入颜色。如果二级文本需要一种灰色，那么，我们就直接新增一个灰色。同样，如果图标需要更浅一点的灰色，那么，我们也直接新增。这是一种非常普遍的工作流程。
如果，此时我需要一种灰色来勾勒文本框。然而，这种灰色对于分隔线而言又太深，对于文本而言又太浅。其实，问题已经开始出现，接下来，就会像滚雪球一样越滚越大，直至到某个阶段，一个产品所使用的颜色越来越多，导致系统失去连贯性。这种情况是不是很熟悉呢？（不过，也有很多不专业的设计师根本不在意这些细节）在我们服务众多不同行业，不同终端的产品，几乎所有界面的色彩处理流程都是极为相似的。4. 负面、正面和警告状态分别使用红色❤️、绿色💚和橙色🧡。5. 在强调色或深色背景上的表面及元素使用白色🤍。6. 另外，图表或比标签还会用到几种额外的颜色🩵💜🩷💛 。接下来，我分享在重构 Aloha 浏览器所采用的方法，和大家一起探讨。我通常从强调色开始入手。它往往是品牌色，赋予产品界面的独特性。同时，我还需要这个颜色的不同深浅色调。那么，我就开始准备这些色调。为确保色调之间过渡自然，保持色调一致性，我会使用渐变分割法。这是我从前阿里的同事那学到的技巧。现在，将渐变分成 9 个等份，把渐变的端点移到第一段和最后一段的中心位置。有时候，在界面中使用同一色调的不同深浅，可能会显得单调。注意看，如果把较浅的色调调得暖一些，整体看起来就会更活泼。如果想让色板更丰富多样，不要害怕改变渐变端点的色调。在这个例子，我把深色调得更偏紫，浅色调得更偏绿。我发现某些颜色看起来不太理想。通过在渐变中添加额外的点并调整亮度，色板仍能保持精准，而且所有颜色现在看起来都还不错！直至对强调色的色板满意后，用同样的方法为红色、绿色和橙色创建色板。如果通过加黑色来加深橙色，橙色会变得暗淡。加点红色来加深橙色会更好。直至对这些初始颜色感到满意后，就把注意力转移到黑色和灰色上。此时，我就可以为文本和描边挑选合适的色调了。我会把黑色、灰色和白色的色板分开，即便它们只是同一颜色的不同深浅。界面通常需要多种灰色和黑色，尤其在支持深色模式时。因此，将它们分成不同色板使用会更方便。此外，透明色调的使用，这一点我们稍后也会讲到。到目前为止，我们只讨论了不透明的纯色。然而，在实际运用中，我们经常会需要透明色，比如：用于遮罩或各种视觉效果。在多数情况下，这些透明色指的是黑色和白色的透明色调。如果需要鲜艳颜色的透明元素，那就选该颜色的某个色调，以不同透明度添加到调色板里。如果界面要实现深色模式，那么，就为降低亮度后的鲜明色彩单独建立色板。黑色和灰色的色板在深色和浅色模式下都能顺畅适配。在重构 Aloha 浏览器的时候，我将额外的颜色用于图表和标签。虽然这些颜色不一定需要多种色调，但是，我还是决定把它们整合到一个调色板里。现在，可以把这些颜色融入到界面里了。首先，我会给每一个颜色命名。在每个色板中，我给深浅不同的颜色从 100 到 900 编号。为什么用这种编号方式而不是 1、2、3… 呢？这种方式能让我们根据需要在中间插入任意多的色调，比如 550、575，或者 950、975 等等。很好，构建一个最基础的色板，完成。此时，把它想象成我们设计界面的颜料盒。不要着急开始使用，下一步，我还要制定颜色使用准则，以免在这一堆颜色在使用过程中造成混乱。下一章，我们在一起深入了解色板，并引入语义层。
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實(shí)的服務(wù)了近萬家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
