江苏龙网

  1. 首页 > 资讯 > 科技 > >

『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验( 二 )


但信息量多不代表只能用页面 ， 比如说这个系统 ， 虽然患者信息很多 ， 但还是用了弹窗的形式 ， 因为他在很多地方都调用到了这个弹窗 ， 为了减少跳出率 ， 也为了使多处的体验一致且更流畅 ， 他在原先有页面的情况下还是做了个弹窗 。
现在有些系统为了让弹窗的信息承载量变大 ， 做成了全屏弹窗 。 这个下面会讲到 。
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

如何选择合适的弹窗？
当我们决定使用弹窗了 ， 下面就要挑个漂亮的弹窗了 。 根据页面信息量的多少 ， 我们会给出几个弹窗大小的标准 。
1. 根据信息量选择
（1）全屏弹窗
这种和页面相比肩 ， 又有弹窗性质的弹窗 ， 真是让人又爱又恨 。 完美解决了页面跳出的问题 ， 也解决了信息量承载少的问题 。 但在现实中发现 ， 有些用户刚用时比较懵 ， 右上角的叉号小且不明显 ， 菜单栏还被遮住了 ， 不知道该如何操作 。
这也是因为全屏弹窗还不够普遍的原因 ， 用户习惯还没有被培养起来 。 你可以试下培养用户习惯 ， 不然的话就还是缩小一点 ， 用个超大屏弹窗 ， 四周留点底 ， 用户认知更轻松点 。
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

至于大、中、小、提示弹窗大家都很好理解 ， 这边只是提示一下 ， 系统里面要制定好这3个弹窗的尺寸标准 ， 千万不要让开发随意发挥 ， 导致每个弹窗大小都不一样 ， 比如：这是我们定的标准 。
（2）大弹窗
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

（3）中弹窗
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

（4）小弹窗
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

2. 弹窗不只能居中
一般弹窗的位置就2种 ， 居中和右侧 。 右侧弹窗的好处是：如果比较窄的话 ， 左侧内容不会被遮挡住 ， 信息量更大 。
如果对覆盖住的信息展示要求不高的话 ， 居中弹窗就可以了 。
居中：
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

右侧：
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

弹窗使用小tip
最后提示2个注意事项 。
1. 弹窗叠弹窗
这是交互最不喜欢的 ， 他们的理念是：弹窗就是一个最小集合了 ， 不能在弹窗上叠加弹窗 ， 这样无限制叠加下去 ， 岂不乱了规则 。
但对于B端产品来说 ， 哪有那么多规则 ， 效率第一 ， 好用第一 。 你看下面这张图 ， 就包含了3个弹窗：全屏弹窗、右侧大弹窗、居中小弹窗 。 并没有不和谐的感觉 。
所以不要多顾虑弹窗叠弹窗的问题 ， 大胆去用吧 。
『』99%的产品会忽视的细节，教你巧用弹窗撬动用户体验
本文插图

2. 弹窗关闭
这个需要注意下 ， 弹窗里面的信息分2类：一类是填写的数据需要保存的 ， 比如说病历；一类就是选择浏览的 ， 比如说选择模板 。
需要保存信息的就不能点击空白处就消失 ， 点击关闭按钮时最好也提示下是否需要保存；另一类就可以简单地处理 ， 点击空白和关闭按钮时直接消失 。
总结
用弹窗还是页面 ， 没有绝对的标准 ， 有的系统很喜欢用弹窗 ， 有的系统很喜欢用页面 ， 但刨除个人喜好 ， 我们希望弹窗的使用是让用户体验更好 ， 更少的跳出感 ， 更少的错误 ， 更流畅的操作 。


推荐阅读


上一篇：『魅族科技』魅族17 Pro搭载3D 深感探测器 或可实现环境扫描等功能

下一篇：iPhone■苹果将为可折叠的iPhone或iPad设计专属柔性电池