要说程序员最开心的事情是什么,不是钱多活少离家近,而是能用自己喜欢的技术,做一个排期不紧的舒坦项目。最近我就接手了这样一个项目,使用了webpack+vue全家桶,以及其他一些业界前沿技术。不过今天不聊技术方面,先聊聊我对交互方面的一些思考。尽管它只是一个后台系统。
说到后台系统(管理系统、ERP系统),我也做过很多了,无一不难看、难用。因为这类系统不是给终端用户使用,对交互要求不高,也没有UI设计,有时候连PM也没有,全凭程序员胡搞。
我对后台系统却一直有一个心结,尽管它的用户只是少数的群体,但是他们使用系统的时间却很长,有时候一天要用它工作五六个小时。而且系统的好用与否,直接影响工作效率,搞不好还影响心情,我可不想让他们边工作边骂娘。所以这次趁时间充裕,我也尝试用自己的理解来打磨这个后台系统,尽量让它友好些,温暖些。
舒服的界面
后台系统一般是选择现有的UI框架,比如bootstrap。但用了框架并不意味着在界面上就万事大吉了。你还得有自己的思考,如何用这个工具把界面做的舒服。
让界面舒服的核心因素是什么?配色?图案?还是炫酷的动画效果?都不是。
长时间以来,我都坚持这个观点,界面舒适的核心因素是——间距。没错,就是这个不起眼的间距。不信你找一些案例来观察下。一致、整齐、恰到好处的间距,总是让界面看起来舒服。而那些难看的界面,问题总是出在间距的失调上,有些甚至是元素紧贴没有间距。
所以,除了bootstrap的栅格系统外,这次我定义了很多css类来进行间距控制,把间距进行分类,全局统一。
另外一个让界面操作起来舒适的因素就是:统一有序。比如,所有的提交按钮都应该是一个颜色,所有表格中的操作按钮都是一个样式,所有的返回按钮也是一个颜色。
还有一点重要的是,在一个视图中,不要出现两个以上的主要按钮,否则用户就会有一丝丝犹豫。所谓主要按钮就是诸如表单提交等重要功能按钮。bootstrap给按钮起的primary这个名字很好,所以不要滥用primary按钮。
界面布局的细节有很多,需要心思细腻一些来感受,原则就是让用户舒服。
监听窗口调整
bootstrap已经做了自适应,但还是那句老话,这并不代表万事大吉。比如纵向滚动条会在不合适的时机出现,原因是你给主内容区设置了最小高度。
为什么要自己监听窗口调整呢?这取决于后台系统的性质,它是人用来办公的。既然是办公,屏幕上就不会只开一个浏览器窗口。很多时候还得开word、excel等其他软件。有些时候用户肯定会把浏览器窗口缩小到一定尺寸来与其他窗口并列。这时候如果横向滚动条、纵向滚动条都出来了,那简直让人抓狂。
所以要照顾到这个场景,在调整窗口的时候进行监听,确保窗口缩小到一定阈值还是能够无痛操作的。window.onresize嘛,几行代码就搞定了。
遮罩的取舍
我

