App弹窗设计基础

App弹窗的定义

弹窗主要分为模态弹窗和非模态弹窗,主要区别是用户是否可以在对话框中对其他对象(页面元素)的操作。非模态弹窗用来告知用户后台反馈信息,模态弹窗除告知信息外用户必须与其进行至少一次的交互。

模态弹窗:用户只能和弹窗交互,要操作其他元素必须要在与模态弹窗交互完成后才可以。

非模态弹窗:不影响用户当前的操作而且用户不需要与其交互,一般非模态对话框会在3秒内自动消失。

弹窗类型介绍

Dialog(对话框)

Popover(浮出层)

Actionbar(Action Sheets、Acitivity Views)(弹出操作框)

Toast(Android)/HUD(IOS)(透明指示层)

Snackbar(Android)(底部透明指示层)

弹窗主要分为模态弹窗和非模态弹窗,主要区别是用户是否可以在对话框中对其他对象(页面元素)的操作。非模态弹窗用来告知用户后台反馈信息,模态弹窗除告知信息外用户必须与其进行至少一次的交互。

模态弹窗:用户只能和弹窗交互,要操作其他元素必须要在与模态弹窗交互完成后才可以。

非模态弹窗:不影响用户当前的操作而且用户不需要与其交互,一般非模态对话框会在3秒内自动消失。

弹窗类型介绍

Dialog(对话框)

Dialog需要用户对此弹框进行操作后才能继续执行其他任务。

警告框在iOS中称之为Alerts。iOS的Alerts(警告框)主要用来传达重要信息,并且常常需要用户来进行操作,一般有确定和取消按钮。

201705181027367701_看图王

Popover(浮出层)

当用户轻点某个控件或页面中的某一区域时浮出的,半透明的临时视图。

常用Popover的形式来呈现页面中折叠的一些额外信息,或在首页位置呈现一些常用操作的快速入口等。

Actionbar(Action Sheets、Acitivity Views)(弹出操作框)

Actoinbar是给给用户提供更多的功能选择,一般采用官方控件,如果有特殊功能的话可以自己设计;

一般都设计有一个默认的“取消”功能按钮,点击该按钮后或者点击弹窗外的界面都可以关闭弹窗。Action Sheets(操作列表)和Acitivity Views(活动视图)是iOS上的特有的交互形式。

Toast(Android)/HUD(IOS)(透明指示层)

Toast:是安卓系统的一个控件,也可以应用于iOS系统中。Toast属于一种轻量级的反馈,常常以小弹框的形式出现,给予用户及时反馈,确保用户知晓自己所处的状态,并做出相应的措施,一般出现1到2秒会自动消失。可以出现在屏幕上中下任意位置,但同个产品会模块尽量使用同一位置,让用户产生统一认知。

HUD:iOS平台没有Toasts这种说法,只有HUD。(如iOS音量截图)

iOS中建议,设计一种引人注目但又和你的 app 的样式相协调的方式去展示信息。(如微博的刷新)

ToastsHUD不同之处:

1.Toasts一般出现在屏幕下方,HUD出现在屏幕中间。

2.Toasts一般是灰黑或黑色半透明,HUD一般是毛玻璃半透明。

3.每次产生的Toasts内容不可改变,HUD内容可以改变(比如调节音量时出现的HUD)

Snackbar(Android)(底部透明指示层)

Snackbar是Android平台特有的交互形式,很多时候也会应用在iOS系统中。它也用于向用户反馈信息,但其打扰程度介于对话框和Toast之间;一般出现1到2秒会自动消失,但和toast不同的是它是可交互的,并且一定是在底部出现。

使用场景:当你删除收集箱某件任务时,可以在屏幕底部出现Snackbar,提示“任务成功删除”,并附带撤销操作,当用户点击撤销时,任务可恢复。用户不进行操作Snackbar则消失,任务删除成功。

总结

Alert:当提示信息是至关重要的,并且必须要由用户做出决定才能继续的时候,请使用Alert。非用户发起的(即系统自动发起)一般都用Alert。

Action Sheet:重要程度弱于Alert时,当需要给用户更多的功能选择时使用Action Sheet。一般用户主动发起任务时用 Action Sheet。

Toast:当提示信息只是告知用户某个事情发生了,用户不需要对这个事情做出响应的时候,使用Toast。

Snackbar:以上两者之外的任何其他场景,Snackbar可能会是你最好的选择。

发表评论