创建UI风格指南以获得更好的UX

本文概述

• 确保具有凝聚力的产品设计和用户体验
• 在UI样式指南中包括这些关键设计组件
• 组织设计说明并使其内容相关
• 使设计团队可以轻松访问UI样式指南
• UI样式指南应该易于使用
• UI样式指南是宝贵的资源和强大的设计工具

听本文的音频版本

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

1976年, 约翰尼·卡什(Johnny Cash)一次发行了《一件》(One Piece), 这首歌讲述了一位底特律汽车工人花了20年时间收集从装配线偷来的凯迪拉克零件的故事。

不幸的是, 当工人开始制造自己的赃物凯迪拉克时, 他发现许多零件是不兼容的, 因为这些年来关键的设计特征已​​经发生了变化。稍微有点匠心, 这辆定制车就可以组合在一起, 但这是一个难看的杂烩, 无论行驶到哪里, 都会引起人们的嘲笑。

后端看起来也很有趣, 但是我们把它们放在一起, 当我们通过Well的时候, 我们注意到我们只有一个尾鳍。

就像约翰尼·卡什(Johnny Cash)定制的凯迪拉克一样, 没有UI样式指南的数字产品容易出现零件不匹配和设计脱节的情况。

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

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

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

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

在仔细研究如何编写专家级的UI样式指南之前, 请务必了解没有一种”一刀切”的方法。风格指南的价值不仅仅限于拥有大型产品团队的大品牌。当UI样式指南根据其特定需求进行定制时, 寻求一致数字体验的中小型企业也将从中受益。

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

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

专家提示：仅记录相关的设计组件。多余的信息使UI样式指南肿且难以使用。

版式方案

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

Firefox的《 UI样式指南》的”版式”部分提供了有关使用清晰的设计层次结构创建可读文本的详细说明。

此外, 应提供字体大小, 指示的权重和定义的样式。还需要行高和字距调整, 最好选择一种出现特殊情况时要使用的字体。

响应式布局

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

这里的主要目标是提供足够的上下文, 以防止需要一次性屏幕设计。随着时间的流逝, 这些加在一起并破坏了数字产品的凝聚力。

调色板

破坏界面的最快方法之一是颜色使用不一致, 因此需要明确定义颜色组合。列出颜色及其值(十六进制, UIColor)是一个很好的开始, 但是还应给出特定的配对和使用示例。

除了包含一系列较浅的辅助色的大型调色板之外, IBM的UI样式指南还演示了如何将特定的方案(例如此三重示例)应用于其产品。

如果” UI样式指南”引用了一组品牌标识准则, 请检查是否有较浅的配色方案可用。如果没有, 请创建你自己的文件。选择灰度值也很有用。

纽扣

几乎每个界面都包含按钮, 因此需要花一些时间来记录它们的大小, 样式, 颜色, 位置, 间距和印刷元素。如果在不同的上下文中使用了各种按钮, 则也要使其清楚。

可能需要的其他UI组件

• 影像学
• 工具提示和弹出窗口
• 礼节
• 表单元素
• 数据表
• 导航菜单
• 图表和数据可视化
• 标签
• 开关开关
• 对话方块
• 内容网格列表
• 垂直清单
• 工具栏
• 日期和时间选择器
• 加载指标
• 选框
• 警报
• 下拉菜单
• 滑杆
• 踏步机
• 分页

组织设计说明并使其内容相关

除了必备的UI组件外, 还有许多实用功能使UI样式指南更易于企业和设计团队参考, 导航和实施。

目录

井井有条, 标记清晰的目录是一种简单的方法, 可以帮助所有人快速找到文档中的内容。

上下文注释

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

例如：

“从本质上讲, 我们的产品旨在展示全球最佳的建筑图像。出于这个原因, 我们界面的布局优先于大而醒目的图像而不是文本。尽可能使图像成为我们产品的重点。”

间距和定位说明

间距和位置通常在”响应式布局”部分中介绍。取决于数字产品的复杂性, 说明可能包含一般的”经验法则”或相当详尽。

在此, Atlassian阐明了文本行和按钮行之间的间距。

该做什么和不该做什么

通常, 清楚地概述设计中的”要做”和”不做”可能会有所帮助。例如：

• “请在界面页脚中使用我们公司徽标的白色wordmark版本。”
• “请勿在黑色背景上使用我们公司字标的其他颜色版本。”

在Apple的《 UI样式指南》中, 通过插图和上下文注释清楚地说明了”应做和不应该做”。

做与不做可以避免辩论, 并节省设计和开发时间, 但始终最好提供如下上下文说明：

“此”做与不做”清单涵盖了一系列重要的设计决策, 但并未考虑到我们产品设计元素的所有可能滥用。考虑到这一点, 请在出现不确定性时做出最佳判断, 并做出能够准确反映我们产品整体外观的选择。”

实时元素和代码片段

品牌标识准则通常是静态文档, 但是UI样式指南包含实时元素, 它们的操作方式与最终产品中的操作相同, 这意味着按钮的行为类似于按钮, 下拉菜单实际上是下拉菜单, 并且动画是动画。

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

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

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

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

最近, 出现了一些基于云的平台, 使团队可以协作设计, 原型设计和测试产品。这些相同的平台还可以容纳UI样式指南, 并使团队成员可以交流正在进行的反馈和想法。

让我们看看其中的一些平台是如何描述其UI风格指南的方法的。

菲格玛

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

相

“图书馆应该一直是这样：颜色, 属性和元素……甚至过渡时间-现在组件中的所有内容。就地编辑-一切都是大师。按实例覆盖你不需要的所有内容。”

Phase是一个崭新的数字设计工具, 可提供直观的工作流程和组件库。

视觉

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

Material.io

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

UI样式指南应该易于使用

组装《 UI样式指南》时, 交流是理所当然的。产品团队由来自不同学科, 文化背景和专业经验的人员组成。使用这些原则可确保清晰度和易用性。

简单布局

UI样式指南要求干净, 整洁的屏幕布局。每个屏幕都应井井有条, 标签清晰且清晰易读。在屏幕上超载视觉信息并没有任何好处, 因此请尽量减少尺寸和空间。

Google的《 UI样式指南》是《材质设计》中的信息, 但由于布局简单, 整洁, 因此易于消化。

简明说明

保持说明简短明了。避免冗长的段落, 并使用要点。如有可能, 用视觉效果演示文字。

信息使用场景

想知道何时在该滑块上使用这种样式的滑块？ “使用场景”解决了这种困惑。再次, 视觉效果胜于文字, 因此请提供示例清楚地说明场景和正确的前进方向。

Salesforce通过简单的图形支持其”数据输入”使用方案。

相关版本历史

数字产品经常更新。当产品团队希望完善每个接口的细节时, 重要的是要不断记录设计组件的发展方式。在这里请谨慎使用-对于较小的企业和产品团队, 维护庞大的版本历史库可能是不切实际的。

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

当代的设计和开发团队非常重视效率和多学科协作, 这已经被MailChimp, Google和Salesforce等大品牌吹捧的设计语言系统所证明。

设计语言系统允许从事复杂数字产品工作的各种团队使用标准化的视觉语言进行交流。 UI样式指南被编织到设计语言系统的结构中, 并且可以用作快速迭代和一致的数字体验的工具。

MailChimp和其他大品牌凭借其设计语言系统引领着产品设计革命。

同时, 设计并非仅限于大型公司的追求。精心组织的UI样式指南将使各种各样的产品团队和数字项目受益, 但是企业之间的资源(财务, 时间和人才)有所不同。

因此, UI样式指南在根据各个企业和设计团队的需求量身定制时最有用。每个《 UI样式指南》的最高目标是在清晰度和实用性之间取得平衡, 以带来始终如一的令人愉悦的用户体验。

• • •

在srcmini设计博客上进一步阅读：

• Web和印刷设计的字体样式
• 响应式设计–最佳实践和注意事项
• 为什么初创企业需要样式指南
• 图标的可用性和设计最佳实践
• 发挥灵感-情绪板指南