关于后台管理系统交互设计的一些思考

我相信作为一个前端人员，大部分人肯定都会有开发过企业运营管理系统和内部OA系统的吧，由于一些很特殊的原因，比如企业的开发资源和人力资源肯定是有限的，所以大部分这种需求都是以实现主要功能为主，一般来讲也不会有专业的UI设计师去设计手稿，所以关于交互设计这方面就都是由前端程序员自我发挥了，好在现在有很多开源好的各种ＵＩ组件库，比如（bootstrap,elementUI,antdesign）等．但是程序员毕竟对于交互理解可能没有专业的ＵＩ设计师那么好，就像我自己，也被吐槽过做出的东西丑，所以需要总结下．

image.png

1．属于一个功能整体的不要分离

bad.png

good.png

其实上面图的功能是我们很常见的功能，右侧的输入框实际上和左侧下拉菜单选项是有关系的，所以这种情况下就不要在视觉上分开，造成第一次用的人以为这是两个毫不相关的东西．

２.页面的头部搜索的内容和各种按钮的位置最好相对固定

bad.png

bad.png

good.png

可以这么说，如果有几个页面的头部的按钮以及排版不和大部分页面头部相同的话，那么作为用户来讲可能造成由于养成的习惯而发生忽略一些按钮以及输入框的情况．因为习惯性是人们神经系统在非常低层的一个现象，它发生在神经级别，即使最原始的，只具有非常简单神经系统的动物，比如扁形虫和阿米巴虫也会对重复性的事物产生习惯．所以我们最好在一致的位置摆放信息和组件．不同页面上提供的类似功能的区域都应该保持一致．用技术的角度来讲就是要抽离成一套功能组件，省力省时．

3．锚点功能要更清晰

image.png

其实我们在一些后台的配置页面都会为了用户更快速的找到相关配置的位置而开发类似的锚点导航条，点击时页面滑动到相应的位置，但是页面的纵向高度其实足以装下好几个配置区域，这时候即使滑动过去也难以在第一时间就很好的定位到相关模块，所以这里最好在滑动过去的时候在一些ＣＳＳ样式，从颜色上让人更容易发现，类似下图：

good.png

在点击时给一个变色，然后一秒后消失．．．

推荐一本书

其实还有很多要总结的，因为只要你还在追求完美的路上，那么类似问题就会有很多，另外我上面也只总结了三点，这三点可能只是我们团队的问题，而你们团队没有类似的问题，所以要接触这方面知识的话最好是先看看书，然后在结合你们自己程序员写的管理后台去看一下．废话不多说了，这本书叫＜认知与设计＞，我之所以推荐这本书是因为这本书不仅仅告诉你怎么样的设计更容易让人接受，它更多的告诉你了原因，这些原因都是和人的构造有关的，和我们人类特有的视觉系统有关，和我们的大脑构造有关的．当然，这一本书是不够的，只不过这本书或许比较适合最开始的阅读．

一些题外话

现在很多的技术人员动不动就更关注什么性能优化，什么写一个牛逼的工具，项目层面也确实这么些东西更引人注意，优先级相对也会更高．也更容易出绩效，所以可能这些很细节的东西都没人喜欢去处理和学习～