交互设计的那些事:Android、iOS和WP平台的六大差异

标签: 网页设计 交互设计 PS 教程 & 设计文章 经验 用户体验 | 发表时间:2013-04-27 14:58 | 作者:waynexie
出处:http://www.uisdc.com

 

iPhone、Galaxy S3 以及 Lumia 920是市场上如今最引人注目的三款智能手机,正好对应iOS、Android及Windows Phone三大平台,尽管三大操作系统在市场份额、出货量以及用户认可方面都有着不小的差异。但更能我们兴趣,更有讨论价值的其实是这三大平台在设计方面的差异,这不仅最终决定着用户的体验,也决定了开发者的参与热情。来自微信公众帐号“互联网er的早读课”的 这篇文章从包括变局、导航逻辑、设计风格等六大方面的差异对三大平台的交互设计进行了较为深入的分析和讨论,极具参考价值。 一,布局形式的差异 1)iOS 经典的“tab bar”

在 iOS 应用内如果要切换不同的模块,或者页面内要切换不同的栏目,往往都会用到“tab bar”这一形式的控件。这个经典设计从 iOS 早期沿用至今,大部分 iOS 应用都是这样设计的。当然,iOS 本身是很包容的,最近也很流行抽屉式导航。但是 tab bar 一直是最受欢迎也最好被用户认知的方式:

2)Android 提供了 2 种视图控制方式

在 Android 4.0 规范出来之后,Android 提出了 2 种视图控制方式,一种是直接在导航栏的标题下加入一个触控按钮,点击后会弹出切换栏目的菜单(图中 2 标注的位置)

比如日历应用点击后可以切换不同的视图,另外一种是直接在导航栏的下面加入了一个视图控制栏(下右图中 2 标注位置),和 iOS 的 tab bar 很像,不过是仅放在了上面,而且提倡支持手势滑动切换:

3) Windows Phone 的创新

Windows Phone 与上面两个平台就差距很大了,因为 Windows Phone 独特的 Metro UI 提倡回归传统的阅读体验,像浏览报纸和杂志一样浏览手机上的内容,更关注与内容而不是修饰,所以 Windows Phone 整体都给人一种像在看杂志的感觉。Windows Phone 的视图控制通过一种叫做“全景视图”的方式展开(下图)。

实际上,4 个视图的内容是在一个页面上的,而且是一个页面同时加载的。用户的手机默认只显示第一屏的内容,通过滑动把后面的内容拉出来。

这种视图方式很创新,而且方便阅读,不得不说浏览的体验好了很多。但是需要注意的是:

  • 因为其实这3个栏目是同一页面视图,所以不要将内容放的过多,否则加载会很慢影响效率;
  • 对交互设计过程中的排版和视觉提出了很高的要求;

另外,Windows Phone 还提供了一种叫做枢轴的方式,枢轴和 iOS 的 tab bar 相差不是很大,只不过完全是通过滑动来切换栏目的:

(枢轴布局)

二,导航逻辑的差异

大家都知道 iOS 是没有实体返回按键的,所有返回都是通过导航栏的 back 按钮来完成。

在  iOS的导航逻辑中,我们可以明显的看出来,整个程序是一页一页的切换,就像一个幻灯片。而返回按钮也就是切换到上一页。所以,iOS 的返回控制的是页面。

但是 Android 和 Windows Phone 就不是这样了,Android 和 Windows Phone 是有物理返回按钮的,点击物理返回按钮,控制的不光是一个页面,而且包括了上一步的操作,比如说:

进入页面 A,点击文本框弹出键盘。那么点击返回按键就是收起键盘。

所以 Android 和 Windows Phone 的返回逻辑是按照时间流来判断的,而不仅仅是页面,返回按钮控制的是动作。

需要特意提一下的是:Windows Phone 的返回逻辑不单限于应用内,还影响到应用之间。也就是说你当前正在桌面,再点击一次 back,就会进入你上一次打开的应用。

另外在 Android 4.0 开始,提出了一个向上的概念,就是导航栏标题前面的一个小箭头,点击这个箭头,是回到该页面的上一个层级:

三,应用之间联系的差异

众所周知,iOS 是一个封闭的系统,而 Android 是一个开放的系统。

我们可以比喻 iOS 每一个应用都是一个小房间,每个应用都在自己的房间里做自己的事情,互相之间不进行任何来往。而 Android 则是一个大大的办公区,每个应用虽然也有自己的工位,但是可以互相串门或者借用东西,而 Windows Phone 则遵循着和 iOS 差不多的方式。到了 iOS 6 的时候可以支持应用直接互相跳转了,但那也仅限于你跳出去了,就不再回来了,也就是说到了那个房间你就是那个房间的人了,与之前的房间没有关联了。

这样的差异意味着,iOS 和 Windows Phone 应用的权限变得很低,身为应用的你既不能修改系统的一些属性(除非越狱了),也不能修改其他应用的内容。而 Android 的一款应用不但可以控制系统的一些操作,还可以控制其他应用执行某些特定的操作。

这种差异会让 Android 上的应用设计有了更多的可能,身为设计师的你可以根据这一特性设计很多不错的功能,比如系统美化或者系统优化,杀毒,拦截电话等功能,而 iOS 和 Windows Phone 就不能。但是这也让 Android 系统面临了很严峻的安全问题,所以Android上各种优化和杀毒软件很流行。

四,多任务的差异

多任务的差异用一句话来形容就是:iOS 和 Windows Phone 都是假的多任务,而 Android 是真的多任务。

如果你设计的应用有下载,那么 iOS 和 Windows Phone 切换到后台下载就被暂停了,而 Android 不但不会暂停,你还可以设计一些偷偷在后台运行的功能!

五,分辨率的差异

亲,你知道Android现在有多少种分辨率吗?

(TECH2IPO 注: 此数据图显示的是 2011 年 Android 手机状况,现在,相关问题已经有所缓解和减轻。)

适配一直是 Android 很头痛的问题,身为前端往往要为不同的分辨率调效果而保证界面不会变形和模糊。而分辨率问题不仅仅影响视觉这一块,对交互设计也有很大的影响。因为这些手机往往屏幕比例也是不同的,你需要考虑不同的长宽比下,你的界面布局应该是怎样的。 所以在设计 Android 的时候,你不能要求把界面布局写死,应该尽量保证每个控件都是浮动的,而且自己能评估出各种古怪的布局下的效果。

iOS 和 Windows Phone 就会好很多。iOS 分辨率分为 320×480,640×960,640×1136,Windows Phone 分辨率分为 480×800,800×1280,800×1136。虽然看起来也蛮多的,但是界面的比例基本上没有什么变化。 所以对于交互上的布局影响并不是很大,视觉设计师也可以通过脚本缩小裁图简单的解决问题。

六,设计风格的差异

设计风格是这 3 个客户端自己独特的个性,设计风格不单影响的是视觉设计的层面,对交互设计也非常的重要。尤其是在考虑动效,拟物化交互的时候需要重视。iOS 的设计风格偏向拟物化风格,这个拟物化不光是视觉上做出很多拟物的小按钮小控件的,为了配合视觉,你往往在交互上也可以加一些生动有趣的内容。

比如说像最新的 Path,进入商店时遮阳板会有一个收起的效果,小卡片也会根据重力感应而摇摆。如果交互上就能体现出平台的设计风格的话,无疑会非常讨好用户,增加产品细节上的亮点。

Android 平台就简单一些了,在整体的布局和交互形式和 iOS 差不多的情况下,尽量的简洁,呈现一种科幻的风格即可以了。Android 平台尽量少用拟物化的动效,因为 Android 系统对于动画效果的渲染比较差,如果太复杂的话可能会让界面非常的卡。

Windows Phone 平台则有着很大的不同,Metro UI 的理念要求设计者更多的考虑如何展现内容,使用平滑的过渡动画。而且还对设计者的排版和平面设计提出了一些考验。所以建议交互设计的人好好读读WindowsPhone界面设计准则,并且平时就积累一些Windows Phone界面的视觉界面感觉,不然视觉设计师很可能会埋怨你哦!

 

原文地址: http://iphone.myzaker.com/l.php?l=51496fd27f52e9df63000019

 

================ 关于优设网================
“优设网uisdc.com”是一个分享网页设计、无线端设计以及PS教程的干货网站。

特色推荐:
设计讲座:定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音(YY频道: 15335158)分享实战经验。
设计微博:我们拥有粉丝量25万的人气微博 @优秀网页设计 ,欢迎大家关注及时获取设计资源。
设计导航:史上最赞最全面的设计师网址导航: http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计  微信号:【youshege】优设哥的全拼
您还可以扫描下方二维码快速添加:

youshege

优设哥向您推荐:

iOS设备上高效演示APP原型的方法总结

用PS设计APP过程中改进IOS设计流程的30个密诀

6款微博平台“返回顶部”按钮设计

Android安卓平台的切图小贴士

12个为iOS应用设计提供灵感的好网站
无觅

相关 [交互设计 android ios] 推荐:

PC、iOS、Android通用的交互设计

- - 互联网的那点事
本文作者 @一大坨黄 供职 @微博UDC设计中心. 近年来,在技术方式,网页自适应的兴起、微软Win8系统的发布,都在试图解决一个问题:让同一产品能在平板、PC等多平台下同时使用. 由此可见,替换掉冗余的多版本开发模式,发展通用性,是未来产品发展的一种趋势. 因此,设计师也要在不同的平台规范和习惯中寻找共同点.

PC、iOS、Android等多平台通用性交互设计思考

- - 微博UDC
作为一名普通用户,吐个槽先~. 虽然不是5岁的美国小萝莉,不过我还是受够了各种操作平台的分类,以及浏览一个网站或者使用一款产品要学多个版本的行为. 各种PC版、iPhone版、iPad版(所谓的HD)、Android版… 我想说,版你妹呀…. 针对多平台这一问题,很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个Mobile版本,或者iPhone 、iPad版本.

交互设计的那些事:Android、iOS和WP平台的六大差异

- - 优设(UISDC)
iPhone、Galaxy S3 以及 Lumia 920是市场上如今最引人注目的三款智能手机,正好对应iOS、Android及Windows Phone三大平台,尽管三大操作系统在市场份额、出货量以及用户认可方面都有着不小的差异. 但更能我们兴趣,更有讨论价值的其实是这三大平台在设计方面的差异,这不仅最终决定着用户的体验,也决定了开发者的参与热情.

Android界面与交互设计原则

- - 人人都是产品经理
在 iOS HIG已经强大经典了N年之后,Android终于推出了一套比较系统的 HIG(大概是为了配合Android 4.0 Ice Cream Sandwich). 仔细比较两套HIG的“设计原则”部分,发现完全是截然不同的两种风格. iOS HIG走的是更专业型的路线,描述严谨且有不少的专业词汇(比如Metaphors、Consistency之类的).

MIUI评测:iOS身,Android心

- gaochao - 互联网的那点事
百度要推出自己的移动操作系统,江湖传闻叫“秋实”. 我们这里老调重弹,回过头温习一下同样基于Android的人气很高的MIUI. MIUI是一款很养眼的Android ROM,借鉴了大量的iOS审美元素. 如果你怀念或向往iOS的外观和感觉,MIUI绝对是不二之选. 以下是笔者在HTC Desire上运行MIUI的体验报告.

客觀評 Android、iOS、WP7

- chitsaou - Trawler Computer, FM207.NET
半年多前,我曾經評價過 Android 和 iOS 的市場發展,雖然發展至今,文章內容可見反映過去,但未來卻變得不可預料. 一年多前,Android 並未像現在這樣熱起來,所以我覺得,盲目支持 iPhone 的一群「果粉」,他們很愚蠢,但時至今日,支持 Android 陣營的用家似乎更盲目. 故此,希望能以客觀的角度分析一下各移動操作系統的利與弊,同時希望各位不要盲目喜歡自己的手機,要多加以分析,以下逐點評論.

iOS 7已占iOS系统60%,Android相形见绌

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  现在已经有几亿的iPhone、iPad和iPod touch设备被用户使用,而用户们最近的一个一致举动,莫过于安装iOS 7了. 在上个星期三,苹果发布了其最新的移动操作系统iOS 7,而截至9月23日,iOS 7的安装率已经达到了60%. 根据网络公司的数据显示,在9月19日这个数字已接近了40%,而到这周一中午,iOS 7的装机率已经达到了60%.

如何在iOS与Android间移植APP

- plidezus - 雪鸮的啁啾
除了像”I am rich”这种定点打击苹果烧包族的APP外,大多数应用都会尽量覆盖包含尽可能多的用户. 这就需要考虑在iOS和Android两种主流操作系统间移植的问题. 如果为各个平台量身定做界面,就能让用户利用以往的使用习惯快速学习. 但为多个平台设计各异的界面毕竟是需要工作量的. 如何才能在跨平台移植的时候只做那些最有必要的工作呢.

LibreOffice将发展Web、iOS和Android版本

- Heng Yang - cnBeta.COM
OpenOffice.org的分支项目LibreOffice的开发方The Document Foundation今天宣布将尝试在Web浏览器和iOS、Android移动设备上运行这一办公软件,预计这些产品将在2012年年底到2013年初正式发布.