B端几则思考 - 多入口思考、移动端小趋势、表单提效、下拉菜单悬浮问题

从垃圾桶到“多入口”，谈谈B端设计思考

最近在一次大扫除当中，不小心把厨房里的垃圾桶给摔坏了，于是乎想在网上选购一个合适的垃圾桶，而回顾了垃圾桶的选购经历，或许它是一个很好的例子，让大家了解 多入口 的设计思考。

首先，究竟厨房需要是什么样的垃圾桶？我陷入了嘀咕，因为我自己也不太明白，于是我在淘宝上看到了许多不同类型的垃圾桶

把它们总结了一下，基本上可以分为两类：直筒式、脚踏式

直筒式：采取顶部开放的结构，使用者可以直接将垃圾扔到桶里。如果不够有趣？你还可以将垃圾桶看作“篮筐”进行投篮。

直筒式顶部开放的结构，确实能够给我们扔垃圾带来不少便利，但同时也会暴露一些问题，就是蚊虫

因为 厨房里的垃圾桶会有很多 餐厨垃圾，也因此会滋生很多蚊虫，特别是在一些剩下的水果核上，会留下很多蚊虫。

脚踏式：顶部为盖板，当需要扔垃圾时，使用者需要用脚踏住盖板，并将其抬起。这种方式就能够避免厨房餐厨垃圾所滋生出来的蚊虫

但问题又来了，在做菜时，扔垃圾通常十分频繁，每一次都需要脚踏显然效率太低。

那能否既能脚踏又能随手就扔呢？

面对这一问题，我发现了一个新式垃圾桶

它在为用户设计时，考虑到了两种不同的模式，因而将两种入口进行巧妙的融合。

通过顶部面板的开关，可以将垃圾桶设定为开启或者关闭，能够让垃圾桶在你想要的时候保持开启的状态，这样就能满足在一小段时间内的频繁扔垃圾的需求。同时又能提供脚踏的形式，将垃圾桶盖完整抬起，这样的垃圾桶既可以脚踏也可以直接扔。

而在我们设计B端产品时，同样会有 “多入口”的情况。

比如在 纷享销客 的设计当中，新建客户有着两个不同的入口

入口一：首页 - 客户及商机管理 - 客户 - 新建

这是新建客户最为常规的入口，它就类似垃圾桶的直筒式。通过表格页操作的新建，让用户进行表单的填写，进而新增客户。

入口二：首页 - 新建 - 客户

这是 纷享销客 的一个特别设计，它在导航菜单处设置一个全局的新建入口，当用户在系统的任意页面，都可以进行新建。

大家可以跟我一起思考一下，我们如果是一个销售人员，在我的工作当中，会去经常新建客户、跟进记录等，那通过一个全局的新建入口，能帮助我们更快的进行操作。这便是纷享销客的第二个新建入口。

我再给大家举一个简单例子，同样我们在纷享销客当中，表格当中的筛选同样也是有着两个不同的入口：常规筛选与表头筛选（大家可以看我B端设计指南筛选的文章）

常规筛选：用于表格当中一般和许多操作并排放置，算是一个较为基础的入口

表头筛选：点击过后同样也是进入到筛选弹窗，但不同的是，表头筛选点击过后，会将表格的值带入到筛选当中，来实现筛选+选值这样的两步操作。

而为什么会有两种不同的入口，我们回过头来想想，就像我文章开头说到的垃圾桶一样，两种不同的入口，其实是为了方便我在某一个场景下进行使用（比如垃圾桶的 持续丢垃圾与开关垃圾桶盖；纷享销客  新建操作当中的 常规新建与快捷新建；）

而它不正是因为用户在不同的场景需求下，所设计的形式不同。

在B端产品当中，不同场景的需求其实经常存在，但为什么没有暴露出来？

其实是因为用户在B端产品当中，本身用户就是处于弱势群体，他们都是服从于上级的安排，而设计师不会分析，就会选择最平庸的方式去处理需求。我们往往需要基于场景去思考问题，而场景如何理解？

之后有机会再和大家展开聊聊～

B端产品 移动端设计的小趋势

咱们讲了很多桌面端的交互设计，最近在使用 App 时发现了一个自己观察到的小趋势，随便写写与大家探讨探讨～

不知道大家在处理移动端导航中，有没有遇到这样的情况。公司的移动端设计是 “优雅降级” 即先满足桌面端得到产品的设计后，再逐步去考虑如何适配移动端。导致移动端页面中出现了意想不到的问题。

最为常见的就是底部导航栏的 导航菜单 不够用。

为什么不够用，我拿 钉钉桌面端 进行举例

在钉钉的桌面端中，包含有 我的团队、消息、文档、工作台、通讯录 五大重要模块，其次在左下方还会有 日历、待办、DING、邮箱、会议、直播、收藏、更多 等应用功能。在桌面端将这些功能规划完成后，你会如何设计移动端导航呢？给大家是5秒钟时间进行思考🤔～

我们先想想移动端导航有哪些 “公式” 可以套，底部导航、顶部导航、桌面式导航、舵式导航，这便是移动端导航设计中最为常见的几个公式模型。而它的导航承载的最大数量不会超过五个，因此使用起来显然不太满足。

而在钉钉面临的问题在我实际工作中遇到的问题类似，底部的导航可能会出现 10+ 的情况，究竟应该怎么办～

明白问题后我带着各位进行分析分析

首先我们在设计中，遇到数量多的内容时，首先想到的应该就是信息分层，无论是将10多个导航进行拆分，显然钉钉也是这么做的。

接下来你会发现钉钉在最近更新的版本中，出现一个不同寻常的交互。

通过上划底部导航菜单，类似一个底部抽屉，将剩余的模块放置在抽屉下。这样就能将完整的导航形式在移动端的方式展示给用户

说说这样设计的优点：

• 确实能够保证在桌面端产品结构不变的情况下，对移动端的合理适配。因为按照传统的交互框架下难以满足现在的问题

• 移动端与桌面端的导航体验基本保持一致，满足用户对整个产品架构的认知

再聊聊缺点：

• 入口太深：因为交互入口需要进行上划的操作才行，需要教育一段时间的用户，让大家熟悉这个方式

• 冗余：目前钉钉太多的内容导致整个产品给人的感觉十分臃肿，再新增这个交互后需要的学习理解的内容就过于繁多，说实话我作为一个钉钉的用户，我要去写一个工作中的项目文档，我是应该选择：去协作？去工作台？去项目？去最近使用？同时又拥有文档、石墨文档、Teambition如何选择？

虽然知道钉钉拥有强大的ISV生态，但目前很多ISV的功能与钉钉自身产品功能重叠，交集过多。

当然这类交互并不是钉钉自己创新设计的，我是在 Teambition 以及 飞书 这两款产品上首先发现（这两款与钉钉的做法还不太一样），随着钉钉的跟进，相信这类交互很快会成为 一个移动端的全新解决方式。

最后再说说飞书与 Teambition 的在这个交互中的细节

首先在飞书中，底部导航的配置主要来源于两个方面

1. 飞书管理后台：提供入给管理员，让公司的管理者可以对默认的导航进行一个统一配置

2. 用户：用户可以根据自身的需求特定，对底部导航进行自己个性化的配置

其次，飞书不会存在钉钉入口太深的问题，用户点击更多，就展开抽屉，用户更容易理解。

Teambition也是类似，就不做拓展，这便是移动端设计的小趋势，大家可以在实际工作中用起来～

从文档类产品中寻找表单效率提升

表单作为一个B端设计的重要场景，一直以来我都在想，究竟应该如何高效的进行信息录入？今天我们就从文档产品中，去“借鉴”一些表单效率提升的方法～

首先在录入的场景中，我会想到写作类的文档软件：

我自己是一个文档软件的重度使用者，我曾使用过 Bear、印象笔记、Notion、 Ulysses、飞书文档、石墨文档、语雀等等...，而恰好你也是一个文章作者，也应该尝试过一种快捷信息录入的方式：Markdown

Markdown

Markdown 是一种轻量的标记语言，常用于文章排版中，这种标记语言会让你沉浸在写作中而不是反复去纠结排版，进而打断你的思路。

比如我想设置一个 “一级标题”

• 没有使用 Markdown，操作路径是

1.先输入文本内容

2.使用鼠标，选中想要 文本内容

3.点击 一级标题 按钮，从而完成整个录入形式（可参考下方动图）

• 使用 Markdown 后，我只需要

输入：#+空格+文本内容即可快速完成上面三步的操作

我使用 Markdown 就可以提升我在信息录入时的效率，手也可以不用去移动鼠标，减少切换控制设备所带来的一系列的问题。

在我看来这便是一个文本录入效率提升的一个方式，而我们怎么将 Markdown 的思路落地到我们的 B端表单场景中呢？

我本来也是没有任何思路的，可是最近在使用滴答清单发现它的录入特别有意思，当我在新建一个待办事项时：

输入“！”符号后，即可设定该待办事情的优先级

同样在输入“～”符号后，即可设置该待办事项的归属。

是不是和 Markdown 的特定规则有那么一点点类似了～

通过这样设定特殊规则，我可以对待办清单进行快速选择优先级、归属箱等等...

不光是滴答清单，在Notion、微信、语雀 都有着类似的交互，我将此类交互称为“特定规则录入”

“特定规则录入”：即使用特定的录入规则，将用户需要使用的信息进行快速的录入

优点：能够使用户在不使用鼠标的情况下进行快速的信息录入。

缺点：在日常真正需要使用 该符号的情况下，下拉菜单会造成使用上的干扰。

比如我们在微信中，如果聊天需要用到 @ ，不会采取符号的形式，而更多将 @ 变为 “艾特”

最后的落地，在我们实际的B端项目中，我们在销售填写跟进记录时也做了相应的优化，

我们可以用 @+空格 可以具体的销售负责人员，

输入 #+空格  添加 跟进记录的标签

输入 ！+空格 添加 跟进记录关联的合同

（由于保密协议，这里就不展开去讲，算是给大家提供一些思路）

不过通过这样的改版，确实让用户在使用跟进记录这一模块上有了 极大的提升。当然目前还是会有一些小问题，就是在输入 “！+空格” 时，很多销售还是会反馈这个的影响有些大，希望能够进行调整。

之后会考虑将这个快捷方式迁移到 其他字母，希望能够解决此问题。

扩大录入面积

在我日常的写作中，我会新建一个思维导图。

一方面思维导图能够帮助我去梳理我的思维结构，整理一些脑袋中零散的知识点，另一方面我也可以通过导图，帮助我进行快速的知识调度。

但在飞书文档中，但因为宽度限制，导致我在对导图的编辑特别不友好，没办法正常的编辑我的思维导图。这时候我可以双击导图，进入到全屏编辑的状态，这就对大容量内容的编辑，带来的非常多的便利。

当然这只是在文档场景下，其实我们在日常的表单录入的过程中，同样会面临同样的问题。

通常，表单的呈现都是采取弹窗的形式，但是当信息录入过多时，就需要考虑是否支持将弹窗扩展至整个页面，能够将表单进行更快速的录入。

比如在Gmail 中，当你需要去新建一封邮件时，就有两种不同的状态：

一种是常驻在右下方，通过小窗口作为一个小窗口进行展示

一种是点击全屏按钮，能够将整个页面进行展开，作为全屏让人进行录入

这种交互形式也被放在我们自身的产品中，因为作为一个 aPaaS 类的可配置化的表单，我们本身是不能确定用户的内容量，因此在采取弹窗的同时会为用户增加 大弹窗的入口，可以应对用户灵活多变的各种场景。

当然这只是表单的一些场景，大家可以在评论区进行讨论

下拉菜单“悬浮”问题的解答

大家还记得我在选择录入上的文章留下的一个话题吗？

为什么线上许多产品中 （明道云、简道云、ONES...） 窗口下呼出下拉菜单后，滚动表单都没有跟随录入框吗？如下图，今天我们就来聊聊其中的缘由。

我们先来看一看大家在评论区，都是如何讨论的～

看到大家的回答，有的已经十分接近，但是实际的情况还是会有一些不同，我来带领大家一起讨论～

首先，在设计层面上，咱们最想要的结果是在弹窗中：下拉菜单与录入框进行实时的跟随，也就是类似下图：

但是在开发层面，你会收到成本太高的结论。因为影响上诉结果的原因就是在CSS当中有一个属性叫 Position（定位），下拉菜单也正是通过定位来进行位置的判断，从而实现下拉菜单与录入框跟随的状态。

这里就不扯那些代码什么的，我相信大多数设计师都看不懂，我就简单将问题 用设计师的角度去理解，你可以将弹窗本身看作是一个画板，而录入框、下拉菜单都看作是其中的一个图层

如果需要实时定位来进行计算（也就是上面 AntDesign 所呈现的效果）就需要将它们都放在一个画板里面。

这时候大家应该忘了一个重要的条件因素：弹窗

当我们使用弹窗，必然会将整个画板缩小，因而在里面的图层也会受到画板的局限，不能完全展示，在实际的开发中，就会出现下拉菜单遮挡展示不全。

当然遇到这种问题我们就需要找到解决办法，也就是最开始与大家讲到的 其他产品的做法：



将整个的下拉菜单单独看作是一个画板，虽然不会对选择录入框进行实时跟随，但是从整体来看，这种方式显然影响用户的使用体验更小，在权衡比较过后，就会采取第二种方案。

其实作为设计师，我们要做的不光是页面当中流程的体验，同样还需要去关注自己页面落地当中所遇到的许许多多的问题， Problem Solver 才是设计师的常态。

相信你在设计的过程中，也会遇到许许多多 与开发同学产生的矛盾～不如发出来，看看大家能不能帮你一起解决！

我是CE青年，一个 2 B 行业的 2B 设计师～