10 月 23 - 25 日,QCon 上海站即将召开,现在购票,享9折优惠 了解详情
写点什么

设计强大 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:005525

评论

发布
暂无评论
发现更多内容

后端程序员实现一个IP归属地的小程序

Jeremy Lai

SpringBoot整合RabbitMQ实现六种工作模式

Jeremy Lai

spring-boot Rabbit MQ

Centos7安装Nginx教程,一步安装http和https

Jeremy Lai

nginx Linux安装

详解ConCurrentHashMap源码(jdk1.8)

Jeremy Lai

ConcurrentHashMap 源码阅读

详解MySQL隔离级别

Jeremy Lai

隔离级别

字节一面:说说TCP的三次握手

Jeremy Lai

三次握手 TCP协议

应用瓴羊Quick BI数据分析,实时掌控企业运营数据

对不起该用户已成仙‖

腾讯云升级云端 IDE Cloud Studio,助力开发“化繁为简”

科技热闻

EMQ助力阿里云飞天洛神云网络构建新一代“亿级并发、百万级吞吐”NLB网络型负载均衡系统

EMQ映云科技

阿里云 物联网 IoT mqtt 12 月 PK 榜

Web3时代到来,腾讯云助力产业提效和互联网创新

科技热闻

PID和TID的区别

源字节1号

软件开发 前端开发 后端开发 小程序开发

超简单的CDH6部署和体验(单机版)

程序员欣宸

大数据 hadoop CDH 12月月更

CleanMyMac X2023第三方mac系统清理软件

茶色酒

CleanMyMac X CleanMyMac X2023

AI 作画领域中的“神笔马良”是怎样炼成的?

行者AI

MySQL更新锁表超时 Lock wait timeout exceeded

Jeremy Lai

事务隔离 Mysql死锁

深入理解Redis 数据结构—字典

Jeremy Lai

字典 redis 底层原理

Seata 环境搭建

Jeremy Lai

分布式事务 seata

Spring Cloud 整合 nacos 实现动态配置中心

Jeremy Lai

nacos 动态配置

干货 | 企业如何快速采集分析日志?

嘉为蓝鲸

运维 嘉为蓝鲸

阿里云ECS后台CPU占用100%,top却找不到

Jeremy Lai

cpu 100% 阿里云;

手把手教你用Java获取IP归属地

Jeremy Lai

IP地址

小程序正式版报错600002 url not in domain list

Jeremy Lai

小程序

腾讯发布数字政务核心产品体系,多方位助力政府数字化转型

科技热闻

融云&艾瑞发布《政企数智办公平台行业研究报告》,解读数智化时代的办公新趋势

融云 RongCloud

即时通讯 办公 数智化

嘉为蓝鲸WeOps荣获“2022年度行业科技创新产品”

嘉为蓝鲸

运维 嘉为蓝鲸 #WeOps

友元、异常和其他

Maybe_fl

商务部研究院信用所、启信宝联合发布《中国商务信用发展指数报告(2022)》

合合技术团队

人工智能 大数据 商业

Java通过反射注解赋值

Jeremy Lai

解决问题 java注解

中国视频云进入“出海”时代,腾讯云音视频发布海外专门品牌及新产品

科技热闻

干货 | 五大关键点,帮助企业快速构建可落地的IT服务管理体系

嘉为蓝鲸

运维 嘉为蓝鲸 IT服务

嘉为蓝鲸IT服务管理中心V3.0正式发布,实现IT服务管理体系新升级!

嘉为蓝鲸

运维 嘉为蓝鲸 IT服务

设计强大UI:NDC大会分享构建用户友好设计的策略_工程化_Ben Linders_InfoQ精选文章