B端产品的核心是任务。随着移动技术的飞速发展和用户需求，催生出了许多移动端的场景，如审批，上报，通知等。这些任务场景之间的流转不可避免的涉及到人，要选择相关人员进行任务传递。任务可能会不同，但人员选择这个场景是通用的，因此我结合工作实践，总结了移动端人员选择的几个设计要点。
1、符合移动端习惯
web端的人员列表通常是以树型控件呈现的，每个树节点代表一个部门，通过层层嵌套的方式到达最终的人员。树形控件可以完整展现层级关系，并具有收起/展开/选择等交互功能，非常适合组织结构的展示和操作。
然而，树形控件却不适用于移动端。这是因为移动端的界面宽度有限，如果层级过深，或者层级标题太长，会导致宽度不够用，最终界面效果严重扭曲。如下图所示。
那组织结构该如何在移动端中展示？可以采用列表的形式，将组织机构的每一层组织看做是一个列表项，层层钻取。举个例子：
比如在钉钉、飞书、企业微信的组织结构设计中，就采取了这样的交互方式。
钉钉在每个父节点的右侧都有一个“下级”的入口，即使是没用过的用户也很容易理解，从入口就可以下钻到该部门；飞书则通过一个向右的箭头来示意，右箭头代表选项可以打开，这在移动端上也形成了一种共识，符合用户习惯；企业微信则是通过右箭头和文件夹的图标来展示，将组织映射为一个个文件夹，也很方便用户理解。
可以看到，采用列表的形式展示组织结构，非常简洁，很适合移动端。在进入下级机构之后，该如何返回上层？各组织层级之间如何跳转？还是拿钉钉、飞书、企业微信来举例，如下图：
钉钉和飞书都采用了面包屑导航的方式，可以轻松返回上一层或者回到顶层，而企业微信则没有面包屑导航。
面包屑导航在层级较深时，为用户提供了清晰的路径，让用户明确知道自己处在何处，可以去何处，也方便返回上层目录。因此，在组织结构层级这种场合下，似乎非常合适。
但是，面包屑导航和树形控件一样，都是web端的控件，移动端并不推荐使用。因为一旦导航名过长或者层级过深，就会导致页面宽度不够用，如下图：
钉钉在这种情况下，采用了滚动展示的方式，可以通过向右滑动面包屑导航来查看超出的部分，这样的交互在移动端显然直接没有点击返回的效率高。所以面包屑导航在移动端就显得十分鸡肋，iOS和Android的规范中也都没有这个组件。
企业微信虽然没有使用面包屑，但是却没有明确指示当前所处的位置，需要加上当前组织名称，让用户明确所处位置。
因此，在设计移动端的时候，不能简单的将web端的组件照搬过来，而是要结合移动端的场景进行分析，采取适合的交互方式。
2、加强反馈
系统对操作给与及时的反馈和响应是产品设计的基础要求，在移动端人员选择的场景中也是如此，必须要有足够的反馈让用户身处何处，已经做了哪些操作，还可以做哪些操作等等。
例如，当用户选择相关人员之后，要即时给出反应，让用户明确自己的选择已经生效。
如上图，钉钉、飞书和企业微信的底部都有一个操作栏。钉钉工具栏反馈更加详细，显示了选择的人数，部门和选择的数量限制；飞书的工具栏则没有任何反馈，用户选择之后没有变化；企业微信的工具栏在选中之后则会显示用户头像，反馈也足够明显。
另外，在搜索时，应该即时匹配相关人员，而不是等用户输完之后再执行，提高效率。
这一点，钉钉、飞书和企业微信都保持了一致，当用户输入一个字符时，就开始从组织里匹配相关的人员，这样的反馈就非常直接和有效。
3、直接操控
移动端屏幕小，显示区域有限，因此尽量保证信息结构的扁平，让用户直接操控。
例如，在用户选择过程中，想要去修改自己的选择，删除某个人，要提供已选列表让用户直接删除，而不是在整个组织列表中再去操作。如下图：
钉钉和飞书都有一个已选的列表，用户可以直接点击右侧的叉号进行删除。而企业微信的则将所有的功能都集中在底部的操作栏中，用户需要点击头像来删除已选，这种设计的可见性不好，对于新手来说不够直接。
另外，当用户选择完之后，又想去修改自己的选择，删除某个人，也应该可以直接操控，而不是再度打开人员选择的模态窗。如下图：
钉钉和飞书在选择完成之后，都会直接展示选择的结果，用户可以直接点击删除来进行操作。不过钉钉的删除设计完全是web端的设计，用角标的形式显示删除在移动端显得太小。
企业微信则不符合直接操控的原则，只是显示了选中几个人，需要重新打开人员选择的模态进行选择，这样无疑使得操作成本上升。
总结
以上就是我对移动端人员选择的设计思考，总结一下：
- 组织机构的展示不要照抄web端的交互方式，采用树形控件，而是要符合移动端的特点，采用列表形式，注意不要使用面包屑导航；
- 在用户操作过程中，加强反馈，展示已经做了哪些选择，实时匹配搜索结果；
- 简化交互流程，让用户直接操控。
如果本篇文章对你有帮助，请帮忙点击“在看”或分享，我会继续认真写好每一篇文章！
