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

相关推荐

  • 上海benhealth招聘实习生 150/天

    回复「简历」,送你优秀简历模板。岗位岗位实习生岗位职责参与公司移动端、小程序以及 PC 端 Web 产品的交互设计;与产品经理和开发人员共同完成产品开发。岗位要求1. 平面、视觉传达相关专业本科或以上学历;2. 熟悉 Axure 和 Sketch 等交互设计工具;3. 热衷网络文化,熟悉网络热点和主流 App;4. 良好的沟通学习能力,工作热情高,责任感强。薪资福利150 元/天工作地点上海简历投递投递邮箱:jun.pan@benhea...

    2018-04-08
  • 职业病又犯了,我从交互设计角度分析了《得到》App…

    我是《逻辑思维》的 期期都听 忠实听众,也许有很多人对老罗不置可否,但我自己是非常喜欢的,可能也是由于我知识结构和老罗相差太远,但我一点也不觉得丢脸,谁叫他比我 老 大呢。以前我们都知道,喜马拉雅是逻辑…

    2017-08-04
  • 我们深挖的那些设计小惊喜 【UXRen译#151】

    作者: Cosima Mielke |  翻译:Sherry ,校审:佳歧 & Teenie     CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西,也有实验性的概念——是个激发灵感的宝库。…

    交互专题 2017-08-07
  • 人工智能时代,给设计师的 3 个建议

    过去一年,和人工智能相关的新闻铺天盖地。身为设计师的你可能会问:人工智能和我的日程工作有关吗?我应该为此做什么准备?Design will be less about delivering on a user’s request, and more about responding to the needs they haven’t expressed yet.
    (未来,设计会更多地去响应用户还没有表达的需求,而不是去为了响应用户主动提出的需求)「Alexa,把客厅灯关了,把我的床头灯开到一半的亮度」
    「Alexa,再买一袋我上个月买过的那款猫粮」
    「Alexa,我今天早上的会议几点开始?」

    2017-05-07
  • 国内大公司的交互设计实习面试经验总结

    沈天宇 :看着拉钩、脉脉上关于互联网岗位的信息,找一个交互设计的岗位几乎要面对100个人的竞争。想想我面前站着100个人,我要赤手空拳的打败他们,这画面简直不敢想。所以一开始我完全不知道我到底能找到一个什么样的工作,大概有一种「大爷赏口饭吃」的姿态去找实习。毕竟,我们实验室也好几年没出过阿里的人了,我也感觉我没那么优秀。面对如此严峻的就业形势,恩,首先还是开始找实习吧。这是一个最坏的时代,(一点也不好。),而且也许以后会更坏。对于找工作...

    2018-02-01
  • 如何使交互稿的体验更好

    上周偶然的机会,看到老大在帮别的团队筛选简历,看到了一个同学的简单交互稿,只有界面信息的排版和页面跳转流程,缺省了很多交互稿应有的内容。后来,想起之前和同事聊起交互稿到底该如何表现的问题,就想着可以…

    2016-09-02
  • 交互设计趋势

    这两天在一个QQ群里看到了很多询问:交互实际是需要什么技能?要不要会设计界面等等的问题?我想做产品经理,需不需要会......? 我在之前所阐述了交互与视觉相统一的概念。交互设计在于对内容的整个、提取以及规划…

    2016-08-02
  • Adobe的UX设计系列:如何为移动应用设计错误状态

    人非圣贤,孰能无过。当人们操作用户界面的时候,错误难免会发生。有时候是因为用户做了错误操作,有时候则是由于应用本身出了问题。无论原因如何,出现的错误以及对其处理的方式,都对用户体验产生巨大的影响。糟糕的错误处理方式以及无用的报错信息会让用户感到万分沮丧,甚至会导致用户放弃继续使用你的应用程序。

    2017-05-15
  • Axure RP 8软件和安装教程

    Axure RP 8(64位)下载链接:百度网盘:https://pan.baidu.com/s/1hsfD3Kg提取密码:ivma软件简介:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。(仅供学习交流使用)安装前须知:1.解压和安装前请关闭...

    2018-04-17
  • 交互设计如何备考?二战学姐带你领略考研那些事

    姜嘉琪本科南京大学,信息管理与信息系统专业清华大学美术学院公布拟录取名单一周之后,心里那种不真实感终于平复下来。这是我第二年参加考试,至此也算是最好的结果了。为什么考研我本科的专业其实也算是个“交叉学科”,范围广必然深度不足,所以我一度非常迷茫,不知道未来究竟想做什么。后来上了一门《人机交互》的选修课,第一次了解到设计上的微妙差别给使用者带来的不同体验,经过反复思考,我觉得产品交互设计这个领域可以算是我个人兴趣、能力、期望最佳的结合点,...

    2018-04-20