听听这篇文章的音频版本

确保连贯的产品设计和用户体验

1976年，约翰尼·卡什发行 一次海贼王, 这首歌讲述了一个底特律汽车工人花了20年时间收集从装配线上偷来的凯迪拉克零件的故事.

不幸的是, 当工人开始制造他的盗版凯迪拉克时, 他发现许多部件是不兼容的，因为多年来关键的设计特性发生了变化. 用一点巧思, 定制汽车组装在一起, 但这是一个难看的大杂烩，无论走到哪里都会受到嘲笑.

后端看起来也有点滑稽
但我们把它拼在一起，当我们打通的时候
这时我们注意到我们只有一个尾翼.

设计师 如今的数字体验开发者也面临着类似的挑战. 时间的流逝是一个强大的敌人，能够对数字产品的连续性造成严重破坏. 随着时间的推移，团队成员来来去去，趋势不断发展，功能不断变化. +, 现代数字世界的快速发展意味着产品创新是以季度为单位进行的, 而不是几年.

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

UI风格指南是一种设计和开发工具，可以为数字产品的用户界面和体验带来凝聚力. 在他们的核心，他们:

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

在我们仔细研究如何组装专家级UI风格指南之前, 重要的是要明白没有放之四海而皆准的方法. 风格指南的价值 扩展到拥有大型产品团队的大品牌之外. 中小型企业寻求一致的数字体验，如果UI风格指南是根据他们的特定需求定制的，也会受益.

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

熟悉品牌标识指南的设计师应该不会有过渡到UI风格指南的问题，因为有许多必须包含的关键设计组件有足够的重叠.

专家提示: 只记录相关的设计组件. 多余的信息会让UI风格指南变得臃肿且难以处理.

字体设计方案

排版 是最常见的界面设计元素之一吗, 因此，仅仅列出产品中使用的字体名称是不够的. 对于标题应给出明确的说明, 字幕, 标题(H1, H2, H3), 正文, 和说明文字.

此外，应该提供字体大小、指示粗细和定义样式. 行高和字距也需要, 当特殊情况出现时，挑选一种常用字体是个好主意.

响应的布局

当数码产品被设计时 响应 网格系统，UI风格指南必须解决跨屏幕尺寸的界面布局. 这意味着包括间距、填充和放置的注释和示例. 它也有助于显示产品的网格系统的覆盖与不同的屏幕尺寸.

这里的大目标是提供足够的上下文，以防止需要一次性的屏幕设计. 随着时间的推移，这些因素加起来会破坏数字产品的凝聚力.

调色板

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

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

按钮

几乎每个界面都包含按钮, 所以花点时间记录它们的大小, 风格, 颜色, 放置, 间距, 排版元素. 如果在不同的上下文中使用了不同的按钮，也要弄清楚.

可能需要的额外UI组件

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

组织和情境化设计说明

除了必须具备的UI组件之外, 有许多实用的功能，使UI风格指南更容易为企业和设计团队参考, 导航, 和实施.

目录表

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

上下文的笔记

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

例如:

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

间距和定位说明

间距和定位通常在“响应式布局”一节中讨论. 取决于数字产品的复杂程度, 指令可能由一般的“经验法则”组成，也可能是非常细粒度的.

该做什么和不该做什么

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

• “Do 在界面页脚使用我们公司标志的白色文字标记版本.”
• “不 在黑色背景上使用我们公司文字的替代颜色版本.”

“做什么”和“不做什么”可以避免争论并节省设计和开发时间, 但最好提供这样的背景说明:

这份“做与不做”的清单涵盖了很广泛的 重要的设计决策，但它并没有考虑到我们产品设计元素的每一个可能的误用. 记住这一点, 当不确定性出现时，使用最佳判断, 并做出准确反映我们产品整体外观和感觉的选择.”

活动元素和代码片段

品牌标识指南通常是静态文档, 但UI风格指南包含了像最终产品一样运行的活动元素——这意味着按钮的行为就像按钮一样, 下拉菜单实际上是下拉的, 动画就是动画.

代码片段允许开发人员快速地将活动元素的代码复制并粘贴到产品的后端.

让UI风格指南易于设计团队访问

现在我们已经了解了如何创建样式指南以及UI样式指南中包含的组件和特性, 我们将注意力转移到分享和交流上. 更具体地说，什么是住房UI风格指南的选项?

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

最近, 一些基于云的平台已经出现, 允许团队设计, 原型, 协作测试产品. 这些平台还能够容纳UI风格指南，并使团队成员能够交换持续的反馈和想法.

让我们来看看这些平台是如何描述他们的UI风格指南的.

Figma

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

阶段

“图书馆应该是这样的:颜色，属性， & 元素……甚至转换时间——现在组件中的一切. 就地编辑——一切都是主控的. 每个实例重写任何不需要的内容.”

InVision

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

材料.io

制作自己的材质主题，并通过对颜色进行样式更改来创建品牌符号库, 形状, 和排版. 在图库中共享、上传和呈现设计迭代. 然后使用Inspect Mode访问开发人员文档.”

UI风格指南应该易于使用

在编写UI风格指南时，沟通不能被视为理所当然. 产品团队由来自不同学科的人组成, 文化背景, 以及专业经验. 使用这些原则来确保清晰和易于使用.

简单的布局

UI风格指南要求干净整洁的屏幕布局. 每个屏幕都应该组织良好，标签清晰，易读. 在屏幕上加载过多的视觉信息是没有好处的, 所以要尽量做到既小又宽敞.

简洁的说明

保持指示简短而甜蜜. 避免冗长的段落，并使用 要点. 在可能的情况下，用视觉而不是文字来展示.

丰富的使用场景

想知道什么时候用这个滑块来代替那个? “使用场景”解决了这种困惑. 再一次。, 在这里，视觉效果比文字更有力, 因此，提供能够清楚地演示场景和正确前进路径的示例.

相关版本历史

数码产品更新频繁. 因为产品团队想要完善每一个界面细节, 保持对设计组件如何演变的持续记录是很重要的. 对于小型企业和产品团队，请谨慎行事, 维护一个广泛的版本历史记录库可能是不切实际的.

UI风格指南是一个有价值的资源和强大的设计工具

当代的设计和开发团队重视效率和多学科的合作——正如MailChimp等大品牌所吹捧的设计语言系统所证明的那样, 谷歌, 和销售团队.

设计语言系统允许开发复杂数字产品的不同团队使用标准化的视觉语言进行交流. UI风格指南被编织到设计语言系统的结构中，作为一种工具，可以用于快速迭代和一致的数字体验.

同时，设计也不是大公司的专利. 各种各样的产品团队和数字项目都能从构建良好的UI风格指南中受益, 但是资源(财政), time, 人才)因行业而异.

出于这个原因, UI风格指南在适合个人业务和设计团队的需求时是最有用的. 每个UI风格指南的最高目标是在清晰性和实用性之间取得平衡，从而带来始终如一的愉悦用户体验.