APP弹窗的分类及设计技巧

作者: 王旋子同学 | 来源:发表于2018-07-09 19:49 被阅读139次

刷了很多文章,看到各式各样的弹窗分类,今天总结一下。

什么是弹窗?

弹窗又称为对话框,是App与用户进行交互的常见方式之一。弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其它操作;非模态弹窗则不会影响用户的操作,用户可以不对其进行回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。

无论是模态还是非模态,弹窗都是位于当前页面的最顶层。模态弹窗常常都还会伴随半透明的遮罩来吸引用户的视觉焦点,以突出弹窗的信息内容。非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

常见的弹窗分类用下面这个图就可以解释清楚啦~

(麻麻说自己做的图要写上大名)

1. Dialog(Alerts)

需要用户对弹窗进行操作后才能执行其他操作。优势在于提醒明显,能够对用户行为进行定向性预测。

(图片来自网络)

2. Actionbar(Action Sheets、Acitivity Views)

提供用户多种选择的弹窗,此为用户主动发出操作。优势在于可以承载多种选项,实现多应用之间操作。

(图片来自网络) (图片来自网络)

3. Popover

用户单击某个控件或页面某个区域后出现的临时复层,通常可以再次隐藏。优势在于用户操作时页面逻辑清晰,当前页面因隐藏多项低频操作使得界面简洁。

(图片来自网络)

4. Toast/HUD

信息给予用户及时反馈,确保用户知晓自己所处的状态,并做出相应的措施。优势在于提示轻盈,不会对用户操作带来太大阻碍。

(图片来自网络) (图片来自网络)

5. Snackbar

向用户反馈信息,可以交互。优势可以弱化提醒的同时,增加操作。

(图片来自网络)

对于UI设计师而言,理论上的分类清晰还远远不够,还需要针对视觉、文案、以及其他商业需求进行权衡。常见的有以下方面:

【视觉方面】

1. 弹窗文案简洁,表意清晰无歧义

比如,弹窗提醒文字为“是否要删除该项?”,操作为“是”和“否”会让用户犹豫不清是删除还是不是删除,若换成“删除”和“取消”就不会有歧义了。

2. 设计风格尽量简约

3. 弹窗的设计风格可以根据应用设计风格进行重塑

比如,微博Toast弹窗就根据微博整体风格进行设计。

4. 可进行诱导性设计

常见的如希望用户点击的按钮放在右边,放大点击按钮弱化关闭按钮等。

5. 危险操作需警示

如删除时需要将“删除”操作警示。

【交互方面】

1. 弹窗的出现尽量不干扰用户使用

2. 具有同种层级的弹窗使用相同的样式

3. 同种Toast弹窗位置保持相同

4. 注意弹窗频率

今天先整理些理论,明天的文章会从可操作的方法讲述弹窗如何制作。

相关文章

  • APP弹窗如何做到统一又有特色

    上一篇文章《APP弹窗的分类及设计技巧》汇总了APP弹窗的分类,今天主要针对如何在一个项目中进行APP弹窗设计。 ...

  • APP弹窗的分类及设计技巧

    刷了很多文章,看到各式各样的弹窗分类,今天总结一下。 什么是弹窗? 弹窗又称为对话框,是App与用户进行交互的常见...

  • 产品经理如何设计移动端弹窗功能

    本文大纲:(1)认识APP弹窗的组成要素和使用场景;(2)掌握APP弹窗和非弹窗的设计方法 1 为什么要设计弹窗 ...

  • APP中如何更好的使用弹窗?

    设计师都会使用弹窗,但对于弹窗背后的分类及运用可能还不是特别了解,在写这篇文章之前,我查看了很多应用及资料,所以下...

  • 巧用app弹窗提升用户转化

    一、什么是弹窗? App产品经理在设计功能时,会设计在App界面主动弹出内容,即为弹窗。弹窗包含很多形式:toas...

  • APP弹窗分类总结

    需求来的时候,东加一点西加一点,最后导致系统里有各种各样的样式,所以在前期设计的时候就需要逐步完善设计规范,后期迭...

  • 2019最佳弹窗/弹出框设计20例【附教程】

    弹窗/弹出框是APP或者网站与用户交互常见的方式之一。不同的网页弹窗和App弹框适用于不用的场景,弹窗的设计直接影...

  • APP中弹窗类型

    一、弹窗定义 1.弹窗的作用 需要用户回应或给与用户相关信息提示等与之交互的窗口 2.app弹窗分类 3.模态窗口...

  • 【产品】APP常见弹窗总结

    本文对APP中常见弹窗的分类、特点与应用场景进行了总结~ 在使用APP过程中,经常看到各种各样的弹窗提示。那么这些...

  • 关于APP中的消息提示设计

    这里介绍一下关于APP中的消息提示设计的几种分类,大的弹窗提示这里就不说了,之前大家总结过很多次了。 1、全局提示...

网友评论

    本文标题:APP弹窗的分类及设计技巧

    本文链接:https://www.haomeiwen.com/subject/xbotpftx.html