AI 年度盘点与2025发展趋势展望,50+案例解析亮相AICon 了解详情
写点什么

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

  • 2023-10-04
    北京
  • 本文字数:1553 字

    阅读完需:约 5 分钟

大小:864.96K时长:04:55
设计强大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/

2023-10-04 08:005289

评论

发布
暂无评论
发现更多内容
设计强大UI:NDC大会分享构建用户友好设计的策略_工程化_Ben Linders_InfoQ精选文章