弹与不弹

在产品设计中遇到关于是弹窗还是页面的选择问题，在网上查找了一些资料，加上我自己的理解，总结一下。

1. 弹窗的特点

• 可将用户注意力吸引至弹窗内容
• 用户不易迷失，弹窗覆盖在原页面上，但并不完全遮盖原有内容（这一点有可能在未来的设计趋势中有改变），用户清楚自己“身在何方”
• 相对独立，不影响原页面布局
• 没有中断感，可随时返回主流程，不影响原任务，原页面中的操作和信息仍然保留
• 响应速度快，出现和消失的响应速度都比较快，不会让用户等待
• 空间有限，可容纳的信息量较少
• 如果是非用户期待的弹窗（如广告、居高临下的警示等），容易引起用户反感
  由此可见，弹窗适合于非主流程的一些简单、临时、突发、补充性的信息展示和操作。

2. 弹窗的主要使用场景

• 先导性的信息和操作
  如新手引导、操作示例、进入下一步骤前的预操作（例如要创建一个仪表板，先选择仪表板的类型）

• 警示、提示
  对一些影响较大的操作，为防止用户不清楚关联后果或者误操作，所以需要给与用户提示和二次确认，以弹窗形式出现能较强地引起用户注意，但同时，有些提示会让用户觉得自己被当作了傻瓜，二次确认也可能引起用户的反感，所以提示信息如果必须出现，应该尽可能的友好、站在用户角度。下图中的提示语或多或少有些居高临下。

  
  clipboard.png

• 选择器
  通常在编辑页面中使用，如上传文档、修改头像、选择相对复杂的选项（比如个数较多、多层级等）。例如，桌面版QQ的邀请好友入群时，好友选择器。当然，这个例子不是很恰当，因为是桌面版应用。

  
  clipboard1.png
  

  其实在很多Web应用中，也常使用弹窗来作为选择器，如下图是一个在线数据分析应用中的字段选择器窗口。

  
  clipboard2.png

• 属性配置
  修改页面中某个对象的属性信息时，有时可用弹窗形式，例如修改个人信息。

  
  clipboard3.png

• 简单任务
  有时候一些任务较简单，展现信息也少，同时它与当前页面的关系相对独立，没有继承、总分、并列等强逻辑联系，所以此时并不需要用当前页打开或新页面打开，弹窗就是很好的选择。例如，知乎网页版的已登录用户首页中，点击【提问】，以弹窗形式展现提问的内容输入表单。

  
  clipboard4.png

3. 弹窗使用时的注意事项

• 避免弹窗嵌套
  当前打开的弹窗数量最多保持在一个，避免在弹窗上面再覆盖另一个弹窗。如果真的不得不使用两个弹窗，可在当前弹窗的同等位置、同等大小打开下一个弹窗，并完全覆盖前一弹窗。但仍然需要避免这种情况，可以再回归到需求本身进行设计思考。
• 弹窗出现时底部页面固定
  在弹窗出现或消失时，底部页面应始终处于固定的静止状态，不可抖动、滚动。否则非常影响用户体验。
• 弹窗样式尽量保持一致
  弹窗样式包括弹窗显示的位置、大小、交互方式（如关闭方式）、按钮位置、提示信息、icon等属性，应尽量保持一致。如果需要区分不同类型的弹窗，如提示窗和选择器，可改变其中一个属性进行区分，例如弹窗的大小。

总结一下弹窗与新页面打开或当前页面跳转的对比——

微信截图_20180105113947.png

参考资料：

1. 知乎提问：交互设计中什么情况下适合用弹窗？什么情况下适合新页面打开？什么情况下适合新页面覆盖？
   链接：https://www.zhihu.com/question/21260320/answer/17695255
   作者：JimSoup、沈洲、边亚南

2. 优设网：超全面！腾讯设计师做了100个弹框后总结的设计经验
   链接：http://www.uisdc.com/tencent-100-popup-box?url_type=39&object_type=webpage&pos=1
   作者：JHong

第一次使用简书写文章，有一些不习惯。
Mark一下，新年伊始。