iOS和Android规范解析——确认弹框、全屏弹框和模态视图

今天介绍三个控件,前两个是Material Design(简称MD,下同)规范中的确认弹框(Confirmation Dialog)和全屏弹框(Full-screen Dialog),后一个是iOS规范中的模态视图(Modal View)。下面先说MD中的两个。


今天介绍三个控件,前两个是Material Design(简称MD,下同)规范中的确认弹框(Confirmation Dialog)和全屏弹框(Full-screen Dialog),后一个是iOS规范中的模态视图(Modal View)。下面先说MD中的两个。

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

Google Material Design Guideline

确认弹框,是需要用户明确地选择一个选项的弹窗。比如设定手机铃声时,会需要你选择一个铃声,如下图:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

确认弹框示例

如果点击“取消”按钮,或者点击安卓系统的“返回”按钮,则该弹框消失,并且修改的内容不会保存;只有点击“好的(OK)”,才会保存修改的内容。因为有这个保存修改内容的功能,所以“取消”按钮就显得尤为重要:如果不加“取消”按钮,则用户会不清楚修改的内容是否被保存,比如下面这个反例:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

这个弹框只有一个“完成”按钮。这使得安卓系统的“返回”按钮的功能变得模糊:“返回”按钮是“取消”的作用呢?还是“确认”修改的意思呢?

另外有一点需要格外注意:在确认弹框里,不要设计会弹出简易弹框或者简易菜单的按钮,因为这会增加它的复杂度。如果一定需要使用这些弹框,则请考虑使用全屏弹框(下面会介绍到)。

确认弹框的形式,除了刚刚提到的设定铃声的列表,还可以有很多样式:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

所有的确认弹框都share一个共同点:弹框里只专注选择一个值。比如上图左侧的日期选择器,只选择日期,而不是既选择日期又选择时间。

上面是MD中对确认弹框的介绍。下面说说全屏弹框。

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

全屏弹框示例

全屏弹框承载了一组任务,这些任务在用户点击“保存”或者“取消”之前,都不会独自生效(对,就是捆绑式销售的意思 )。在全屏弹框里,各种弹框都可以弹弹弹。全屏弹框是所有弹框中,唯一允许弹框上面有弹框的情况;一般情况下,除非是警告框,否则所有弹框都不能在别的弹框之上出现。

至于何时使用全屏弹框,有以下几个判断标准:

  • 所需弹框包含需要输型入操作的入口,比如输入框,或者日期选择期;
  • 改动不是实时保存的,而是点击“保存”按钮之后一起打包保存;
  • 应用里没有实时保存草稿的功能;
  • 当需要进行一系列操作或设置,然后再提交它们时(其实和第二条比较相似)。

关于全屏弹框,有一个需要注意的点:顶部操作栏。顶部的操作栏,左上角一定要放置表达“取消”含义的按钮,而不是“返回”;右上角一定要放置表达“保存”的意思,而不是“关闭”。

先说左上角,下面的例子很好地说明了原因 :

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

既然用户的操作不是立马生效,所以当点击左上角的“X”号,如果用户已经进行了一些操作,则应该弹出警告框提示用户:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

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

全屏弹框右上角表达“保存”含义的按钮,可根据场景选择不同的文案,但最好使用动词,比如“保存,发送,分享,更新,创建”等。不要使用模糊的词汇,像“完成”、“好的”(在确认弹框可以用,全屏弹框不能用)、“关闭”。下面是个反例:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

右上角的“关闭”按钮对操作的结果表意模糊

关于全屏弹框的标题,MD也给出了建议:标题要简短。如果想要使用随使用场景变化而变化的文案作为标题(例如创建活动时“活动的名称”作为标题),那么如果不断变化的文案会出现长度很长的情况,则考虑把变化的文案放在全屏弹框的内容部分,比如下面这个例子:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

左边的例子,把很长的文案“车辆责任保险”,移到了内容部分。PS:没想到MD规范中竟然出现了德语!之前在德国待了三年,竟然在这用上了德语!

左边是正确的例子,标题使用的是“新的预约”;而右边是错误的情况,因为标题使用的是“车辆责任保险”,是具体一个预约的名称,这个名称会随着不同预约而改变。在这个例子中,名称长度太长,因此放在下面内容区域更为妥当。

以上是MD中关于全屏弹框的内容。

iOS Human Interface Guideline

在iOS中,苹果使用“模态视图”来指那些在当前页插入的“浮层页面”。模态视图有下面几种形式:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

模式视图的几种形式

模态视图的典型案例,是iOS中日历应用中右上角的“+”号:“创建新事件”。点击后,从下向上出现如下页面:

iOS和Android规范解析——确认弹框、全屏弹框和模态视图

一般来说,模态视图包括一个“完成”按钮和“取消”按钮,但也不是100%一定。

关于模态视图,iOS规范中说有以下几点需要注意:

  1. 提供明显且安全的出口。保证用户明白他们在模态视图中的操作引起的结果是什么。
  2. 让你的模态视图中的任务简单、简短、聚焦。如果要在模态视图中创建带有多层级关系的任务,一定要慎重!因为用户很容易忘记它们操作的来龙去脉。
  3. 为你的任务在模态视图中展示一个标题。可以在标题栏的地方,也可以在别的地方。总之,可以清楚描述任务就好。
  4. 只在展示很重要的提示信息时,才考虑使用警告框。最理想的情况是,警告框可以让用户采取行动。警告框比较打扰用户,所以有必要让用户觉得这种打扰是值得的。

以上是iOS设计规范中对模态视图的解释。其实,“模态”是个挺有趣儿的概念。下次的文章会跟大家来介绍一下(先卖个关子,嘻嘻嘻嘻)。

小结

总结一下,今天的文章,对比了MD中的确认弹框(提供选择单一值的弹框)和全屏弹框(可让用户完成一组任务,弹框上面可以出现别的弹框),以及iOS中的模态视图(让用户完成有聚焦的任务,或者提供一些列选项,比如全屏播放器中从侧边展开的操作栏)。

欢迎留言讨论。讨论会让我们更清楚这些控件。

相关阅读

iOS和Android规范解析——提示框(Toast)对比

iOS和Android规范解析——警告框(Alerts)对比

iOS和Android规范解析——底部浮层(上)

iOS和Android规范解析——底部浮层(下)

iOS和Android规范解析——简易菜单、简易对话框和弹出框

#专栏作家#

新设计青年,微信公众号:新设计青年。人人都是产品经理专栏作家,爱奇艺高级交互设计师。德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。

本文由 @新设计青年 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22256/

(0)
CatherineCatherine
上一篇 2017-05-01 02:17
下一篇 2017-05-01 04:12

相关推荐

  • 饿了么 UED 又搞事情啦!

    近日,据保洁阿姨匿名举报,在上海饿了么总部的榴莲酥会议室内,有人在工作时间聚众搞事情……据说场面隆重,气氛活跃,不堪入目。本台记者 @孟小雨 迅速赶往了现场。-----据调查,这次始作俑者是作为宇宙霹雳无敌超级吃货公司饿了么中最有逼格+设计感的团队—— UED 部门。在这个辞旧迎新、恭喜发财、还不放假的时刻,该部门秘密召开了第一届 UED 年度颁奖典礼!记者被大会的美食吸引,潜入该组织内部,随即被惊呆了。说到颁奖会,你以为是这样的?领导...

    2018-02-25
  • 在网页设计中,图片常用的五点技巧

    图片在网页中所扮演的角色越来越重要。作为最常见也是最早使用的网页多媒体,图片对于网页设计师而言至关重要。如何用好图片已经成为了一项成熟、完善而又讲究的技巧,而在高清屏幕无处不在的今天,稍有瑕疵的图片都在高密度的像素下无所遁形,而不合理的图片设计也不会逃过访客的双眼。很简单,色彩会让观看者分心。

    2017-05-07
  • 打造具有奖励性的产品体验

    C7210 发表 在设计开发产品的过程中,我们都知道,无论最终产品的功能有多棒,界面多漂亮,算法多智能,我们仍然需要给用户一个理由去下载并打开应用,至少一次。市场、媒体、社会化渠道,这些方面的努力也许可以促…

    2014-09-05
  • 用户体验在人工智能下的改变

    用户体验在人工智能下的改变安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以安全性是产品以及用户体验的基础。效率1.实时性随着计算能力和算法的提升,计算机可以做到实时反馈结果。在以往的重要直播上,视频会显示实时字幕,这是通过给原有直播信号增加5-10分钟的延时,速记员在这短暂的时间内快速整理并输出字幕,但这需要消耗多名速记员的大量体力和脑力。在人工...

    2018-03-24
  • 从公共厕所与交互-有趣的现象

    前言 有一次在等厕所时,我发现了一个有趣的现象,人们通常在选择独立间的时候会短暂停顿一下。但如果去询问当事人选择的时候的停顿是在思考什么,当事人往往也不知道自己在想什么。鉴于求知的欲望,我们实验室做了一个有趣的实验。

    2014-12-30
  • 空状态的设计值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。“用户会尝试多个同类app,然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app,一旦用户决定保留超过7天,那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候,人们放弃一款产品的原因其实都是我们可控的,例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

    2017-06-05
  • SEO营销之浅谈用户体验

    好的产品不是做出来的,而是改出来的。任何一个产品都不可能一招致胜,都需要不断的打磨,改进,尝试过失败之后,才能更为光彩的进入用户的视野。在这个反复修改的过程中,大家提到最多的词恐怕就是“用户体验”了,没有之一。今天,山哥就来跟大家交流一下我对“用户体验”的理解,希望各位看官手下留情。什么是用户体验标准定义:人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应。通俗讲法:这个东西好不好用,用起来方不方便。总的来说,用户体验是用户...

    2018-03-23
  • 讯飞输入法 Smartisan 定制版功能交互一览

    #交互学堂# #讯飞输入法# #smartisanOS# 基于 Smartisan OS 的设计语言深度定制了讯飞输入法,界面简洁优雅,还能保留讯飞输入法用户的使用习惯, 识别准确率高达 97% 的讯飞语音,让输入更高效 点击下载   讯飞输入…

    2016-10-31
  • 在人们习以为常并且不再奢望能有所改进的地方,敏锐而又勤于思考的产品经理们还能做些什么?

    锤子新品发布会上,一句“在人们习以为常并且不再奢望能有所改进的地方,敏锐而又勤于思考的产品经理们还能做些什么?”的话,带来了一个疑问,就是怎么在艰难的情况下进行颠覆性创新! 新增: 1.内置网络免费电话功…

    交互设计 2015-08-26
  • 帮助视觉设计师高效工作的三大招

    互联网视觉设计师如何在职业上精深一直是我在思考的,遇到过许多视觉设计师想转行去做交互或者项目经理,找不到视觉设计师的价值和专深入点。我也在思考与探索中,下文是我现在想到的一些点,也欢迎同道中人一同探讨,互相启发。

    2017-05-05