编者按:看不懂iOS 和Android 的设计规范?爱奇艺高级交互设计师来帮你!这个系列文章会深入浅出地为你讲解两个规范中相同控件的概念和应用,加上超多实例演示,轻松看懂设计规范!
上期回顾:高手帮你学规范!iOS和Android规范解析之提示框+警告框
今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。
按照惯例,我们还是从MD的控件开始说起。
Google Material Design Guideline
首先,什么是简易菜单呢?先放一个例子出来吓唬吓唬人:
△ ?简易菜单(Simple Menu)
简易菜单,就是在用户当前操作的位置出现的选项集合。它有以下几个规则:
消失规则:当用户选择了某个选项,简易菜单立刻消失;当用户点击简易菜单之外的区域,或者点击安卓系统的返回按钮,则简易菜单消失。
展现规则:简易菜单应该出现在入口的正上方,也就是覆盖住入口。
这一条在国内的安卓系统中经常被错用,比如下面这种情况:
△ ?点击右上角的三个点,则菜单覆盖在三个点的正上方
国内很多安卓版本的应用,点击三个点之后,菜单是出现在三个点的下方。如果仅仅是从MD规范的角度来说,这是不太规范的做法。
另外,简易菜单还有一个展现原则,要把当前已经选择的选项展现在入口的正上方,就像下面这样:
△ ?选项中的第三个,是当前已选择选项。点击入口后,第三个选项位于入口的正上方
下面是一个反例:
△ ?在上图中,当前已选择的是第二个选项。但是点击入口打开简易菜单,是第一个选项出现在入口的正上方,所以是错误的。
但是,也有例外,如果菜单的入口刚好位于页面的边缘位置,导致当前页面展现不下简易菜单了,则不必遵循“当前已选选项必须在入口正上方”这个原则,比如下面这个例子:
△ ?点击Voice search,在当前位置无法展现完整的简易菜单,因此当前已选选项“English”没有覆盖在入口(Voice search)的正上方
以上就是简易菜单的用法。
简易对话框和简易菜单是很相似的,因为它们的功能都是一样的:提供一系列选项。
所不同的是,简易对话框除了可以提供选项之外,还可以提供一些相关的操作。另外,在简易对话框中,可以展现头像、图标(icon)、一条选项中的说明性文字、其它操作(比如上图中的“添加联系人”按钮)。简易对话框的呼出方式,可以是点击或者长按,而简易菜单一般是点击。
由于简易对话框出现在屏幕的中央,比简易菜单更加打扰用户。所以MD规范简易,尽量使用简易菜单而不是简易对话框。
iOS Human Interface Design Guideline
弹出框(Popovers)最开始是只建议用在iPad上的一种控件,最近由于手机屏幕越来越大,也由于安卓和iOS两种规范的混用,也越来越多地出现在iOS应用里,比如下面这个例子:
可以看到,iOS的弹出框和Android的菜单比较相似,但iOS的弹出框是出现在入口的下面的,且要有箭头,指示入口的位置。
关于弹出框,需要注意以下几点:
1. 一次只能出现一个弹出框。如果一个操作激发了另一个弹出框,则进行该操作的时候,立即关闭当前弹出框,然后再出现新的弹出框。
2. 弹出框上面不能覆盖别的控件,警告框除外。
3. 一般来说,在弹出框上进行了操作,则弹出框关闭。如果需要增加“放弃操作”或者“确认操作”的功能,则可增加“取消”、“完成”这样的按钮。如果在弹出框里可以进行多项选择的操作,则需用户点击了“取消”、“完成”或者点击弹出框以外的区域关闭弹出框。
iOS和Android规范解析——确认弹框、全屏弹框和模态视图
前两个是Material Design(简称MD,下同)规范中的确认弹框(Confirmation Dialog)和全屏弹框(Full-screen Dialog),后一个是iOS规范中的模态视图(Modal View)。下面先说MD中的两个。
Google Material Design Guideline
确认弹框,是需要用户明确地选择一个选项的弹窗。比如设定手机铃声时,会需要你选择一个铃声,如下图:
△ ?确认弹框示例
如果点击“取消”按钮,或者点击安卓系统的“返回”按钮,则该弹框消失,并且修改的内容不会保存;只有点击“好的(OK)”,才会保存修改的内容。因为有这个保存修改内容的功能,所以“取消”按钮就显得尤为重要:如果不加“取消”按钮,则用户会不清楚修改的内容是否被保存,比如下面这个反例:
△ ?这个弹框只有一个“完成”按钮。这使得安卓系统的“返回”按钮的功能变得模糊:“返回”按钮是“取消”的作用呢?还是“确认”修改的意思呢?
另外有一点需要格外注意:在确认弹框里,不要设计会弹出简易弹框或者简易菜单的按钮,因为这会增加它的复杂度。如果一定需要使用这些弹框,则请考虑使用全屏弹框(下面会介绍到)。
确认弹框的形式,除了刚刚提到的设定铃声的列表,还可以有很多样式:
所有的确认弹框都share一个共同点:弹框里只专注选择一个值。比如上图左侧的日期选择器,只选择日期,而不是既选择日期又选择时间。
上面是MD中对确认弹框的介绍。下面说说全屏弹框。
△ ?全屏弹框示例
全屏弹框承载了一组任务,这些任务在用户点击“保存”或者“取消”之前,都不会独自生效(对,就是捆绑式销售的意思? )。在全屏弹框里,各种弹框都可以弹弹弹。全屏弹框是所有弹框中,唯一允许弹框上面有弹框的情况;一般情况下,除非是警告框,否则所有弹框都不能在别的弹框之上出现。
至于何时使用全屏弹框,有以下几个判断标准:
- ?所需弹框包含需要输型入操作的入口,比如输入框,或者日期选择期。
- ?改动不是实时保存的,而是点击“保存”按钮之后一起打包保存。
- ?应用里没有实时保存草稿的功能。
- 当需要进行一系列操作或设置,然后再提交它们时(其实和第二条比较相似)。
关于全屏弹框,有一个需要注意的点:顶部操作栏。顶部的操作栏,左上角一定要放置表达“取消”含义的按钮,而不是“返回”;右上角一定要放置表达“保存”的意思,而不是“关闭”。
先说左上角,下面的例子很好地说明了原因 :
既然用户的操作不是立马生效,所以当点击左上角的“X”号,如果用户已经进行了一些操作,则应该弹出警告框提示用户:
当用户已经设置了一些选项,则点击X号时,弹出警告框提示用户将丢弃所做的更改。
全屏弹框右上角表达“保存”含义的按钮,可根据场景选择不同的文案,但最好使用动词,比如“保存,发送,分享,更新,创建”等。不要使用模糊的词汇,像“完成”、“好的”(在确认弹框可以用,全屏弹框不能用)、“关闭”。下面是个反例:
△ ?右上角的“关闭”按钮对操作的结果表意模糊
关于全屏弹框的标题,MD也给出了建议:标题要简短。如果想要使用随使用场景变化而变化的