为更好的用户体验创建 UI 样式指南

收听本文的音频版本

确保有凝聚力的产品设计和用户体验

1976 年，Johnny Cash 发行了One Piece at a Time ，这首歌讲述了一位底特律汽车工人花了 20 年时间收集从装配线上偷来的凯迪拉克零件的故事。

不幸的是，当工人开始制造他的盗版凯迪拉克时，他发现许多零件不兼容，因为多年来关键的设计特征发生了变化。 凭借一点独创性，定制汽车走到了一起，但它是一种难看的混搭，无论走到哪里都会引起嘲笑。

后端看起来也很有趣
但我们把它放在一起，当我们通过
好吧，那时我们注意到我们只有一个尾鳍。

当今数字体验的设计者和开发者面临着类似的挑战。 时间的流逝是一个强大的敌人，能够对数字产品的连续性造成严重破坏。 随着时间的推移，团队成员来来去去，趋势发展，功能变化。 此外，我们现代数字环境的快速步伐意味着产品创新发生在季度，而不是几年。

如果业务或设计团队没有记录产品预期外观和感觉的共享记录，则会出现视觉和体验上的不一致，用户会感到沮丧，品牌的声誉也会受到打击。

UI 样式指南是一种设计和开发工具，可为数字产品的用户界面和体验带来凝聚力。 他们的核心是：

• 记录产品中发生的所有设计元素和交互
• 列出关键的 UI 组件，例如按钮、排版、颜色、导航菜单等。
• 记录重要的 UX 组件，例如悬停状态、下拉填充、动画等。
• 包含实时元素和代码片段，供开发人员参考和使用

在我们仔细研究如何编写专家级 UI 样式指南之前，重要的是要了解没有一种万能的方法。 风格指南的价值不仅限于拥有大型产品团队的大品牌。 寻求一致数字体验的中小型企业在根据其特定需求定制 UI 样式指南时也会受益。

在 UI 样式指南中包含这些关键的设计组件

熟悉品牌标识指南的设计师在过渡到 UI 样式指南时应该没有问题，因为与必须包含的许多关键设计组件有大量重叠。

专业提示：仅记录相关的设计组件。 无关信息使 UI 样式指南变得臃肿且难以使用。

排版方案

排版是最常见的界面设计元素之一，因此仅列出产品中使用的字体名称是不够的。 标题、副标题、标题（H1、H2、H3）、正文和标题应给出明确的说明。

此外，还应提供字体大小、指明粗细和定义样式。 行高和字距调整也是需要的，当出现特殊情况时，最好选择一种首选字体。

响应式布局

当围绕响应式网格系统设计数字产品时，UI 样式指南必须解决跨屏幕尺寸的界面布局。 这意味着包括间距、填充和放置的注释和示例。 显示与不同屏幕尺寸相关的产品网格系统的叠加层也很有帮助。

这里的主要目标是提供足够的上下文来避免一次性屏幕设计的需要。 随着时间的推移，这些加起来会破坏数字产品的凝聚力。

调色板

破坏界面的最快方法之一是颜色使用不一致，因此需要明确定义颜色组合。 列出颜色及其值（HEX、UIColor）是一个好的开始，但也应该给出具体的配对和使用示例。

如果 UI 样式指南引用了一组品牌标识指南，请检查是否有可用的较浅强调色的辅助方案。 如果没有，请创建您自己的文档。 灰度值的选择也很有用。

纽扣

几乎每个界面都包含按钮，因此请花时间记录它们的大小、样式、颜色、位置、间距和印刷元素。 如果在不同的上下文中使用了不同的按钮，也要说明清楚。

可能需要的其他 UI 组件

• 图像学
• 工具提示和弹出框
• 模态
• 表单元素
• 数据表
• 导航菜单
• 图表和数据可视化
• 标签
• 通断开关
• 对话框
• 内容网格列表
• 垂直列表
• 工具栏
• 日期和时间选择器
• 加载指标
• 复选框
• 警报
• 下拉菜单
• 滑块
• 步进器
• 分页

组织和情境化设计说明

除了必备的 UI 组件之外，还有许多实用功能可以让企业和设计团队更轻松地参考、导航和实施 UI 样式指南。

目录

组织良好且标记清晰的目录是帮助每个人快速找到文档内容的简单方法。

上下文注释

无法预测产品生命周期中可能出现的每一个有问题的设计决策，因此阐明常用 UI 组件背后的设计原理可以使无法预见的场景更容易解决。

例如：

“我们的产品的核心是展示来自全球的最佳建筑图像。 出于这个原因，我们的界面布局优先考虑大而引人注目的图像而不是文本。 只要有可能，就让图像成为我们产品的焦点。”

间距和定位说明

间距和定位通常在“响应式布局”部分中介绍。 根据数字产品的复杂性，说明可能包含一般的“经验法则”或非常细化。

该做什么和不该做什么

通常，清楚地勾勒出设计的注意事项和注意事项会很有帮助。 例如：

• “请在界面页脚中使用我们公司徽标的白色文字标记版本。”
• “不要在黑色背景上使用我们公司文字标记的替代颜色版本。”

该做什么和不该做什么可以防止辩论并节省设计和开发时间，但最好提供这样的上下文注释：

“这份注意事项列表涵盖了广泛的重要设计决策，但并未考虑到对我们产品设计元素的所有可能滥用。 考虑到这一点，在出现不确定性时做出最佳判断，并做出准确反映我们产品整体外观和感觉的选择。”

实时元素和代码片段

品牌标识指南通常是静态文档，但 UI 样式指南包括在最终产品中运行的实时元素——这意味着按钮的行为类似于按钮，下拉菜单实际上是下拉，并且动画是动画的。

代码片段允许开发人员快速将实时元素的代码复制并粘贴到产品的后端。

使设计团队可以轻松访问 UI 样式指南

现在我们了解了如何创建样式指南以及 UI 样式指南中包含的组件和功能，我们将注意力转移到共享和交流上。 更具体地说，容纳 UI 样式指南的选项有哪些？

传统上，UI 样式指南作为网页存在。 这为设计人员和开发人员提供了方便的访问方式，并允许设计元素像在产品中一样发挥作用。

最近，出现了一些基于云的平台，允许团队协作设计、原型和测试产品。 这些相同的平台还能够容纳 UI 样式指南，并使团队成员能够交流持续的反馈和想法。

让我们看看这些平台中的一些如何描述他们的 UI 样式指南方法。

无花果

“使用整个团队都可以使用的链接 UI 组件创建设计系统。 对共享组件进行更改时获取更新”

阶段

“库本来应该是这样的：颜色、属性和元素……甚至转换时间——现在组件中的所有内容。 就地编辑——一切都是大师。 覆盖任何你不需要的东西，每个实例。”

视觉

“所有品牌和用户体验组件——包括使用文档——都在一个地方进行管理。 更改同步到整个团队，设计师可以随时切换到最新版本或回滚更新。”

材料.io

“通过将样式更改应用于颜色、形状和排版，制作您自己的 Material 主题并创建品牌符号库。 在图库中分享、上传和展示设计迭代。 然后使用检查模式访问开发人员文档。”

UI 样式指南应该易于使用

在组装 UI 样式指南时，不能认为交流是理所当然的。 产品团队由来自不同学科、文化背景和专业经验的人组成。 使用这些原则来确保清晰和易于使用。

简单的布局

UI 样式指南需要干净、整洁的屏幕布局。 每个屏幕都应该井井有条，标签清晰，清晰易读。 用视觉信息使屏幕过载并没有什么好处，所以要尽量安排既简约又宽敞的布局。

简明说明

保持说明简短而甜蜜。 避免冗长的段落，并使用要点。 在可能的情况下，用视觉而不是文字进行演示。

信息性使用场景

想知道什么时候在那个滑块上使用这种风格的滑块？ “使用场景”解决了这种困惑。 同样，这里的视觉效果比文字更强大，因此请提供能够清楚地展示场景和正确前进道路的示例。

相关版本历史

数字产品更新频繁。 由于产品团队希望完善每一个界面细节，因此保持对设计组件如何演变的持续记录非常重要。 在这里谨慎使用——对于较小的企业和产品团队，维护一个广泛的版本历史库可能是不切实际的。

UI 样式指南是一种宝贵的资源和强大的设计工具

现代设计和开发团队重视效率和多学科协作——MailChimp、Google 和 Salesforce 等大品牌所吹捧的设计语言系统就是明证。

设计语言系统允许从事复杂数字产品的不同团队使用标准化的视觉语言进行交流。 UI 样式指南融入了设计语言系统的结构，并作为一种工具，可用于快速迭代和一致的数字体验。

同时，设计也不是大公司才有的追求。 各种产品团队和数字项目都将从精心构建的 UI 样式指南中受益，但资源（财务、时间和人才）因企业而异。

出于这个原因，当 UI 样式指南针对个别企业和设计团队的需求量身定制时，它们是最有用的。 每个 UI 样式指南的最高目标是在清晰度和实用性之间取得平衡，从而带来始终如一的令人愉悦的用户体验。

进一步阅读 Toptal 设计博客：

• 网页和印刷设计的字体样式
• 响应式设计——最佳实践和注意事项
• 为什么初创公司需要风格指南
• 图标可用性和设计最佳实践
• 发挥你的灵感——情绪板指南