恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
APP弹窗设计的这些小知识,你都了解吗?
0.0°
2022-07-06 原创文章 经验/观点 举报 766 3 2 0

弹窗控件在设计体系中是非常细节且复杂的,因为覆盖的设计场景非常多。那在实际APP设计中需要如何去注意使用它呢?



1、弹窗作用和定义 


 

首先就从弹窗是如何发挥自己的作用开始讲解吧! 弹窗:是指当用户在页面操作后,系统会给予反馈、提示、引导用户的一种设计控件。在操作中,系统需要针对用户不同的操作场景给予合理的信息反馈,提示用户当前操作的一个结果是怎么样了,或是强制用户去做一些操作决定自己下一步是需要干嘛! 



2、弹窗分类 


其次根据是否强制用户的操作的场景,可以将弹窗分为模态弹窗和非模态弹窗两种;

2.1、模态弹窗 


强交互形式,打断用户当前操作行为,传递给用户引导信息,用户必须进行操作回应,才能进行后续流程。 模态弹窗的主要类型为:包含:Dialog/Alerts(警告框、对话框);Action Sheet(动作菜单/动作面板/行动列表)、Action View(视图菜单);Popover/Popup/Filter/Tips(气泡、弹出菜单、筛选、引导框)


Dialog/Alerts(警告框、对话框) 


这种弹窗样式在安卓系统中将它成为警示框,英文为“Dialog”,苹果系统中将它成为对话框,英文为“Alerts”,这种弹窗样式,引导用户对于重要信息的操作,强制性比较高。如下是苹果的Alerts(对话框)实例


 

 



 

 


设计注意

Alert位置置于屏幕中心,告知用户特定的任务和重要信息,并请求用户进行操作反馈。使用场合广泛,易获取用户注意力,干扰度/警示性最高。此类的设计样式需要克制,不滥用尽可能少用,Alert通常用于紧急不可逆场景的操作提示,需要用户确认该信息。标题不超过2行,描述内容不超过3行;按钮最多竖排3个,横排2个,建议使用文字按钮;一般用户最可能点击的按钮(主操作)放在右侧,取消按钮始终放在左侧。


应用场景

运营活动、版本升级、功能操作提示(确认、退出、删除、清空)、权限获取等;如下图:



 

 


Action Sheet(动作栏)、Action View(视图菜单)


Action Sheet(动作菜单/动作面板/行动列表)是当用户操作后触发的一种特定的模态弹框;呈现一组与当前情境相关的两个或多个选项。Action View是iOS 10系统规范中在Action Sheet基础上延伸的新的弹窗样式,属于iOS规范。


设计注意

Action Sheet是支持连续弹出的,例如第一个Action Sheet中选择删除,第二个Action Sheet中确认删除。此外,如果删除后的对系统或用户影响表达大,应该使用Alert。警示强度Alert>Action Sheet


应用场景

一般用于功能的延伸,提供用户更多的功能选择。如点击分享,会出现多个目标的选择。如下图


 

 



安卓对应的苹果设计样式有两种,第一个叫做Modal Bottom Sheet(模态底部菜单),因为安卓系统的自带物理返回键的特性,所以菜单栏上没有取消按钮。(图中的淘宝案例比较特殊,在原生app中增加取消按钮),所以设计经常也会在基础规范上根据业务场景去变化。第二个是Simple dialogs(简易对话框),从屏幕中央弹出,没有取消按钮,通过点击空白区域关闭。微博、android版使用了这个控件。如下为小米miui系统的页面截图:



 

 



Popover/Popup/Filter/Tips(气泡、弹出菜单、筛选、引导框)


浮层也属于弹窗的一种,主要样式可以细分为Popover/Popup/Filter/Tips(气泡、弹出菜单、筛选、引导框)等四种样式。这里通过参考了支付宝APP的控件分类。案例中新增“Filter/Tips”这两个形式。


Popover(气泡)


popover很少强制用户进行操作,是否设置遮罩取决于控件的重要属性。


应用场景

一般用于快捷功能的展开和收起。如下图:



 

 


Popup(弹出菜单)


支付宝APP规范:https://opendocs.alipay.com/mini/component-ext/popup




 

 


Filter(筛选)


应用场景

一般用于筛选区域,针对不同维度关键词进行快捷搜索。如下图:



Tips(引导框)


Tips相对于popover,用户操作强制比较高,是否设置遮罩同样取决于设计场景的重要性。


应用场景

一般多用于app启动之后的功能引导。如下图:



 

 



2.2、非模态弹窗


弱交互形式,不打断用户当前操作行为,在页面会给用户一些提示,用户可以忽略或者选择性操作。非模态弹窗的主要类型为:包含:Toast / HUD(提示框);Snackbar(底部弹窗);Topbar(顶部弹窗)


Toast / HUD(提示框)


这个控件Toast起源于Material Design,随着Toast的广泛应用,它的定义也变得越来越模糊,随着系统更多新场景的出现,控件定义也在不断变化,类似半透明具有提示型的控件设计都可定义为Toast。目前iOS系统中也有很多页面场景使用这种轻量化的Toast样式。HUD是iOS系统独有(iOS的音量调节),无法被第三方应用调用。


设计注意

Toast泛化后,它出现的位置也非常多:如在顶部、内容区上方、导航下方,页面中间。出现位置稳定,更容易引起用户注意,toast出现的时间比较短,所以提示的文字信息尽量保持通俗易懂,有助于快速理解的提示的内容。设计形式上可以是:文字、文字+图标、动效等。


应用场景

常用于加载刷新中、已完成、失败等结果提示。



 

 


Snackbar(底部弹窗)


这个控件起源于Material Design。Snackbar出现时,用户仍然可以在屏幕上操作,但控件停留时间会有限制,固定时间会自动消失;若控件中带有点击事件按钮,也可以进行其他操作:如跳转页面、上滑退出。


应用场景

多用于撤销操作和功能引导、支持用户操作主动滑动关闭。如下图



 

 


Topbar(顶部弹窗)


Topbar是根据已有的app的设计样式总结的,有点类似Snackbar,但是提示的程度比较弱,一般用于低频的功能操作引导。


应用场景

常用于系统消息的提示。如下图



 

 



总结


以上就是我和大家分享的关于弹窗的所有内容,弹窗控件在整个产品设计流程中会直接或间接的影响用户操作体验,而且随着业务场景越来越丰富,会有更多的弹窗设计样式,所以合理的把控使用就显得很重要,另外也能够帮助自己对设计有更细致的理解和思考!


Powered by Froala Editor

更新:2022-07-06

收藏

3人已收藏

Q什伍

越努力越幸运

  • 7

    作品

  • 27

    粉丝

  • 55

    关注

  • 做有价值的竞品分析,为完成项目去成就自己!
  • 设计改版立项到落地,如何推进?
  • 从“0-1”了解智慧屏交互设计!
  • 原来智慧屏项目设计是这样做的!
相关标签
UI设计弹窗

    猜你喜欢

      2022-07-06 原创文章 经验/观点 举报 766 3 2 0

      APP弹窗设计的这些小知识,你都了解吗?

      0.0°

      你确定要举报APP弹窗设计的这些小知识,你都了解吗?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年07月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录