提升后台系统的用户体验

要说程序员最开心的事情是什么，不是钱多活少离家近，而是能用自己喜欢的技术，做一个排期不紧的舒坦项目。最近我就接手了这样一个项目，使用了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可能会注意不到，所以就靠前端工程师来把握了，让你的作品在技术层面做到体验最好，我想这也是前端的价值所在吧。

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

提升后台系统