组件详解｜级联选择、树形选框、穿梭框，用法有什么区别？

     关注「长弓小子」看更多设计干货！

Hi，我是设计师元尧。记得将我设为星标 ⭐️ ，不错过日后每一条来自大厂的经验分享。

欢迎长按下图二维码加我微信，带你进设计师交流群，与上万小伙伴一起交流成长！

「👇 添加好友请备注：设计交流」

   全文共 1477 字，阅读需要 6 分钟

同样都是选择组件，你可能会想：

- 级联选择（Cascader）是否支持多选？

- 树形选框（Tree Select）可以怎么用？

- 穿梭框（Transfer）和前两者的区别是什么？

本文就来详细分析下这三者的区别和联系，帮助你做好应用。

COMPONENT 1

级联选项

Cascader

级联选项是一种选择控件，选项以分组菜单的结构呈现：

其用法特征是：  

1. 通过分组多列进行展示，常用于单选，也可支持多选。

2. 选项需要有一定的逻辑顺序，从集合到单项进行选择，且最好是符合用户认知模型的集合方式，例如“省、市、区”。

3. 整体需包含两个及两个以上的层级。

4. 与输入框连用，以下拉菜单承载。

COMPONENT 2

树形选框 

Tree Select

树形选框也是一种选择控件，选项内容以树形结构呈现：

其用法特征是：

1. 单一列表的树形结构，常用于多选，也可支持单选。

2. 通常适用于选项有一定逻辑顺序的选择场景，体现选项之间的关联性和层级性，比如内容间是“上下级关系”或“权限的包含关系”。

3. 整体需包含两个及两个以上的层级，第一层级默认收起，避免选项内容过多致使用户需要不停向下滚动操作。

4. 在页面中占据的空间较小，可与输入框连用，以下拉菜单承载。

COMPONENT 3

穿梭框

Transfer

还是一种选择控件，以双列列表的结构呈现。其特点是：

其用法特点是：

1. 在两栏中选中并移动元素完成选择操作，常用于多选，也支持单选。

2. 两列选项列表中：一列为源列表，一列最终目的列表，即用户可以同时看到选项的来源和归宿。因此左右两列的选项结构应尽量保持一致以便于用户比较和理解。

3. 强调内容是“移走”而不是“复制”。比如可以用于以下的操作场景：某个权限从 A 手中转到 B 手中（也即当 B 拥有该权限时，A 就不再拥有该权限）。

4. 占用更多空间，可以展示关于选项内容的更多详细信息、包含更多的层级结构，常用弹窗或新页面来承载。

CONCLUSION

使用建议

Advice

   关于使用场景

- 级联选择 Cascader：常用于单选；

- 树形选框 Tree Select：常用于多选；

- 穿梭框 Transfer：常用于多选。

   彼此之间的关联

对于功能类似的级联选择 Cascader 和树形选框 Tree Select，在一个表单中尽量只选择一种组件样式。你可以从以下几点条件、结合你的业务需求来综合评估到底选择哪个组件：

- 选项的层级数量；

- 选项的总数量；

- 用户对于选项及其层级所建立的认知模型和心理预期；

- 用户通常会如何选择选项（比如是否经常会全选第一层级）等等。

另外，穿梭框 Transfer 中的选项内容也可使用树形选择 Tree Select 来展示，能够让内容结构呈现更加清晰和有序。

B 端设计系统和组件设计是值得每一位设计师都深入研究的课题。如果你想了解更多关于 B 端设计组件相关的内容，在公众号后台留言 “组件”  可以看到，这里有很全面、专业、系统的组件知识供你阅读：

---

识别二维码👇👇👇添加我的微信。带你加入设计师交流群，添加好友请备注：设计交流。

另外，我主理的知识星球中新增了 “AI 辅助设计 • 经验分享”专栏，我们会持续更新大厂设计师如何使用 AI 完成设计工作的经验和方法。也欢迎有相关问题的你来星球提问，问必有答，答必有获。👇👇👇 

如果你有其他的设计问题，也欢迎向我提问，点击下图，一对一解决你的设计疑惑和工作问题。设计学习没有捷径，但我可以替你走些弯路：

学海无涯，盼你同舟！😊

- END -

欢迎长按图片👇👇👇加我微信

带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集！

「添加好友请备注：设计交流」