关于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

相关推荐

  • 初感避孕套用户体验反馈

    其实初感明白,很多朋友都徘徊在到底要不要代理初感这款产品上,很多的朋友都在问初感长的啥样的?以及初感避孕套的价格是多少?初感避孕套怎么样,好不好用?初感避孕套的效果如何?初感回头客多不多?今天我就把我自己的亲身体验分享大家!初感长啥样?下面就是初感的包装图和套子的实物图:高大上的包装盒,简便易撕的小袋子!初感的价格到底是多少呢?来看看初感安全套与市面上各大品牌的价格对比:通过这张图可以看到,初感安全套不仅比那些大品牌的安全套价格便宜,而...

    2018-02-12
  • 提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 用好的交互设计来管理复杂

    作者:Mandy权,一名快乐的产品经理!~微信公众号:Q产品复杂是可以被管理的,但要做到这一点,我们都必须做好自己该做的那部分工作。筛选器Tesler’s Law/泰思勒定律(复杂性守恒定律),这个定律告诉我们:每个应…

    2017-08-01
  • UI设计师:教你以问答形式“来“把玩”APP

    作为APP狂热分子,定期去App Store或者其他渠道找新鲜的产品来玩儿,已经持续了很多年。但是光浮于表面的玩儿,还不够。因为只有了解产品背后的逻辑才能更全面的解读为何会那么设计。

    2017-05-02
  • 场景化体验设计的新思路:语音交互

    语音交互在场景化的体验中能发挥更好的效果,是因为语音本身就是一个对话的过程。当你置身于特定场景下时,你的语音指令才具备特殊的意义!当你在骑行的时候,Siri在你耳边提醒你临近会议的准确时间和地点,并为你语音导航,同时为你口述刚刚收到的短信息—所有的动作都没有打断你的骑行运动。第二个倒计时设定40分钟,现在开始倒计时。你的倒计时已经运行,还有9分42秒,想要更改它吗?引导强于记忆。User: Alexa, add milk to the shopping list.
    Alexa: I’ve added milk to your shopping list.
     
    User: Alexa, add eggs to the grocery list.
    Alexa: Eggs added to your shopping list.
     
    User: Alexa put butter on the shopping list.
    Alexa: I’ve added butter to your shopping list.
     
    User: Alexa add cereal to the shopping list.
    Alexa: I’ve added cereal to your shopping list.
     
    User: Alexa put cheddar cheese on the shopping list.
    Alexa: Cheddar cheese added to your shopping list
     
    User: Alexa put sugar, flour and salt on the shopping list.
    Alexa: I’ve added sugar flour salt to your shopping list.

    2017-05-17
  • 同样是券商,为什么你家APP用户体验不好?原来还有这一招...

    券业新力量 | 服务所有券业人的梦想当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放As Long As You Love MeBackstreet Boys - Backstreet's Back导言洞察用户喜好,吸引用户,留住用户,让用户满意,是所有服务业的本质。本文以行为数据切入,从三大方面、两个案例,全方位解析如何利用行为数据提升证券App用户体验。用户体验(User Experience)最早被广泛认知和提及,是在上...

    2018-03-30
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • 译文 | 用户体验要素之连接性

    科技推动社会的发展,也改变着人机交互的模式和服务方式。科学家创造了先进的科技,设计师们则将这些前沿的科技融合在服务日常民生的产品中,更好的为用户服务。当人工智能技术逐渐成熟后,设计师就将AI技术整合到汽车中来辅助司机驾驶;当低功耗蓝牙技术成熟后,设计师就将iBeacon连接到商场的销售服务体系中… 如何将不同的技术、产品连接在一起来创造更好的用户体验,就是下面译文中将要阐述的。下面进入译文。

    2017-05-29
  • 如何创建用户体验地图

    许多公司尽管怀中最美好的愿景、掌握庞大的数据,却依然只能给他们的用户提供乏善可陈、平淡无奇的产品体验。这归咎于他们以聚焦内部、脱离用户的方式做产品,缺乏对用户的关注。他们未意识到用户对其产品的每一次体验都会影响用户的体验满意度、品牌忠诚度和忍耐底线。如果使用用户体验地图(Customer Journey Map),则能够很好地描绘出用户在体验产品时的情绪 变化,并以此对产品进行优化。通过体验地图的项目,我们发现了很多产品的优化方向。下面...

    2018-02-01
  • 为了App更新,程序猿都变成段子手了

    头图来自:flickr 本文转自歪楼(easy1414),已获得其授权。 这年头混你们互联网创业圈真是太难了。 按着互联网思维,连修bug的程序猿小哥们都被逼得寂寞如雪。 有的自带牛逼气质: 有的在App更新日志里写起了诗: …

    2016-01-26