弹窗设计怎么做?弹窗设计的基本样式和应用场景

弹窗设计怎么做？（弹窗设计的基本样式和10大应用场景）

作者对弹窗的基本样式进行了分析梳理，并总结了使用上需要注意的要点，与大家分享。

在设计Dialog弹窗时，我们大多时候直接拖控件，直接提交一个基础的规范给前端，甚至只是给几个弹窗样式给他们，导致上线后出现不统一、使用混淆等情况。

尽管我们常说要把重心放到重要的界面中，弹窗这些小问题不用在意，但是如果我们通过学习整理，能提前规避这些问题，何乐不为呢？

本篇文章就和大家分享了弹窗的基本样式和使用注意要点，让我们可以在实际设计时少走弯路。

目录：

1. 什么是Dialog弹窗
2. 弹窗的基本样式
3. 弹窗的使用场景

一、什么是Dialog弹窗

Dialog弹窗在iOS中也叫Alert，属于模态弹窗的一种，使用时会打断用户的操作行为，用户必须对其进行操作才能解散弹窗，否则不能进行其他操作。

二、Dialog弹窗的基本样式

弹窗一般由信息区和操作区组成，根据展示内容可分为：纯文本、带图片、带输入、纯图片四种。

1. 纯文本：多用于以传递信息为主的场景中，其优势是信息传递快、设计成本低。
2. 带输入：多用于信息提交类弹窗，其优势是可以快速录入信息，不用跳转新页面。
3. 带图片：多用于以引导用户操作的场景中，其优势是氛围强，避免引起用户反感。
4. 纯图片：纯图片在系统操作中较少出现，多用于平台运营推广中，其优势是造型新颖，活动感强，能刺激用户操作。

三、Dialog弹窗应用场景

Dialog弹窗使用场景较多，在使用时也比较容易混淆，下面我整理了APP中10大常见的应用场景，一起来看看它们适合采用哪种弹窗样式吧。

1. 提示&通知

提示&通知可以看成路边的一个告示牌，一些告示牌告诉我们前方有危险要注意，一些告示只是单纯提示前方有什么景点，因此在设计时采用的方式也不太一样，如下图。

当告知前方有危险，这时候就需要以信息传递为主，建议采用纯文本的样式，比如陌陌进入聊天室弹窗；

当只是单纯提示，这时候就需要以营造氛围为主，建议采用带图片的样式，比如苏宁易购活动结束的提示。

注意：提示或通知的按