后台交互设计的这些细节，你知道吗？

我们在工作中，时不时会涉及到前后台的设计。如果说前台页面的内容可以比喻成一场舞台上的大戏，那么后台就是支撑前台有序运行的基础，为前台准备戏服道具、控制灯光与帷幕。

 

互联网中的“后台”也是如此，它给人的印象是理性的、功能性的，与前台页面的热闹截然不同。近来撸了个后台页面，在磕磕碰碰的过程中，我有了些新体会，来与大家分享一二。

 

 

后台页面V.S. 前台页面

 

做多了前台页面后，再来做后台页面，设计师就需要换个思路了。与前台页⾯需要挖空心思去想怎么吸引用户、引导用户做各种操作不一样，后台页面的⽤户上来就是面活的，他并没有什么心思去闲逛。

 

不过，即使是后台页面的设计，也并没有一个通用的准则。有些后台页面则关注功能的强大，让专业的使用者能得心应手。因此这个准则，需要根据针对的用户群体、用户场景、操作频次来决定。

 

注意两个路径：

视线路径 & 操作路径

 

如何在这么多操作的前提下，提⾼效率？先从页⾯框架上着手。要探索哪种框架是效率最高的，可以考虑视线的移动路径、操作的路径；

 

取舍的两个原则：

①路径不要过页，横跨整个显示屏是不太可取的；

②路径应该顺着人的浏览习惯，如左→右、上→下这样的路径是比较顺的。

 

罗列你能想到的框架，然后从两个路径的⻆度去比较它们，就会有答案了。

 

 

梳理不同状态对应的操作

 

后台系统的状态可能很多，而不同状态会对应的操作也差别很大。因此需要提前把相应的操作梳理清楚。

 

 

繁琐但快捷 V.S. 简洁但较慢

 

上⾯提到，我这次取舍方案的大前提是操作效率。接下来这两个细节案例就是以这个前提来确定最终方案的。

 

第一个案例，是发布出价时，竞价规则的展示方式取舍：到底是用简洁的下拉菜单，还是用繁琐的单选框？考虑到实际场景里，拍品的竞价规则切换是没有规律、随着拍品的不同而可能随时变动的，这种情况下，使用下拉菜单的样式会需要操作员多步操作，且不好记忆选项的位置。因此最终还是使⽤了看起来繁琐的单选框。

 

第二个案例，是发布常⽤语的模块要用什么形式：解决的第一个方案，是 hover 后出现发布按钮，而输入常用语的功能也是收起来的；方案二是发布按钮直接放在每项常用语后面，常用语输入框直接可输入。仍然是简洁优雅和复杂⽽朴实的抉择——最终我选择了后者。

由此可见，明确了你的前提后，设计决策会变得明晰很多。

 

小结

以上这些还仅仅是⼀个项⽬⾥我遇到的问题，后台与后台之间差别也很⼤，如看数据的、发布商品的、发表⽂章的等等，它们的场景都是不同的。后台的细节与状态往往⽐较多，但是在陷⼊细节之前，⼀定要先分析⽤户最重要的场景与操作是什么，明确这个页⾯最关键要解决的问题，在抉择不同⽅案的时候才能更游刃有余。

转载于:https://my.oschina.net/u/3773544/blog/1616956