toast弹窗_经验 | UI设计师必懂的App弹窗设计方法

点击上方蓝字，+关注不错研究室

本文总结了App弹窗设计体系，以及不同弹窗的使用方法和误区。案例丰富，适合UI设计师进阶学习。

这一篇你将看到：

1、弹窗的定义

2、不同类型弹窗的特点及使用场景

3、常见使用误区

一、弹窗的定义：

弹窗是App中一种常见的交互方式，主要具有“传递信息”和“获取反馈”两大功能。按类别划分，可分为“模态弹窗”和“非模态弹窗”两大类。

模态弹窗：

强制打断用户当前操作行为，传递给用户信息，同时用户必须进行操作回应，否则无法使用其他功能。

包含：Dialog/Alerts(警告框、对话框)；  Actionbar、Action Sheets、Acitivity View(动作栏、操作列表、活动视图)； Popover/Popup(弹出框、浮层)

非模态弹窗：

不影响用户当前操作行为，传递给用户信息，用户不用对其进行回应，一般出现几秒后消失。

包含：Toast / HUD(提示框)；Snackbar(底部弹窗)

二、弹窗介绍：

1.1、Dialog/Alerts(警告框、对话框)

顾名思义此类弹窗具有通知、警告的作用，往往会打扰到用户正常操作。用户必须对弹窗进行回应，才能继续其他任务。此类弹窗在安卓中称为Dialog，在ios中称为Alerts。

(1)样式：

一般出现在屏幕中间位置，背后有黑色半透明蒙层。主要分为“按钮样式”和“图片样式“。“按钮样式”基本元素必须包含标题、1~3个按钮，此外可以根据情况添加：描述文案、输入框等。“图片样式”通常用于广告活动宣传，图片形状不固定，可以是异形。有时也可以图片和按钮结合使用。

(2)使用场景：

此类弹窗通常用于很重要、很紧急、有风险的操作，或传达重要信息。如：退出、删除、清空、版本升级、广告宣传等。由系统发起的弹窗(非用户触发)一般也使用Dial