c#web页面显示弹窗_浅谈APP的弹窗设计---产品经理---菠萝未来俱乐部

关于APP内的弹窗设计，由于近期正在对APP进行升级改版，故总结了一下在设计规范中的一些弹窗设计规范。

1、弹框的定义

弹窗又称为对话框，是一个为激起用户的回应、需要用户去与之交互的浮层，是App与用户进行交互的常见方式之一。它可以告知用户关键的信息，要求用户去做决定，抑或是涉及到多个操作。它可以在不把用户从当前页面带走的情况下，指引用户去完成一个特定的操作。

2、弹窗分类

弹窗分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。

1）模态弹窗

模态弹窗会打断用户的正常操作行为，强制用户必须进行操作，否则不可以进行其他操作。模态弹窗常常都还会伴随半透明的遮罩来吸引用户的视觉焦点，以突出弹窗的信息内容。

Dialog对话框

这是一种模态弹窗。当用户进行了敏感操作，或者当App内部发生了较为严重性的状态改变，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前以Dialog对话框的弹窗形式告知用户且让用户进行功能选择。比如退出App、进行付费下载等功能操作。

一般情况下Dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失，App随即执行该功能操作，进入相应的功能流程。

示例图：

使用Dialog，功能按钮最好只有两个，让用户选择“是”或“非”的功能操作（“是”指对内容描述的确认操作，比如确认删除、确认付费；“非”一般指取消操作，然后关闭弹窗）；

也常被设计成只有一个“确认”按钮，目的是让用户阅读内容后点击关闭弹窗（这种样式的Dialog，信息内容必须非常有必要性以至于需要打断用户的操作进行信息内容阅读确认，否则请用Toast进行非模态弹窗提示）

Actionbar 功能框

Actionbar功能框是Dialog的一种延伸设计，也是模态弹框，用户必须进行回应，否则弹窗无法消失，不能进行其他操作。

Actionbar一般设计一个默认的“取消”功能按钮，点击该按钮后关闭，点击该弹窗以外的区域也可以关闭，相当于“取消”功能。Actionbar一般被设计成向用户展示多个功能按钮选择。示例见下图：

在iOS中，Actionbar的样式比较常见的是文字列表框，它出现在页面底部，以简洁的功能描述性文字展示功能按钮，敏感的功能操作一般用红色字体标出（也可以设计其它颜色以突出某个功能按钮）

2）非模态弹窗

非模态弹窗则不会影响用户操作，用户可以不与回应，通常有时间限制，出现一段时间就会自动消失

Toast 提示框

它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。

例如你发出了一条短信，App弹出一个Toast提示你消息已发出。

最常见的Toast提示框为一句简短的描述性文字。这种样式的弹窗可以出现在页面的任何位置，可设置成在页面顶部、中部或者在底部出现（但一般都是出现在页面的中轴线上），具体的显示位置根据页面的整体设计进行设置。该种Toast在安卓App上十分常见。（见下图）

还有一种Toast弹窗由简单的图形和简短的文字组成，显示位置一般位于页面正中央。这种Toast在iOS和安卓上都可以经常见到。

ios的一种Toast设计，将该该种展示内容与APP的界面萧协调融合，还能够吸引注意力，它一般出现在内容页顶部向下滑动页面时出现，然后向上滑动自动消失。例如新闻类APP，见下图

注：因为Toast弹窗一般显示的时间较短（一般时间只有几秒钟），占用的区域不大，比较容易被用户忽略，故Toast不适合承载过多的文字和重要信息。

欢迎志同道合的朋友添加微信（“扫一扫” 添加，备注“产品学习-知乎”）

菠萝未来俱乐部

一个联系互联网人的学习交流社区，这里有产品经理、产品运营、设计、开发、测试等小伙伴，快来加入我们吧。。

本文

持续

更新

中

敬请收藏，更多干货，希望与大家分享