按关键词阅读:
在工作中是否一遇到提示和反馈时,会在设计中不假思索地使用弹窗?是否能有理有据的说出为什么会用这个控件的理由?
工作场景:在设计一个列表的刷新状态的时候,你会想到用什么控件?我理所当然的使用Toast控件。
小伙伴:为什么要用这个黑乎乎的好丑啊!
我:心里冒出的第一个想法就是,刷新当然是用Toast啊!!!但是我突然说不出用这个控件的理由,就是想当然的用这个。
这个时候关于弹窗我们就需要了解在什么场景中用弹窗以及需要什么类型的弹窗,如何有理有据的使用弹窗?学习弹窗控件的正确打开方式。
我们为什么用弹窗?弹窗的定义、分类?
弹窗在APP中的表现形式?
弹窗有什么优点吗?
一、我们为什么用弹窗?弹窗的分类有哪些?
弹窗是用户在系统中进行操作时系统给予的回应。目的是遵循用户心里预期,告知用户当前状况,给予用户有效反馈。如引导用户如何操作、提示用户在操作后会发生什么。
弹窗的分类根据iOS和MD规范,可以将弹窗分为模态弹窗和非模态弹窗。在一般情况下,非模态弹窗用来告诉用户信息内容;模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。
很多人不了解弹窗的具体分类和使用方法,接下来我们需要了解的弹窗控件分类:
1、模态弹窗:警告/对话弹窗 iOS_Alert&MD_Dialog
文章插图
功能:iOS_Alert&MD_Dialog用来传达重要信息,告知用户当前发生的状况,通常情况下伴随着需要用户进行操作。
场景:一般用于承载非常重要的附加操作或警示信息,如退出、删除、清空。
设计规范:对控件设计组成进行拆解。在IOS规范中,警告框包含的元素:1标题(必选)、2内容(可选)、3操作按钮(必选)。
文章插图
除了系统控件外,我将这些运营、升级、活动弹窗都归类为对话弹窗,一般以好看的元素搭配吸引用户点击。此类弹窗需要特别注意需要保留关闭按钮,不可隐藏。
文章插图
2、模态弹窗:操作列表 iOS_Aciton Sheet
文章插图
功能:是一个响应控件,一般在用户执行操作出现此窗口,提供更多的功能选择来完成当前任务的操作。
场景:一般包含两个及以上的按钮,用于操作项多于三个的操作。与Alert最大的区别就是位置:Alert 出现在屏幕中心,但 Action Sheet 由屏幕底部向上滑出。
设计规范:用户进行危险性操作的按钮(如删除),应该使用红色高亮显示,并置于顶端。取消按钮始终在底端显示。避免滚动操作,若需要滑动操作,建议选择使用Activity Views控件。
在实际的应用中是否有按照规范应该使用 Alert控件,但是用了Action Sheet控件的呢?有的,例如相册删除和微信退出登录。
文章插图
在相册删除照片时,我点击右下角的删除按钮,弹出 Action Sheet控件,前面规范说了, Action Sheet一般用于多于3个操作项的情况。为什么删除不用Alert?我想是因为手指的操作热区,这样的移动路径和花费的时间更短、更便于操作。所以在设计过程中,要结合情况来考虑,做更符合用户操作习惯的设计。
3、模态弹窗:活动视图 iOS_Aciton View
文章插图
功能:用来解决Action Sheet 的滚动问题。
场景:多用于分享场景,如隔空投送、想分享到第三方APP时。
设计规范:支持横向滑动,在控件中选项为矩形块,现在也有了上面是矩形块下面是列表的形式。
APP中有用到的Activity Views弹窗模式的样式:
文章插图
4、模态弹窗:浮出框 iOS_Popover&MD_Menu
文章插图
功能:可以在当前页面中进行更多的操作行为,显示/隐藏页面中的折叠信息。
场景:首页位置呈现一些常用操作的快捷入口,浮动于顶部窗口、气泡,当用户点击某个控件或者某个区域时浮出的半透明或不透明的弹窗窗口
【 模态弹窗|弹窗究竟怎么设计才能不被骂?】设计规范:Popover 通常是由一个指向其出现位置的三角箭头和弹出窗口组成。Menus 和 Popover 的区别只是没有三角指向。
稿源:(ZAKER汽车)
【傻大方】网址:http://www.shadafang.com/c/111J2P052020.html
标题:模态弹窗|弹窗究竟怎么设计才能不被骂?