从垃圾桶到“多入口”，谈谈B端设计思考
最近在一次大扫除当中，不小心把厨房里的垃圾桶给摔坏了，于是乎想在网上选购一个合适的垃圾桶，而回顾了垃圾桶的选购经历，或许它是一个很好的例子，让大家了解 多入口 的设计思考。
首先，究竟厨房需要是什么样的垃圾桶？我陷入了嘀咕，因为我自己也不太明白，于是我在淘宝上看到了许多不同类型的垃圾桶
把它们总结了一下，基本上可以分为两类：直筒式、脚踏式
直筒式：采取顶部开放的结构，使用者可以直接将垃圾扔到桶里。如果不够有趣？你还可以将垃圾桶看作“篮筐”进行投篮。
直筒式顶部开放的结构，确实能够给我们扔垃圾带来不少便利，但同时也会暴露一些问题，就是蚊虫
因为 厨房里的垃圾桶会有很多 餐厨垃圾，也因此会滋生很多蚊虫，特别是在一些剩下的水果核上，会留下很多蚊虫。
脚踏式：顶部为盖板，当需要扔垃圾时，使用者需要用脚踏住盖板，并将其抬起。这种方式就能够避免厨房餐厨垃圾所滋生出来的蚊虫
但问题又来了，在做菜时，扔垃圾通常十分频繁，每一次都需要脚踏显然效率太低。
那能否既能脚踏又能随手就扔呢？
面对这一问题，我发现了一个新式垃圾桶
它在为用户设计时，考虑到了两种不同的模式，因而将两种入口进行巧妙的融合。
通过顶部面板的开关，可以将垃圾桶设定为开启或者关闭，能够让垃圾桶在你想要的时候保持开启的状态，这样就能满足在一小段时间内的频繁扔垃圾的需求。同时又能提供脚踏的形式，将垃圾桶盖完整抬起，这样的垃圾桶既可以脚踏也可以直接扔。
而在我们设计B端产品时，同样会有 “多入口”的情况。
比如在 纷享销客 的设计当中，新建客户有着两个不同的入口
入口一：首页 – 客户及商机管理 – 客户 – 新建
这是新建客户最为常规的入口，它就类似垃圾桶的直筒式。通过表格页操作的新建，让用户进行表单的填写，进而新增客户。
入口二：首页 – 新建 – 客户
这是 纷享销客 的一个特别设计，它在导航菜单处设置一个全局的新建入口，当用户在系统的任意页面，都可以进行新建。
大家可以跟我一起思考一下，我们如果是一个销售人员，在我的工作当中，会去经常新建客户、跟进记录等，那通过一个全局的新建入口，能帮助我们更快的进行操作。这便是纷享销客的第二个新建入口。
我再给大家举一个简单例子，同样我们在纷享销客当中，表格当中的筛选同样也是有着两个不同的入口：常规筛选与表头筛选（大家可以看我B端设计指南筛选的文章）
常规筛选：用于表格当中一般和许多操作并排放置，算是一个较为基础的入口
表头筛选：点击过后同样也是进入到筛选弹窗，但不同的是，表头筛选点击过后，会将表格的值带入到筛选当中，来实现筛选+选值这样的两步操作。
而为什么会有两种不同的入口，我们回过头来想想，就像我文章开头说到的垃圾桶一样，两种不同的入口，其实是为了方便我在某一个场景下进行使用（比如垃圾桶的 持续丢垃圾与开关垃圾桶盖；纷享销客 新建操作当中的 常规新建与快捷新建；）
而它不正是因为用户在不同的场景需求下，所设计的形式不同。
在B端产品当中，不同场景的需求其实经常存在，但为什么没有暴露出来？
其实是因为用户在B端产品当中，本身用户就是处于弱势群体，他们都是服从于上级的安排，而设计师不会分析，就会选择最平庸的方式去处理需求。我们往往需要基于场景去思考问题，而场景如何理解？
之后有机会再和大家展开聊聊～
B端产品 移动端设计的小趋势
咱们讲了很多桌面端的交互设计，最近在使用 App 时发现了一个自己观察到的小趋势，随便写写与大家探讨探讨～
不知道大家在处理移动端导航中，有没有遇到这样的情况。公司的移动端设计是 “优雅降级” 即先满足桌面端得到产品的设计后，再逐步去考虑如何适配移动端。导致移动端页面中出现了意想不到的问题。
最为常见的就是底部导航栏的 导航菜单 不够用。
为什么不够用，我拿 钉钉桌面端 进行举例
在钉钉的桌面端中，包含有 我的团队、消息、文档、工作台、通讯录 五大重要模块，其次在左下方还会有 日历、待办、DING、邮箱、会议、直播、收藏、更多 等应用功能。在桌面端将这些功能规划完成后，你会如何设计移动端导航呢？给大家是5秒钟时间进行思考🤔～
我们先想想移动端导航有哪些 “公式” 可以套，底部导航、顶部导航、桌面式导航、舵式导航，这便是移动端导航设计中最为常见的几个公式模型。而它的导航承载的最大数量不会超过五个，因此使用起来显然不太满足。
而在钉钉面临的问题在我实际工作中遇到的问题类似，底部的导航可能会出现 10+ 的情况，究竟应该怎么办～
明白问题后我带着各位进行分析分析
首先我们在设计中，遇到数量多的内容时，首先想到的应该就是信息分层，无论是将10多个导航进行拆分，显然钉钉也是这么做的。
接下来你会发现钉钉在最近更新的版本中，出现一个不同寻常的交互。
通过上划底部导航菜单，类似一个底部抽屉，将剩余的模块放置在抽屉下。这样就能将完整的导航形式在移动端的方式展示给用户
说说这样设计的优点：
-
确实能够保证在桌面端产品结构不变的情况下，对移动端的合理适配。因为按照传统的交互框架下难以满足现在的问题
-
移动端与桌面端的导航体验基本保持一致，满足用户对整个产品架构的认知
再聊聊缺点：
-
入口太深：因为交互入口需要进行上划的操作才行，需要教育一段时间的用户，让大家熟悉这个方式
-
冗余：目前钉钉太多的内容导致整个产品给人的感觉十分臃肿，再新增这个交互后需要的学习理解的内容就过于繁多，说实话我作为一个钉钉的用户，我要去写一个工作中的项目文档，我是应该选择：去协作？去工作台？去项目？去最近使用？同时又拥有文档、石墨文档、Teambition如何选择？
虽然知道钉钉拥有强大的ISV生态，但目前很多ISV的功能与钉钉自身产品功能重叠，交集过多。
当然这类交互并不是钉钉自己创新设计的，我是在 Teambition 以及 飞书 这两款产品上首先发现（这两款与钉钉的做法还不太一样），随着钉钉的跟进，相信这类交互很快会成为 一个移动端的全新解决方式。
最后再说说飞书与 Teambition 的在这个交互中的细节
首先在飞书中，底部导航的配置主要来源于两个方面
-
飞书管理后台：提供入给管理员，让公司的管理者可以对默认的导航进行一个统一配置
-
用户：用户可以根据自身的需求特定，对底部导航进行自己个性化的配置
其次，飞书不会存在钉钉入口太深的问题，用户点击更多，就展开抽屉，用户更容易理解。
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 设计师～
评论回复