20130320早读课:三大移动平台上的交互设计差异

标签: 交互体验 产品设计 | 发表时间:2013-03-20 07:15 | 作者:reynold
出处:http://reynold.cn

推荐理由:iOS,Android,WindowsPhone可以说是目前移动互联网上最主流的三个平台,在文中,作者@ 可风f 从布局形式、导航逻辑、应用间联系、多任务、分辨率、设计风格等几个角度比较了三者之间的差异,需要我们在多平台设计时注意。

s11fan

之前早读课也曾分享过 @MoonMonster 的一篇文章,但没有WindowsPhone平台的信息,欢迎延伸阅读→ 20121227早读课:Android与iOS在交互细节上的差异

在设计的过程中,因为这三个平台的不同特性,往往要角色切换,不断的换位思维。可能新手和外行人觉得iOS和Android没什么区别,有的甚至拿Android直接照抄iOS设计就可以了。还有一些人可能对WindowsPhone平台一直觉得魔幻无比,但就是找不到应该如何下手。笔者总结了一下这三个平台之间交互设计上的差异性,在开展交互设计的过程中,必须要注意的问题:

 

一,布局形式的差异

1)iOS经典的“tab bar”

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

1   2

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

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

3

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

4 5

3) Windows Phone的创新

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

6

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

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

1)因为其实这3个栏目是同一页面视图,所以不要将内容放的过多,否则加载会很慢影响效率;

2)对交互设计过程中的排版和视觉提出了很高的要求;(你得提前想好怎么布局好看了)

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

7

(枢轴布局)

 

二,导航逻辑的差异

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

8

在iOS的导航逻辑中,我们可以明显的看出来,整个程序是一页一页的切换,就像一个幻灯片。而返回按钮也就是切换到上一页。所以,iOS的返回控制的是页面。但是Android和WindowsPhone就不是这样了,Android和WindowsPhone是有物理返回按钮的,点击物理返回按钮,控制的不光是一个页面,而且包括了上一步的操作,比如说:

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

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

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

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

9

 

三,应用之间联系的差异

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

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

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

 

四,多任务的差异

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

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

 

五,分辨率的差异

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

10

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

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

 

六,设计风格的差异

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

11

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

Android平台就简单一些了,在整体的布局和交互形式和iOS差不多的情况下,尽量的简洁,呈现一种科幻的风格即可以了。Android平台尽量少用拟物化的动效,因为Android系统对于动画效果的渲染比较差,如果太复杂的话可能会让界面非常的卡。此外笔者推荐一款叫fuboo的应用,它是一款非常符合Android Holo风格又在交互上处理的很有创新的产品。

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

Via: 可风f    作者原创文章并投稿“互联网er的早读课”,转载请艾特作者并注明出处。

如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”QQ群,一同交流每天文章的心得并结识同行。官方2群:74447564,加群密码“职业信息+城市+姓名”,否则不予通过,入群后请修改群名片。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。

相关 [三大 移动 平台] 推荐:

2013移动互联10大预测 不会出现第三大移动平台

- - TechWeb 今日焦点 RSS阅读
2013移动互联网10大预测:不会出现第三大系统(TechWeb配图).   网易科技讯 12月28日消息,美国科技网站CNET今天发布了对2013年移动领域的10大预测,称明年将是更加动荡的一年,行业整合将继续上演,频谱争夺白热化,Windows Phone和黑莓还未能成为第三大移动操作系统.    以下为文章主要内容:.

20130320早读课:三大移动平台上的交互设计差异

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:iOS,Android,WindowsPhone可以说是目前移动互联网上最主流的三个平台,在文中,作者@ 可风f 从布局形式、导航逻辑、应用间联系、多任务、分辨率、设计风格等几个角度比较了三者之间的差异,需要我们在多平台设计时注意. 之前早读课也曾分享过 @MoonMonster 的一篇文章,但没有WindowsPhone平台的信息,欢迎延伸阅读→.

2011 移动平台开发现状

- 山河之外 - 互联网的那点事...
Visionmobile 根据“2011 开发者经济调查报告”(点击这里下载该报告)中的数据制作了一幅信息图,使我们可以一览手机各平台的开发现状. 这幅信息图关注的的手机平台有 Android,黑莓,iOS(iPhone),Java ME,Mobile web,Symbian,Windows Phone.

移动平台上的产品设计

- - 雷锋网
【编者按】本文由 @淘宝UED 团队所撰. 随着智能手机的产生,人们对它们的使用时间与粘性迅速加大,移动互联网的发展越来越迅猛,越来越多的PC端产品开始把注意力集中在转移到方寸之间的屏幕之上时,有如潮水般汹涌. 我们需要的就是适应在移动平台设计一个好的APP,以此获得自己的席位. 当下的移动互联网产业,已经从单纯的以实现单一功能为主,到平台的转移,再到各个APP之间的产业链的形成,还有广告植入的各种运营手段产生各种盈利.

移动端跨平台技术总结

- - CSDN博客推荐文章
曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却因为性能或其他问题而放弃,不得不针对不同平台开发多个版本. 而React Native让跨平台移动端开发在次回到人们的视野中,其成功的原因除了他“一次编写处处运行”,还因为它相比h5等前端技术,有了更接近原生的体验. 为了方便理解,笔者将跨平台技术分为4大流派:.

微信公众平台:移动推送(Push)平台

- - 天涯海阁|Web2.0Share
之前曾经写过一个文章《 移动互联网的未来:基于情境/兴趣的推送》,至今我也觉得这个在未来会是有着巨大想想空间的移动生活方式. 之前其实也有不少初创企业在Push这个领域努力,不过效果却都不好,所以其实本质而言,要构建Push这样的平台,需要吸引大量的内容、媒体、品牌来提供Push内容,而对于内容、媒体、品牌而言,最在意的是这个平台有没有用户,而微信可能已经到了可以去构建这样一个信息推送平台的阶段.

抢滩移动市场,视频平台Brightcove推出跨平台移动应用开发工具App Cloud

- boboboa32 - 36氪
Brightcove公司是专门提供在线视频的平台,该公司目前每月传输的视频流高达7亿(Youtube是10亿),在所有在线视频平台中挤身前五名. 不过,从今天开始,我们可能要改改口了,他不再仅仅提供视频服务而已. Bright今天推出了一条全新的产品线:一个称为Brightcove App Cloud的跨平台移动应用开发工具.

移动app开发者必读:国内主要移动广告平台概况

- - TECH2IPO创见
前几日跟朋友喝酒,他们也想把广告加到他们的应用中,听说我靠这个捞了几笔,就来问,今天有时间了,作为在各大广告平台混迹的“老油条”,我也把我的一些感受和想法罗列成文. 都说今年是国内移动广告平台即将重新洗牌的一年,在这末日来临时,广告平台间的竞争也更加激烈,谷歌Admob开山鼻祖单价低,腾讯聚赢稳定打款周期长,多盟广告较多扣量十分严重,昔日的架势、哇棒已完全没落,酷果、点金等新平台也开始来小打小闹.

研究称Android是最不开放的开源移动平台

- geek2live - Solidot
市场研究公司VisionMobile受欧盟资助,根据开放式管理、包容性、透明度和源代码易于访问等量化和评估八大开源项目的开放程度. 研究报告(需要输入电邮)称,Google的Android是最不开放的开源移动平台. 八个项目从低到高的排名是Android(23%)、Qt(58%)、Symbian(58%,基于闭源前的管理模式)、MeeGo(61%)、Mozilla(65%)、WebKit(68%)、Linux(71%)和Eclipse(84%).