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

相关推荐

  • 读书会第三期:《交互设计指南》

    《交互设计指南》的作者Dan Saffer是旧金山一家产品设计资讯公司Kicker Studio的负责人,也是交互设计领域的思想先行者,经常在国际进行各种演讲活动。这本书在国内最常见的是2010年发行的第2版中译本,其实它在2006年就有了第1版的英文版,它在10年前的目标读者群是设计行业的资深者,现在很适合交互设计师入门通读。交互设计的4种方法从2003年至2010年常见的交互设计方法论共有4种:以用户为中心的设计、以活动为中心的设计...

    2018-04-20
  • Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。

      摘要:Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。通过它,设备可以感知用户点击力度,再根据力度的不同调出相应的不同功能,让用户和设备能够进行更好的…

    2015-03-18
  • 【交互设计】Dribbble上的 UI 大神MIKE作品欣赏

    Dribbble 上的UI 大神MIKE作品欣赏幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片浏览幻灯片…

    2017-08-04
  • ​ 不尊重用户体验如何“携程”丨每日时评

    高考作文干货/素材/知识/热点如果你想要作文素材、资料...加我微信:13261345736备注下你想要解决的问题点播时间(今天的歌单车是@光芒点播给大家的,如果你也想点歌,请留言:歌名+歌手~)当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放单车陈奕迅 - Shall We Dance? Shall We Talk!作文君说昨天刚和同学们说完OTA(在线旅行社)网站搭售的问题,今天我们再来具体看看,携程在用户体验上面临的问题...

    微信热点 2018-02-10
  • 互联网产品经理常用工具有哪些?

    互联网产品经理的工作是复杂和多样的,PM们通常要负责产品各方面的事务,因此工作中需要用到的工具有很多,现在就跟这笔者一起来看看互联网产品经理常用工具有哪些,想走产品经理路线的同学可以提前了解一下。一、产品经理的主要工作"工欲善其事,必先利其器!"既然是"善其事",关键就是搞明白产品经理相关的工作内容,针对工作合理有效的利用软件,才能达到事半功倍的效果。要说到产品经理的职能,这是另开新篇的话题,这里我们先通俗概括一下PM的主要活动:1、参...

    2018-03-13
  • 在网页设计中兼顾所有用户和场景的3个技巧

    用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。△ 使用适当的新人引导(四种主要的新人引导策略)

    2017-05-23
  • 设计师100问:问天问地问自己【UXRen译#179】

    作者:Jon Moore  |  翻译:hanbb,校审:宝珠 副标题:聪明的设计需要问对问题   一个设计师的工作不仅仅是调整像素和完善曲线。如果你问我在Innovatemap 的日常工作中和我在UX Power Tools的项目中学到些什么,那…

    交互专题 2017-10-11
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • 用户为王时代,美的如何开创用户体验新模式

    4月23日,美的联手京东推出了巅峰24小时AR新玩法,不仅福利多多,还将家电焕新的概念融入到趣味游戏中,打造了良好的用户体验,赢得了众多用户认可。随着大数据、云计算、社交商务、移动技术等新技术的发展,用户对个性化的产品和服务的需求更加强烈,并期望企业去了解他们真实的需求和提供卓越的服务体验。在此变化下,美的坚持以用户为中心的理念,推进实施关注用户实际需求的创新模式,通过用户体验实证推动产品销售和企业发展。产品研发融合需求从以前的设计师主...

    2018-04-23
  • 移动端下拉表单的更好选择

    在表单中使用下拉菜单看起来并不重要:它们在用户界面上占用的空间不大,它们自动验证输入,所有浏览器和平台都可以支持它们,它们实现起来容易且方便,用户知道它们的好。

    2017-04-28