模态与非模态弹窗有有什么优势与劣势?

2020-06-01 22:30发布

2条回答
小土堆儿
2楼 · 2020-06-02 09:44

一.弹窗的定义

弹窗是最常用的组件,通常用来承载业务操作集合,弹窗大致分为两种模态弹窗非模态弹窗两种。


模态弹窗模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其它操作;

非模态弹窗:不会影响用户的操作,用户可以不对其进行回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。

二者的区别在于需不需要用户对其回应。


二.弹窗的分类

Alerts/Dialog:警告框与对话框

含义:英文意为警告、对话,跟弹窗属性非常吻合,就是紧急状况,打扰用户的行为。

剖析:iOS中警告框称之为Alerts,作用是用来传达重要信息,并伴随着需要用户进行操作。

iOS规范中,警告框包含的元素如下:标题(必选)、描述信息(可选)、输入框(可选)、按钮(必选)

必须包含标题、包含一个或多个按钮。

Android规范中,弹窗交互按钮需结合实际情况,不用“是/否”原则进行设计。

作用:告知用户当前发生的状况,让用户主动选择回应。

适用:重要性较高的操作时,如退出、删除、清空等


Actionbar(Sheets、Acitivity View):操作栏、操作列表、活动视图

含义:英译为工具栏、操作栏

剖析:当用户激发一个操作的时候,出现此窗口。

一般会给用户提供更多的功能选择,一般可采用官方控件。

一般都设计有一个默认的“取消”按钮,点击取消可以关闭弹窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用户触发、包含两个或以上的按钮。

作用:操作列表提供一系列在当前情景下可以完成当前任务的操作,而这样的形式不会永久占用页面UI的空间。

适用:如分享功能


Popover/Popup:浮出框/浮层弹窗

含义:英意为弹出窗口,浮动于顶层窗口,气泡

剖析:当用户点击某个控件或者某个区域时浮出的半透明或者不透明的弹窗窗口。

不会对用户所在位置进行跳转。

作用:可以在当前页面进行更多的操作行为,显示/隐藏页面中的折叠信息。

适用:首页位置呈现一些常用操作的快捷入口。



Toast/HUD:提示框(iOS没有Toast,只有HUD)

含义:Toast也被称为吐司提示,Toast是安卓系统的一个控件名词,现也应用于iOS系统中。

剖析:提示框属于一种轻量级的弹窗反馈形式,常以小弹框的形式出现,持续1-2秒自动消失,可以出现在屏幕任意位置,但是建议同一款产品尽量使用相同位置,让用户产生统一认知,成为习惯。

提示信息能给予用户及时反馈,确保用户知晓自己所处的状态,并可以做出相应的措施。

iOS用户更习惯于在顶部感知反馈信息,不干扰用户浏览主体内容。Toast出现在屏幕顶部不会遮挡主体内容。(如花瓣、有道云笔记)

Android正统的规范中Toast:

  • 出现在屏幕底部。

  • 只能放文字不能带图标,文字要精简不宜太长。

  • 不是模态的,可以透过Toast对其他控件进行操作。

  • 短时间后会自动消失。

  • 不能对Toast进行交互。

  • 优先适用于系统提示,不能手动操作让Toast主动消失。


Snackbar:底部弹窗

Android特有的交互形式,在Google的MD规范中,将Toast和Snackbars归为一类。有些时候也有应用在iOS系统中。也可以理解为加强版的Toast。

含义:英译为快餐、小吃。

剖析:Snackbars与toast一样是从屏幕底部向上出现,但是Snackbar不同的是可以经过用户进行其他操作而消失。

适用:较多适用于撤销操作。


有点好奇
3楼 · 2021-02-25 15:06

模态弹框和非模态弹框最大的区别就是是否强制用户交互。模态弹框会打断用户的当前操作流程,用户不在弹框上操作的话,其余功能都使用不了。

从这方面,我们可以看出来模态弹框的优缺点都十分的明显。

  • 优点:可以很好的获取用户的视觉焦点

  • 缺点:打断了用户的当前操作流程

与模态弹框相比,非模态弹框最大的区别是不强制用户交互,也不会弹出半透明背景层,非模态弹框停留一段时间后会自己消失。所以相对于模态弹框来说,非模态弹框属于轻量型反馈,不会对用户造成太大的干扰。常见的非模态弹框有Toast(hud)和snackbar。

Toast主要用于用户完成操作以后,告诉用户操作结果或者状态的变更。Toast其实是属于Android的组件,iOS里有一个相类似的是hud,最常见的就是音量调节提示。但是现在iOS和Android的界限不断被打破,toast现在也被广泛应用于iOS界面设计中。如果我们去看Android给的设计规范,会发现Toast有以下几个特点:

  • 只出现在屏幕底部

  • 只能放文字

  • 非模态弹框




相关问题推荐

  • 回答 195

    你好:关于需要学习几个月能找工作,我的理解和建议如下:1. 首先要确认自身是否有相关的专业积累?因为UI只是设计者手中的工具,它是内在设计思想有效的表达途径。学习软件很容易,但只是掌握工具的运用是远远不够的。2. 如果有相关专业的知识积累,那么工具...

  • 回答 166

    哈哈哈哈  看你是想成多少资产的富婆喽能担起富婆这个称号起码要过百吧UI设计的平均工资是挺高的月入过万不是梦但是在现在这个高消费的社会环境下光靠这个还不够毕竟你一年不吃不喝才12万你可以做UI多赞些钱,然后再做副业...

  • UE和UI是一样的吗2020-11-23 15:33
    回答 98

    UI是英文User Interface的缩写。翻译成中文就是:用户界面,也称人机界面。是指用户和某些系统进行交互方法的集合,这些系统不单单指电脑程序,还包括某种特定的机器,设备,复杂的工具等。UE是英文User Experience的缩写,翻译成中文就是用户体验。是指用户...

  • 回答 8

    不麻烦 首先把这个部分解组 快捷键是 CTRL+SHIFT+G 然后点这个区域 如果点到不需要的元素 就CTRL+3 锁定隐藏,然后再继续点 点到只剩下需要的元素, 把元素弄出来 然后 CTRL+SHIFT+3 显示锁定隐藏,把没用元素删除就可以了。 如果直接点到了需要的元素 同样CT...

  • UI要学多久2020-08-10 19:00
    回答 95
    已采纳

    学会到就业的程度 一般时间为4个月左右,120天时间。 这里说的4个月时间,并不是所有人都是4个月可以学会的, 和学习方法,学习用心程度,学习时间都有关。 如果用错误的学习方法,学4个月是不可能学会的。...

  • 回答 86
    已采纳

    对于UI设计来说,更加看重的是个人的设计能力和理念,以及操作能力,和男女的性别没有太大的关系。

  • 回答 76
    已采纳

    靠谱肯定都靠谱的,就看你自己的兴趣爱好,发展前景都很好,大前端是一种网站搭建,小程序开发等用户端口开发的技术,UI设计就是纯纯的设计师岗位,将设计思维和理念融入到产品运营的每一个交互环节中...

  • 什么叫交互性?2020-04-23 11:40
    回答 6

    其实生活中也有交互性,比如两个人之间的聊天沟通,带有双方的互动都叫做交互。互联网中的交互更多体现在任何互联网设备之间的使用和反馈。

  • 回答 2

    1、初步调查  前期调研对于LOGO设计非常重要。具体周期看项目规模和预算。免费提供logo设计建议和各行业logo设计参考案例。一般情况下,这个时间大约是3天,我们会详细了解企业,对竞争对手的企业logo进行调查分析,这样可以更准确的控制方向,避免logo设计...

  • 回答 1

       永远不要忘记调研  好的设计总是从调研开始。品牌创建需要你预先考虑到所有的细节。  创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。  此外,你的解...

  • 回答 1

     一、具象表现形式:  具象表现是忠实于客观物象的自然形态,对客观物象采用经过高度概括与提炼的具象图形进行设计的一种表现形式。它具有鲜明的形象特征,是对现实对象的浓缩与精炼、概括与简化,突出和夸张其本质因素。标志设计的形态不可能像绘画的形式...

  • 回答 1

    1.设计应在详尽明了设计对象的使用目的、适用范畴及有关法规等有关情况和深刻领会其功能性要求的前提下进行。2.设计须充分考虑其实现的可行性,针对其应用形式、材料和制作条件采取相应的设计手段。同时还要顾及应用于其它视觉传播方式(如印刷、广告、映像...

  • 回答 1

    Looka Smashinglogo Freelogodesign Hatchful 

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

  • 回答 1

      Naldzgraphics这个网站据说是个人创办的网站,上面所有的内容都是站主本人在日常中通过手机整理上传的。不过就算如此,网站还是收集了大量的平面设计素材。  Brandsof theWorld是世界知名LOGO资源库网站。上面收录了海量的世界知名Logo图标,而且还提供EP...

  • 回答 1

    1、沟通收集信息  在标志设计开始之前,充分与委托方沟通交流,了解委托方对于标志设计的要求。通过与委托方的沟通,尽可能收集诸如企业文化、企业面向的用户群体、企业类型等;在与委托方的沟通交流中,我们可以得知需要通过设计解决委托方的那些需求。为...

没有解决我的问题,去提问