创建 UI 风格指南（+Figma 模板）

Devinlpass

UI 中的风格指南是什么？ 样式指南是记录设计的所有基本元素的文档：颜色的选择、字体（粗细和样式）、排版、按钮类型等等。风格指南可能会很快变得复杂，并在您注意到之前就变成设计系统。 设计系统与风格指南不同。它要复杂得多，包括组件、表和各种类型的状态。我们的重点将放在我之前提到的基本构建块上。让我们详细了解一下。 风格指南的目的是什么？ 以目的为导向的决策可以帮助我们确定风格选择背后的原因。它为我们如何向客户展示产品铺平了道路。在开始工作之前，鹰眼观察是必不可少的。





您的目标将激励和启发您寻找各种创造性的方法来使产品的 UI 变得美观。 您公司的愿景、使命和期望也可以帮助您  加拿大电话号码列表 做出以目的为导向的决策。一旦目标驱使您，下一步就是开始工作并构建 UI 风格指南。 如何建立和维护风格指南？ 当您开始使用样式指南时，打开一个新的 Figma 文件。开始考虑品牌或企业与您共享的颜色、字体和其他 UI 元素。当您将它们分解并仔细记录在风格指南中时，您将反思许多其他方面，例如图标、按钮和所有基本构建块。 让我们从颜色开始，逐步了解四个基本元素 - 希望通过这些信息，您将能够构建样式指南并根据您的需求进行自定义。 颜色 考虑您的颜色，在指南中使用它们，并确保它们易于使用。至此，您的团队可能已经决定所提供的哪种颜色适合产品的主题。 如果您还没有这样做：任务是选择两种颜色：主色和次要颜色。这两种颜色将成为您产品的主要颜色。这些颜色应该是互补的。











现在您可能会想，不同的颜色怎么样？您将在公司拥有的任何说明性、图形和数据表示目的中使用这些内容。以下是创建调色板并在风格指南中展示它们的步骤。 添加您的主色 在 Figma 文件中，创建一个形状并用主颜色填充它。您可以使用任何您想要的样式： 默认蓝色主色 概述设计状态的颜色 基于此颜色，如果您的团队还没有创建一些基本状态，则您将需要创建一些基本状态：悬停、按下/点击以及可用于其他交互元素（例如搜索栏、切换按钮等）的浅色阴影。一旦你概述了这些，它就会看起来像这样： 分配给设计状态的颜色 对辅助色重复此过程 对辅助颜色也重复此过程，这应该提供对比度和视觉趣味： 分配给状态的辅助颜色 记录文字颜色 在此步骤中，您还将考虑文本颜色。这些也将包括您的暗模式文本。如下所示，您将在黑色背景上使用白色正文和白色副文本。文本颜色通常包括正文、任何副文本、成功颜色和错误状态颜色： 分配给状态的文本颜色 边框、卡片、线条 在此步骤中，您将考虑所有背景、卡片、线条和分隔符颜色。这些通常由多种色调组成，可以以多种方式使用。