威龙发艺发型设计价格联盟

UI设计之弹窗的那些事

上元职业资格2021-09-14 15:12:19


前言


弹窗又称为对话框,是App与用户进行交互的常见方式之一。不过对于设计师而言弹窗样式的来源基本都是由原型提供的,所以实际上我们对于不同场景下运用什么样的弹窗都处于一知半解状态,下面我就来总结下常用弹窗的使用场景及对应的弹窗样式。


模态情景


再说弹窗之前我们需要先了解一个概念,这是iOS规范中对模态情景的定义:模态是一个承载某些连贯操作或内容的优缺点并存的模式。它可以给用户提供一种不脱离主任务的方式去完成一个任务或者获得信息,但是也会临时性的阻止用户对应用的其他部分进行交互操作。当我们了解了模态情景的基本概念后才能更好的理解下面要说的两类常见基本弹窗~模态弹窗非模态弹窗


最常见的两类弹窗


1、模态弹窗:用户必须做出回应,否则无法进行其他操作。

模态弹窗通常需要引起用户的关注,所以出现时常有透明遮罩相随,使弹窗内容更加突出,并且用户必须做出回应才可以进行其他操作。

2、非模态弹窗:用户即使不做出回应,也可以进行其他操作。

非模态弹窗只是通知用户显示的内容,所以通常会有时间限制,出现一段时间后便会自动消失,而且不影响用户进行其他的操作。


PS:另外补充一点无论模态还是非模态弹窗的出现都是位于当前页面的最顶端。


常见的弹窗样式


现在随着App的日益发展,弹窗的样式也边的多种多样,而最常见的便是以下几种:

模态弹窗:

Popover-浮出层、Dialog-对话弹窗、Actionbar-功能弹窗

非模态弹窗:

Tips-提示条、Toast-提示弹窗、Snackbar-提示对话弹窗


模态情景

1.Popover-浮出层

Popover通常是由用户点击控件后或者界面某区域浮出的半透明的临时视图。具有很强的指向型。


场景:一般是对内容分类较多,或者导航栏操作入口较多的一种较自然的处理方式。


2.Dialog-对话弹窗

Dialog 最典型的应用场景是提示用户去做一个些被安排好的决定 ,而这些决定可能是当前任务的一部分或者是前至条件。 Dialog 可以用于告知用户具体的问题以便他们作用重要的决定(起到一个确认作用),或者是用于解释 接下来的动作的重要性及后果 (起到一个警示作用)。在操作完成后应该以Dialog的弹窗形式告知用户,让用户对其选择再次确认。一般情况下Dialog弹窗会出现在屏幕的中间位置,可见其重要性。


场景:常见的Dialog是有标题、内容、按钮组成的,所以Dialog的使用一般是在按钮一到两个时为最佳选择。因为过多的选择会使用户产生焦虑感,还有一些Dialog弹窗是可编辑的,减少了跳转页的过程。不过若是弹窗内的编辑过多,还是需要跳转到新页面。


3.Actionbar-功能弹窗

Actionbar可以说是对话弹窗的一个加强版,比Dialog具有更多的选择功能,常出现得位置为屏幕的下方,而且会有一个默认的“取消”按钮。


场景:使用在多功能且单一的选项,为什么同时要强调单一的,是因为如果一个功能弹窗上内容过多,例如可以对用户会形成操作负担,还是和对话弹窗一样,建议选择变为跳转到新页面更佳。



非模态弹窗

1.Tips-提示条

提示条通常出现在屏幕顶部,他的特殊性是与当前界面为同一个层级,镶嵌到页面中的。同时提示条有可操作和不可操作两种,很多时候它的出现不是因用户操作而产生的,而是初始就存在在页面中的。


场景:Tips和Toast的使用法有些类似,区别在于Tips的出现通常会有和主色调相衬的背景色。便于用户更好地发现。


2.Toast-提示弹窗

Toast通常出现在顶部和中部,浮于页面上方,无法对其操作,出现一段时间后便会消失,并且在此期间不影响其他正常操作。


场景:Toast弹窗的出现是为了给用户提供操作上的反馈,同时也是对当前状态发生改变的反馈。通常Toast弹窗出现的时间很短,所以在Toast弹窗上不适合放重要信息和过多的文字。


3.Snackbar-提示对话框

Snackbar出自于安卓系统,是安卓系统的特色弹窗之一。它是由一段信息和一个按钮组成,Snackbar是Toast和Dialong的完美结合,它也会伴随着时间的限制消失,同时与它交互之后也会消失。


场景:通常出现在界面的最下方,常出现在安卓系统上,iOS上使用Snackbar的还真是比较少,具体原因还真是没想出来,因为我觉得还挺好用的。


总结

其实除了以上这些弹窗的形式多种多样,我们需要对弹窗有着深刻的理解,在能在页面上进行合理的运用。不恰当的使用会对产品用户体验产生破坏。

对UI设计感兴趣的可以找他↓

                                                                                                      转载自UI设计达人


友情链接