10个细节提升后台用户体验

10个细节提升后台用户体验

说一个程序员最快乐的事,不是花更多的钱,在家里少活一点,而是用他最喜欢的技术来安排一个舒适的时间表。我最近接管了这样一个项目,使用了WebPAC+VUE家族的桶,以及其他一些先进的技术。但是我不这样做。谈论今天的技术。让我们谈谈我对互动的思考,虽然它只是一个后台系统。

说到后台系统(管理系统,ERP系统),我做了很多,没有一个是难看和难于使用的,因为这种系统没有被最终用户使用,它不需要太多的交互,也没有UI设计。有时它甚至没有PM。

我在后台系统中一直有一个结,虽然它的用户只是一个小的组,但是使用系统的时间很长,有时一天使用五到六个小时,系统是否易于使用将直接影响工作效率,并且也会影响T。他的心情。我不想让他们在工作中骂人,所以这次我有充裕的时间。我也试着用我自己的理解来打磨这个后台系统,试着让它变得更好和更温暖。

舒服的界面:

后台系统一般是选择现有的UI框架,比如bootstrap。但用了框架并不意味着在界面上就万事大吉了。你还得有自己的思考,如何用这个工具把界面做的舒服。

让界面舒服的核心因素是什么?配色?图案?还是炫酷的动画效果?都不是。

长时间以来,我都坚持这个观点,界面舒适的核心因素是——间距。没错,就是这个不起眼的间距。不信你找一些案例来观察下。一致、整齐、恰到好处的间距,总是让界面看起来舒服。而那些难看的界面,问题总是出在间距的失调上,有些甚至是元素紧贴没有间距。

所以,除了bootstrap的栅格系统外,这次我定义了很多css类来进行间距控制,把间距进行分类,全局统一。

另外一个让界面操作起来舒适的因素就是:统一有序。比如,所有的提交按钮都应该是一个颜色,所有表格中的操作按钮都是一个样式,所有的返回按钮也是一个颜色。

还有一点重要的是,在一个视图中,不要出现两个以上的主要按钮,否则用户就会有一丝丝犹豫。所谓主要按钮就是诸如表单提交等重要功能按钮。bootstrap给按钮起的primary这个名字很好,所以不要滥用primary按钮。

界面布局的细节有很多,需要心思细腻一些来感受,原则就是让用户舒服。

监听窗口调整:

bootstrap已经做了自适应,但还是那句老话,这并不代表万事大吉。比如纵向滚动条会在不合适的时机出现,原因是你给主内容区设置了最小高度。

为什么要自己监听窗口调整呢?这取决于后台系统的性质,它是人用来办公的。既然是办公,屏幕上就不会只开一个浏览器窗口。很多时候还得开word、excel等其他软件。有些时候用户肯定会把浏览器窗口缩小到一定尺寸来与其他窗口并列。这时候如果横向滚动条、纵向滚动条都出来了,那简直让人抓狂。

所以要照顾到这个场景,在调整窗口的时候进行监听,确保窗口缩小到一定阈值还是能够无痛操作的。window.onresize嘛,几行代码就搞定了。

遮罩的取舍:

我说的遮罩,就是那种半透明的蒙层,通常我们会在发起ajax请求的时候给遮上,并配以loading图案,禁止用户在发送请求期间进行其他操作。

有时候我在想,我们是否滥用了遮罩。ajax的本质是异步请求,是为了不让耗时操作阻塞掉当前页面,而我们用了ajax,却又拿遮罩把页面给盖住,这岂不是违背了我们使用ajax的初衷。

另一方面,遮罩的出现、消失,会给人闪烁感,伤眼睛。尤其是请求时间较短的时候,就知感觉突然闪了一下,实在没这个必要。

但我们也要做区分,比如提交操作,为了避免点击快了重复提交,我们还是需要给遮上。其他的请求,例如请求数据列表,就完全不必遮罩了。还有其他常见的,如异步请求树形组件的数据、多级菜单的数据、suggest功能,都是不需要遮罩的。

另外想说的一点是,一些弹框组件,在遮罩到时候,会把body加上overflow:hidden;样式,为了避免弹框后面的页面还能滚动。这样的副作用是,body的滚动条会随着遮罩而消失、出现,给页面造成抖动。所以我把这个也给去掉了,弹框就弹框,不要修改原有的滚动条。

过渡效果的舍弃

弹框、下拉菜单、遮罩等效果我都是没有加过渡的,也就是说都是瞬发的。

这一块我是这么考虑的,毕竟后台系统的功能还是日常办公,效率应该是首要考虑因素,淡入淡出、滑入滑出等过渡效果会有时间消耗。尽管动画给人的趣味性多一些,但是长年累月看这些动画,估计也没啥新鲜感了吧。反而会觉得浪费时间,用户在进行一系列习惯成型的操作,还非得等你的过渡效果结束,所以干脆就去了吧。

所以我就这么设计了,所有界面视图发生突变的地方,都是直入直出,给用户一种干净利落的操作感。

用图标而不是字符

曾经有一段时间,前端圈子里对字符模拟图形特别热衷,经典的如字母X模拟叉号、border模拟三角形、特殊字符模拟菱形等。目的就是为了不使用图片,省去http请求。这一技能被很多前端工程师如数家珍,并作为炫技常用姿势。

然而大概是两年前的一次经历,改变了我的这一观念。当是我做了一个弹框,右上角的关闭按钮,我用了字母X模拟并洋洋得意。我老大(资深PM)看了后跟我说把X换成图片吧,用字符感觉有点廉价。

没错,就是“廉价”这个词,深深刻在了我脑海中,也让我开始感受「有品味」到底是什么样的体验。所以我之后很少用字符再去模拟图形。

现在更多的选择是字体图标,bootstrap提供了很多内置的,所以我在这个系统中大量使用了它们。

登录失效的检查:

作为使用后台系统工作的人,最怕的是什么呢?莫过于填了半天表单,点提交的时候,提示说登录失效,然后跳转到了登录页面。你填的数据都没了。

所以为了解救用户的这一痛苦体验,我特地做了登录失效的捕捉。如果后端返回的信息是登录失效,前端会弹出登录窗口,让用户在弹窗中完成登录,然后还能继续操作原来的页面。

基本的快捷键:

尽管只是个小小的后台系统,基本的快捷键还是要有的。比如,有些用户填完帐号和密码,本能的就去敲回车登录了。如果这时候他发现回车没反应,内心会有一丝失落感。

所以比较基本的快捷键功能是要提供的,比如Enter提交、Tab切换、Esc收起菜单。有保存功能的页面,能响应Ctrl+S也是极好的。

增大点击响应区域:

这个原则应该是比较普及的,比如一个<a>标签,如果只有一两个字,就比较难点中。一般会给<a>加上display:inline-block; width: 100%;来扩大响应区域。

另外一细节很容易被人忽略,就是<label>标签与<input>标签的绑定,让<label>的for属性等于<input>的id,那么用户在点到<label>标签的时候输入框也会获得焦点。

本地存储:

对于一些类似“常量”的数据,比如用户列表啦,配置列表啦,完全可以存储在本地,localStorage用好了,能让你的系统响应更加丝滑。

如果担心本地数据的过期问题,可以给附加一个tag来标记,如果需要更新新的数据了,则修改代码中的tag值就可以了,如果本地存储的tag值不一致,则去服务端请求新的数据。

零白屏时间:

由于它是一种用于日常工作的系统,白屏的等待时间也很难承受,所以我采用前后分离架构,前端使用VUE路由器来路由,用WebPACK封装,白屏时间打开新页面基本上是零,因为需要EST根本不被采纳。

当然,这完全是一个技术层面的优化,从整体上看,技术与产品之间存在着一些相互作用的问题。PM可能无法注意到它。因此,前端工程师将掌握它,并使您的工作经验在技术层面上是最好的。我认为这是前端的价值。

新闻资讯

不断的努力,严格要求自己,真诚的为客户服务

  • +

    公司新闻

    查看更多>>
  • +

    行业新闻

    查看更多>>
    • 站内文章的优化及站内优化的重要性站内优化是指网站内部优化,即网站本身内部的优化,SEO站内优化包括代码标签优化、内容优化和URL优化。文章如何优化?1、关键词密度:首页文章内容围绕关键词进行阐述撰写,目标关键字在文章中自然分布,不堆砌,不刻意,......

    • 做好站内优化有什么核心理念及方法站内优化就是指网站内部优化,即网站本身内部的优化,SEO站内优化包括代码标签优化、内容优化和URL优化。站内优化的核心理念1、代码精简化。网站的代码坚持越短越好,做到精简原则,删除无意义的目录、层级......

    • 网站优化的过程中反映的信息数据网站优化是指在了解搜索引擎自然排名机制的基础之上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中关键词的自然排名,获得更多的展现量,吸引更多目标客户点击访问网站。网站优化包括整站优化、站内优化、站外优化,使网站适合搜索引擎检索,满足搜索引擎排名的指标,从而在搜索引擎检索......

    • 什么是网站推广,它有什么特点策略?网站推广就是以互联网为基础,借助平台和网络媒体的交互性来辅助营销目标实现的一种新型的市场营销方式,当前传播常见的推广方式主要是在各大网站推广服务商中通过买广告之类等等方式来实现,免费网站推广包括SEO优化网站内容或构架提升网站在搜索引擎的排名,在论坛、微博、博客、微信、Q......

  • +

    产品方案

    查看更多>>
    • 网站建设的完成和投入使用并没有显示出网站已经完善,因为越来越多的人在网站上出现越来越多的问题,因此网站的维护工作是非常必要的。网站维护工作包括以下几个方面:网站建设一、服务器的维护工作网站的服务器是非常容易出现问题的,因为每天它都要承载很多东西,并且每分每秒都在运作,因此服务器的硬件和软件都会出现问题。而对服务......

    • 网站优化有助于提高网站的排名,所以做好网站优化是非常重要的,但是网站优化也应该注意一些问题,或者做不好优化工作。讨论了优化中应注意的几个方面。抓好以下这些工作,才能做好网站优化工作一、关键词很多人为了能够快速提高网站的排名,在网站优化的过程中,增加了不少关键词的插入,虽然这样在用户们检索关键词时出现该网站的概率......

    • 目前,在移动软件开发中,客户相对较少,其次是APP和最少的公共号码。接下来,我们将对以上三个内容进行比较和分析,以期对开发和销售移动产品的客户有所帮助。1.小程序,公众号和APP的对比在百度指数中,将小程序,公众号和APP同时进行对比搜索,可以得到其搜索指数如下图显示:从该图中我们可以看出,APP的搜索指数平均......

    • 空间主机有许多不同的配置,如数据库配置、操作系统配置和支持的脚本语言配置等,并且应该根据站点的配置来选择选择。如何根据网站选择空间配置:第一、负载量负载的重要性远高于空间容量。虽然目前的应用站点空间业务脚本是基于许多用户共享同一个独立的服务器资源库的,但是用户仍然需要知道它会是什么样的,用户与其他人共享服务器的......

联系我们

如有问题请联系我们,我们7*24小时竭诚为您服务