设计风格指南：保证效率

作为一名设计师，我们都经历过，处理我们的流程和设计中的不一致。尽管令人伤脑筋，但它帮助确定了一个核心问题：缺乏既定的指导方针。它可以通过对您的设计过程进行一些调整来解决。从设置样式指南开始。

设计师喜欢在画布上自由自在。这很棒，它鼓励创造力。然而，花在做小决定上的时间似乎并不合理。从头开始每个页面将引导您根据您在设计该页面时所处的参考框架进行设计。这正是导致不一致的原因。这些可能是简单的事情，例如不同的内联高度、颜色、字体大小等。

这是否反映了团队缺乏努力，还是表明缺乏风格指南？在本文中，您将学习如何为您的项目制作样式指南。

你为什么要关心？

指南：设置了类型、颜色、声音和语气的指南。这些为您的品牌提供了视觉上的差异化。

节省时间：更少的时间花在辩论不同的视觉选项或回顾过去的例子上。

入职：易于入职新设计师。这意味着更少的“快速通话”。

让我们用正确的术语

这些术语是相互关联的，但它们不是同义词——样式指南、模式库和设计系统。

• 风格指南：设计师在设计产品或产品组件时必须遵循的一组指南。

• 模式库：可重用元素的“库”，例如图标、组件（头像、按钮、输入框）和组件组合（导航、对话框、表单）。使用样式指南制作了一个库。

• 设计系统：这是指比产品本身的视觉方面更广泛的生态系统。它包括样式指南、模式库、文档、代码等。它决定了产品的功能和交互方式。

现在您已经了解了术语，让我们回顾一下您需要什么来启动和运行您的风格指南。

入门

从研究开始，了解您的用户群和品牌价值。您在构建样式指南时的决定将受到此启发。

注意：构建风格指南的每个步骤本身就是一个主题。为了不离题，我添加了一个“深入挖掘”部分供您……深入挖掘。

第 1 步：制作间距系统

只是为什么间距很重要的实际示例。这不是胡言乱语，那是“为什么间距如此重要的一个实际例子”。适当的间距可确保用户更好地使用信息，而间距系统可确保一致性。

首先选择正确的基本单元。我使用8px作为基本单位。它是可扩展的，并提供了全面的选项来构建视觉层次结构（也因为苹果和谷歌建议）。接下来，在您的基本单元中创建变体，以便在您的间距系统中获得空间。

通过使用基本单元的倍数来做到这一点，因为它很容易记住，并且会产生不对称性。总体而言，系统中的 6-8 个值就足够了。它提供了足够的替代方案，并使决策时间最短。另一点是确保相邻值提供足够的视觉区别。例如，在 40px 或 48px 之间进行选择，但不能同时选择两者，因为它们在视觉上相似。

2.设置网格

创建网格时，您需要确保边距和装订线遵循上一步中创建的间距系统。

第 3 步：创建排版比例 

在任何给定时间，几乎 85% 的屏幕都是文本。然而，排版是一种融入 UI 的元素。除非做得不好。强大的排版系统有助于：

• 可读性

• 可访问性

• 视觉层次

• 品牌个性。

选择适合您的品牌基调的字体。错误的字体可以将您品牌的声音从有趣变为无聊，从专业变为业余。提前为所有可能的文本变体设置样式也很重要。这包括 H1、H2、H3、正文、子标题和按钮文本。请记住，视觉层次结构由字体大小、粗细、行高和跟踪决定。

第 4 步：构建调色板 

颜色无疑是与用户交流的最佳方式。使用颜色，您可以吸引他们的注意力，在预期事件发生前提醒他们，或保证已完成任务。然而，有超过 1600 万个十六进制代码，如果没有单一的事实来源，不一致是不可避免的。那么如何选择最好的调色板呢？

主色：首先定义主色。这些颜色使用户熟悉您的品牌。它们通过您的产品和所有平台使用，以提高品牌知名度。

强调色：接下来选择有助于主调色板的强调色，打破单调，并在需要时吸引注意力。

中性色：最后，修复中性色板，就像老朋友一样，不会为聚光灯而战，并在需要时伸出援助之手。这些非常适合背景和禁用状态。

系统颜色：很多设计师不考虑系统颜色。因此，开发人员必须自己掌握并定义这些。开发人员没有冒犯，但过饱和的红色不适合柔和的品牌颜色，因为即使是菜鸟也会同意。

您需要定义的系统颜色是

• 红色错误

• 黄色表示警告

• 成功的绿色

• 蓝色信息

扩展调色板：你改变了多少次颜色的不透明度来创造平衡？现在想象一下另一个设计师做了多少次同样的事情。出于相同目的而具有相同不透明度的概率很低。不要忘记从中生成的新 HEX 代码（感谢颜色选择器）。

随着产品的扩展，基色的新色调得到支撑。这就是不一致性的邪恶种子如何潜入您的系统。为了避免这种情况，定义基色的变体是谨慎的，即使您可能不需要立即使用它们。

在调色板生成器 等工具的帮助下，您将能够为您的主要颜色、强调色和系统颜色创建扩展调色板。

拥护风格指南

如果没有饥饿的胃没有被喂饱，那么制作精良的食谱是没有用的。所有团队（设计、营销和开发）都需要熟悉风格指南，以在所有平台上保持一致的品牌形象。成为风格指南的拥护者并无耻地推广它。通过有趣的演示来教育团队，在站立时谈论它，并在 QA 期间提出它。面对风格指南（你的），并在场帮助团队解决问题或接收反馈。

高质量风格指南的最佳用户体验实践

作为设计师，我们都可以同意，如果用户体验不如用户界面那么令人愉悦，那么产品就毫无价值。通过样式指南，我们迎合了两个用户群——您的团队和您的产品用户。为确保两组都有愉快的体验，这里有一些需要牢记的做法：

易于访问和布局

您的风格指南必须以易于浏览、理解且美观的方式呈现。此外，请确保将其存放在所有团队都可以轻松访问的文件中。我建议使用 Figma 文件并将每个元素划分在单独的页面上。管理和共享样式 的选项使设计团队能够更有效地使用样式指南。

命名约定

设置命名约定可确保团队中的每个人都说同一种语言，从字面上看。与其他利益相关者合作，提出一个适用于所有人的命名系统。

指导方针

添加有关如何使用每个元素的指南，这可以最大限度地减少决策时间，同时变得易于理解。有据可查的指南包括简短说明、注意事项和实际示例。

可访问性

随着技术在全球范围内普及，您的产品不应成为任何人使用的障碍。为了获得真正引人入胜的用户体验，您的设计需要遵循可访问性标准。

响应能力

在当前的技术场景中，无法预测用户将使用什么设备与产品进行交互。这就是为什么构建支持所有设备的东西总是一个好主意的原因。构建一个适应不同视口大小的排版系统，以创建更有意义的层次结构和布局。此外，添加有关如何在不同设备上使用间距系统的指南。

结论

样式指南可帮助您和您的团队节省时间并构建更一致的产品。然而，建造一个不应该是压倒性的。从您的团队需要的开始，然后逐步扩展。让您的团队了解最新进展，并在您做的时候玩得开心。

从一位设计师到另一位设计师，构建风格指南是您为自己和团队所做的最好的事情之一。我希望你喜欢构建风格指南，就像我喜欢写它们一样。

本文内容为转载