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

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

最近做了一个项目中用到了穿梭框的样式，穿梭框在后台界面设计中虽然不常用到但对于简化页面逻辑有很大的帮助。看了很多后台的界面，发现并没有看到大家运用穿梭框的形式，所以想要写一篇文章记录一下。

穿梭框（来源：element）

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

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

1、选择虚拟库

2、点击选择物料后跳出弹窗绑定铭牌

3、填写铭牌信息

4、刚刚点击选择的物料都会出现在这个页面

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

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

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

穿梭框（来源：element）

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

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

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

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

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