Android和iOS平台交互方式的不同点

本篇文章属于很初级的内容,之所以写下来,一是为了整理一下自己的思路,二是为了方便初学者们快速了解 Android和IOS在交互上的很多区别。可能有些地方不是完全正确,望多交流。

本篇文章属于很初级的内容,之所以写下来,一是为了整理一下自己的思路,二是为了方便初学者们快速了解 Android和IOS在交互上的很多区别。可能有些地方不是完全正确,望多交流。

Android平台

先说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结构(当然也可以没有)。这种结构的关键是主要功能或内容很突出,所以头屏最大化显示,而其他功能相对较弱,不需要频繁切换侧边栏导航(如下图)。

Android和iOS平台交互方式的不同点

谷歌发布的inbox邮箱,左侧导航栏作为主导航,默认显示收件箱页面,用户最常用也最重要的功能是查看收件箱,至于其他的发件箱、垃圾邮件等都可以放在导航抽屉内收起。googel图书顶部是应用栏+tabs结构,此处Tab强调的是在同一主题下的不同归类,而不是导航。

方式二:市场发展

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

Android和iOS平台交互方式的不同点

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

iOS平台

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

Android和iOS平台交互方式的不同点

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

层级返回

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

Android和iOS平台交互方式的不同点

编辑选择

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

Android和iOS平台交互方式的不同点

这里列举的都是一些大方向上的区别,还有不少小的交互细节可以在使用过程中细细体验。
本文由 @butter 原创发布于人人都是产品经理 ,未经许可,禁止转载。

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

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

相关推荐

  • 网易资深高手:交互设计师必备的9种能力(上篇)

    网易UEDC – 杨杰 : 有好多交互新人或尚未跨进交互设计大门的同学,会经常问的一个问题:交互设计师需要具备怎样的技能和能力?

    2017-12-03
  • Mockplus实例之一看就会de五个交互功能

    实例来源:豆瓣新加日记(https://www.douban.com/note/create)先看看豆瓣新加日记的网页:再看看已经制作好的原型预览页面:在原型制作中有五个有特色的交互功能:1 题目和正文切换时,边框颜色变深这里需要交互…

    2016-07-27
  • 转行学设计?新手必读的五大误区+三大秘籍

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律、且不痛不痒,都说要看点书、学点画、练软件、多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的?

    2017-06-03
  • 深度解析新版9.0支付宝与微信之争

    这里有个h5大家可以看一看历来他们之间相互“学习”和“致敬”。 http://create.maka.im/k/SR5OVAKY 很多文章在说支付宝和微信在进行下一场直播的撕逼大战,其实在阿西看来这不过是一场用户使用场景之争。 这一次,支付…

    2015-07-10
  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • 《用户体验要素》

    大多数人都体验过网购,这种经历几乎每一次都是一样的:你到达网站,寻找你想买的东西,然后下单(提供你的住址和电话号码),然后网站将物品快递到你的手中。这个清晰、有条不紊的体验,都是由一系列完整的决策(大大小小的决策)组成的:网站看起来是什么样、它如何运转、它能让你做什么。这些决策彼此依赖,告知并影响用户体验的各个方面。如果我们去掉这些体验的外壳,就可以理解这些决策是如何做出来了。作者给出了一套用户体验设计的科学方法,借用此方法,我们可以对...

    微信热点 2018-04-12
  • 资讯类APP竞品分析报告

    一、摘要 为了能深入了解主流新闻客户端在「功能模块」、「内容运营」以及「界面交互」上的特点,我对Zaker、今日头条、网易新闻这3款APP进行了对比分析,并得出结论: Zaker定位于具备明确新闻需求的用户,整体较…

    2015-03-17
  • 为什么在App设计中,应该慎用左右横滑设计?

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高。如何在有限的屏幕内透出更多的内容,是设计师们研究的重点。

    2017-05-21
  • 18个UI demo设计实例,深挖让用户愉悦的小惊喜

    文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例,希望对大家有所启发。

    2017-05-11
  • 《用户体验可视化指南》视频讲书(1)

    我们选择了人民邮电出版社2018年出版的《用户体验可视化指南》作为第一本,带着大家啃书。原因是这本书真的非 常 好,好到可以成为用户体验设计和研究领域的大辞典了。作者引经据典,却因为篇幅受限,很多没有详细展开。不知前因后果的读者,因此会错过很多有意思的观点。所以UXREN为你详细拆解《用户体验可视化指南》,每次10-20分钟,3首歌曲的时间,日积月累,透彻理解经典书籍。第1期: 前言《用户体验可视化》前言部分,介绍了为什么会提出共线图(...

    2018-03-27