APP弹窗浅析

用户头像
上海/产品设计师/8年前/5429浏览
APP弹窗浅析
用户头像
Fayth

只有熟悉它们各自的特性,才能更加轻松正确地去使用。

作为一个交互设计师,每个项目都会接触到各种各样,大大小小的弹窗。看起来可能并不难,但是也有不少人对于弹窗的分类和使用场景不是很清晰。所以这次我整理了一下关于弹窗的应用,也希望以后能养成定期总结的习惯。 



弹窗的作用

弹窗可告知用户信息内容,也可让用户与之进行交互。可减少用户在流程中的跳出感。 


下图是我整理的大纲,一般将弹窗分为模态和非模态两种类型。 

5be4599e9302a80121ad7bbce30e.jpg


模态弹窗

会打断用户的操作行为,强制用户必须进行操作,否则不可以进行其他操作。(除了告诉用户信息内容外还需要用户进行功能操作)


非模态弹窗

不会影响用户操作,用户可以不与回应,通常有时间限制,出现一段时间就会自动消失。(一般被设计成用来告诉用户信息内容) 


1.模态弹窗


选择类弹窗

这类模态需要你做出决定才能继续进行主流任务。它可以是一个警告、可以是让你明确你想要执行什么操作的对话框或者明确要选择的模式。

目的:快速使用


1.1动作菜单( Actionbar、Action Sheets、AcitivityView)


Action Sheet通常是由底部弹出,这类弹窗需要用户进行有效操作或是点击空白处消除弹窗,才能进行其他操作。

7461599f904ba8012017945c7b16.jpg8ec2599fd0faa8012028a94c6d48.jpg


使用场景:

  • 呈现与当前情景相关的两个或多个选项

  • 确认是否执行某个可能具有破坏性的操作


注意事项:

  • 选项较少可使用列表模式;宫格模式适用于选项非常多的情况,并且能以图标形式展现选项

  • 出现可能产生潜在风险的行为时,应当弹出Action Sheet,并将危险操作用红色标注

  • Action Sheet是可以连续弹出的

  • 在页面有多个唤起对象或选项本身不够明晰的情况下,提供清晰准确的描述是非常有必要的


7b80599fd12fa8012028a92fbca2.jpg



1.2 警告框与对话框( Alert/Dialog )


Dialog通常出现在页面中间,需用用户进行有效操作,否则不能进行其他操作。 


65f2599fd15ea8012028a98e4c09.jpg


使用场景:

  • 需要向用户提问或得到许可

  • 简单的交互行为,例如编辑文字等

  • 一些重要信息的展示


注意事项:

  • 通常会带一个取消/关闭的按钮,点击可关闭弹窗(点击空白区域不可关闭)

  • 如果弹窗中包含输入框,呼起键盘时,弹窗位置往上移(键盘不遮罩输入框为准)



1.3 浮层弹窗( Popover/Popup)


浮层弹窗通常出现在点击区域附近,需要用户进行有效操作或点击空白处消除弹窗后才能进行其他操作。 


e126599fd18da801211d2553e95a.jpg

使用场景:

  • 当前页面内容比较重要,又需要展示更多的类型或选择

  • 将页面模块中不常用的功能隐藏


注意事项:

  • 点击入口样式应包含“更多/可展开”的含义,例如 ^ + … 之类

  • 如果不是固定位置展开,则要考虑不同位置时展开的方向(如图3、4)



执行类弹窗

这种模态的出现就是为了完成任务。基本上它们非常适用于添加、编辑等任何复杂的任务。

其实该类弹窗没有指定的控件,实际上也可能会以一个单独页面去开发。但是在用户的使用过程中,也会感受到这是一个弹窗,所以我还是把这类弹窗和控件类的一起分析。 


1.4 全屏弹窗


全屏弹窗是最常见的模态类型,覆盖整个屏幕,一般从下往上弹出。 


ddbb599fd1d3a8012028a94c712c.jpg


使用场景:

  • 处理可能具有多个步骤的复杂任务

  • 需要用户保持全身心地关注


注意事项:

  • 主要操作(完成/保存)始终位于右上角或底部

  • 消极操作(取消)应在左上角

  • 当用户已经设置了一些选项,则点击X号时,弹出警告框提示用户将丢弃所做的更改



1.5 部分屏幕弹窗


90e9599fd1fea801211d250e8443.jpg



使用场景:

  • 处理较为复杂的任务(一般是作用于当前页面的)


注意事项:

  • 选择适当的动画

  • 添加关闭手势



2.非模态弹窗


2.1 提示框(Toast/HUD


toast一般出现在屏幕中间或顶部,无法对其操作,出现一段时间以后会自动消失,并且在此期间不影响其他操作。


ios中并没有toast这个控件,与之相似的是HUD。HUD相对于toast,可以有图标,内容时可以变的。(曾经安卓toast规范:出现在底部、仅展示文字且精简、非模态、自动消失、不可进行交互)


随着应用场景的不断丰富,toast的使用早已打破原来的规范(如4图,含图标,模态窗口并且可交互) 


7854599fd23ea8012028a98ffe39.jpg


使用场景:

  • 用户进行操作后的及时反馈

  • 用户当前所处状态的反馈,确保用户知晓自己所处的状态,并可以做出相应的措施



2.2 Snackbar


Snackbar可以理解为是加强版的Toast。


样式和规则与Toast非常相似,不同主要有两点:1.Snackbar支持主动滑动关闭。2.Snackbar可以附带一个操作(也可以不带) 


2f60599fd25fa8012028a9cfe68b.jpg


使用场景:

  • 用户完成操作后,留有“撤销”按钮给用户反悔的余地

  • 与toast相似



2.3 气泡/提示(tips)


tips有的悬浮在页面上,有的嵌入在页面里,有的可以交互,有的不能交互,有的会自动消失…通常不会影响当前正常操作。


3f4d599fd27ba8012028a94ee4c9.jpg



使用场景:

  • 主动告知用户信息(与toast相似,但toast一般是操作的之后反馈)

  • 新功能简单介绍

  • 用户行为引导



小结


   

通过分析和理解各类弹窗的使用场景、作用和规范,能对该类控件有个全局性的了解,以便在实际工作中能更好的去使用和优化。


规范是最标准的情况,场景是千变万化的,具体运用的时候还是需要根据场景来灵活应用。 




51
举报
|
138
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面设计 吊牌设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
海底世界插画
金色颗粒质地的平面
城市园林平面布局航拍
平面人物插画
空的平台平面和自然景观
古风平面仕女与瓷器
金色颗粒质地的平面
中国传统纹样创新图案设计
金色颗粒质地的平面
平面风格黄绿色系花朵装饰
平面书法字手写
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
平面男孩喝咖啡插画设计
倒计时,海报,平面
城市园林平面布局航拍
牛奶乳液层次梯田平铺平面
空的平台平面和自然景观
金色颗粒质地的平面
金色颗粒质地的平面
平面插画设计女孩喝咖啡
玄关入门地毯印花图案红地毯
城阙凡花
平面插画情侣/矢量
你可能喜欢
大家都在看
登录注册