如何在产品现有的设计系统基础上重塑UI组件设计？

设计系统在使用过程中，会不断有新的UI组件会以组件纳入标准被纳入组件库，随着时间的推移，组件库会越来庞大、复杂、和冗长，再加上一些执行不到位的情况，导致下游可用性问题。本文讨论如何为现有设计系统重塑UI组件设计。

第 1 步：审核组件在您的产品平台上的当前使用情况
为了最好地了解新设计的UI组件可以为未来项目提供的潜在价值，请确定它在以前项目中的位置。探索您当前的应用程序或平台，以最好地了解它所处的特定环境。

第 2 步：确定设计痛点和系统可用性属性
写下您在使用此UI组件时遇到的所有不同痛点及其所有改进领域。再过渡到与在之前项目中使用过该组件的设计团队成员的内部调研访谈。从内部研究中，将能够更多地了解其使用背后的原因，并确认组织内众多不同团队的现有痛点或发现新痛点。
1、有限步数
由于其父容器大小有限，组件的边界大小不允许大量步数。
2、大小不一致
目前，步骤指示器组件面临着使用带来的挑战，特别是大小调整。随着用户逐步完成检查标记的添加和字体粗细的变化，条形图的宽度会增加，因此很难使用固定的父容器。
3、辅助功能
尚未完成的步骤的视觉语言对于有视觉障碍的用户来说可能难以阅读。
4、无法定制
目前，标准是在已完成的步进器组件中为流程的每个阶段使用复选标记图标。允许灵活地为不同的步骤添加不同的图标可能有助于视觉设计。
5、分界线不清晰
边距和间距似乎在较窄的一端。增加这可能会允许更高的对比度和更容易区分阶段。

第 3 步：概述理想组件的关键功能方面
分析您收集的数据并写下您希望新组件体现的原则列表。为可以进行哪些改进创建一个愿景将有助于专注于修复当前组件的弱点。 您可以在下面找到我为我的步进器组件编写的理想原则的示例：
1、对比度
 采用最低对比度标准以与 W3 (AA) 保持一致，对比度为 4.5:1。这是检查元素对比度的有用工具：https ://webaim.org/resources/contrastchecker/ 。此外，关于对比度指南的有用资源：https ://www.w3.org/TR/WCAG/#contrast-minimum 。

2、字符/单词
限制每个步骤都应包含特定的字符或单词限制，以确保降低措辞中视觉平衡不一致的风险。

3、考虑长步数
即使在步数很大的情况下，用户也应该有一种优化和引导步骤的方法。

4、“可点击”
为了让用户可以轻松地在前面的步骤之间进行操作，应该明确步进器组件的步骤允许此功能 - 使其明显可以点击步骤本身。

5、垂直版本（计划用于未来工作）
当用户必须完成可能具有大量步数且水平空间可能不可用的任务时，使用垂直版本的步进器可能会有所帮助。

第 4 步：审核当前设计系统中的现有组件
审核视察所有现在的组件库和模版库。

第 5 步：迭代、原型和测试
除了你自己早期草图的想法外，还探索了从你的竞争性审计中获得灵感的无数选择。将它们全部放在协作原型屏幕上，以便您能够与团队的其他成员共享它们以收集评论。根据反馈，确定 4-5 个方向的选择。您将在外部用户测试中评估备选方案。
还可能有助于为组件的其他状态开发早期概念，以帮助进一步可视化设计。

选择特定设计后，通过定义您想要测试的用户体验原则（即可发现性、理解性等），专注于您的用户研究目标。为了节省时间，我在UserTesting.com上对远程、未经审核的用户进行了任务分析。我了解并非所有设计团队都有预算和资源来使用第三方服务；您还可以在公司内部进行内部测试或招募外部参与者来收集这些数据。

发现：
此页面上有哪些吸引您眼球的元素？
你认为用户试图在这个屏幕上完成什么？
你怎么会知道这事？
你觉得你接下来会做什么？
你怎么会知道这事？

理解：
既然您已经在这个页面上下文中看到了这个元素，您怎么看它？
你认为这意味着什么？
按照 1-7 的等级给我评分（1 表示最不清晰，7 表示最清晰）。
您期望从该组件获得哪些悬停交互？ 
如果你有一根魔杖可以改变这个组件的任何东西，你会改变什么（如果有的话）？

第 6 步：通过“征求意见”(RFC) 收集反馈
您现在已经完成了一些使用组件库用户的测试，但是您应该与您的同行确认您到目前为止所做的设计决策。您的团队将在他们的项目中广泛使用该组件，反过来，用户最终将成为受到严重影响的人，因为他们将与该组件进行最多的交互。

通过与不同部门同事的交谈，这可以为您提供有关视觉和交互设计的额外反馈，还可以让设计团队中的其他人有机会表达他们对项目进展的想法。

第 7 步：为所有可能的状态定义设计指南
确保您的设计师了解UI组件所有不同状态的颜色、填充和边距测量以及交互行为。将您的组件放在示例页面上下文中也有助于设想如何使用它。

第 8 步（可选）：添加动画以通过微交互增强用户体验
为了增强UI组件的设计，动画可能是一个很好的补充，可以增强微交互元素并为组件增添光彩。 

第 9 步：创建草图标记符号。
与您的设计系统团队中的某个人合作，建立您需要创建为交接文件的不同状态。然后，将其交给负责开发您重新设计的组件的团队。完全构建组件后，与您的团队共享它并包含指南以提醒您的同事适当的使用行为。

展望未来，将组件文件包含在共享空间中或将其添加到您的设计系统库中，以便其他人可以快速找到它可能会有所帮助。如果您的公司没有专门的设计系统团队，这可能是您重温编码技能以自行开发组件的好时机。

最后，别忘记UX用户体验度量，通过比较老设计系统和新设计系统，包括组件样式，得出比对和测试数据，以此来验证你的付出和努力是值得的，这点很重要，对于接下来的在企业内部大规模推广你的设计系统起到一定背书的作用。