前端交互体验优化若干点

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

用户体验说起来是一个比较模糊的概念，但是又是实实在在地决定着用户用起来爽不爽。

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

• 头部添加菜单解释说明，一个菜单标题只有简简单单的几个字，用户一开始用起来可能都不知道该菜单是干说明用的，增加的解释说明能很好的帮用户了解该页面功能
• 操作按钮的归类，之前一般将增加，删除，修改，导出表格，搜索，搜索条件等都放在一块，这样给人一种很杂乱的感觉，现在将这些控件分为两类（搜索条件和搜索按钮 ， 增删导出刷新等操作按钮 ）。其中 增删导出刷新等操作按钮 放到头部菜单里，和下面的 搜索条件和搜索按钮 区分开来。
• 对于复杂的搜索条件，划分为基础查询条件和全部查询条件，基础查询条件涵盖用户常用的几个搜索条件，其余高级搜索条件先隐藏，通过 显示全部 按钮显示全部搜索条件。这样体验具有层次感，而且用户不会因为一大堆条件输入框而感到厌烦。
• 对于表格，如果查询数据为空，则显示 暂无数据 ；如果是后台报错，则显示 网络异常，请点击按钮刷新，之前都是通过提示框显示接口报错等。这样的好处有两点，一是如果用户想尝试重新获取数据不用再点刷新整个页面了，二是提示框会打断用户聚焦的视线，对于用户来说是不好的体验。

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

• 左侧菜单树，当菜单过多时，增加搜索框，可以快速定位到该菜单页面，方便用户操作。
• 避免全部页面 loading，只用局部 loading。

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

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

to be continued!