后台界面设计 (qt界面设计)

浅谈穿梭框在后台设计中的应用

先说一下我的这个项目吧 （由于涉及到一些隐私问题所以关键信息已经隐去）

首先给大家看一下原型图，产品经理在这里设计了二级弹窗，

总结一下大概流程就是：1、选择虚拟库名称 —— 2、点击选择物料，选择你需要的物料或是手动搜索输入 —— 3、跳出绑定铭牌弹框，填写绑定铭牌信息 —— 4、选择的物料会汇总在一张表里，你可以在这个页面继续点击添加 —— 5、确认添加的信息无误点击入库

但是！这个流程不是固定的！有的物料可能已经有铭牌了所以不需要绑定，所以这个绑定铭牌弹框有可能出现有可能不出现。是不是很混乱呢？

这时，element控件库里的穿梭框吸引了我的注意。（文章的一开始也给大家看了）

于是参考这个穿梭框我就把页面做成了这样

因为产品经理说这些都是单选的所以干脆将表头的单选框去掉改在了后面的操作栏里。穿梭框中间的向左向右button主要是为了表单中多选设计的，我们这个表单是单选的所以也就不需要那个button了，算是一个伪穿梭框吧，但是借助了穿梭框的形式进行设计。但是这样的设计更加直观，可以让用户实时看到有哪些可以选择的东西，哪些已经被选了。

现在的页面逻辑是：1、用户在左侧选择物料 —— 2、右侧选择虚拟库名称 —— 3、点击入库

PS：如果该物料没有绑定铭牌，左侧表单操作栏里会显示绑定铭牌BUTTON，用户点击绑定铭牌后会有个弹窗让用户进行信息的填写（弹窗就不放了）

整个项目大概就是这样啦！第一次写文章肯定写的不太好大家多多包涵哦！

后台产品是否需要UI设计？

缘起在以前的一个东家干活时提后台产品需求，后台开发大锅向我要UI设计，我当时的第一反应是：后台能用就行了？还需要UI设计？？

是的，这就是问题之所在。根据前东家的经历，加上一般来说的想法，给内部人员使用的后台，从来都没想到过还需要经过设计部这个流程——赶快做完投入使用就行了，要什么用户体验？要什么自行车？要什么手表……=。=

凝望着开发GG水汪汪的大透视（好吧其实我只是觉得貌似定个属于公司自己的UI风格也挺有道理的，而且还能提升使用后台人员的幸福感，从而间接提高工作效率blabla……怎么貌似括号里的注释吐槽也可以这么长……），我终于开始思考后台产品设计的更高层次。

说干就干，于是立即开始骚扰度娘，走向西方求取真金啊不真经……

------------分割线（楼主查询资料中，敬请期待）分割线------------

承：

让我们继续。

暂且先将取经结果放在一边，回想从前对后台的认识，其实就是最简单的线框图，和用Axure基本元件画出来的没什么两样。

类似这样：

或者这样：

这么看来貌似没什么问题嘛，可以用嘛~~相信很多童鞋都是这么想的，于是我翻了翻有设计的案例。

比如这样：

这样：

以及这样：

……

…………

………………

好吧设计师大大，请给我一个后台的UI设计=。=

------------分割线（楼主和设计师斡旋中）分割线------------

转：

几经威逼利诱一哭二闹三上吊晓之以理动之以情申之以大义之后，终于拿到了后台设计的样板。

这是登录界面：

这是单点界面：

这是具体系统界面：

比较之下，总算有点感觉了呢，貌似看到了我们自己的后台style了。

OK，那就这么定了吧~

------------分割线（楼主整理总结中）分割线------------

合：

如果把后台也当做应当认真对待的产品，那么使用他的童鞋（比如运营、市场、商务等）就是这个产品的用户，我们除了考虑这个产品能不能用的同时，还需要像对待前端产品一样，更进一步考虑好不好用、用着爽不爽舒不舒服的问题，这个时候为后台也做一些UI设计也就有所必要了，毕竟提高了童鞋们的工作效率，也是对公司业务整体效率提升的重大帮助。

另外，在后台从无到有的初期，除了UI设计，各类元件和界面的重构也是为了今后的开发打基础。实际上这一次设计和重构之后，后面的后台开发工作就可以直接复用这些劳动成果了，确实是很有裨益啊：）

最后分享个关于后台产品设计的链接（虽然貌似做得不算好看，仅供参考了）：

/group/blog/119540

/group/blog/119541

/group/blog/119542

---没有分割线了，完---