设计师和产品经理在进行设计的时候,往往会更加专注于介面长什么样,介面和介面之间怎么跳转,给予用户什么样的操作反馈。但在采用何种方式给予用户反馈就没有很系统的了解了,在大部分人眼里,弹窗就是toast和dialog这两种。其实弹窗不仅仅只有这两种,那么,下面我们就来一起探索一下弹窗吧。

首先,什么是弹窗?

窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息,要求用户去做决定,或者是涉及到多个操作。弹窗越来越广泛地被应用于软件、网页、以及移动设备中,它可以在不把用户从当前页面带走的情况下,指引用户去完成一个特定的操作。(以下我们主要研究下App中的弹窗如何使用)

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

模态与非模态

我们从两个方面来解读弹窗:模态和非模态弹窗。模态弹窗主要包括Dialog、Actionbar、Popover;非模态弹窗主要包括Snackbar、Toast(HUD)、Tips。

模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其它操作行为;非模态弹窗则不会影响用户的操作,用户可以不对其进行回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。

非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户对其进行功能操作。

1.1 模态-Dialog

Dialog对话框是一种模态弹窗,需要用户对此弹框进行操作后才能继续执行其他任务。当用户进行了敏感操作,或者当App内部发生了较为严重的状态改变,这种操作和改变会带来影响性比较大的行为结果,在该结果发生前应以Dialog的弹窗形式告知用户且让用户进行功能选择。可以分为系统型Dialog和自定义型Dialog。

系统型Dialog一般情况下Dialog由标题、信息内容和功能按钮组成,只有当用户点击了某个功能按钮后弹窗才会消失,App随即执行该功能操作,进入相应的功能流程。 信息内容必须非常有必要以至于需要打断用户的操作进行信息内容阅读确认,否则请用Toast进行非模态弹窗提示

若Dialog对话框出现三个或以上的功能按钮,将会增加用户的功能选择负担,所以需要使用多个功能按钮选择的时候请考虑使用Actionbar。

警告框在iOS中称之为Alerts。iOS的Alerts(警告框)主要用来传达重要信息,并且常常需要用户来进行操作。使用Dialog(Alert)的时候需谨慎,尽量不要给用户带来糟糕的体验感

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

自定义型用的场景比较广泛,由于普通的系统弹窗无法满足运营活动的需求,则需要更有趣、更有吸引力的弹窗来吸引用户眼球。常见的有新手引导、活动引导等。自定义弹窗时,要注意聚焦,不要随意分散操作功能,以免给用户造成不必要的操作。比如摩拜单车,用户未登录的时候,扫码开锁帮助和登录按钮分散的比较远。造成用户常常忽略“立即登录”这个按钮。

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

1.2 模态-Actionbar

Actionbar一般被设计用来向用户展示多个功能按钮选择。

当功能按钮数量很多的时候,文字列表的形式不适合显示,此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

1.3 模态-浮出层(Popover)

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

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

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

2.1 非模态-Toast

Toast提示框是一种非模态弹窗,它弹出一个小信息,作为提醒或消息反馈来用,一般用来显示操作结果,或者应用状态的改变。iOS平台没有Toasts这种说法,只有HUD(透明指示层)。

Toast常用于操作反馈,给予用户提示,告知用户操作结果。由于Toast展示时间很短,通常在3秒左右,所以不适合展示过长的文字。如果文字过长,建议考虑Dialog的形式。例如你发出了一条短信,App弹出一个Toast提示你消息已发出。

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

Toast与HUD也有一定的区别

  • 1.Toasts一般出现在屏幕下方,HUD出现在屏幕中间。
  • 2.Toasts一般是灰黑或黑色半透明,HUD一般是毛玻璃半透明。
  • 3.每次产生的Toasts内容不可改变,HUD内容可以改变(比如调节音量时出现的HUD)

2.2 非模态-Snackbar

Snackbar 是一种针对操作的轻量级反馈机制,常以一个小的弹出框的形式,出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方,包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时,不会阻碍用户在屏幕上的输入,并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

2.3 非模态-Tips

Tips严格来说其实并不算弹窗,因为弹窗是浮在介面上层的单独浮层,而tips是嵌入在页面内的提示条,但由于个人觉得tips提示条也是相当重要的一个控件,而且很少看见有人将其总结到哪个归类当中,所以我决定将其分类到非阻断式弹窗的类别下,与toast弹窗并行。

UI设计中,弹窗设计规范总结
UI设计中,弹窗设计规范总结

原文地址:站酷

作者:Luyeelin