什么是前端样式指南?

Front-end style guides have become an increasingly commonplace deliverable in UX practice. As described by Jeff Gothelf and Josh Seiden in their bookLean UX,they originated in敏捷或精益环境.

定义:前端样式指南是产品用户界面中所有元素的模块化集合,together with code snippets for developers to copy and paste as needed to implement those elements.它们包括常见的UI组件,如按钮、表单输入元素、导航菜单、模式覆盖和图标。

A front-end style guide is both a可交付成果由用户体验团队(通常与工程团队合作)和工具用于整个团队以模块化格式保持一致、灵活的产品设计。

Front-end style guides are distinct from design pattern libraries, which are a long-standing tool used by UX practitioners to define broad design ideas, rather than specific implementation details. Unfortunately,一些支持者的前端样式指南将它们称为pattern libraries,which has caused some confusion in the UX community.

Salesforce Lightning设计系统截图
Salesforce的Lightning设计系统显示UI元素,按钮组底座,以及如何实现它的示例、它应该如何运行的指导原则以及何时使用替代变量(例如按钮组已禁用)应该使用。该示例是一个活动元素,它是交互式的,并且表现出与最终产品相同的行为。

The UX Benefits of a Front-End Style Guide

样式指南的目的是收集模块化库中的所有产品接口元素。它在两个方面给用户体验团队带来好处:(1)原型设计思想和实施新设计变得更加高效,(2)一致的视觉设计可以在整个产品中轻松实施。设计师和开发人员和其他人一样懒惰。因此,如果做正确的事情和创建一致的用户界面所做的工作更少,那么他们更有可能去做,而不是发明一个新的、不一致的设计或实现。

当一个成熟的前端风格指南存在,用户体验team spends less time creating high-fidelity design mockups for every new idea. Instead, the main design-specification deliverable can be a quick sketch that unambiguously references which components get applied where in the design. Such a library of existing modules also allows for fast high-fidelity prototyping: the UX team can quickly assemble a realistic interactive prototype that could be used in usability tests or shared with stakeholders.

前端样式指南不是编辑或品牌样式指南

您可能已经熟悉了其他两种类型的样式指南:

  1. Editorial style guides specify writing style, grammar, punctuation, and other content-editing rules. Many websites and most publications do have such style guides and content teams are supposed to follow them.
  2. 品牌风格指南通常指定品牌相关的规则,如可接受的标志使用,调色板和排版。

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

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

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

Most often, front-end style guides take the form of a web page or other interactive digital asset, rather than a PDF. You can typically interact with all the components in a front-end style guide, and many development teams choose to implement them so that any change made to components in a style guide will automatically update the product’s design as well. This isn’t a requirement for an effective style guide, but it can help to enforce its rigorous use.

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

In响应性设计,前端样式指南不仅应该定义接口组件,还应该描述它们的样式和用法在不同屏幕大小上的差异。以下是一些有用的信息:

  • 显示各种组件在各种屏幕大小上下文中应如何使用的布局网格
  • 在不同屏幕尺寸上使用时,公共元素周围的间距
  • 接口中应放置特定组件的位置指南
    (这些准则有助于加强一致性:例如,在移动应用程序中,标题栏和导航元素通常会出现在顶部的大多数屏幕中,因此在样式指南中定义标题栏和导航元素有助于避免一次性屏幕设计。)
谷歌材料设计截图
谷歌的材料设计style guide includes representations of how to use the responsive grid system, and where various parts of the interface should be consistently placed.

前端样式指南的8项主要要求清单

创建样式指南时,请确保包含以下8个关键功能:

  1. 目录将组件划分为易于查找的类别
  2. 用于放置通用UI元素的响应式布局或网格系统
  3. 产品的调色板(采用适当的格式,例如,用于Web的十六进制,用于iOS应用程序的UIColor)
  4. 字体样式(例如。H1标题,正文文本,照片标题文本), which should include typeface name and foundry, sizes, weights, leading/line height, tracking/kerning, and the appropriate contexts of use for that text style

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

  1. Description of the appropriate context of use: When does it make sense to use one particular component versus a similar one?
  2. 代码段,often hidden in an手风琴feature
  3. 实施规范,包括定位和间距信息
  4. 该元素的注意事项。

25Common UI Components Included in Front-End Style Guides

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

  1. Buttons
  2. 按钮组
  3. Breadcrumbs
  4. 桌子
  5. 对话框
  6. 内容、媒体或照片的网格列表
  7. Vertical lists
  8. 导航菜单(和子导航)
  9. 日期和时间选择器
  10. Progress and loading indicators
  11. 复选框
  12. 单选按钮
  13. Drop-down menus
  14. 滑块
  15. 开关
  16. 数字输入步进器/递增器
  1. 表单字段(包括具有最大字符数指示符的变体,以及在需要字段时的指示符)
  2. 标签
  3. Toolbars
  4. 工具提示
  5. 警戒情态动词
  6. Icons
  7. 动画
  8. 代币,也称为芯片(例如电子邮件地址字段)

Kayak Numeric Input Stepper
Kayak’s iOS app features numeric-input steppers for the number of rooms and guests. If you feature this input component in your product, it should be included in the style guide.
材料设计的象征
An example of a token (or chip) from谷歌的材料设计. 令牌通常用于电子邮件地址收件人字段中,以分别显示每个收件人,并允许您通过单击删除收件人。它们还用于高级搜索字段和元数据标记中,以区分包含空格的术语。

Start with this list and pick from it only the components that are present in your product (don’t add new elements to your product or designs simply to satisfy this list). If you have additional unique elements, include them in your style guide.

结论

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

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

工具书类

Jeff Gothelf和Josh Seiden(2013年):精益用户体验:应用精益原则改善用户体验,奥莱利传媒。