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

今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。


今天的这几个控件的中文名字,在网上查了半天,没有找到统一的叫法,所以自己翻译了一下:简易菜单对应的是MD(Material Design,下同)中的Simple Menu;简易对话框,对应的是MD中的Simple Dialog,弹出框对应的是iOS中的Popover。

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

按照惯例,我们还是从MD的控件开始说起。

Google Material Design Guideline

首先,什么是简易菜单呢?先放一个例子出来吓唬吓唬人:

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

简易菜单(Simple Menu)

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

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

好像例子没有任何可怕的点。就是想说个冷笑话,你管我。分析上面的例子,简易菜单,就是在用户当前操作的位置出现的选项集合。它有以下几个规则:

  • 消失规则:当用户选择了某个选项,简易菜单立刻消失;当用户点击简易菜单之外的区域,或者点击安卓系统的返回按钮,则简易菜单消失。
  • 展现规则:简易菜单应该出现在入口的正上方,也就是覆盖住入口。

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

这一条在国内的安卓系统中经常被错用,比如下面这种情况:

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

点击右上角的三个点,则菜单覆盖在三个点的正上方

国内很多安卓版本的应用,点击三个点之后,菜单是出现在三个点的下方。如果仅仅是从MD规范的角度来说,这是不太规范的做法。

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

选项中的第三个,是当前已选择选项。点击入口后,第三个选项位于入口的正上方。

另外,简易菜单还有一个展现原则,要把当前已经选择的选项展现在入口的正上方,就像下面这样:

下面是一个反例:

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

在上图中,当前已选择的是第二个选项。但是点击入口打开简易菜单,是第一个选项出现在入口的正上方,所以是错误的。

但是,也有例外,如果菜单的入口刚好位于页面的边缘位置,导致当前页面展现不下简易菜单了,则不必遵循“当前已选选项必须在入口正上方”这个原则,比如下面这个例子:

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

点击Voice search,在当前位置无法展现完整的简易菜单,因此当前已选选项“English”没有覆盖在入口(Voice search)的正上方

以上就是简易菜单的用法。

简易对话框和简易菜单是很相似的,因为它们的功能都是一样的:提供一系列选项。

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

所不同的是,简易对话框除了可以提供选项之外,还可以提供一些相关的操作。另外,在简易对话框中,可以展现头像、图标(icon)、一条选项中的说明性文字、其它操作(比如上图中的“添加联系人”按钮)。简易对话框的呼出方式,可以是点击或者长按,而简易菜单一般是点击。

由于简易对话框出现在屏幕的中央,比简易菜单更加打扰用户。所以MD规范简易,尽量使用简易菜单而不是简易对话框。

iOS Human Interface Design Guideline

弹出框(Popovers)最开始是只建议用在iPad上的一种控件,最近由于手机屏幕越来越大,也由于安卓和iOS两种规范的混用,也越来越多地出现在iOS应用里,比如下面这个例子:

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

可以看到,iOS的弹出框和Android的菜单比较相似,但iOS的弹出框是出现在入口的下面的,且要有箭头,指示入口的位置。

关于弹出框,需要注意以下几点:

  1. 一次只能出现一个弹出框。如果一个操作激发了另一个弹出框,则进行该操作的时候,立即关闭当前弹出框,然后再出现新的弹出框。
  2. 弹出框上面不能覆盖别的控件,警告框除外。
  3. 一般来说,在弹出框上进行了操作,则弹出框关闭。如果需要增加“放弃操作”或者“确认操作”的功能,则可增加“取消”、“完成”这样的按钮。如果在弹出框里可以进行多项选择的操作,则需用户点击了“取消”、“完成”或者点击弹出框以外的区域关闭弹出框。

以上对比了MD中的简易菜单和简易对话框,他们的功能相似,只是简易对话框中还可以加入头像、图标(icon)、关于选项的说明性文字以及其它操作,所以功能性更强。但简易对话框出现的形式,导致了它对用户的打扰更大,因此MD简易尽量使用简易菜单,除非有使用简易对话框的必要再使用它。

另外,在iOS中,弹出框是与上面两个控件较为相似的控件。有个细节需要注意:MD中的简易菜单,形式上是一个矩形,没有箭头指示入口位置;iOS的弹出框,规范里强调要有箭头指示入口位置。这个区别需要提醒一下。

最后顺提一句,讨论能让我们的认识更深刻,也更全面。欢迎大家留言讨论。

相关阅读

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

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

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

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

 

作者:新设计青年,德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。现为爱奇艺高级交互设计师。微信公众号:新设计青年。

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

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

(0)
CatherineCatherine
上一篇 2017-05-02 03:43
下一篇 2017-05-02 05:37

相关推荐

  • 【每天一小讲】便捷的用户体验才是命题简化之根本!(语音版)

    如何进行命题简化?来自盯盯学院00:0001:24命题简化是让产品或者服务的水平超出竞争对手一大截。根本是要让顾客用的特别方便,特别爽。命题简化瞄准的是优质市场,一般来说这个市场比较小。当然也有特例,比如苹果手机,既存在于高收益的优质市场,同时也创造出了一个全新的大规模市场。一个优秀的命题简化者根本不需要花多少钱做宣传,用户会主动向周围的人推荐,实现爆炸式增长。如何进行命题简化?产品设计几乎是命题简化的全部。目标就是让产品具有使用上的愉...

    2018-04-09
  • 移动APP:2015 UI/UX 趋势,Material design布局未来!

    移动APP:2015 UI/UX 趋势,Material design布局未来! 在国内,移动端的发展远远超过网页,初创公司们想拓展品牌都会首选手机App。那么你知道近期App设计风格的趋势么,想要做出不土、高逼格的App,以下的趋势你是…

    2015-08-04
  • 交互实战|Design sprint methods 在To B产品中的应用

    在湾区很火的设计冲刺,真的能有效快速解决项目中棘手问题吗?我们在实际工作中开始了首次尝试与应用。让我们一起来体验一下Design sprint methods的设计过程吧~

    2017-04-30
  • APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的。包括:1、交互流程设计;2、风格定位;3、功能icon设计;4、界面视效整体优化;5、应用icon设计。   来源:G-UIDEA

    2016-05-06
  • 开发者从用户体验的角度聊《Getting Over it 》

    原文作者: Lars DoucetBennett Foddy制作的游戏向来都很奇怪,有时甚至会故意激怒玩家。尽管这类游戏完全不是我的菜,但我还是一玩就停不下来。Bennett最近刚刚发布了一款名为《和班尼特福迪一起攻克难关(Getting Over it with Bennett Foddy)》的游戏,它的灵感来源于一位捷克游戏开发者Jazzuo在2002年推出的一款B类游戏经典《迷人远足(Sexy Hiking)》。上述两部作品带有相...

    2018-03-21
  • 交互设计七大定律之Occam's Razor 奥卡姆剃刀原理(简单有效原理)

    最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从标准——交…

    交互设计 2015-08-27
  • 浅谈图型菜单与文字菜单

    写这篇文章最初的想法是来自我看过的一篇关于汉字与英文阅读习惯差异的文章,可惜现在想起来的时候已经找不到那篇文章了(有知道的人请务必私信我)。

    2017-06-03
  • Axure玩出新花样,做个游戏玩转Axure9大常用功能 | 免费直播课

    产品经理会画原型,是入行的基本门槛。一个可用可交互的原型可以帮助开发和设计人员从不同的维度上来了解你的产品设计,降低需求的沟通成本。那么,对于产品经理来说,如何才算是“会画”原型呢?你可能会认为,会画基本的线框图就足以满足日常需求了。但是借助静态的线框图解释你的设计,始终都不会像可交互的原型这么直观有效。原型的工具虽然有很多,但Axure还是最经典的一款画原型工具。虽说Axure用的溜,并不代表你就能成为一个产品经理;但作为产品经理,更...

    2018-03-04
  • 译文 | 4种帮助设计师整理设计思路的方法

    当我们刚刚接手一个项目的时候,我们总能在初期迸发出很多有趣的想法,很多闪光的细节都是偶然闪现的,但当我们在设计的过程中,有多少能够真正落地到产出中呢?怎样才能成功捕捉到这些有趣的创意,并使之在后续的产品设计中表达出来?本文向大家推荐了四种方法,帮助大家整理设计思路,避免创意在你的脑海里逃走!下面进入译文。

    2017-05-25
  • 设计一个界面动效时,需要明确价值、遵循原则和实现交付

    坦白来说,虽然我之前在项目里做过一些小动效尝试,但一直没有什么系统的方法和原则指导,大多在原型软件里凭「感觉」随意调调了事,而说不清楚为什么要做成这样。刚好最近有在和团队的小伙伴们一起进行动效设计的研究与实践,对动效设计的价值、原则和实现交付开始有了更多的了解,在本文中浅薄地总结一下。

    2017-05-12