什么是前端风格指南?

前端风格指南已经成为用户体验实践中越来越普遍的可交付内容。正如Jeff Gothelf和Josh Seiden在他们的书中所描述的精益UX,他们起源于敏捷或精益环境．

定义:前端风格指南是产品用户界面中所有元素的模块化集合，以及代码片段，以便开发人员在需要时复制和粘贴以实现这些元素．它们包括常见的UI组件，如按钮、表单输入元素、导航菜单、模态覆盖和图标。

前端风格指南是一个可交付成果由UX团队创建(通常是与工程团队协调)工具整个团队使用模块化格式来保持一致、灵活的产品设计。

前端风格指南不同于设计模式库，后者是用户体验从业者长期使用的工具，用来定义广泛的设计思想，而不是具体的实现细节。不幸的是,一些支持者前端风格指南将它们称为模式库，这在UX社区中引起了一些困惑。

Salesforce闪电设计系统截图
Salesforce的闪电设计系统显示一个UI元素，按钮组基地，以及如何实现它的示例、它应该如何工作的指导方针，以及何时使用替代变体(例如禁用按钮组)应使用。这个例子是一个动态元素，它具有交互性，并且表现出与最终产品相同的行为。

前端风格指南的UX好处

样式指南的目的是收集模块库中的所有产品接口元素。它在两方面给用户体验团队带来了好处:(1)原型化想法和实施新设计变得更加高效，(2)一致的视觉设计可以很容易地在整个产品中实施。设计师和开发人员和其他人一样懒惰。(从积极的意义上说，这是“懒惰”，因为它保留了公司的努力和资源。)因此，如果做正确的事情和创建一致的用户界面的工作更少，他们更有可能这样做，而不是发明一个新的，不一致的设计或实现。

当一个成熟的前端风格指南存在时，UX团队会花更少的时间为每个新想法创建高保真的设计模型。相反，可交付的主要设计规范可以是一个快速的草图，明确地引用了在设计中应用的组件。这样的现有模块库还允许快速高保真原型:UX团队可以快速组装一个现实的交互式原型，可以用于可用性测试或与涉众共享。

前端风格指南不是编辑或品牌风格指南

你可能已经熟悉了另外两种类型的样式指南:

  1. 编辑风格指南指定写作风格、语法、标点符号和其他内容编辑规则。许多网站和大多数出版物都有这样的风格指南，内容团队应该遵循它们。
  2. 品牌风格指南通常指定与品牌相关的规则，如可接受的标识用法、调色板和排版。

与编辑风格指南不同，前端风格指南通常不包括与写作相关的指南。然而，它们通常与品牌风格指南有很大的重叠——除了UI组件的规则和描述之外，它们还包括与品牌相关的元素和指南。

Adobe公司品牌指南截图
Adobe的“企业品牌指南”是品牌风格指南和不前端风格指南。前端样式指南通常包含许多品牌指南文档中的元素。

区分前端样式指南和其他类型样式指南的最重要的特性是，前端样式指南很少是静态的，而是UI元素描述和相应代码片段的活集合。

最常见的是，前端风格指南采用网页或其他交互式数字资产的形式，而不是PDF。通常，您可以与前端样式指南中的所有组件进行交互，许多开发团队选择实现这些组件，以便对样式指南中的组件所做的任何更改也将自动更新产品的设计。这不是一个有效的风格指南的必要条件，但它可以帮助加强严格的使用。

前端风格指南包括响应式设计模式

在响应的设计在美国，前端风格指南不仅应该定义界面组件，还应该描述它们的样式和用法如何在不同的屏幕尺寸上有所不同。以下是一些有用的信息:

  • 布局网格表示不同的组件应该如何在不同的屏幕大小的上下文中使用
  • 在不同的屏幕尺寸上使用时，公共元素周围的间距
  • 在界面中放置特定组件的指导方针
    (这些指导原则有助于加强一致性:例如，在移动应用程序中，标题栏和导航元素通常会出现在大多数屏幕的顶部，所以在风格指南中定义这一点有助于避免一次性的屏幕设计。)
谷歌材质设计截图
谷歌的材料设计风格指南包括如何使用响应式网格系统，以及界面的各个部分应该放在哪里。

前端风格指南的8个主要要求清单

在创建风格指南时，请确保包含以下8个关键特性:

  1. 表的内容它将组件划分为易于查找的类别
  2. 响应式布局或网格系统用于放置常见的UI元素
  3. 产品的调色板(格式合适，例如Web的HEX, iOS应用的UIColor)
  4. (如字体样式。H1标题，正文，照片的标题文本)，这应该包括字体名称和铸造，大小，重量，前导/行高，跟踪/字距，以及该文本风格的适当使用上下文

然后，对于产品中的每个特定UI元素，包括以下信息:

  1. 适当的使用环境的描述:什么时候使用一个特定的组件而不是一个类似的组件有意义?
  2. 代码片段，经常隐藏在手风琴功能
  3. 实现规范，包括定位和间距信息
  4. 该做什么和不该做什么。

前端样式指南中包含的25个常用UI组件

下面是通常包含在样式指南中的UI元素的初始列表。虽然这并不是所有UI元素的详尽列表可以在前端风格指南中使用，它涵盖了许多常见的组件。

  1. 按钮
  2. 按钮组
  3. 面包屑
  4. 卡片
  5. 表
  6. 对话框
  7. 内容、媒体或照片的网格列表
  8. 垂直列表
  9. 导航菜单(和子导航)
  10. 日期和时间选择器
  11. 进度和装载指标
  12. 复选框
  13. 单选按钮
  14. 下拉菜单
  15. 滑块
  16. 开关
  17. Numeric-input步进/增量器
  1. 表单字段(包括带有最大字符计数指示器的变体，以及用于何时需要该字段的指示器)
  2. 选项卡
  3. 工具栏
  4. 工具提示
  5. 警报情态动词
  6. 图标
  7. 动画
  8. 令牌，也称为芯片(例如电子邮件地址字段)

Kayak数字输入步进器
Kayak的iOS应用程序有数字输入步进功能，可以显示房间和客人的数量。如果您在产品中使用这个输入组件，那么样式指南中应该包含它。
来自材料设计的符号
来自的令牌(或芯片)的示例谷歌的材料设计．令牌通常用于电子邮件地址收件人字段，用于分别显示每个收件人，并允许您单击一次即可删除收件人。它们还用于高级搜索字段和元数据标记，以区分包含空格的术语。

从这个列表开始，从中只挑选产品中存在的组件(不要仅仅为了满足这个列表而在产品或设计中添加新元素)。如果您有其他独特的元素，请将它们包含在您的样式指南中。

结论

前端风格指南正在成为最有用的UX交付品之一。它们在敏捷环境中尤其重要，在敏捷环境中，实现更有效的设计工作流对于保持快速的开发速度至关重要。当严格地开发时，样式指南促进一致的设计实践，并强制开发人员遵守规范。一个好的前端风格指南应该包括响应式设计模式和网格、用于实现的代码片段，以及使用每个组件的强大指南。

了解更多关于确定适当组件粒度的最佳实践、创建(和使用)样式指南时的常见陷阱，以及创建前端样式指南的工作流选项的信息用户体验成果研讨会．

参考文献

Jeff Gothelf和Josh Seiden (2013):精益用户体验:应用精益原则改善用户体验, O ' reilly媒体。