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

相关推荐

  • 一道交互设计笔试题的思考

    又到了一年两度的招聘季时节,这个时间肯定有一大堆人都在海投面试。恰好最近又做了一份笔试题,顺便就来聊一聊交互设计笔试题要怎么做吧。 我碰到过的交互设计笔试题有两种,一种就是两三个小时内给你三四道题,然…

    2016-04-13
  • 还原产品的基础属性问题——用户体验

    您真正的了解用户吗?找项目的时候是不是会遇到各种各样的坑?你“以为”和“现实”中究竟有什么区别?我们会不会就是所谓的自嗨型创业者?如何解决以及避免?今天我们即将揭晓!三人行茶学空间打造和谐空间,共享茶文化平台,精准交友,合作共赢。本周日特别邀请我们的会员嘉宾进行主题分享,一起共同成长!本周分享嘉宾:刘岱伦岱伦总2008年创办第一家o2o项目——洗车。到家!2013 年曾创下淘宝细分类目自然搜索排名第一!2015年自主研发无线充电车载净化...

    2018-04-19
  • 交互设计面试官想了解什么,你知道吗?

    丝路视觉新朋友可点击上方蓝字关注年后又是一波跳槽季,对于即将走出校园的小伙伴来说,春招也马上要开始了。今天推荐的这篇文章包含了校招过程中的所有技巧和秘籍,绝对良心面经。已有一些工作经历、现在想跳槽的朋友们也可以参考一下,不仅可以为准备的面试答案查缺补漏,也可以给心中留一个底。与面试官进行的交谈,每一句话都会影响面试官对你的判断,因此每次讲话都力求向面试官证明你是合适的人选,如果他无法从你身上获取到有效信息,自然会将你淘汰。然而很多同学在...

    2018-02-03
  • 和几位牛逼的设计师聊了聊“理想雇主”这件事,还有些别的故事...

    互联网领域的设计师们更像是一群“走钢丝的人”:游走在逻辑和审美之间,游走在说服和被说服之间,游走在PM、开发和大BOSS之间,试图最终达到各方的平衡和实现最有效的解决方案。

    2016-06-20
  • 未来所有的产品都要围绕人性去思考

    过去的记忆 回顾计算机和互联网的发展,计算机的编程语言从C语言开始,到C++,到最近的go语言,不断地进化,趋势是Code越来越接近人的方面,Code是从计算机端向人端的进化,计算机的编程语言也诠释了科技的发展,以…

    交互设计 2014-12-17
  • 网站设计:单页还是多页好?别争了,看这里

    当你的设计是为了追随时尚潮流,而不是为了满足用户的目标为目的,那你的设计就出现问题了。接下来,我们分析下单页面和多页面网页的UI设计,以便于做出更好的设计选择。

    2017-05-03
  • Axure RP入门第六篇——加载地图

    产品经理入门:Axure RP入门第六篇——加载地图http://api.map.baidu.com/lbsapi/creatmap/index.html

    2018-03-21
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 双十一电商大战文案大比拼 看看谁家最吸睛

    双“十一”从一个略带悲情色彩的“光棍节”,已经被各大电商玩成了不折不扣的购物狂欢节。活动、文案,一道看看谁家最吸睛。。。 天猫 阿里的公关,可真不是吹的,一纸“禁令”让各大电商网站乱了阵脚。然后慢悠悠地玩起…

    2014-11-07
  • 交互设计的门类 & 英国综合类院校及艺术院校在如何定义交互设计?

    艺麸大大带你了解英国交互类TOP院校要知道你离名校并不遥远别走神,好好看完哦~随着科技日新月异的发展,让交互设计一时成了“网红专业”,很多学平面设计或视觉传达的童鞋们纷纷转专业到交互设计大本营。然而各大顶尖院校对于交互设计的专业命名也是“五花八门”,如,服务设计、交互设计、用户体验设计等。交互本来就是一个艺术与科技的完美结合,国内很多院校都不能将其做的很突出和优秀,这就导致了出国学习交互设计成为许多人的想法。那么你有多了解交互设计呢?我...

    2018-04-19