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

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

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

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

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

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

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

一、整体思路

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

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

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

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

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

1. 维度

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

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

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

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

2. 样式

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

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

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

3. 匹配度

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

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

二、决策思路

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

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

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

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

1. 用户聚焦深

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

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

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

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

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

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

2. 用户聚焦浅

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3)信息量级

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

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

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

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

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

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

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

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

三、总结

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

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

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


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部