弹框使用规范
言简意赅的阐述交互设计中常见的5类弹框,及使用方法
弹框是什么,以下是百度百科的解释
百度的解释也不尽完美,那么我们在实际的项目中,该如何的完美运用弹出框呢?
谈问题之前我们先了解我们在UI设计中常见的弹框有哪些:
对话框 (Dialog/Alter)
控制面板(Actionbar/Actionsheet)
浮层 (Popover/Popup)
小提示(Toast)
快捷提示(Snackbar)
了解这些具体弹框的概念之前,我们需要提两个晦涩的词汇,因为我们可以将以上五种弹框划分为两类
模态弹框
模态弹框最大的特点就是强制用户交互。模态弹框会打断用户的当前操作流程,用户不在弹框上操作的话,其余功能都使用不了。从这方面,我们可以看出来模态弹框的优缺点都十分的明显:优点是可以很好的获取的用户的视觉焦点,缺点是打断了用户的当前操作流程。常见的模态弹框种类有:对话框、控制面板、浮层
非模态弹框
与模态弹框相比,非模态弹框最大的区别是不强制用户交互,也不会弹出半透明背景层,非模态弹框停留一段时间后会自己消失。所以相对于模态弹框来说,非模态弹框属于轻量型反馈,不会对用户造成太大的干扰。常见的非模态弹框有:小提示(Toast)、快捷提示
------------------------------------------------------------------------------------------------------------------------------
模态弹框开始进行解释:对话框、控制面板、浮层
1.对话框 (Dialog/Alter)
对话框是一种模态弹窗,当用户将进行一些危险或者不可逆操作时,系统将会以 “对话框” 的形式提醒用户是否还继续操作,起到警示的作用,其阻断感强,操作不可忽略。对话框一般用于用户进行一项很重要或者有风险的操作,这时会弹出一个对话框来给用户提示信息,用户根据提示来进行判断。一般会出现在屏幕的中间位置,会对界面的主要内容造成遮挡
2.控制面板(Actionbar/Actionsheet)
控制面板是Alert的一种延伸,也是模态弹窗,用户必须进行操作,弹窗才会消失,和Alert的区别是Action Sheets拥有更多的功能按钮,其重点在操作。动作栏在我看来可以看成是对话框的一个加强版,因为无论是alert还是dialog一般都只有两个按钮。而动作栏可以提供多个功能按钮,而且展示的样式比较多变。
3.浮层 (Popover/Popup)
浮层是用户点击控件或者界面某一区域浮出的半透明的临时视图。浮层的样式跟动作栏很相似,都可以向用户展示多个功能选项。但是浮层可以出现屏幕中的任何位置,能够给用户更具有指向型的提示。
非模态弹框开始进行解释:小提示、快捷提示
4.小提示(Toast)
一般出现在页面的任何位置,显示几秒然后自动消失,其阻断感弱,一般用来显示操作结果
主要作用是用于用户完成操作以后,告诉用户操作结果或者状态的变更。
注: toast是可以出现在屏幕中任何位置的,最常见的就是音量调节提示
优点:不会打断用户当前的操作流程,属于轻量型的反馈方式。
缺点:容易被用户忽视,而且不适合展示过多的信息,可能在用户读完之前就消失了。
为了提升信息的可读性和增加样式美感,现在toast都会采用文字加icon的组合样式。
延展:Toast的位置在界面顶部、居中、底部 ?
从常规来看,安卓端一般在界面底部;iOS端在界面的中部,但并不是所有产品都遵循这一原则。
有的产品也将Toast放在顶部,同时iOS中也有部分APP放在底部。那么具体什么位置好一点呢?同样我们可以根据位置的强弱进行分析。
用户的视觉焦点往往为中间部,所以最吸引用户的注意,当然对用户的干扰也比较大,因此重要的弹窗信息放在此处,比如对话框、二次确认等。
上下两个部分的权重相当(上部略大于下部),对用户的吸引和干扰都小于中间,因此我们可以把通知、不太重要的操作放在这两个位置。
5.快捷提示(Snackbar)
谷歌提供的一种兼容提示与操作的消息控件。其和Toast类似,定义为:在不操作的情况下几秒后自动消失,同时向下滑动也可忽略消息。
虽然snackbar属于非模态弹框,但是它也有模态弹框的一些特点。例如有按钮来供用户交互;此外一般会出现在界面下方,这点又和控制面板很像。
总结:非模态弹框偏重信息提示,模态弹框既可以信息提示也可以供用户交互;toast是轻量型的弹框类型,snackbar集众家之所长。
知识延展:
多态按钮
此外多态按钮的使用也可以帮助我们解放弹框的压力。例如,支付宝的支付界面,立即支付按钮可以跳转到付款成功的状态,这时候就没有必要再用弹框给用户提示了。
关于弹框方面的知识大概就这么多,如果感觉对你有用,就赏个赞吧!

