10个细节提高后台系统的用户体验

要说程序员最开心的事情是什么，不是钱多活少离家近，而是能用本身喜欢的技术，作一个排期不紧的舒坦项目。最近我就接手了这样一个项目，使用了webpack+vue全家桶，以及其余一些业界前沿技术。不过今天不聊技术方面，先聊聊我对交互方面的一些思考。尽管它只是一个后台系统。

说到后台系统（管理系统、ERP系统），我也作过不少了，无一不难看、难用。由于这类系统不是给终端用户使用，对交互要求不高，也没有UI设计，有时候连PM也没有，全凭程序员胡搞。

我对后台系统却一直有一个心结，尽管它的用户只是少数的群体，可是他们使用系统的时间却很长，有时候一天要用它工做五六个小时。并且系统的好用与否，直接影响工做效率，搞很差还影响心情，我可不想让他们边工做边骂娘。因此此次趁时间充裕，我也尝试用本身的理解来打磨这个后台系统，尽可能让它友好些，温暖些。

 

舒服的界面

后台系统通常是选择现有的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-router作路由，配合webpack的打包，点开新页面的白屏时间基本为零，由于根本不走请求。

固然这彻底是技术层面的优化了。放全局来看，有些交互问题是存在与技术与产品的边界的，PM可能会注意不到，因此就靠前端工程师来把握了，让你的做品在技术层面作到体验最好，我想这也是前端的价值所在吧。

我所追求无它，只你会心一笑瞬间。