B端设计方法论：页面还是弹窗

在B端产品设计中，我们要怎么选择信息展现样式？这篇文章里，作者结合实际设计过程中所总结的经验，对于常用的展现样式及适用场景做了整理，一起来看看，或许可以帮你理清信息展现样式选择的思路。

大家在做B端产品设计时，不知道有没有遇见过这样的情况？

“这部分信息内容的展示，为了保证系统的统一性，还是用页面进行展示”

“不行不行，这个内容量级比较小，弹窗会比较好”

“不对，信息内部还会有交互，不能弹窗跳弹窗，还是页面吧……”

在做原型设计时，经常就会遇见，今天确定了用这样的样式，等第二天再次打开时，就立马想要换成另一种样式。但是换完之后，心里依旧没底，仍然会很忐忑。

为了增加原型设计时的确定性，笔者对于常用的展现样式及适用场景做了整理，大家可以参考下。

一、整体思路

展现样式选择的核心思路，总结成一句话就是：

不同维度下，样式与用户信息获取这一需求的相互匹配。

维度是大前提，是在结合实际的需求场景下，所做的提前准备。

样式是知识储备，其源自对于各个样式特点的掌握与理解。

匹配度的衡量，是在充分了解以上两点的基础上，做出的利弊权衡。

这里的“维度”指的是，当前的信息所产生的作用。

作用的产生一般可以从两方面进行判定，一个是用户对于信息的实际需求，另一个则是产品设计者的期望。

什么样的人，适合做B端产品经理？

要想成为优秀的B端产品经理，懂业务和懂产品是两个很重要的标准。B端赛道非常细分，产品迭代和推广的速度也很慢，这就产生了大量工作机会...

查看详情 >

用户的实际需求：信息详情，就是为了满足用户查看的需求。

产品设计者的期望：toast提示，就是设计者对于产品模块的期望。

现在常用的展现样式，可以分成两大类：页面类、弹窗类。

页面类对应的就是页面样式，弹窗类则包括弹窗、浮层、抽屉。

每一种展现样式都有自己的特点，不同的特点适配不同的场景。

3. 匹配度

匹配度就是对于用户的需求与样式特点之间的衡量。

衡量的难点就在于衡量标准的确定，这个在下文会有所提及。

二、决策思路

在进行样式选择时，初始的第一层决策就是对于样式大类的确定。

需要选择出是要使用“页面类”还是“弹窗类”。

这里可以通过“用户聚焦程度”来进行决策。

（注：由于“用户聚焦程度”这个概念比较抽象，在实际场景中他可以将其具象为用户预计停留时长、信息量级、信息重要程度等一些可被量化的维度帮助判断）

1. 用户聚焦深

聚焦程度越深，用户对于当前信息的需求就越独立。

而信息的独立性，则会降低当前信息与原页面信息的关联性。

新的的信息与原页面信息的关联性不大，那么用户对于原页面信息的需求也就不高。

由此就可以得出一个结论：“新信息是可以独立于原页面之外展现的。”

对于这种相对独立的信息展示，就比较适合以一个单独的页面来承载。

2. 用户聚焦浅

聚焦程度的深浅，是针对于新信息与原有信息来说的。

新信息的聚焦程度浅，相对的原有信息的聚焦程度就会深，用户对于原有信息就会有需求。

所以新信息的展示样式，就不能脱离原有页面信息而存在，这时弹窗类样式就是一个很好的选择。

但具体选用哪一种弹窗样式呢？

以下有几个维度可以参考：

1）新信息是否有强关注的需求

当新信息需要用户进行强关注时，建议采用“弹窗”样式。

弹窗这一展现样式其最大的特点，就是在展现时会有一个遮罩效果。

遮罩的存在，间接性的排除了其他信息的干扰，从而保证用户的注意力全部聚焦在弹窗上。

同时弹窗的交互只是在原有页面上的弹出，并没有跳出原有页面，依旧保持与原有信息的关联。

2）新信息是否有展示位置的需求

当新信息需要在一些特殊的位置展示时，建议采用“浮层”样式。

浮层的展现样式最大的特点就是展现位置灵活。

既可以根据触发原件位置的变化而变化，如下图所示：

也可以选择特定的位置进行显示，如：toast提示、移动端的提示banner等。

而弹窗与抽屉的展现位置相对较固定，一个是默认在屏幕中间展示，另一个则是左/右滑动出现。

3）信息量级

当新信息的展示对于量级有要求时，可根据具体量级来决定对应弹窗类型。

浮层所能承载的信息量级最少；

抽屉所展示的信息量级相对较大，同时也支持通过上下滑动查看信息；

弹窗展示的信息量级相对较灵活，可以根据实际的需要场景，对应弹窗的大小进行缩放。

4）新信息与原页面有同步交互需求

当新信息与原有页面信息，需要有同步交互的需求时，建议选择抽屉。

抽屉样式的展示，依然会保留部分的原有页面信息，在展示抽屉信息的同时，依然可以对于原有页面的信息进行操作。

而弹窗与浮层的“同步性”就不如浮层样式，弹窗的遮罩会全量覆盖原有信息，浮层则是没有办法做同步的交互。

对于信息展现样式的选择总的思路就是：用户聚焦程度→具体需求场景。

在具体决策前，需要做的准备有两点：用户需求的分析、各个样式特点的积累。

以上是笔者在实际设计的过程中所总结出来的经验，希望能帮助到各位。