牛耳职业学院欢迎您!
您当前位置:主页 > 校园动态 > 行业新闻 >

UI设计中弹窗的分类

用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作,这即是模态弹窗。..

400-0731-162 立即咨询

快速申请预约

称       呼 :
手机号码 :
备       注:

UI设计中弹窗的分类

发布时间:2022-03-02 热度:

    一、模态弹窗
 
    用户在完成任务的过程中,界面会出现弹窗打断用户的操作行为,用户必须通过主动点击才可以进行下一步操作,这即是模态弹窗。
 
    模态弹窗通常能较好的获取用户的视觉焦点,并通过承载的内容、按钮主次层级来引导用户完成他们的需求,这也会根据用户、产品侧重点的不同,弹出样式也有所不同,常见的模态弹窗有对话框、动作栏、浮层...等。
 
    1、对话框Dialog/Alert
 
    对话框是很常见的弹窗,主要在打断用户后并提供选项操作,对用户的干扰较大,通常会配备1~3个操作按钮,而且会把用户最期待的或产品最期待用户操作的按钮突出显示。
 
    对话框类型的弹窗主要分为主动、被动两种触发类型,主动弹窗:信息的二次确认、输入内容、前置条件选择、风险警示等;被动弹窗:版本更新、运营宣传、消息通知、系统功能授权等。

 UI设计中弹窗的分类
    2、动作栏Actionbar
 
    动作栏是通过用户主动操作后弹出的内容信息,基本都是从底部弹出,屏幕占用比例根据内容量的多少比较随意,从小区域、半屏、再到全屏随处可见。
 
    动作栏相比对话框则能承载更多、更丰富的功能信息,在用户清晰感知当前操作及反馈的情况下,比跳转到新的页面更有安全感。
 
    3、浮层Popover/Popup

 
    浮层是指用户操作某个功能/内容后,会在附近出现一个带有视觉引导性质的弹窗,最常见的浮层就是下拉菜单/弹窗等,浮动于顶层窗口并指向触发操作的位置。
 
    例如很多社交娱乐类型的应用右上角有一个“+”入口,里面会放置部分常用功能。部分浮层底部没有设置不透明度的蒙层,为了与页面信息更好的区分,会给浮层容器加上投影,避免与底部信息混淆。
 
    二、非模态弹窗
 
    相比模态弹窗,非模态弹窗属较为轻量,触发后以一种非阻碍的的方式呈现,不会打断用户的当前操作,主要是给予用户即时反馈,让用户清楚应用当前的交互后状态。非模态弹窗不强制用户操作,根据反馈信息的重要程度及意愿,可在一定的时间内自动消失,也可等待用户操作后消失,常见的有以下几种:
 UI设计中弹窗的分类
    1、提示框Toast/Hud
 
    用于反馈用户操作成功、警告、错误等当前状态信息,可能出现在任何位置(底部/中间/顶部),在呈现样式上,相同等级的模块统一位置、风格即可,无需用户有任何操作,出现2s左右自动消失。
 
    Toast只有纯文字提示,例如格式错误、刷新成功、删除成功等;Hud会使用文字+图标样式,例如添加到购物车、关注成功等。
 
    2、提示对话框Snackbar
 
    Snackbar早期只是Android系统的一种弹窗控件,后在iOS、Web前端都会使用到,可以看作是toast的加强版。一般只出现在屏幕底部,存在的时间比toast长,提供0~1个操作入口,可自动消失,也可与用户产生交互后消失或者跳转至其他页面。
 
    Snackbar反馈的重要程度强于toast,例如,某个应用今天有重要提醒,同时又不想影响用户的其他操作,会在用户首次进入时弹出提醒,并提供关闭操作入口,等待用户通过手动关闭(部分自动关闭),加强用户记忆。
UI设计中弹窗的分类 
    3、通知Notice
 
    最有代表性的就是消息通知、系统推送,在设备未锁屏的情况下,通常从顶部弹出,停留几秒后自动消失,锁屏后,不同设备弹出的位置也有所不同。Notice的前提是需要在应用设置中打开消息通知开关,具备应用外推送功能的,需在设备系统设置中开启通知权限。
 
    4、透明指示层HUD
 
    HUD是一种在透明元素上通过填充、反馈用户当前交互操作的指示层,实时生效,例如视频类产品中的调整音量、亮度、控制进度条等。


免责声明:1、文章部分图片源于网络,均为示意图;2、所有文章、图片、音频视频文件等资料版权归版权所有人所有;3、因非原创文章及图片等内容无法一一和版权者联系,如原作者或编辑认为作品不宜上网供浏览,或不应无偿使用,请及时通知我们,以迅速采取适当措施,避免给双方造成不必要的经济损失;4、本页面内容如无意中侵犯了媒体或个人的知识产权,请来电告之,我们将于24小时内删除。
在线咨询
上一篇:品牌设计要遵循哪些原则?
下一篇:UI设计中弹窗的作用

相关阅读

UI设计的需求来源和落地运转
UI设计的需求来源和落地运转

大家了解我们日常的UI设计需求有几种来源吗?知道需求是如何在UED团队中流转的吗?为什么今天我会单独去阐述需求的几种来源呢?首先,了解需求几乎是我们工作开始的第一...

UI设计怎么提升用户体验
UI设计怎么提升用户体验

UI设计是随着软件行业的发展兴起的一个新的设计行业。UI设计除了对美观有要求外,还对用户体验有要求,这也是UI设计不同于其他设计的地方。那么,UI设计怎么提升用户体验...

今年流行的一些UI设计风格
今年流行的一些UI设计风格

新一年的设计趋势:今年流行的UI设计风格都有哪些呢?一起来看看吧!...

改善页面的五个UI设计小技巧
改善页面的五个UI设计小技巧

今天分享5个只要稍加注意,你的页面就能得到很大改善的实用小技巧!话不多说,立马开始!...

牛耳教育职业学院微信公众号

官方微信公众号

牛耳职业学院400-0731-162

长沙市天心区韶山南路498号

牛耳职业学院开设有初中学历班、高中学历班课程,毕业即可拿到学历证书。开设有计算机、软件开发、视觉设计、UI、电商、新媒体等专业。