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

相关推荐

  • 亚马逊语音交互设计规范(三)Alexa的回应

    作者:Amazon翻译:原形必录这篇是整个设计规范的重点,因为在设计语音交互时最主要的就是Alexa的回复内容,本篇给出了很多让对话更自然易懂的方法,希望对大家有帮助。往期回顾:《亚马逊语音交互设计规范(一)设计流程》《亚马逊语音交互设计规范(二)用户说的内容》本文讲的是Alexa如何表达能让人们更容易理解和更好的回应。Alexa能够以自然的对话方式来回应、通知,还能问问题。 在设计Alexa对用户说什么时,我们可以参考以下做法。本章目...

    2018-03-18
  • 原创:用户体验设计入门指南

    如果你正考虑对转化或者落地页的优化,那么理解用户体验设计是必不可少的。如你所知,我们写了很多关于用户或独立访客到达你的网站或者落地页时需要一定的引导和帮助的文章。用户体验设计有助于确保在此过程中最重…

    2015-11-20
  • 如何发现交互设计中的思维盲区

    在一个项目中,交互设计起着承上启下的作用。开发人员根据交互文档搭建初步的程序框架,视觉设计师基于交互设计进行精细的界面设计,之后再交付开发。交互设计方案的改动涉及多方的调整,虽然不及产品需求变更那样…

    2015-08-26
  • 国内大公司的交互设计实习面试经验总结

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

    2018-02-01
  • 阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

    新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。 国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。   1.认识一下JsutinMind里的,这个动态面板理论上…

    2015-03-23
  • 做好B2B产品中的协作设计,需掌握的两大内容

    本文就是着重讨论B端产品中的协作设计。

    2017-05-10
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 面向友好用户体验的交互设计:刘老师课件精简版

    浏览网页、手机拍照上传朋友圈、用自动售卖机购买饮料,我们无时无刻地与周边的产品或服务发生着交互。使用过程中的每一个身心感受就是一次交互体验。随着信息科技的发展,各种新产品和交互方式层出不穷,人们也越…

    2015-11-22
  • 用户体验在人工智能下的改变

    用户体验在人工智能下的改变安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以安全性是产品以及用户体验的基础。效率1.实时性随着计算能力和算法的提升,计算机可以做到实时反馈结果。在以往的重要直播上,视频会显示实时字幕,这是通过给原有直播信号增加5-10分钟的延时,速记员在这短暂的时间内快速整理并输出字幕,但这需要消耗多名速记员的大量体力和脑力。在人工...

    2018-03-24
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12