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

相关推荐

  • 交互案例实战!三个按钮背后由小见大的交互思考

    @窒息红Leon :初入交互设计工作,最常见的需求就是——放按钮。放按钮看起来是超级简单的事,无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等,但殊不知其『麻雀虽小,五脏俱全』,小小的按钮设计…

    2015-09-18
  • 从Web到移动应用的设计思维转换

    标签:移动应用、移动互联网、UI、产品设计、Web应用、视觉设计 【编者按】本文作者@刘津legene 随着移动互联网的快速发展,很多Web产品经理、设计师转而投身至移动应用领域。看起来非常相关的工作,却可能给他们带…

    2014-11-26
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

    2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。

    2017-05-07
  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 浅析手机交互设计中的“拇指法则”

    你有没有遇到过一款APP让你用的很不舒服?你的拇指必须要伸得老远才能够得到菜单,或者页面里元素太多导致你经常误操作。这些都是因为交互设计师在设计的时候没有考虑拇指的感受,或者更学术化点说,没有考虑到“拇指法则”。

    2017-05-02
  • 关于Android和IOS交互上那些事

    先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

    2017-06-03
  • 带给你视觉 2015 Web 设计色彩流行趋势

    前几天分享的2015年春夏流行色人气很高,今天直接放干货,@AnyForWeb_UDC 的同学根据2015年的色彩大致趋势走向,结合相关的设计经验,作出了以下网页配色 预测分析,来看看有哪些亮点吧。

    2014-12-28
  • APP设计当中不容忽视的20个小细节

    APP设计当中不容忽视的20个小细节如下: 1、一致,一致,还是一致 你能做的最重要的事情就是保证用户界面运作的一致性。对于列表框来说,如果双击其中的项,使得某些事件发生,那么双击任何其它列表框中的项,都应…

    2015-04-14
  • 从微信WeUI设计规范 解读移动界面设计

    作者:风口上的猪毛    编辑:小露 本文已经获得作者授权发布,转载请注明出处。 写在开头,以表明动机、甩掉一切可能需要承担的责任。 目的:看到传播很热的微信WeUI,应该说是一种比较简单暴力的表现形式,但落实…

    2016-04-05