资讯专栏INFORMATION COLUMN

前端交互体验优化若干点

buildupchao / 3184人阅读

摘要:做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。这样体验具有层次感,而且用户不会因为一大堆条件输入框而感到厌烦。避免全部页面,只用局部。

做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。 用户体验说起来是一个比较模糊的概念,但是又是实实在在地决定着用户用起来爽不爽。

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

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

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

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

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

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

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

避免全部页面loading,只用局部loading。

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

指标卡片 加问号图标,用tooltip显示指标的含义;包括页面上一些文案,如果含义难懂的都可以加tooltip

可点击的元素鼠标变成手型

前端缓存优化(用户点击过的图标数据缓存起来)

表单要尽可能简单,负责的表单会让用户失去耐心

下拉框如果选项比较少,可以直接用radio来代替,用户可以省一步点击下拉框的操作

查询图表的时候需要填时间区间,可以放一些常见的时间区间给用户选择,比如今天/昨天/上周/上月/前三月, 避免用户去手动选择两个时间框

to be continued!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/116253.html

相关文章

  • 前端交互体验优化若干

    摘要:做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。这样体验具有层次感,而且用户不会因为一大堆条件输入框而感到厌烦。避免全部页面,只用局部。 做前端也有一段时间了,对于实现各种需求来说已经是游刃有余了,代码的质量和可扩展性都能把控。目前最缺乏的就是所谓的用户体验。 用户体验说起来是一个比较模糊的概念,但是又是实实在在...

    darryrzhong 评论0 收藏0
  • 云适配开放平台内测“挑刺有奖” :赢土豪金

    2013年,你是甲方,我是乙方,我为你云适配。 2014年,我的地盘你做主,云适配攻城狮们的工作阵地将全权授权给你,你可以自由的 DIY 您的网站,No more time,No Money,只要1天,只要1个人,只要2步,云适配开放平台一站搞定,您的跨屏网站即刻诞生了!!! BUT,BUT,BUT,在你开始完全做主前,我们想邀请您来参与云适配开放平台的内测,只要您具备最基础的前端开发技术,拥有一...

    vvpale 评论0 收藏0
  • 云适配开放平台内测“挑刺有奖” :赢土豪金

    2013年,你是甲方,我是乙方,我为你云适配。 2014年,我的地盘你做主,云适配攻城狮们的工作阵地将全权授权给你,你可以自由的 DIY 您的网站,No more time,No Money,只要1天,只要1个人,只要2步,云适配开放平台一站搞定,您的跨屏网站即刻诞生了!!! BUT,BUT,BUT,在你开始完全做主前,我们想邀请您来参与云适配开放平台的内测,只要您具备最基础的前端开发技术,拥有一...

    TesterHome 评论0 收藏0
  • 终于等到你!阿里正式向 Apache Flink 贡献 Blink 源码

    摘要:阿里妹导读如同我们去年月在峰会所约,阿里巴巴内部版本将于年月底正式开源。基于的计算平台于年正式上线。截至目前,阿里绝大多数的技术部门都在使用。在那之后,阿里巴巴将直接使用用于生产,并同时协助社区一起来维护。 showImg(https://segmentfault.com/img/remote/1460000018041567); 阿里妹导读:如同我们去年12月在 Flink Forw...

    yzd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<