如何分析 iOS,Android 和 Windows Phone 的 UI 设计 iOS和Android的UI设计有什么区别

\u5982\u4f55\u5206\u6790 iOS\uff0cAndroid \u548c Windows Phone \u7684 UI \u8bbe\u8ba1

\u4e0d\u540c\u7684\u8bbe\u8ba1\u89c4\u8303~

\u8bbe\u8ba1\u4e0a\u6765\u8bf4\u8fd9\u4e24\u4e2a\u7cfb\u7edf\u6709\u4e9b\u4e1c\u897f\u8d8a\u6765\u8d8a\u901a\u7528\u4e86\uff0c\u76ee\u524d\u5f88\u591aAndroid\u7684\u5e94\u7528\u504f\u82f9\u679c\u98ce\u683c\uff0c\u4e5f\u5c31\u662f\u8bf4\u57fa\u672c\u90fd\u662f\u91c7\u7528\u4e00\u5957iOS\u8bbe\u8ba1\u6a21\u677f\u6765\u9002\u914dAndroid\u7cfb\u7edf\u3002
\u672f\u8bed\u89e3\u8bfb\u548c\u7cfb\u7edf\u5e73\u53f0\u5bf9\u6bd4
android\u662fGoogle\u516c\u53f8\u5f00\u53d1\u7684\u64cd\u4f5c\u7cfb\u7edf\u3002
iOS\u662f\u82f9\u679c\u516c\u53f8\u7684\u79fb\u52a8\u64cd\u4f5c\u7cfb\u7edf\u3002
\u5bfc\u822a\u65b9\u5f0f\u4e0d\u4e00\u6837
iOS\u7684Tab\u653e\u5728\u9875\u9762\u5e95\u90e8\uff0c\u4e0d\u80fd\u901a\u8fc7\u6ed1\u52a8\u6765\u5207\u6362\uff0c\u53ea\u80fd\u70b9\u51fb\u3002\u4e5f\u6709\u653e\u5728\u4e0a\u9762\u7684\uff0c\u4e5f\u4e0d\u80fd\u6ed1\u52a8\uff0c\u4f46\u6709\u4e9bTab\u672c\u8eab\u53ef\u4ee5\u6ed1\u52a8\uff0c\u6bd4\u5982\u5929\u732b\u7684\u3002\u8fd8\u6709\u65b0\u95fb\u7c7b\u7684\u5e94\u7528\u3002
Android\u4e00\u822c\u653e\u5728\u9875\u9762\u9876\u7aef\uff0c\u53ef\u4ee5\u901a\u8fc7\u6ed1\u52a8\u9875\u9762\u6765\u5207\u6362Tab\uff0c\u5f53\u7136Tab\u53ef\u4ee5\u70b9\u51fb\u5207\u6362\uff0cTab\u591a\u7684\u8bdd\uff0cTab\u672c\u8eab\u4e5f\u53ef\u4ee5\u6ed1\u52a8\u3002\u6bd4\u5982\u8c4c\u8c46\u835a\uff0c\u767e\u5ea6\u8d34\u5427\uff0cQQ\u3002\u603b\u4e4b\uff0cAndroid\u5565\u90fd\u53ef\u4ee5\u6709\u3002
UI\u8bbe\u8ba1\u89c4\u8303\u4e0d\u4e00\u6837
\u6bd4\u5982\u73b0\u5728\u901a\u5e38\u8bbe\u8ba1\u7684\u5c3a\u5bf8\u5bf9\u6bd4\u5982\u4e0b\uff1a
iOS\uff1a 750*1334 \u6216\u8005 1242*2208
android\uff1a720*1280 \u6216\u8005 1080*1920
\u5355\u6761item\u7684\u64cd\u4f5c
iOS\u5355\u6761item\u7684\u64cd\u4f5c\u6709\u4e24\u79cd\uff0c\u70b9\u51fb\u548c\u6ed1\u52a8\uff0c\u70b9\u51fb\u4e00\u822c\u8fdb\u5165\u4e00\u4e2a\u65b0\u7684\u9875\u9762\uff0c\u6ed1\u52a8\u4f1a\u51fa\u73b0\u5bf9\u8fd9\u6761item\u7684\u4e00\u4e9b\u5e38\u7528\u64cd\u4f5c\uff0c\u5982\u5fae\u4fe1\u91cc\u6ed1\u52a8\u4e00\u6761\u5bf9\u8bdd\uff0c\u4f1a\u51fa\u73b0\u6807\u8bb0\u672a\u8bfb\u548c\u5220\u9664\u3002
Android\u4e2d\uff0c\u5355\u6761item\u7684\u64cd\u4f5c\u4e5f\u6709\u4e24\u79cd\uff0c\u70b9\u51fb\u548c\u957f\u6309\uff0c\u70b9\u51fb\u4e00\u822c\u8fdb\u5165\u4e00\u4e2a\u65b0\u7684\u9875\u9762\u3002\u957f\u6309\u8fdb\u5165\u4e00\u4e2a\u7f16\u8f91\u6a21\u5f0f\uff0c\u53ef\u4ee5\u5728\u91cc\u9762\u8fdb\u884c\u6279\u91cf\u548c\u5176\u4ed6\u4e00\u4e2a\u64cd\u4f5c\uff0c\u6bd4\u5982\u5220\u9664\uff0c\u9876\u7f6e\u7b49\u7b49\u3002\u6bd4\u5982\u5c0f\u7c73\u7684\u77ed\u4fe1\u9875\u9762\uff1b\u957f\u6309\u4e5f\u53ef\u4ee5\u5f39\u51fa\u60c5\u5883\u64cd\u4f5c\u680fdialog\uff0c\u8fdb\u884c\u64cd\u4f5c\uff0c\u6bd4\u5982Android\u7248\u7684\u5fae\u4fe1\u3002
\u4f8b\u5916\u7684\u662f\uff0cAndroid\u91cc\u9762\u4e5f\u53ef\u4ee5\u6709\u5355\u6761item\u7684\u6ed1\u52a8\uff0c\u5982\u65b0\u7248QQ\uff0c\u8fd9\u79cd\u6bd4\u8f83\u5c11\u89c1\u3002AndroidL\u7684\u77ed\u4fe1\uff0c\u53ef\u4ee5\u6ed1\u52a8\u8fdb\u884c\u5f52\u6863\u3002\u5927Android\u5565\u90fd\u53ef\u4ee5\u6709\u3002
\u5b9e\u4f53\u952e
iOS\u53ea\u6709\u4e00\u4e2a\u5b9e\u4f53\u952e\uff08\u97f3\u91cf\uff0c\u7535\u6e90\u4e0d\u7b97\u54c8\uff09\uff0chome\u952e\uff0c\u8fd9\u4e2a\u952e\u6709\u8fd9\u4e48\u51e0\u4e2a\u529f\u80fd\uff1a
1\u3001\u6309\u4e00\u6b21\uff0c\u56de\u5230\u684c\u9762\u3002
2 \u3001\u53cc\u51fb\uff0c\u51fa\u73b0\u591a\u4efb\u52a1\u754c\u9762
3\u3001iOS8\u91cc\u9762\uff0c\u8f7b\u89e6\u4e24\u4e0bHome\u952e\uff0c\u8c03\u51fa\u5355\u624b\u6a21\u5f0f
4 \u3001\u6307\u7eb9\u89e3\u9501
Android\u6709\u56db\u4e2a\u5b9e\u4f53\u952e\uff08\u73b0\u5728\u5f88\u591a\u88ab\u5c4f\u5e55\u4e0a\u7684\u865a\u62df\u952e\u4ee3\u66ff\uff0c\u4f46\u529f\u6548\u662f\u4e00\u6837\u7684\uff094.4\u4e00\u4e0b\u7684\u5206\u522b\u662fback\u952e\uff0chome\u952e\uff0cmenu\u952e\uff0c\u548c\u641c\u7d22\u952e\u30024.4\u53ca\u4ee5\u4e0a\uff0c\u662fback\u952e\uff0chome\u952e\uff0c\u591a\u4efb\u52a1\u952e\u3002Android\u539f\u751f\u662f\u8fd9\u6837\uff0c\u7ecf\u8fc7\u4f18\u5316\u7684Android\u5c31\u4e0d\u4e00\u5b9a\u4e86\uff0c\u6bd4\u5982\u9b45\u65cf\u7684smart bar\uff0c\u6839\u636e\u5f53\u524d\u9875\u9762\u60c5\u666f\u53d8\u5316\uff0c\u4e0d\u8fc7\u86ee\u597d\u7528\u3002
Android\u7684back\u952e\uff0c\u5728\u5927\u90e8\u5206\u60c5\u51b5\u4e0b\uff0c\u548c\u9875\u9762\u4e0a\u7684\u8fd4\u56de\u529f\u6548\u4e00\u6837\u3002\u4e0d\u8fc7\uff0cAndroid\u7684back\u952e\u53ef\u4ee5\u5728\u5e94\u7528\u4ef6\u5207\u6362\uff0c\u8fd8\u53ef\u4ee5\u8fd4\u56de\u4e3b\u5c4f\u5e55\u3002\u8fd9\u4e2aiOS\u91cc\u9762\u7684\u952e\u4e0d\u80fd\u5728\u5e94\u7528\u95f4\u76f4\u63a5\u5207\u6362\u3002
\u6d6e\u7a97\u8bbe\u8ba1\u5143\u7d20\u4e0d\u4e00\u6837
Android\u91cc\u53ef\u4ee5\u770b\u5230\u5404\u79cd\u6d6e\u7a97\uff0c\u6d41\u91cf\uff0c\u6e05\u7406\u5185\u5b58\u7b49\u7b49\u3002iOS\u6682\u65f6\u8fd8\u4e0d\u652f\u6301\u8fd9\u6837\u7684\u6d6e\u7a97\u3002\u8d8a\u72f1\u7684\u8c8c\u4f3c\u53ef\u4ee5\u3002
iOS\u548cAndroid\u7684UI\u533a\u522b\u4e03\uff1a\u56fe\u6807\u5c3a\u5bf8\u548c\u547d\u540d\u89c4\u8303\u4e0d\u4e00\u6837
1\u3001iOS\u548cAndroid\u624b\u673a\u7684APP\u56fe\u6807\u5c3a\u5bf8\u89c4\u8303\u548c\u56fe\u6807\u547d\u540d\u89c4\u8303
2\u3001\u5bf9\u6bd4PC\u3001iOS\u3001Android\u7b49\u7ec8\u7aefAPP\u7684\u4ea4\u4e92\u8bbe\u8ba1\u7684\u5dee\u5f02\u5316

iPhone、Galaxy S3 以及 Lumia 920是市场上如今最引人注目的三款智能手机,正好对应iOS、Android及Windows
Phone三大平台,尽管三大操作系统在市场份额、出货量以及用户认可方面都有着不小的差异。

但更能我们兴趣,更有讨论价值的其实是这三大平台在设计方面的差异,这不仅最终决定着用户的体验,也决定了开发者的参与热情。

这篇文章从包括变局、导航逻辑、设计风格等六大方面的差异对三大平台的交互设计进行了较为深入的分析和讨论,极具参考价值。

一,布局形式的差异

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 分辨率分为 320x480,640x960,640x1136,Windows Phone
分辨率分为
480x800,800x1280,800x1136。虽然看起来也蛮多的,但是界面的比例基本上没有什么变化。所以对于交互上的布局影响并不是很大,视觉设计师也可以通过脚本缩小裁图简单的解决问题。

六,设计风格的差异

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

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

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

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

从界面美观度、易用性、实用性方面分析

扩展阅读:loropiana官方旗舰店 ... edropletnfc安卓下载 ... 安卓到ios一键转移 ... android系统下载安装 ... airdroid手机控制手机 ... ios下载安装 ... 苹果airdrop怎么打开 ... android最新版本 ... android下载软件app ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网