设计强大 UI：NDC 大会分享构建用户友好设计的策略

UI 开发的关键挑战在于如何平衡易用性和可维护性以及规模和复杂性。要开发出既健壮又对用户友好的 UI，需要深思熟虑的组件设计和对常见使用路径的理解。而要提高代码库的效率和一致性，自动化是一个可以改变游戏规则的措施。

Glenn Reyes 在NDC Oslo 2023大会上谈到了如何开发健壮的 UI 组件。

Reyes 提到，UI 开发面临着一系列独特的挑战，尤其是在扩展方面。主要的困难在于如何在项目复杂性增长的同时保持简单性和健壮性。

Reyes 说，UI 开发的一个关键部分是保持组件的 API 表面积最小。这不仅可以减少出错的机会，而且组件更易于维护，更易于工程团队使用。这可以帮助他们避免深入到复杂的问题中，带来更顺畅、无错误的开发过程。

你需要按照一种自然的、能够把用户引导到最常见的、有效的使用路径的方式来构建 UI。要让常见的使用路径变得直观可能具有一定的挑战性，但这是确保组件被正确和有效使用所必需的。

Reyes 说，一些代码样式和格式化工具，如 Prettier 和 ESLint，可以简化你的工作流程。它们可以自动让代码风格保持一致，这样就不需要在代码评审时讨论格式问题。他提到，这可以让团队更多地关注代码的逻辑和功能，而不是其外观。

为了确保用户界面代码是可维护的，Reyes 提出了一些策略：

• 采用设计系统：采用设计系统有助于保持 UI 组件的一致性和易维护性。它作为唯一的事实来源，提供了构成应用程序视觉语言的元素和指南。

• 实现设计标记（Design Token）：设计标记可以表示颜色、排版、间距等元素的值，有助于保持应用程序不同部分的一致性。你只需要修改单个标记，就可以在所有组件之间传播变更，使得更新变得更简单、更高效。

• 管理组件间距：组件之间的间距应该由它们的父组件控制，而不是硬编码到每个组件中。这确保了更好的关注点分离，并使组件更易于重用和维护。

• 使用 TypeScript：TypeScript 的静态类型可以显著提升可维护性。它可以让你很清楚地知道你处理的是多态组件还是复合组件，并且它鼓励你避免使用原始的 HTML 属性来进行样式化，如“style”和“class”。这可以带来更好的类型安全，实现早期错误检测，改进开发者体验，让你的 UI 代码更易于维护。

InfoQ 就如何开发健壮的 UI 组件采访了Glenn Reyes。

InfoQ：你是如何定义“健壮的 UI”的？它们有什么特点？

Glenn Reyes：“健壮的 UI”是指强大、可靠且适用于所有人的 UI。以下是让 UI 变得健壮的要素：

1. 易于使用：它简单直观，便于人们理解和使用。

2. 一致性：它在任何时候、任何设备或浏览器上的外观和工作方式都是一样的。

3. 可以很好地处理错误：即使发生了意想不到的事情，比如遇到异常或错误的用户输入，它也不会发生崩溃。

4. 扩展就绪：它的构建方式可以很容易地随用户或项目的需求增长做出改变。

5. 无障碍：它的设计让每个人，包括残疾人，都可以舒适地使用。

6. 易于更新：可以很容易地进行修复或更新，不会引发问题或影响到其他部分。

总得来说，健壮的 UI 运行良好、对用户友好、可靠、扩展就绪，所有人都可以轻松使用，并且易于维护和更新。

InfoQ：有哪些现成的工具？它们能带来什么样的好处？

Reyes：在处理可变列表时，例如通过映射函数渲染的列表，可能会在代码中引入不可预测性。为了解决这个问题，你可以通过添加“顺序规则”来保证确定性。例如，按字母顺序排序或根据特定模式分组。这样可以确保一致性，并减少代码评审过程不必要的噪音，使评审过程更顺畅、更集中。

如果你直接在应用程序中开发 UI 组件，在可以构建目标组件之前可能需要进行多次交互。这种方式效率低下，特别是在处理依赖于特定状态的组件时，例如表单字段的错误消息。你可以不用手动去诱导引发这些错误状态，而是使用其他工具或方法让你能够立即看到和处理这些状态。这不仅可以节省时间，还能够让你完全专注于手头的组件，不受到周围环境的干扰。

原文链接：

https://www.infoq.com/news/2023/09/UI-robust-user-friendly/