My Secret Rainbow

界面该不该加弹窗？

你是否有这样的经历，在工作的时候，突然跳出一个弹窗，打断了你的思路，让人火冒三丈。弹窗的出现，原本只是为了提醒用户，却给他们留下了非常糟糕的用户体验。

 

01

关于弹窗的说明

弹出窗口（也叫做覆盖窗口或悬浮窗口）是出现在页面内容顶部的窗口或对话框。可以根据两个维度进行分类：

1. 用户是否可以与页面的其它部分交互：

模态弹窗：在用户显示的弹窗内容完成交互之前，页面上的其他内容将被禁用。

非模态弹窗：当弹窗显示时，用户仍然可以与背景内容进行交互（例如，点击链接或点击按钮）。

2. 背景是否变暗：

如果背景内容变暗（通常为百分比的黑色，如：40%的不#000000），弹出窗口为灯箱弹出效果。当背景内容没有变暗时，没有特殊的名称。

尽管在许多情况下，灯箱弹出效果都是模态的，但也有一定的区别。如下图所示：

注意，弹窗的使用一定要克制，它带来视觉上的中断，打扰用户完成业务流程；再加上弹窗视觉面积较小，承载信息有限，应当尽量减少弹窗使用。

 

02

设计原则

尽量减少使用：进行弹窗设计时，需要牢记的基本设计原则是它必须协助（而不是打断/阻碍）用户执行操作。一个设计良好的通知模型会考虑到可访问性，并具有适应不同语言的灵活性。所以要求样式和行为必须清晰、简明和易用。

信息有效触达：信息类型上有文字、插图等，组织时从信息关联性、重要性、连续性等特性出发；通过背景分块、字体、字号、粗细的区别来实现，有时候甚至可以辅以局部微动效。

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

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

 

03

注意事项

1. 展现形式

展现形式核心是分场景，一些偏向系统报错考虑使用最简单系统的弹窗展现形式，运营广告之类的可以通过特殊的设计手法来吸引用户。但是不管怎么做，一定要让用户懂得，这是一个弹窗。非模态弹窗一般多以最简单的形式出现，避免传递状态信息时干扰用户的关键信息获取。

2. 按钮

模态弹窗一般情况下只放置1-2个按钮，信息告知类型的放个“确定”，重大决策类型的放个“确定”“取消”。比较特别的是权限请求弹窗，可能会有多个按钮。现在很多运营广告为了曝光率会将关闭按钮放在边边上，对于用户体验上来说相当的不友好，但是对于运营数据上来说可能会很好看。

3. 动效

因为弹窗承载文本量有限，得利于设备技术的发展，现在越来越多的产品会在模态弹窗中使用动态的形式传递信息，例如很多产品的功能引导。对于非模态弹窗来说，由于本身存在感较弱，动效运用于合理顺应用户的视觉动线，例如你下拉刷新后，一般刷新反馈弹窗都是出现在用户当前的视觉聚焦点。

4. 文案表述

由于弹窗的信息承载量非常小，所以一定要用最精炼，恰当的表述来告知用户信息或者当前状态，可以考虑使用“动词+名词”的组合短语，例如“删除照片”“取消订单”等等。特别是非模态弹窗那种会自动消失的，文案字数要更加注意（可以考虑增加一些通用icon颜色辅助表达，比如正确使用绿色打勾）。

5. 时机频率把握好弹窗出现的时机和频率

模态弹窗会直接打断用户的操作状态，一般只有在不可逆，或者操作会造成严重后果的情况下出现。但是在一些特殊的商业需求下，比如运营广告，那就得权衡用户与商业利益之间的关系了。非模态弹窗的话更注重出现的时机，反馈一定要足够及时，这样才能不会让用户在操作中产生疑虑。

 

04

如何创造更优的用户体验

建立灵活的通知模型滥发通知会给产品带来很多负面影响，所以设计要仔细考虑产品的交互和目标，只发送必要的消息。弹窗通知可分为三个级别：高关注度、中关注度和低关注度。

高关注度：

警告型（需要立即注意）

错误型（需要立即采取措施）

异常型（系统异常，某些功能无效等）

确认型（需要用户确认才能继续进行的操作）

中关注度：

警告型（无需立即采取措施）

确认型（对用户操作的反馈）

低关注度：

信息型消息

标记（通常在图标上，展示上次互动后的新内容）

状态指示灯

对通知的关注级别和属性进行分类设计师需要对所有通知进行分析，并划分关注级别和属性。需要思考的一些问题：

1、触发点是什么？

2、触发什么类型通知？

3、重要程度如何？

4、在哪里出现以及如何出现？

5、通知持续多久？

 

05

总结

无论是怎样的设计，都是一个持续优化的过程，除了针对现状问题进行修复优化，还要时刻了解互联网市场的发展趋势，不断变更以适应互联网时代的产品特性。

当产品前期没有进行好好思考与打磨，那么在使用的过程中会暴露越来越多的问题，基于最基本的设计规范，进行优化更新——这是所有产品从业者、设计师，甚至开发者的共同目标。

在市场竞争日益激烈的环境下，很多产品胜利在于它优秀的体验维度，身为产品设计者还有用户的我们，更要明白体验是维持产品不断发展的调和剂。

 

原文：https://mp.weixin.qq.com/s/-nhtk81WOG9vD0DVUAYnyw