前端应该注重用户体验

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

用户体验提及来是一个比较模糊的概念，可是又是实实在在地决定着用户用起来爽不爽。最近写了不少中后台系统，不少人都认为这种中后台系统没什么技术含量（使用现成的UI框架写写表单，table作一作增删改查），我想说的是任何产品若是想作好，都必须重视用户体检。

另外一个劣势是大部分公司对于这类产品，都缺少产品和ui资源提供大力的支持，因此说，提高用户体验的大部分工做都落到前端身上了。

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

• 最基本的页面的每一个ui组件要能使用正确，合理，在使用select的时候不要使用input，在使用aotucomplete的时候不要使用selec等
• 头部添加菜单解释说明，一个菜单标题只有简简单单的几个字，用户一开始用起来可能都不知道该菜单是干说明用的，增长的解释说明能很好的帮用户了解该页面功能
• 操做按钮的归类，以前通常将增长，删除，修改，导出表格，搜索，搜索条件等都放在一块，这样给人一种很杂乱的感受，如今将这些控件分为两类（搜索条件和搜索按钮，增删导出刷新等操做按钮）。其中 增删导出刷新等操做按钮 放到头部菜单里，和下面的 搜索条件和搜索按钮 区分开来。
• 对于复杂的搜索条件，划分为基础查询条件和所有查询条件，基础查询条件涵盖用户经常使用的几个搜索条件，其他高级搜索条件先隐藏，经过 显示所有 按钮显示所有搜索条件。这样体验具备层次感，并且用户不会由于一大堆条件输入框而感到厌烦。
• 对于表格，若是查询数据为空，则显示 暂无数据； 若是是后台报错，则显示 网络异常，请点击按钮刷新，以前都是经过提示框显示接口报错等。这样的好处有两点，一是若是用户想尝试从新获取数据不用再点刷新整个页面了，二是提示框会打断用户聚焦的视线，对于用户来讲是很差的体验。当表格的列数不少时，操做一栏要固定住，方便用户操做。
• 左侧菜单树，当菜单过多时，增长搜索框，能够快速定位到该菜单页面，方便用户操做。
• 避免所有页面loading，只用局部loading
• 封装重复逻辑，好比table的分页，大量表单等

1. 大数据项目的一些用户体验优化的点

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

1. 通用

• 当前用户登陆后被其余用户挤下线，选择用全屏提示框+肯定按钮提示用户。此类通知属于一级重要，必须确保用户知道该重要通知，肯定按钮是为了强行让用户浏览该重要通知的。产品提出自动跳转到登陆页面，用一行小字提示，让用户看到该重要通知的可能性大大下降。实在不妥。
• 前面说 的table 显示三种状态：有数据/无数据（no data）/网络异常，点击刷新，这三种其实适用于不少的展现数据的组件，好比图表组件。