发布时间：2019-4-22 分类： 电商动态
弹出窗口对每个人来说并不陌生。 UI设计人员经常在工作期间甚至在应用程序的日常使用过程中接触各种弹出窗口设计。今天的好文章将让您更全面地了解弹出式设计。
阅读本文后，您将学习：
1.什么是弹出窗口，弹出窗口的定义
2.弹出窗口的分类及其各自的特征
3.弹出窗口设计的思考和优化
一. 什么是弹窗
一般来说，它的功能意义是：中断用户当前的操作并对其进行补充，或者中断用户当前的操作并给予反馈。作为产品通信和用户操作的核心枢纽，作为用户处理“即时任务”的重要载体，其外观可谓千变万化，但并未发生变化。在交互的形式中，它分为两种形式，模态弹出窗口和非模态弹出窗口。
模态弹出窗口，其特征在于用户在用户的视野内出现时需要对其进行响应，因此它是交互式的。常见类型有Dialog，Alert，Popover/Popup和Actionbar。由于其特点，其水平注定很高，可以吸引用户的注意力。 。同时，它将带来强烈的经验感，并建议个人建议。
非模态弹出窗口与模态弹出窗口的特征相反。从外观到暂停需要很短的时间，因此用户不需要反映它，因此它是一种轻量级的反馈机制。常见的类型是Hud/Toast，Tip Bar和Snackbar。
二. 弹窗的分类
模态：对话
对话框类型有很多弹出窗口。我将它们分为：信息传递类和信息提交类。
信息传递类型的对话框通常是指在运行程序的过程中需要用户决策的“即时任务”。
更典型的：系统，版本更新，消息通知，警告栏，操作/广告弹出窗口等。
这种弹出窗口的视觉水平非常高，设计也各不相同。它通常出现在屏幕的中央，带有半透明的遮罩，使其难以忽略。它们通常用于提示重要信息，提醒用户处理当前任务，等等。由于其“高调”性质，它被用于事件操作，并且广告的频率非常高。
△系统位置提示/新版本提示/打开通知提示
△系统电源提示/活动操作提示/广告弹出窗口
信息提交类要求用户在弹出窗口中操作并提交两次信息。使用方案，登录注册，重命名组等，如下所示。
△登录对话框/更改名称/新组名称
模态：浮动图层
△按钮浮动层/按钮浮动层/下拉菜单浮动层
浮动层意味着当用户单击功能控件时，会添加一个临时接口来补充它。它通常伴有半透明的掩模/阴影基底。用户需要单击临时界面的功能区域，或单击空白区域。转到下一步。它还有一些其他名词，如“下拉菜单”，“下拉窗口”等。它们的功能属性是相同的，因此我将它们分类在一起以便于归纳。
模态：行动栏
△操作栏/操作菜单/操作菜单
操作栏实际上与浮动层非常相似。它由用户的主动点击补充，但浮动层通常出现在上部位置，操作栏通常出现在底部。浮动层强调其从表单中的归属，即来自它的来源，并清楚地指导用户的操作。图3是我很困惑的设计。我几乎无法对其进行分类。因为它有一个半透明的磨砂玻璃罩，我把它归类为动作栏。它点击了一个分享按钮，整个界面高度密封，点击空白区域将取消当前操作，但个人觉得如果不是惯性操作，用户很容易混淆。建议进行适当的优化，例如添加后退按钮，固定操作区域等。
非模态：HUD/Toast
Hud是iOS控件，Toast是android，大多数业界的App都在iOS提示系统中使用Toast。因此，两端在功能和形式上都有相似之处和不同之处。
△音量增加/更新气泡/更新提示栏
△清理缓存/更新气泡/更新气泡
△按钮引导/按钮引导/按钮引导
因为它们的形式变化很大，甚至有些很难定义，所以我切断了上面的九个接口，以帮助大家理解。
通过第1行和第2行的图例，您可以看到它们都是反馈用户的任务状态，例如更新了多少新更新，传输成功，缓存被清除等等。这种烤面包的时间非常短，约为1秒。图例第三行中的Toast与前两行略有不同。它们主动出现，提示用户对功能点进行必要的添加。
这种类型的Toast会花费更长的时间，或者在用户滑动/点击后消失。我称之为启动泡泡。我想谈谈他们的“形式”和“位置”。形式上，它大致分为纯文本，图标+文本，有些是气泡（POP），有些是提示栏。设计师可以根据重量选择。
就位置而言，这些弹出窗口几乎出现在任何区域。值得注意的是，Toast的位置通常与用户操作有关。作为设计师，我们需要确保即使是这样轻量级的反馈也是合适的。位置，用户有效收到，如Toast一般在下拉刷新后出现在顶部，双击Navbar主页图标后提示更新Toast将出现在底部，引导气泡经常出现在周围按钮等，设计师不妨多想想。
非模态：Snackbar
△售罄提示/登记提示/登录活动提示
与Toast一样，Snackbar是Android中的一个控件，它也是一个弹出窗口，现在用于iOS应用程序的提示。用户操作的轻量级反馈机制也是如此。它们通常出现在底部，可以互动，在短暂停顿后消失，或者滑动页面。这两个目标之间的相互作用存在一些差异。 Android中Snackbar的出现更多地针对用户的操作。在iOS中，用户可以打开应用程序，或者会出现滑动产品列表，这更像是吸引用户并继续下一步。这在App中尤为常见。
非模态：提示栏
提示栏是嵌入当前页面的组件。由于它与弹出窗口一样大，因此与当前页面完全不同，因此我将其放入弹出窗口进行总结。虽然处于正常状态的提示栏属于非模态弹出窗口，但它们驻留在页面的某个区域中并且可以进行交互。
△登录提示/登录提示/离线提示
总结
弹出式设计是我最喜欢的内容之一，我认为它让用户真正感觉到产品和产品之间存在联系。同时，设计的质量还考虑了产品背后的团队是否真正理解用户并理解产品。
无论是模态弹出窗口还是非模态弹出窗口，其外观会或多或少地影响用户的当前体验，因此我们使用弹出窗口来限制，而不是高频使用。同时，当我们选择玩窗户时，我们必须谨慎和合理。
使用对话框时，用户会感到放心和可靠，提醒用户在操作前避免风险，并且成本高。如果电池剩余10％，那苹果只会让我想起一个微弱的1s泡泡，而你只是看不到关机，你觉得非常崩溃吗？因此，选择弹出窗口也需要基于场景。
在文章的准备阶段，我删除了大约70个接口。一些弹出窗口非常微妙。当然，还有一些“很难说”的设计。下面我列出了弹出式设计的三个“反向案例”，希望避免在设计中产生一些误解。
△版本更新提示/广告弹出/评估提示
反面1的问题：文案不友好
用户不关心新版本修复的内容。他们甚至不知道“虫子”是什么。弹出副本令人困惑。该产品可能希望将这个想法从“我们已修复的东西”改为“我们带来的东西”。有关详细信息，请参阅主要电子商务应用程序的实践。
反面2的问题：错误的交互
当我打开应用程序时，我甚至没有一个滑动页面，我只是跳出一个广告，这让我感觉非常糟糕。关键是你可以在设置5秒后点击关闭按钮。好的，我立即将其卸载并将其置于否定的情况下。在用户完成任何操作之前，请勿弹出窗口。在高级别的高容量弹出窗口中，尽量不要再次添加复杂的交互，并再次消耗用户耐心。这真是不合理。建议使用设计+复制+布局，“智能”广告来参考一些新的零售应用实践。
反面3的问题：糟糕的时机
这个弹出窗口的副本也很好，选项很合理，似乎没有问题，我把他放到相反的情况下的原因是我刚刚下载了应用程序和评估弹出窗口跳出。我知道有很多应用程序正在这样做。我真的很难过。用户甚至没有足够的时间来使用您的产品。你如何评价？建议为新用户提供一段时间的使用，然后评估弹出窗口。
