Vue进阶（幺贰五）：前端用户体验提升(二)

前言

做前端也有一段时间了，对于实现各种需求来说已经是游刃有余了，代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。

1. 用户体验说起来是一个比较模糊的概念，但是又是实实在在地决定着用户用起来爽不爽。最近写了很多中后台系统，很多人都认为这种中后台系统没什么技术含量（使用现成的UI框架写写表单，table做一做增删改查），我想说的是任何产品如果想做好，都必须重视用户体检。
2. 另一个劣势是大部分公司对于这类产品，都缺乏产品和ui资源提供大力的支持，所以说，提升用户体验的大部分工作都落到前端身上了。

表格操作

典型的中后台应用，大多数是对表格的增删改查，有如下改进：

1. 最基本页面的每个ui组件要能使用正确，合理，在使用select的时候不要使用input，在使用aotucomplete的时候不要使用selec等。

2. 头部添加菜单解释说明，一个菜单标题只有简简单单的几个字，用户一开始用起来可能都不知道该菜单功能是什么，增加解释说明能够很好的帮助用户了解该页面功能。

3. 操作按钮的归类，之前一般将增加，删除，修改，导出表格，搜索，搜索条件等都放在一块，这样给人一种很杂乱的感觉，现在将这些控件分为两类（搜索条件和搜索按钮，增删导出刷新等操作按钮）。其中 增删导出刷新等操作按钮 放到头部菜单里，和下面的 搜索条件和搜索按钮 区分开来。

4. 对于复杂的搜索条件，划分为基础查询条件和全部查询条件，基础查询条件涵盖用户常用的几个搜索条件，其余高级搜索条件先隐藏，通过 显示全部 按钮显示全部搜索条件。这样体验具有层次感，而且用户不会因为一大堆条件输入框而感到厌烦。

5. 对于表格，如果查询数据为空，则显示 暂无数据； 如果是后台报错，则显示 网络异常，请点击按钮刷新，之前都是通过提示框显示接口报错等。这样的好处有两点，一是如果用户想尝试重新获取数据不用再点刷新整个页面了，二是提示框会打断用户聚焦的视线，对于用户来说是不好的体验。

6. 当表格的列数很多时，操作一栏要固定住，方便用户操作。

7. 左侧菜单树，当菜单过多时，增加搜索框，可以快速定位到该菜单页面，方便用户操作。

8. 避免全部页面loading，只用局部loading。

9. 封装重复逻辑，比如table的分页，大量表单等。

大数据项目中用户体验优化点

1. 指标卡片 加问号图标，用tooltip显示指标的含义；包括页面上一些文案，含义难懂的都可以加tooltip。
2. 可点击的元素鼠标变成手型。
3. 前端缓存优化（用户点击过的图标数据缓存起来）
4. 表单要尽可能简单，复杂的表单会让用户失去耐心。
5. 下拉框如果选项比较少，可以直接用radio来代替，用户可以省一步点击下拉框的操作。
6. 查询图表的时候需要填时间区间，可以放一些常见的时间区间给用户选择，比如今天/昨天/上周/上月/前三月, 避免用户去手动选择两个时间框。

通用

1. 当前用户登录后被其他用户挤下线，选择用全屏提示框+确定按钮提示用户。此类通知属于一级重要，必须确保用户知道该重要通知，确定按钮是为了强行让用户浏览该重要通知的。
2. 前面说 的table 显示三种状态：有数据/无数据（no data）/网络异常，点击刷新，这三种其实适用于很多的展示数据的组件，比如图表组件。
3. 现在互联网产品登录都是直接跳转到注册页面，然后下面显示登录页面的入口，之前是反过来。这样做的好处是能提高新用户的转化率。
4. 将用户注册流程拆分为多个步骤，每次填一点，能有效提高注册转化率。
5. 对于一般的ui布局（列表/表格等），如果没有数据，要展示一个 暂无数据 的提示，文案可以自定义。
6. 对于常用的功能，应该有一个全局的入口，以保证所有页面都能快速进入，而不是只能到特定页面才能进入。

接口数据的缓存

1. 展示数据的时候先查找是否有缓存，如果有缓存直接使用缓存；没有就请求数据。问题是缓存的失效时间怎么来设置。
2. 展示数据的时候先查找是否有缓存，如果有缓存直接使用缓存，并且在使用缓存的同时去请求数据，返回新的数据后覆盖老数据；没有就请求数据。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/106530390