B端设计指南 - 移动端

「B 端产品真的需要移动端吗？」

这个问题一直困扰着很多 B 端设计师，一方面国内的企业对于移动端产品都非常重视[1]；另一方面设计移动端产品，特别是信息量如此大的移动端产品（B端产品的信息量会异常的大），本身就非常困难。

[1]因为移动端在国内用户基础非常的大

今天我们就站在交互的视角，使用了 20+ 个企业级移动端产品过后，聊聊我的一些看法。

既然要说移动端，我们必须得说说移动端的重要性。

我们通常会说国内的任何产品都可以参考国外市场，那我们就看看国外移动端的发展情况。

我们可以打开国外 apple store 发现，很多著名的国外产品其实都是在最近几年才重视移动端市场，甚至也会有部分产品至今，也没有移动端产品问世。究其原因国外的使用用户，对于 企业级产品 的需求主要是以桌面端为主[2]，而国内好像又会有所不同。

[2]比如美剧当中，查看邮件的场景都是使用电脑而非手机

国内的产品当中，大多数情况都会有 移动端，如果产品体量较小，也会有小程序、H5 等设备产品线。为什么国内 B 端产品会如此在意移动端？主要有几点原因：

在国内，移动设备的普及率非常的高。从Newzoo《2021全球移动市场报告》中显示，全球目前智能手机的用户已经超过40亿，中国以9.54亿的智能手机用户总量居首，普及率是66%。

上到几岁的小孩，下到七八十岁的老年人，会使用的智能手机。

而电脑的普及率，国内则在 27.4%-35.0% 之间，所以你会发现身边有非常多的中老年人，他们会使用手机但不会用电脑。

这也就导致了很多企业，在招聘时都需要将电脑操作纳入到职位信息当中，作为基本的技术要求。

举一个例子，比如我父亲，也是在最近两年工作的原因才慢慢学会如何编辑 excel 以及打印文件，对于他来说是非常有成就感的一件事，同时也从侧面反应它的学习难度非常的高。

每一位员工在工作时，都要为其配置相应的工作设备。比如屏幕前的你，肯定会要求需要配备独立的 Mac 设备，而这无疑会为企业增加很多成本。

移动端的出现，会让着额成本大大降低，现在一部手机的价格非常的低，便宜的功能机主要在 500 元左右，而采购一整套电脑的成本则需要 3000+ 元，因此企业的购机成本更低。

当然更有甚者，一些“聪明”的企业，会去询问员工是否有备用机，还可以“白嫖” 员工的设备来降低成本。

比如 餐饮门店服务员、仓储物流人员、快递驿站配货员，很多都是老板白嫖员工的设备，进而降低采购成本。

国内的移动互联网生态已经非常成熟，我们日常的衣食住行都能够在手机上解决，有很多人也想着能不能把工作也放在手机上完成，所以会出现大量的移动端的产品出现。

因此我们在设计B端产品的移动端时，会大量参考国内的C端产品，从他们的设计当中寻找灵感，同时也能够尽可能满足用户的使用习惯。

关于移动端的设计，我们要去了解桌面端与移动端之间的差异。

设备形态上，由于桌面端与移动端的差距过大，也就导致了我们在设计的过程当中，需要考虑硬件的差异对设计造成的影响。那关于这一部分我们在之前的文章当中就已经讲过，这里就只是进行简单总结。

桌面端因为它设备沉重，所以只能在固定的场景当中；因为它拥有键鼠，所以能够高效精准的操作；因为它支持多窗口，所以可以多线程、复杂的去处理任务，所以桌面端是更适合工作去使用的设备。

「键盘录入、摄像头模糊、横屏，屏幕大」

移动端因为它设备轻盈，所以我们能够在移动的场景当中使用；因为它只能使用手指交互，所以无法精准操作；因为它只能展示单一窗口，所以只支持单一线程去处理任务，所以移动端更适合碎片化、娱乐的场景当中使用。

「软键盘、摄像头清晰、录音清晰、竖屏，屏幕小」

关于设备形态的差异，我们可以举一个例子，现在几乎所有的移动端软件（涉及到信息阅读的产品），都会提供浮窗的功能。

而这个功能最主要的目的就是优化移动端单一窗口，满足用户的碎片化阅读，拓宽其设备形态上的不同。

在设备形态当中，不同的设备方式都会为我们设计带来非常大的差异，因此其实移动端与桌面端最大的差别便是由于设备形态差异过后，影响的其他不同，比如使用场景。

作为一个设计师，我们无时无刻都要去考虑场景，而这两个设备的差异也造成使用场景上会发现变化。

首先我们从工作的场景来说， 使用 B 端软件我们可以分为 「查看、思考、编辑、配置」

「查看」是用户阅读系统的信息内容，了解企业到底有哪些变化；

「思考」是通过各种手段（筛选、数据分析），思考了解这些信息数据出现的原因；

「编辑」是当工作当中的内容出现变化时，我们需要在系统当中记录其变化原因；

「配置」是系统设置出现变动时，通过配置修改系统的流转规则；

而我们移动端能够满足的场景为「查看、思考、编辑」

配置，是因为需要呈现的信息规则非常大，因此我们在手机当中需要将其排除。

比如我们以 微信公众号的管理后台为例，在微信公众号的自动回复配置页里，桌面端就能够拥有完整的自动回复功能，但是到了移动端就只有查看自动回复的用户，在右上角可以进行简单的信息配置。

由于上面的各种特性，因此使用移动端时，我们的目的主要有三个：阅读数据、轻量操作、快速新建。

阅读数据：主要就是在手机上能够快速进行简略信息的查看，比如很多指标图、条形图，我能够通过手机快速了解。并且在员工的工作当中，他还可以关注自己的当前任务，需要完成的内容 等等...

并且移动端滑动查看信息会比桌面端滚动屏幕阅读信息更为聚焦，因此阅读数据是非常重要。

轻量操作：因为阅读数据完成后，肯定会存在数据不匹配的情况，因此数据当中我们需要对其进行轻量化的操作，简单来说就是少量字段的编辑场景。 

比如我在进入到一个页面信息后，发现数据不太正确/有些数据需要补充，我就会将我知道的信息补充到页面当中。

这样移动端就不是一个鸡肋的产品形态，更多是一个轻量操作场景的补充。

快速新建：在使用目的当中，我们最后会去考虑新建，因为新建使用的频率本身不高。但是在系统当中，新建不能没有，因为创建一个信息，最主要的内容是信息本身的字段数量会不会很多。如果比较少，那优先移动端；不然反之。

那对于移动端的设计，我们究竟要如何理解、如何下手？

我们就必须得去理解 界面映射、架构调整、优势利用。

简单来说映射就是要去考虑不同设备间，相同功能究竟应该如何处理。可以简单的将其理解为一致性，因为相同内容在同一页面当中，同一元素的差别不能太大，因此可以通过映射的方式将其设计。在页面当中，映射主要分为四类：图形映射、字段映射、功能映射、页面映射。

图形映射

图形映射就是将页面当中的图形内容保持一致，这个看上去很简单，但是能够做到的人真的不多。究其原因，主要是图形当中涉及到的元素实在太多。

- 颜色一致：在页面当中，假设出现相同的 标签颜色，我们就要确保桌面端与移动端设计颜色的一致，这是设计当中的基础底线。

- 图标一致：同样的图标但是在不同的设备上会存在较大差异。首先是桌面端，假设我们的图标设计为下图。那也就意味着即使在移动端，因为页面风格需求，图标设计存在些许差异，但是图标的主图形一定要保持一致，这样才能够拥有一致的图形风格

- 元素一致：元素的一致性主要是表达在设计内容上，我们要考虑通过的内容结构与形式。比如页面的分割线、小的内容元素时，要尽可能的保持一致。

功能映射

在功能上，也出现了相应的映射关系，比如在表格页当中，我们经常使用的，排序、筛选等等，在移动端的设计往往会更加复杂。

首先是排序，你会发现，移动端的页面狭小，所以排序通常只会给出默认规则，页面的所有排序都是按照修改时间顺序来。

其次是筛选，筛选在我们桌面端会涉及到各种筛选形式（常驻、自定义、高级、表头），而回归到了移动端后，就无法做到同等交互。因此在形式上，只能选择以移动端的页面设计为基础进行优化。

比如飞书在桌面端与移动端的筛选交互上就会尽量保持一致，即使采取抽屉的形式，在结构上依旧是一致的。

当然关于功能映射还会有很多问题，以及不同功能的细节处理，这就放在我们 B 端交互设计训练营进行讲解。

关于页面映射，由于内容太多，因此将其放入「不同页面之间应该如何设计」进行讲解。

关于移动端与桌面端的设计当中，不同产品会存在截然不同的平台特性，因此在移动端当中，我们需要利用其优势，让产品的使用更为高效。

1.通话

通话也就意味着手机能够直接拨打用户电话，这是桌面端所不具备的功能。

听上去有点离谱，但是桌面端想要拨打网络电话，在国内的监管下其实是比较困难的，因此在 尘锋SCRM 产品当中，桌面端对于呼叫电话，提示需要绑定账号，而在手机端当中，我们则可以直接呼叫。

大家别小看了这个功能，只能说在很多产品里面，这个功能非常重要。

2.语音

因为在移动端文字录入非常缓慢，因此我们可以通过语音的方式进行文字的快速录入。并且现如今语音识别技术的成熟，导致这项功能在很多地方都被普及。

比如在滴答清单当中，我们可以通过语音的方式快速新建任务，又或者是在飞书当中，我们可以快速发送文字+语音的消息，让用户能够快速的录入。

3.拍照

在移动端，获取图片的难度和桌面端完全不同，移动端可以轻松实现拍照功能因此衍生出来很多新的交互。

比如为了解决移动端文字录入缓慢的问题，我们可以采取照片OCR的形式，读取图片当中的文字信息，进而实现表单的快速填写。

比如在销售易CRM产品里面我们可以快速上传用户的名片，去新建客户的信息。

4.消息推送

对于很多B端系统来说，消息推送是一个非常严重的问题。

因为常规的网页端，我们只能够通过声音+标识的方式来提示用户：「你有一条信息需要处理。」

如果是紧急的任务，则需要短信的方式来提示用户，这对于企业来说本身就是一件需要花费成本的事。

因此为了解决这个问题，我们才会去考虑设计移动端，来达到消息的快速推送。

那如果你们没有移动端怎么办？这里也提供一个小的解决办法，我们可以考虑采取 微信订阅号 的方式来推送企业的消息。这样就能够保证用户能快速触达他所关心的消息内容。

5.重力感应

对于特殊的页面，能够通过重力感应，查看更多细节。

比如在一个表格页面当中，因为横向的宽度限制导致内容无法正常查看，因此可以提示用户，可以横屏浏览，通过重力感应进而优化用户阅读体验。

由于产品功能的限制，我们在移动端上看到的，肯定是精简的版本，那如何精简就需要通过架构的调整得到结果。

首先我们产品架构的调整需要考虑用户的使用场景，考虑哪些产品模块是「查看、思考、编辑」的使用场景，然后根据产品架构去做适时的调整。

其次在架构当中，要满足产品的最小的流程闭环。

我们这里以两款产品为例，带领大家理解一下他们的拆解思路。

小鹅通

小鹅通在桌面端时一个非常庞大的产品，它包含 100+ 个功能，并且涉及到了知识付费领域的绝大多数内容，而我们来看小鹅通的移动端。

首先整个产品导航为：首页、消息、我的

首页是所有常用功能的入口，并且也是数据呈现的核心页面。同时分析小鹅通移动端主要还是提供给管理人员在特殊情况下进行使用，因此产品的功能点到为止。

同时在流程上，我们需要考虑移动端的完整流程链路，那其中就一定包含：发布课程、管理课程、查看学员、课程营销，这部分内容刚好能够将产品的最小流程打通，在业务层面上满足了这个产品的基本要求。

同时小鹅通还包含 消息与我的，消息为了弥补桌面端消息通知能力薄弱，因此通过手机能够快速提示用户。我的则主要为了多店铺考虑，提供切换店铺的入口。

浏览过后你会发现，移动端的架构调整我们通常都会将其归纳为，聚合+消息+我的 的这种结构，因为 B 端产品的导航过于庞大，并且我们会经常调整产品结构，因此这种将功能菜单聚合在一起的方式，这是一种非常通用的解决方案，在 B 端的移动端设计里面经常出现。

语雀

语雀的移动端设计就是一个典型例子，首先在语雀的桌面端当中，我们会发现它的整体导航结构为：小记、文档、逛逛、消息、我的

小记层级的提升，很明显是在使用场景上，语雀考虑到优先满足移动端的快速记录问题。

想要做到的是通过小记来快速记录自己的灵感，因此你会发现它的优先级变得如此之高，同时也满足了我们上文当中讲到的移动场景的特性。

为了验证我的猜想，我也去到语雀移动端发布的原文，寻找到了答案。

同时在它的文章当中，也给了我们相应的启发，小记、查阅、消息 ，都是我们上文提到的内容。所以架构调整的目的是服务整个产品的使用场景，这个很重要。

在不同的页面里，我们内容呈现的形式也不尽相同。首先我们可以将移动端的页面简单归纳为：表格页、表单页、配置页、数据页。

其中表格页的难度最高，因为信息多且复杂，所以在设计时要更为留意与小心，同时数据页则较为简单，只需要简单的内容调整即可。

表格在移动端的设计一直以来都是一个难题。

因为在移动端的页面当中根本没有办法呈现内容，表格为横向的内容呈现、手机为竖屏的屏幕区域，本身就是矛盾的。而我们设计表格页需要借鉴市面上成熟的交互模式，将我们的表格内容进行合理化的呈现。

同时表格作为查看场景中重要的一个页面类型，在移动端上同样需要满足其场景要求。

卡片模式：首先在移动端当中，最著名的便是卡片设计，我们可以将表格当中的信息通过卡片的方式固定到它的某些区域，这样就能够保证页面在设计当中信息呈现。

在卡片模式的设计当中，将列头设定为每个卡片的标题，同时将表格当中对应的操作转移到对应的详情页中，如果操作过于高频，我们可以结合字段+图标的方式呈现操作。

列表模式：当然在信息内容的浏览时，我们还可以通过列表的方式进行优化。这种模式主要是针对表格标题非常重要，我们可以同标题快速了解表格内的全部数据，因此可以使用列表，尽可能多的展示数据，这样也能够保证产品能够被快速预览。

详情模式：主要是针对表格当中数据较少的情况，这样就能社保证用户阅读信息时的完整性。因为信息本身不多，所以订单的出现能够保证用户能够高效阅读所有信息内容。而关于数据的操作，则会出现在详情旁，这样减少详情页的设计，同时也可以让用户进行快速操作。

当然除了三种视图之外，我们还需要了解表格当中的筛选部分如何映射。

筛选在桌面端一直以来都是较为复杂的组件，如果你是常驻筛选，那整体设计会较为简单。但如果是复杂的筛选逻辑，映射起来会较为困难。

首先在移动端当中，我们的筛选主要为顶部常驻，也就是在标题下方区域，通过 Tab + 筛选的方式来去呈现筛选的逻辑，进而实现快速筛选。

因此如果你的桌面端筛选本身就比较简单，就可以采取这种方式。

如果是复杂的筛选交互，整体的设计逻辑则会产生变化。目前我们可以将页面当中左右两侧进行分割，左侧筛选字段，右侧筛选值。同时在左下角加入自定义筛选的入口，这样就能够满足复杂的筛选交互逻辑（见图右一）

表单是桌面端迁移到移动端最简单的页面，因为移动端对于表单的解决方案，已经非常成熟，比如 各种小程序、软件端 都有非常不错的解决方案。

这里只需要注意表单的基本设计逻辑，通过多个页面跳转，来实现多个层级的内容展示。但是我们要注意，B 端表单页不适合多步骤展示表单，因为在系统当中需要很多必填字段，而通常这些字段的填写难度较高，需要用户花时间进行收集的，因此将所有信息提示给用户可能会比多步骤展示更加合理[3]

[3]这个观点不是绝对的，但是需要我们在设计时注意这个问题（不接受杠精...）

配置页主要是满足移动端页面当中的配置需求。通常想要配置信息，需要有足够的页面空间，比如在很多桌面端的系统当中，配置信息都是以一个完整的页面来进行呈现，而想要将这些内容放置在移动端很显然是不切实际的。

因此在移动端的设计当中，我们考虑的更多是筛选出核心重要的功能，将其作为基本的信息配置路径与入口。

这里以飞书为例，在飞书的移动端当中，我们你可以通过企业管理调整企业名称、编号、查看更多企业信息，同时作为一款 OA 协同软件，考虑的更多是将成员与部门、添加成员、关联组织 作为移动场景下我们需要提供的功能；最后可以给员工配置管理员权限以及登录后台，作为最后的功能部分，这样就能够保证企业的核心配置需求。

当然在设计时，还会有一个小窍门，因为手机浏览器也能保证产品的基本操作，因此可以使用我们会在配置页底部提供复制链接的入口，保证用户在有电脑时可以进入配置。（当然很多时候也可以通过手机直接进入配置）

移动端设计，在 B 端设计当中肯定是一个趋势，但是很多 B 端设计师，因为信息量庞大，根本没办法设计，也就造成现在很多 移动端 产品体验较差，关于在实际工作当中的案例，我们周四晚上 8:30 会有一场直播分享，主要讲解《B端交互设计的移动端案例》想要参加的同学可以扫码获取报名方式。