美文网首页控件和规范iOS和Android规范之控件解析交互设计精华文章
iOS和Android规范解析——简易菜单、简易对话框和弹出框

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

作者: 沐风与体验设计 | 来源:发表于2017-04-21 16:27 被阅读1178次

    今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是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规范解析——提示框(Toast)对比

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

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

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


    德国海龟一枚🐢 ,曾任职于腾讯微生活、网易、宜信等公司。现为爱奇艺UDC高级交互设计师。欢迎关注。

    相关文章

      网友评论

      • 无尽红茶:我想请问一下“点击右上角的三个点,则菜单覆盖在三个点的正上方”这样要求的原因是什么那?
        无尽红茶:@新设计青年 谢谢回答, 我发现很多国内APP确实都是在下方显示,而且再次点击图标以后可以关闭简易菜单。在原位显示确实可以方便点击,特别是单手操作的时候。
        沐风与体验设计:@candle30 这个是MD的规范~我分析了一下,觉得这样做有两点好处:1. 节省空间;2. 点击方便,用户点击三个点之后,在原位就可以开始选择选项了。
      • Zander:“more”(也就是三个点的弹出菜单)在MD里也有特殊的用法,比如三个点如果位于页面底部的时候,则弹出菜单无须覆盖在其上面,在视觉上是展示在三个点的上方(在Y轴上的关系)。(具体示例可以查看Google+ “发动态”的页面)
        但是从规范本身考虑,其实是提高了Z轴的高度,从而在视觉上(透视关系)看到的是Y轴上的关系变化,所以在视觉上是弹出菜单位于三个点的上方,如果从立体空间考虑,实则还是覆盖在三个点上。(仅为个人理解)
        所以在具体使用上,三个点的功能布局在页面顶部和页面底部反映在视觉上还是有一定差别的。
        沐风与体验设计:Hi, 谢谢你的Google+的例子。“弹出菜单无须覆盖在其上面,在视觉上是展示在三个点的上方”其实是和本文中给出的特例“如果菜单的入口刚好位于页面的边缘位置,导致当前页面展现不下简易菜单了,则不必遵循‘当前已选选项必须在入口正上方’这个原则”是相通的(详见文中voice search选中English选项的例子)。
      • 龙爪槐守望者:三个点弹出菜单,Android以前有个专有术语:溢出菜单overflow menu。因为三个点代表更多,更多相对于界面来说是被“溢出”来的
        沐风与体验设计:@龙爪槐守望者 溢出菜单,这名称挺形象
      • 夜猫小七:猛一看写一篇专业性比较强的文章,细看是作者在手机界面交互细节上的深耕细作!重视细节的人能力应该都很棒!
        我们大四上半学期的时候也学Android编程来着,不过那时因为考研基本上所有的编程课都逃了,我本人也对编程也是有阴影的。因为自己平时都是比较马虎的,受不了错一点整个程序就挂掉的现实,每次查错心里都特别的焦灼难熬。
        可是还是有那么多人做到了,我也不要在抱怨什么!以后还是要学习编程的。感觉它是一扇新世界的大门,等着我去开启。
        沐风与体验设计: @Vital丶光丨007 谢谢支持😃

      本文标题:iOS和Android规范解析——简易菜单、简易对话框和弹出框

      本文链接:https://www.haomeiwen.com/subject/tlldzttx.html