B端 Web 系统的用户体验优化

在B端后台系统的开发中，表单和表格是出现最为频繁的，这两块内容看似很好设计，不就是把输入框堆在一起，直到你作为一个表单的使用者，才发现一个体验良好的表单系统并不是那么容易设计出来的。

下面是我作为 web 开发者在开发表单系统时的部分总结感悟（以 antd 组件库为例）。

规则总结

• 表单和表格不要留白太多，尽量保持紧凑

• 表单项的含义，要从小白视角也能理解的角度去表达

• 表单项填入的数据格式，需要考虑到用户可能会输入各种乱七八糟的内容，数字、汉字、符号等等，即做好校验和错误反馈

• **尽可能的减少表单联动！**复杂的联动逻辑会增加使用者的心智负担，并很容易让开发者写出 bug

• 本着”填表单的人很懒，他根本就不想填任何东西“的理念去设计表单：

  • 交互要清晰、明了、简洁
  • 设计醒目： 用户很懒，有些提示项没必要放到tooltip里，直接给他显示出来，但可能会带来页面上的杂乱，此时需要权衡好。

• 以”每个使用者都是完全的新人“的前提进行设计：

  • 保证你的每个表单项不需要使用者去问别人是啥意思，并有很高的容错率

• 表单内容项过多时，考虑分组化显示，性质接近的表单项用大标题分成一组指引用户

• 重要操作要标红，比如删除，并有二次确认功能

• 在使用弹窗/Modal时： antd 组件库的 modal 在打开后有三种关闭方式：点击右上叉叉(closable)、点击背部遮罩(maskClosable)、点击取消按钮(cancelButtonProps={{disabled: bool}})，不同场景下需要使用或是需要禁用哪种关闭方式，需要多做考虑。

  • 比如当用户点击确认按钮触发网络请求提交时，在多数情况下表单应禁止被以各种形式关闭，需要等到用户获得最终反馈我请求到底成功没有后再进一步处理
  • 一般对于仅供查看的文本弹窗，则提供便捷的关闭方式是没问题的，但弹窗里涉及交互操作时，应禁止点击遮罩关闭，避免用户误操作关闭了弹窗会很崩溃

• 表单选项的描述问题是否使用 tooltip 组件呢？重要的信息建议不要放在 tooltip 里，因为几乎不会有人想看，请直接放在选项下方等，虽然这会让页面显得比较文字多，但利大于弊

• antd 的 表格/table 组件的默认表格间距过大，会造成视觉上的分散感，应设置 size="middle"，对于嵌套的表格设置 size="small"

• 体验细节：当含有嵌套表格时，提供一个默认功能：点击当前行的空白处可以折叠子表格，不需要必须点击折叠按钮才能折叠，antd table 组件可使用 expandRowByClick 进行设置

• 表格的标题一般不应出现换行的情况，antd 里设置 columns 里的 ellipsis 为 true

• 表格里的内容是居左、居中还是居右没有最佳值之说，只需要确保真个系统是表现一致的即可

• 作为一个系统使用者，真的很讨厌和害怕看到报错，这会让人感觉到’不完整‘了。所以我们需要帮助使用者消除这种不安感。

• 关于错误处理，究竟什么情况下该把什么信息暴露给用户？这块只需要从两个角度思考：前端和用户的交互，前端和后端的交互，前者则直接将错误反馈给用户，但要注意文案不能每个地方都一样，这样不利于追踪这部分的逻辑是出现在代码的哪个地方，后者的场景则不应把后端返回的错误信息暴露给用户，而是通过展示一些不暴露敏感信息的的错误码之类的东西，以便后期时追踪排查。

• 在写系统的说明文档时：一定要简洁，如果是一大段字，自以为写的很详细，然后发现几乎没人查看，字少了反倒浏览量更多

• 对于涉及多人操作的场景，即一个表单会有多个人同时修改，那么每次修改后，开发者重新拉取远端数据是很有必要的，以保证数据的统一性

• 搜索表单里的表单项的文案和表格里的列标题保持一致

• 减少 CLS 的出现，比如用户点击按钮后发现没反应，然后反复点击，突然按钮所在位置出现了其他内容导致按钮偏移到下方了，这种情况很容易出现误操作

如何衡量体验是否良好

• 通过问卷的形式收集使用者的反馈