关于Android和IOS交互上那些事

先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

先说Android平台,自从material design面世以来,市场上很多Android app在设计上参差不齐。可能由于设备及用户使用习惯等各种原因,大多数app都还在以Android 4.0的规范在做设计,当然也有很多app为了省事,直接从iOS上照搬过来。因此,真正以MD为设计基础的应用并不多。下面是一些整体的框架记录,更为详细的交互细节以后再说。

 

关于Android和IOS交互上那些事

仔细阅读MD的规范,似乎写的很清楚,但是如果和Android4.0规范放在一起,还是会发现很多有出入的地方。不过规范的目的是为了培养并迎合用户使用习惯,减少用户认知负担。文字是死的,人是活的,灵活应用才是关键。

在以MD为基础的app设计中,经常会出现以下结构(如图1)

关于Android和IOS交互上那些事

在Android 4.0和material design设计规范中都专门对选项卡进行了说明,但两者的说法不同。

在Android 4.0中,选项卡tabs属于操作栏的一部分,可以很轻松探索 app 中的不同功能,或浏览不同分类的数据集,就是说tabs选项卡是可以作为导航使用的,类似于iOS的标签栏,只是iOS放在屏幕底部,安卓是放在屏幕顶端(如上图2)。

但在material design中,tabs的作用是将大量关联的数据或者选项划分成更易理解的分组,虽然很容易让人联想到导航,但其本身并不是用来导航的。每个tab的内容应该互相关联并且是在同一个主题下(如下图)。图中出行方式可以通过tab划分成多种方式,但是搜索、指南、设置却完全属于不同的功能导航。

关于Android和IOS交互上那些事

如此看来,两种规范似乎是相互冲突的,而且只要留心一下你会发现,现在市场上经常是这两种形式都有。googel官方比较推崇应用结构是:左侧导航抽屉+应用栏+tabs(Tab可选),但是同一种结构却有两种不同表现方式。

方式一:谷歌主推形式

侧边栏导航作为应用的主导航,头屏显示应用最重要的功能或内容,如果在较低层级中有多个平行相关视图,可以用Tab结构(当然也可以没有)。这种结构的关键是主要功能或内容很突出,所以头屏最大化显示,而其他功能相对较弱,不需要频繁切换侧边栏导航(如下图)。谷歌发布的inbox邮箱,左侧导航栏作为主导航,默认显示收件箱页面,用户最常用也最重要的功能是查看收件箱,至于其他的发件箱、垃圾邮件等都可以放在导航抽屉内收起。googel图书顶部是应用栏+tabs结构,此处Tab强调的是在同一主题下的不同归类,而不是导航。

关于Android和IOS交互上那些事

方式二:市场发展

或许是受4.0规范的影响,在左侧导航抽屉+应用栏+tabs的应用结构中,Tab作为应用的主导航,而左侧抽屉作为辅导航,收纳一些用户不常使用的功能,像用户中心、设置、反馈等。这种结构适合那些多个相同等级的功能视图需要频繁切换的app,且只需要手指左右滑动就能快速切换Tab视图,这将大大提高应用使用效率。如下图所示,虽然是概念设计(主要是国内安卓应用喜欢延续iOS风格,将Tab放在屏幕底部,米找到合适的例子,且MD没有被普遍应用),但很适合该场景下的示例。这款产品类似于微信,将主要功能导航放在顶部,实现快速切换,侧边抽屉导航放置收藏、状态、设置等次要功能。

关于Android和IOS交互上那些事

以上两种方式并不冲突,关键是看你应用的功能内容。如果你的应用核心功能很突出,且不需要其他功能频繁切换,就选择第一种;如果你的应用有两个或者两个以上相同重要的功能模块,且需要频繁切换,比如微信的即时聊天和朋友圈,那就尝试第二种。

Android部分暂时就到这里,来看看iOS。如果展开来讲,体系太庞大,暂且用一张图表示,虽然都是很基础的内容。

 

关于Android和IOS交互上那些事

另外,Android和IOS很明显的差异是层级返回和编辑选择。

1、层级返回

IOS平台没有实体返回按键,所以涉及层级间的导航,app界面本身一定要有返回按钮,而实体home键只负责应用退出。Android平台有物理返回按键,且点击返回的是动作流。比如,在搜索界面,点击搜索框调出软键盘,再点返回按键,不是返回上一页,而是收回弹出的软键盘,它强调的是返回上一个动作的界面,而非层级关系。在Android平台上的app,如果应用本身含有返回按钮,返回的是上一层级,设计的是层级间的导航。另外,在安卓app的首页点击返回按键,就是退出应用。可看如下关系图

关于Android和IOS交互上那些事

2、编辑选择

对于编辑选择功能,IOS有明确的入口,通常在导航栏上有编辑按钮,点击后进入编辑模式,通常可以多选,同时底部或顶部会增加工具栏,用来处理多选内容。当然也可以单选删除,通过点按向左滑动删除,或者是点击按钮从底部呼出操作菜单,逐个删除。但Android是通过长安方式进入编辑模式,此时操作栏被一个临时情景操作栏覆盖(情景操作栏可以覆盖顶部操作栏和底部操作栏),界面内容允许单个或多个操作(如下图)

关于Android和IOS交互上那些事

以上部分其实都是一些平台规范总结,将区别大且重要部分整理出来,也是为了方便阅读查看,后期会持续更新一些其他交互内容。

作者:butter

来源:http://www.jianshu.com/p/b5ca80ae894d

 

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

(0)
CatherineCatherine
上一篇 2017-06-03 10:26
下一篇 2017-06-03

相关推荐

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

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

    2017-05-26
  • 快速搞定日常专题,我的流程与案列分享

    有一些朋友问我能不能分享一些关于活动专题的,但是我始终觉得我前面分享的已经很多了,在banner上自己去提升和延展就已经是日常的专题活动了。

    2017-05-15
  • 如何完美碾压用户体验职位面试 【UXRen译#152】

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel   当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否…

    交互专题 2017-08-07
  • 现在交互设计是时候走出迷茫

    交互设计的定义:交互这个词,英文是interaction,其中inter是互相的意思,action就是行动,所以inter-action直面上看就是“互相的行动”,也就是你行动一下,对方再行动一下,你来我往。交互设计,就是在设计这一些列的“互相行动”,使用户能更好得使用物品,物品能更好得服务用户。献给深夜中孤注一掷的设计师们来自无可设计00:0002:30下面小编想向大家介绍一位交互设计大师————————Lucian Bernhard...

    2018-03-27
  • 交互设计中,你不可不知的八个度

    数十万互联网从业者的共同关注!作者:李煜佳,华为交互设计师。专注于用户体验及服务设计,擅长设计分析、交互设计、细节体验提升等工作。作者原创并投稿早读课发表,转载请联系作者。欢迎投稿到早读课,投稿邮箱…

    2017-08-01
  • 一个产品设计师必须会讲的故事——用户体验设计中的故事板

    作为一名设计师,情绪板的运用想必你已轻车熟路了,然而情绪板其实还有个小姐妹不常被人们提及,她就是故事板。【情绪板】常用于品牌与形象设计领域,用来发掘用户对视觉体验的需求,而【故事板】则常用在用户研究和交互设计领域,通过还原用户使用场景来深度挖掘用户对产品整体体验的需求,是提升用户使用体验的有效研究方法。很多希望从视觉设计师过渡到体验设计师的新手设计师,心里很清楚要关注和挖掘用户除视觉以外的其他体验,但是却不知如何下手。各种用户研究方法虽...

    2018-05-08
  • Axure RP 8 入门手册 – 第7章

    第7章母版管理第1节母版简介第2节添加/编辑/删除第3节添加母版到页面中第4节从页面中移除母版第5节拖放行为第6节自定义触发事件第7章母版管理第1节母版简介圆儿:小楼欧巴!小楼:圆圆好!圆儿:老师,我就一个圆!小楼:可是我喜欢两个圆啊!圆儿:老师…你正经一点儿好不好嘛!小楼:呃……你想问什么?圆儿:我想问,在做很多个页面的时候,如果每个页面中都有相同的内容,有没有办法不用每个页面都做一次?当然,我知道能够复制粘贴,但是,如果将来再发生改...

    2018-04-25
  • 硅谷设计师看苹果交互设计趋势:如何适应大屏?

    来源:用户体验联盟 本文作者:Jiaxin Yu 苹果终于顺应市场潮流,推出了大屏手机,而且销量前所未有的火爆!苹果大屏手机的推出,必然影响其交互设计的改变,其中有怎样的趋势?请看硅谷设计师的看法! 今年夏天,…

    交互设计 2014-10-11
  • 从产品到交互·2015同济设计学考研经验

    【写在前面】 我叫徐晨,来自陕西西安,毕业于兰州理工大学工业设计专业。2015年我参加了研究生入学考试,也如愿考上了同济大学创意学院的研究生。想想当初独自备战,其实都是在黑暗中摸索,曾经也担心自己的复习方…

    2015-11-08
  • apple watch 中文手册:Apple Watch 整体架构

    整体功能预览 总体而言,WatchKit第一版SDK提供的功能远远超出了我的期望。因为我原本以为第一版WatchKit可能侧重于对iOS Today Extension功能的延伸,而不是真正开发Watch App。所以当知道真相后,我即惊讶又感到…

    2015-06-15