当前位置: 首页 > Web前端 > CSS

前端用户体验的一些小技巧

时间:2023-03-31 01:54:04 CSS

做前端有一段时间了,满足各种需求已经绰绰有余,代码的质量和扩展性都可以把控。目前最缺乏的就是所谓的用户体验。1、用户体验是一个比较模糊的概念,但真正决定了用户是否乐于使用。最近写了很多中后台系统。很多人觉得这种中后台系统没什么技术含量(用现成的UI框架写表单,做表的增删改查)。我想说的是,任何产品要想做好,一定要重视用户体检。2.另一个劣势是大部分公司缺乏产品和ui资源,无法为此类产品提供强有力的支持。因此,大部分提升用户体验的工作都落在了前端。典型的中后台应用,主要是增删改查表,主要有以下改进。最基础的页面的每一个ui组件都要能够正确合理的使用。使用select时不要使用input,使用Useselec等header添加菜单说明时不要使用aotucomplete。菜单标题只有几个简单的词。用户可能不知道菜单一开始是为了解释。增加的解释可以帮助用户理解。该页面功能操作按钮的分类,之前通常把增删改查、导出表、搜索、搜索条件等放在一起,给人一种很杂乱的感觉。现在这些控件分为两大类(搜索条件和搜索按钮,添加、删除、导出、刷新等操作按钮)。其中,添加、删除、导出、刷新等操作按钮被放置在头部菜单中,以区别于下方的搜索条件和搜索按钮。对于复杂的查询条件,分为基本查询条件和全部查询条件。基本查询条件涵盖了用户常用的几个搜索条件,其他高级搜索条件优先隐藏,通过ShowAll按钮可以显示所有搜索条件。这样体验就有了层次感,用户不会对大量的条件输入框感到厌烦。对于表单,如果查询数据为空,则暂不显示任何数据;如果是后台报错,会显示网络异常,请点击按钮刷新。之前是通过提示框显示界面错误。这样做有两个好处。一是如果用户想尝试检索数据,不需要点击刷新整个页面。另外就是提示框会打断用户的注意力,对用户来说是不好的体验。当表中列数较多时,应固定操作列,以方便用户操作。左侧菜单树,当菜单过多时,增加搜索框,快速定位菜单页面,方便用户操作。避免全部页面加载,只使用部分加载来封装重复逻辑,比如表格分页,一些大数据项目的用户体验优化比如大量的表单,点指示牌加问号图标,用tooltip展示指标含义;包括页面上的一些文案,如果意思难以理解,可以添加tooltip和clickable元素。鼠标变成手形前端缓存优化(缓存用户点击过的图标数据)。表单尽量简单,复杂的表单会让用户失去耐心。如果选项比较少,可以直接用radio代替,用户可以通过点击下拉框查询图表省去一步。需要填写时间区间,可以放一些常用的时间区间供用户选择,比如今天/昨天/上周/上个月/3月之前,防止用户手动选择两个时间段,当前用户登录后会被其他用户推送下线,选择使用全屏提示框+确定按钮提示用户。此类通知为一级重要通知,用户必须知晓该重要通知。确定按钮是强制用户浏览重要通知。产品提出自动跳转到登录页面,一行小字提示,让用户看到这条重要通知的可能性大大降低。这是不对的。上面提到的表格展示了三种状态:data/nodata(无数据)/网络异常,点击刷新,这三种其实适用于很多展示数据的组件,比如目前互联网产品登录的图表组件是直接跳转到注册页面,然后下面显示登录页面的入口,之前是反的。这样做的好处是可以提高新用户的转化率。将注册过程分成多个步骤。每次填一点,可以有效提高注册转化率。对于一般的ui布局(列表/表格等),如果没有数据,需要显示暂时没有数据的提示,文案可以自定义对于常用的功能,应该有一个全局入口保证所有页面都能快速访问,而不是在展示数据的时候只进入特定页面访问接口数据的缓存首先检查是否有缓存,如果有缓存,直接使用缓存;如果没有,请求数据。问题是如何设置缓存的过期时间。显示数据时,首先检查是否有缓存,如果有缓存,直接使用缓存,在使用缓存的同时请求数据,返回新数据,覆盖旧数据;如果没有,请求数据。