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

No Silver Bullet 2020-11-13 07:29:12
前端 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. 展示数据的时候先查找是否有缓存,如果有缓存直接使用缓存,并且在使用缓存的同时去请求数据,返回新的数据后覆盖老数据;没有就请求数据。
版权声明
本文为[No Silver Bullet]所创,转载请带上原文链接,感谢
https://shq5785.blog.csdn.net/article/details/106530390

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple