最近看了一篇文章：

......把整个交互流程进行了重新梳理，之前的交互流程：

选择引用的内容 → 选择订单 → 引用；调整之后交互流程：选择订单 → 引用 → 选择引用的内容（弹窗） → 确认。

……相信还会有更多的可能性，希望大家可以接着这个思路继续思考一下，看看还可以进行哪些优化。

黑马青年，公众号：黑马家族这个 B 端设计我纠结了很久

理解需求：某个[记录集]，[记录/行]分别是[A][B][C][D][E]……[字段/列]分别是[1][2][3][4][5]……允许用户[多选]某些记录，并且[单选]某个字段组合……然后将这些数据“引用”。

发现特点：似乎，一直在以[串行操作]的角度进行设计。

方案一

按照需求的本质，选择[行]和[列]，直接并行即可。

如上图，[列]应该是单选某个组合，这个和原始需求有差别。这件事也简单，稍微改一下。

如上图，增加控制字段的[下拉框]，它将与选择[列]的勾选框进行联动。

如上图，假设用户在指定[列]的组合之外，勾选了其他字段，将显示“自定义字段”。

当[行]或[列]非常多，[方案一]就不那么好用了。

通常此类需求，[行]会非常多，用户将掉进[多选陷阱]。“作者的方案”虽然提供了计数器，但并没有帮助用户检查“到底选中了哪些订单”。

采用[穿梭框]，化解多选陷阱。如果一个字段还不足以区别记录，那就在[穿梭框]里多搞几个特征字段，直至“一眼辨别”为止。

如上图，右侧提供“效果预览”，方便用户检查“到底选中了哪些订单”。

当然，选择[行]和[列]交换上下位置，也完全可以。

这是一个具备扩展性的方案，具备各种变化的可能。

如上图，如果[行]非常多，[穿梭框]和[预览区]都将出现滚动条。

当然，扩展包含且不限于：

• 给[穿梭框]加上[搜索][筛选][排序]
• 给[穿梭框]加上[快速全选]和[一键清空]
  
• 给[预览区]加上切换[全屏模式]

• 给[预览区]加上[页码]或[冻结表头]
  

具体设计，欢迎读者脑补。

如果[列]不是固定组合，也是任意“多选”，肯定也存在[多选陷阱]。

把[列]也做成[穿梭框]，然后分成两步。

如图，第一步，多选[行]和[列]。

如图，第二步，提供效果预览，如果对数据范围不满意，返回上一步。

当然，把[方案三]放进弹窗里，好像也可以。

默认预览全集，然后让选择[行]和[列]并行，也是一种策略。

如上图，点击“字段设定”，展开弹窗的[穿梭框]，允许多选。

此时，整个记录集应独享一个页面，避免“模态之上，又加弹窗”。

如上图，采用[非模态]弹窗，同时打开选择[记录]和[字段]进行设置，甚至允许用户自己拖动弹窗，获得更灵活的设计，变化无穷。

小结

设计，罗列更多的可能性，不要钻牛角尖。

上面这种图示，到底是模拟注意力的轨迹？还是鼠标的轨迹？

不像是注意力，因为明显缺少了“检查选中结果”（面对多选，“不检查就确认”的自信者是少数人）；如果是鼠标，哎，搞几个快捷键不好嘛？

这种图示的意义何在呢？
我猜仅仅是给设计师自己一个理由。

希望设计师关注用户目标，而不是操作轨迹。

这就好比：设计师把路修通，尽量平坦一些，就搞定了。

真正的用户可能走路、可能驾车、可能坐轮椅、甚至可能爬着到达目标。

设计师没必要也“坐轮椅”，才能搞定方案吧？

过犹不及，点到为止。

（正文完）

本文提到的相关技巧
对应《表单高手课程》
第25讲《任务/事件/动作/操作》
第25讲《列表构造器》
第28讲《弹出菜单/收集器外置》

已关注

关注

重播 分享 赞

关闭

观看更多

更多

退出全屏

视频加载失败，请刷新页面再试

刷新

视频详情

免费获取完整版的视频，请加微信

扩展阅读
《界面编排的价值观》