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

相关推荐

  • 是不是该考虑加入动态交互了?

    本文转载自:阿西博客 原始链接:是不是该考虑加入动态交互了? 一个优秀的APP交互动画不仅仅是炫,而且要实用,有的还要考虑手机的性能等因素,所以想做一个好的交互不并容易,今天就带你来见识一下什么叫洋气范儿…

    2015-03-21
  • About Axure

    About Axure 8.0Axure:产品人必备必会的软件,快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。1.Axures的安装官方下载地址:https://www.axure.com/download汉化包地址:http://www.iaxure.com/menupage/download.html国内下载地址:https://pan....

    2018-05-08
  • 经验分享丨赶集App中秋节的皮肤设计

    随着移动互联网的迅猛发展,同一款产品,使用移动端的用户远超PC端,为了更好的提升APP的用户体验,情感化设计也得到了越来越多的关注,通过它来唤起用户共鸣,带给用户愉悦的心情。

    2017-04-30
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 老外看中国的移动App设计精髓-1 ui设计的十大精髓

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 一篇文章读懂用户体验(下)

    前言:一直有在梳理自己的知识结构,也靠这些所谓经验做了几年行业培训,今年是从业的第十一年,我觉得差不多是时候把这些最初来自同行、互联网和书籍的知识再还给行业,我会把所有所得分章节逐渐整理发出,希望能对行业尽一份绵薄之力,同时也作为一种仪式,好让自己重新出发。举个栗子:假设我是个潮人,同时我也是个医生,那我就有两个角色。如果给我设计一款音乐播放器,应该给我一款酷炫的,我会喜欢。但当我坐在办公桌边,给病患开药的时候,我电脑的开药软件需要很酷炫吗?我一边摇晃脑袋踩着节奏,看着充满特效的界面开出来的药,你敢吃吗?所以医院的软件需要简洁,保证开药的准确度。(然而需要强烈的视觉表达情绪的设计例外)。

    2017-06-01
  • 双管齐下:同时设计 iOS 和 Android

    不管你是在家,在公司,还是在设计师工作室工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。 在理想的情况下,我们希望能花上好…

    2016-01-06
  • 交互设计与人类行为习惯的一些思考

    在交互设计中,利用很多的人类行为习惯作设计指引,如从左到右的阅读习惯,格式塔原则的视觉习惯等。很多的研究者对此已经深入研究,本文主要围绕习惯与交互设计的联系及相互影响的思考。好的交互设计是培养用户获得更好的行为习惯,更好地解决问题。

    2017-05-26
  • 看Google设计师设计的细腻动效

    好的动效设计,从来不以炫酷作为目的。

    2017-05-15
  • 关于交互设计的一些图书网站推荐

    昨日有人在群里提问阿西站长说想读一些关于交互设计图书,阿西站长通过一晚上的搜索和不断的翻阅各种网站,并且结合自己做交互设计的经验给大家汇总了一下适和交互设计人员看的图书和网站。具体如下: 《交互设计之…

    交互设计 2014-11-18