界面该不该加弹窗？来看高级设计师的总结 _界面

你是否有这样的经历，在工作的时候，突然跳出一个弹窗，打断了你的思路，让人火冒三丈。弹窗的出现，原本只是为了提醒用户，却给他们留下了非常糟糕的用户体验。
今天格格学姐就从六个方面，分析如何设计更合理的弹窗通知，希望对你有帮助。
01
关于弹窗的说明
弹出窗口（也叫做覆盖窗口或悬浮窗口）是出现在页面内容顶部的窗口或对话框。可以根据两个维度进行分类：
1. 用户是否可以与页面的其它部分交互：
模态弹窗：在用户显示的弹窗内容完成交互之前，页面上的其他内容将被禁用。
非模态弹窗：当弹窗显示时，用户仍然可以与背景内容进行交互（例如，点击链接或点击按钮）。
2. 背景是否变暗：
如果背景内容变暗（通常为百分比的黑色，如：40%的不#000000），弹出窗口为灯箱弹出效果。当背景内容没有变暗时，没有特殊的名称。
尽管在许多情况下，灯箱弹出效果都是模态的，但也有一定的区别。如下图所示：

文章插图
注意，弹窗的使用一定要克制，它带来视觉上的中断，打扰用户完成业务流程；再加上弹窗视觉面积较小，承载信息有限，应当尽量减少弹窗使用。
02
设计原则
尽量减少使用：进行弹窗设计时，需要牢记的基本设计原则是它必须协助（而不是打断/阻碍）用户执行操作。一个设计良好的通知模型会考虑到可访问性，并具有适应不同语言的灵活性。所以要求样式和行为必须清晰、简明和易用。
信息有效触达：信息类型上有文字、插图等，组织时从信息关联性、重要性、连续性等特性出发；通过背景分块、字体、字号、粗细的区别来实现，有时候甚至可以辅以局部微动效。

文章插图
尊重用户使用习惯：比如：提供弹窗关闭按钮，作为安全措施；同时，提供体现便捷的交互手段，比如：点击蒙层区域隐藏弹窗、弹窗自动隐藏等。

文章插图
重视氛围和体验：弹窗有很多中业务使用场景，针对有营销性质的弹窗，比如：应用欢迎弹窗、应用更新引导、重要活动通知、营销活动节点等；要通过插图、局部微动效等手段来打造体感。

文章插图
03注意事项
1. 展现形式
展现形式核心是分场景，一些偏向系统报错考虑使用最简单系统的弹窗展现形式，运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做，一定要让用户懂得，这是一个弹窗。非模态弹窗一般多以最简单的形式出现，避免传递状态信息时干扰用户的关键信息获取。
2. 按钮
模态弹窗一般情况下只放置1-2个按钮，信息告知类型的放个“确定” ，重大决策类型的放个“确定”“取消” 。比较特别的是权限请求弹窗，可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上，对于用户体验上来说相当的不友好，但是对于运营数据上来说可能会很好看。

文章插图
3. 动效
因为弹窗承载文本量有限，得利于设备技术的发展，现在越来越多的产品会在模态弹窗中使用动态的形式传递信息，例如很多产品的功能引导。对于非模态弹窗来说，由于本身存在感较弱，动效运用于合理顺应用户的视觉动线，例如你下拉刷新后，一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。
4. 文案表述
由于弹窗的信息承载量非常小，所以一定要用最精炼，恰当的表述来告知用户信息或者当前状态，可以考虑使用“动词+名词”的组合短语，例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的，文案字数要更加注意（可以考虑增加一些通用icon颜色辅助表达，比如正确使用绿色打钩）。