大家在做B端产品设计时，不知道有没有遇见过这样的情况？
“这部分信息内容的展示，为了保证系统的统一性，还是用页面进行展示”
“不行不行，这个内容量级比较小，弹窗会比较好”
“不对，信息内部还会有交互，不能弹窗跳弹窗，还是页面吧……”
在做原型设计时，经常就会遇见，今天确定了用这样的样式，等第二天再次打开时，就立马想要换成另一种样式。但是换完之后，心里依旧没底，仍然会很忐忑。
为了增加原型设计时的确定性，笔者对于常用的展现样式及适用场景做了整理，大家可以参考下。
一、整体思路
展现样式选择的核心思路，总结成一句话就是：
不同维度下，样式与用户信息获取这一需求的相互匹配。
维度是大前提，是在结合实际的需求场景下，所做的提前准备。
样式是知识储备，其源自对于各个样式特点的掌握与理解。
匹配度的衡量，是在充分了解以上两点的基础上，做出的利弊权衡。
1. 维度
这里的“维度”指的是，当前的信息所产生的作用。
作用的产生一般可以从两方面进行判定，一个是用户对于信息的实际需求，另一个则是产品设计者的期望。
[
B端产品经理的能力模型与学习提升
B端产品经理面临的第一大挑战，是如何正确的分析诊断业务问题。 这也是最难的部分，产品设计知识对这部分工作基本没有帮助，如果想做好业务分析诊断，必须具备扎实 ...
查看详情 >
](https://ke.qidianla.com/courses/90tob)
用户的实际需求：信息详情，就是为了满足用户查看的需求。
产品设计者的期望：toast提示，就是设计者对于产品模块的期望。
2. 样式
现在常用的展现样式，可以分成两大类：页面类、弹窗类。
页面类对应的就是页面样式，弹窗类则包括弹窗、浮层、抽屉。
每一种展现样式都有自己的特点，不同的特点适配不同的场景。
3. 匹配度
匹配度就是对于用户的需求与样式特点之间的衡量。
衡量的难点就在于衡量标准的确定，这个在下文会有所提及。
二、决策思路
在进行样式选择时，初始的第一层决策就是对于样式大类的确定。
需要选择出是要使用“页面类”还是“弹窗类”。
这里可以通过**“用户聚焦程度”**来进行决策。
（注：由于“用户聚焦程度”这个概念比较抽象，在实际场景中他可以将其具象为用户预计停留时长、信息量级、信息重要程度等一些可被量化的维度帮助判断）
1. 用户聚焦深
聚焦程度越深，用户对于当前信息的需求就越独立。
而信息的独立性，则会降低当前信息与原页面信息的关联性。
新的的信息与原页面信息的关联性不大，那么用户对于原页面信息的需求也就不高。
由此就可以得出一个结论：“新信息是可以独立于原页面之外展现的。”
对于这种相对独立的信息展示，就比较适合以一个单独的页面来承载。
2. 用户聚焦浅
聚焦程度的深浅，是针对于新信息与原有信息来说的。
新信息的聚焦程度浅，相对的原有信息的聚焦程度就会深，用户对于原有信息就会有需求。
所以新信息的展示样式，就不能脱离原有页面信息而存在，这时弹窗类样式就是一个很好的选择。
但具体选用哪一种弹窗样式呢？
以下有几个维度可以参考：
1）新信息是否有强关注的需求
当新信息需要用户进行强关注时，建议采用“弹窗”样式。
弹窗这一展现样式其最大的特点，就是在展现时会有一个遮罩效果。
遮罩的存在，间接性的排除了其他信息的干扰，从而保证用户的注意力全部聚焦在弹窗上。
同时弹窗的交互只是在原有页面上的弹出，并没有跳出原有页面，依旧保持与原有信息的关联。
2）新信息是否有展示位置的需求
当新信息需要在一些特殊的位置展示时，建议采用“浮层”样式。
浮层的展现样式最大的特点就是展现位置灵活。
既可以根据触发原件位置的变化而变化，如下图所示：
也可以选择特定的位置进行显示，如：toast提示、移动端的提示banner等。
而弹窗与抽屉的展现位置相对较固定，一个是默认在屏幕中间展示，另一个则是左/右滑动出现。
3）信息量级
当新信息的展示对于量级有要求时，可根据具体量级来决定对应弹窗类型。
浮层所能承载的信息量级最少；
抽屉所展示的信息量级相对较大，同时也支持通过上下滑动查看信息；
弹窗展示的信息量级相对较灵活，可以根据实际的需要场景，对应弹窗的大小进行缩放。
4）新信息与原页面有同步交互需求
当新信息与原有页面信息，需要有同步交互的需求时，建议选择抽屉。
抽屉样式的展示，依然会保留部分的原有页面信息，在展示抽屉信息的同时，依然可以对于原有页面的信息进行操作。
而弹窗与浮层的“同步性”就不如浮层样式，弹窗的遮罩会全量覆盖原有信息，浮层则是没有办法做同步的交互。
三、总结
对于信息展现样式的选择总的思路就是：用户聚焦程度→具体需求场景。
在具体决策前，需要做的准备有两点：用户需求的分析、各个样式特点的积累。
以上是笔者在实际设计的过程中所总结出来的经验，希望能帮助到各位。
本人喜欢弹窗