Android与iPhone应用程序界面布局对比.doc

Android与iPhone应用程序界面布局对比 azero | 时间: 2010-07-30 交互设计 下图是我根据Android和iPhone这两个平台的“生产内容型的应用程序”整理出来的界面布局示例。所对比的4个点，均是两大平台的应用程序常规界面元素。状态栏：Android和iPhone的状态栏均在屏幕顶端的位置，原因无外乎是人的视觉流程是从上到下的。Android的状态栏，具有notification的功用，当应用程序有新的通知，在状态栏左侧显示通知图标，向下滑动即可打开查看通知详情。iPhone的状态栏，包含了活动状态的显示，比如某进程正在运行，会有个转动的动画在这里，但是你不能对这个动画有任何操作。另外，当你在浏览时，轻击iPhone状态栏，也能起到快速至顶的作用。个人认为，Android通知系统做得很不错，貌似后来的Windows Phone7也效仿了此设计。标题栏：Android是纯粹的界面标题栏，这里一般无操作响应。而iPhone的标题栏，承担更多的作用是导航，你能在这里快速后退（Android使用实体按键来后退），或是针对此界面进行一些操作。另外，当你使用iPhone向下浏览界面内容时，双击标题，还起到快速至顶的作用。标签栏：Android的标签栏位于界面标题之下，一般最多5项，在原生的平台界面，视觉效果也较丑。而iPhone的标签栏是明确在屏幕下方的，也是最多5顶。相比于Android，iPhone对状态栏的处理显得很智能。所有显示图标和文字的标签都是相同的宽度并且显示黑色背景。当标签被选中后，它的背景淡化并且标签中的图片变亮。如果应用程序的标签栏包含5个以上的标签，iPhone OS会显示其中的4个并在第5个自动显示为“更多标签”。我曾经思考过，为什么同是标签，Android在上，iPhone在下的问题。到目前，我也只能猜测：Android的设计师认为，标签应该先被看到，并且不能让menu键的菜单项挡到。iPhone的设计师认为，标签是用于切换当前应用程序不同视图的，应该更容易被按到，所以选择在屏幕下方。也因此，我已经完全不纠结所谓的“单手持机”的情境设计，因为以上两平台均无法很好地支持。工具栏：Android的工具栏一般居于屏幕下方，一般是3个按钮。考虑到可点击域的有效性，一般最多也不建议超过5个。而iPhone的工具栏，是与标签栏在同一位置的，即标签栏与工具栏不共存，在屏幕下方，要么是工具栏，要么就是标签栏。好了，对比结束。老实说，我现在并没有在设计新的手机平台，我们公司也不会去折腾新的“某某phone”。因此鉴于我目前站立的只是这个高度，我没有理由去为我的应用程序界面对上述四点进行“创新”。这个对比对于我来说，显得有些无聊。不过，我总是能发现一些“Amix B” 的应用程序界面设计，让我觉得更加无聊。也许你和我一样，在设计时总能听到“XX也是这样的”。言外之意是抄过来吧。于是，糟糕的事情越来越多。真是汗颜。无论是哪一个平台的应用程序设计，我个人始终坚持的观点是：遵循OS的设计规范，熟知平台特性，最好与平台自带的应用程序保持一致的使用体验。不需要惊喜。你的创新，应当用在正确的地方。分享到： 上一篇 | 该文章有10条评论1.georgexsh 2010-07-30 23:31 如果大拇指够长 大约还是可以单手的2.不空 2010-08-04 11:21 “XX也是这样的” -_-| ，听了多少次，再听到也还是汗3.宇义 2010-08-04 11:26 比较认同最后一句话。界面创新带给用户的反而是熟悉操作的成本，没有太大必要。4.htc.cc 2010-08-04 13:46 分析的很好。5.上网本资讯 2010-08-04 15:55 转载走了，网易不也有微博？干嘛写腾讯的6.Harry 2010-08-04 22:41 这个问题纠结过很长时间，首先我说明下我的观点：在界面使用OS的原生控件和布局是制作应用软件最完美的实现方法。这点和您的看法是一致的，因为新界面和控件的用户的学习成本非常之大。另外我的一点想法补充下：虽然使用系统原生控件和布局能够减小用户的学习成本并提高软件的亲和力。但这些是建立在OS本身的设计基础之上，因为使用OS的设计会将软件的学习成本转嫁到OS的学习成本之上。iPhone的用户体验设计已经非常好，所以按照iPhone模式开发的应用，也能够很快被用户所接受。但这点在Android上并不相同，因为Android本身的界面和导航设计非常混乱。单就简单网络应用而言，使用ListView进行列表展示，以及您所画的Android应用程序试图来展示独立的item页面，这是没有问题的。但是对复杂一点的应用程序而言，我们会需要Tab来进行分页，在每页下方提供常用操作的工具栏（工具栏的按钮最好不要超过2个，因为多了会显得比较混乱）。另外，您还忽略了Android程序中其实非常重要的Menu菜单，如果有多余的功能项，可能还必须塞进Menu里面。这一切加上程序本身“应用程序视图”的内容，就已经让一切变得混乱无比。这也是所有第三方Android程序都想尽一切办法优化程序流程的原因。另外个人的一点实际经验贡献下：在默认的桌面，虽然看起来非常简洁，但用户需要 1）上拉AppDrawer打开程序列表；2）点击Menu找一些比较常用的功能；3）长按桌面来弹出菜单进行更换背景以及添加Widget/Icon到桌面的操作；4)拉下Notification来查看系统的新消息；5）左滑和右滑来切换到其他桌面；6）长按图标进行拖拽；7）在AppDrawer打开的情况下，长按里面的程序图标来将图标放置在桌面上；8）点击图标来打开这个应用程序。仔细考虑下，其实这个桌面应用已经是一个变形金刚级别的怪兽了（上滑，下滑，左滑，右滑，各个界面的短按，长按，拖拽）。对比下iPhone的桌面设计，就能看出其中的差距。从文中的图片看出来，您确实花了很大精力来进行分析并完成这篇文章，因此我也尽可能的将我的一些想法写了出来，希望能够互相讨论，共同进步。PS，Android的默认Tab控件是我见过最丑的Tab了，HTC的SenseUI将Tab改到屏幕下面的那个设计非常不错，不过滑动的操作有点恶心。7.azero 2010-08-05 10:26 回复Harry：如你所言，Android目前的界面设计确实令我们感到难堪。这一点，主要是因为它目前为止仍然没有一份官方的、正式的界面设计指南。（那个developers提到的几点UI Guidelines，就算了吧-_-/）我曾经和同事花了一些时间去分析Android原生应用程序的界面设计，结果当然是能发现一些“规律”的。可是说，Android OS的设计师似乎达成了某些一致的观点去做这些界面规划，尽管它没有被写出来，尽管我也不是那么认同某些设计。说起硬件，我讨厌它的menu，因为我们总是无法预知什么时候需要它。并且有的界面menu是不响应的。另外，各个品牌，甚至同一品牌不同型号的Android手机，这些实体按钮还不一致。在这种环境之下，于是各个Android第三方应用程序的设计者都按照自己的想法或根据iPhone作为参考，将界面移植过来。有的，我认为是合理的。而有的，是多此一举的，甚至是极不合理的。这边有另外一张图，相信你看了也会有想法：/8j_QVCmCG3-xrPYkqzTiMg=/1494069176382061827.png话外，我丝毫不反对我极为喜欢iPhone的界面设计，简洁高效的同时，设计中也蕴含了许多“计”，是让我佩服得五体投地的。文章本意并不是批判谁，如果举例不当，欢迎各位指正。更多的是一些期望，我期望我们清楚地知道我们到底是给用户设计OS，还是APP，这点很重要。最后，非常感谢你的回复 :-)我非常愿意我们一起多些讨论共同进步。欢迎加我，Gtalk/MSN/QQ/Email同号：8.Harry 2010-08-06 04:30 回复 azero:确实，目前的Android最缺乏的就是一部大家公认的真正意义上的UI Guideline。Google总是这样，首先按自己的想法做出一套成品，运行无误后丢到市场上进行检验，然后根据反馈的信息来进行改进。打个比方，Android 1.1和1.5的系统控件（比如按钮）的样式是不一样的，所有的图片都进行了重新绘制。目前的系统内置程序都是完完全全的Google风格界面简单，功能实用。他们也确实有将功能简化的本领，至少这些程序的基本功能用起来都是得心应手。如果要做界面分析的话，我感觉Android 1.6以上版本的Market应该算是里面做得最好的，且最值得学习的，我感觉这款程序包含了所有的Android界面设计精髓，包括里面的界面设计，流程，功能，导航等所有方面。苹果公司的iOS系统可以说是艺术品，这点在iPad上体现的淋漓尽致（我只是用手随便点击了几下，就被吸引住并且毫不犹豫的买了一台）。深入使用后，更是发现iOS设计的优秀你甚至于不需要进行界面设计，都可以通过基础页面框架来完成一个“看起来还不错”的程序因为iOS的页面布局和基本控件直接使用是一点问题都没有的。在Android里面就无法做到这些了，因为整体界面采用类似于网页CSS的XML布局，在基本框架完成后，你就得需要设计师来完成一些界面的效果图除非你希望全黑或全白的界面。最起码，在文章中的“Android界面布局”的工具栏背景，是需要设计师来提供背景图片的。（Market中Install/Uninstall的那条工具栏的灰色背景使用的是程序内置的图片；标题栏也是，Android默认界面并没有这种较高的大标题栏，这里使用的其实是Market自定义的一块布局。）从这点来说，如果你想制作一款“看起来还不错”的Android程序，你会需要至少一名设计师。考虑到设计师的加入，看到目前Android程序的界面我们也能大概的理解了吧，毕竟他们是最有创造力的。:)几乎我所认识的所有Android人都对MENU按键毫无好感，目前看来，它的责任实际上是多样并且重复的。MENU主要有2个功能：1）全局功能导航；2）当前界面的附加功能。2者杂合在一起，不仅用户使用起来非常头大，程序在设计时也会杂乱无章。因为你不知道这个功能是对当前界面产生影响还是会把你带到别的什么地方。为了避免这个问题，几乎所有的Android程序都会在界面上安置所有的功能。至少我是这么做的，而且我完全抛弃了MENU的使用。我的这种做法在使用流程上也没有什么问题，因为全局功能导航可以通过BACK和HOME2个按键实现，而我在界面上已经放置了所有的功能选项。如果功能太多怎么办？很简单，cut掉优先级较低的功能。Android并不适合大型的应用，如果2个功能都很重要，制作2款独立应用可能会比1款巨无霸更好。另外，在美国有非常多的用户不会去点击MENU来使用菜单的高级功能。（没有详细的统计数据，但是这个问题确实是进行客服问答的时候问的频率非常高的一个问题）。另外一个有趣的数据是90%的用户（比较老的数据了）不知道Notification可以滑下来。有时间的话，我们可以讨论下HOME和BACK的设计办法，毕竟他们两个都可以完成将用户从程序带到桌面的功能。BACK按键可能需要你多按几下，但是从Android本身的机制看来，可能这样做是比较好的。（实际上以前很多用户问过如何加快手机的运行速度，我就提过这个建议，因为这样退回到桌面会将程序完全关闭）。既然是从程序回到桌面，我们也可以考虑到另外一种可能性：在程序的主界面加入退出按钮来实现退出功能。这些可能在iOS中都不需要考虑，因为iOS将一切都进行了完整定义：唯一的硬体按键将用户从程序中带回桌面，通过标题行的导航按钮来实现返回上一个页面的功能；而且iOS还禁止了一个程序对另一个程序的调用。这些无疑让整个程序设计变得非常简单，虽然有时候使用起来可能感觉不太好，比如程序跳转到浏览器打开一个网页后，你必须退回到桌面，再进入这个程序。Android比较鼓励软件间的互相跳转（至少他的机制让我看起来就是如此）,并且提供了简单的调用方法，这让我们变得非常自由，也非常混乱。最初使用的时候可能会感觉很棒，但它至少会有让手机变慢以及让用户迷失在手机的无尽导航中的问题。总而言之，Android本身就是一个大杂烩，他融入了人们对开源的理念（尽可能让一切功能都变成可能，你捡想用的功能拿去用就得了），因此，它的重复功能很多。所以我们只能挑我们能用的和想用的，慢慢整理成一部可行的UI Guideline。Google目前也在探索，说不定哪天他们就发布UI Guildline的Beta版本了，哈哈。已经加你QQ了，有时间详聊。9.azero 2010-08-06 10:14 精华回复啊我们都期待Android UI GuidelinesPS.我是根据Android2.1的原生界面进行分析的。10.ranwa 2010-08-06 14:03 借Azero的宝地跟Harry唱个“反调”Android原生界面有很多无序的界面组织，不过在某种类型的界面，原生和外来软件在布局规范上倒是有部分的默契。把功能和设计cut掉是Iphone擅长的做法，这是基于其一贯的思路和其硬键条件。Iphone随便丢个小应用就会有人follow，会忽视其实用价值而沉浸其中（仅从很多人买了Iphone却没装过几款软件这点就可见一斑），我们又如何保证？应该说Menu和Back这两个键对于功能稍强的软件来说是个福音，解放了界面中放置他们两个所占用的空间，尤其是Menu，如果菜单项放到界面中，那将是相当壮观和怪异的景象（有些针对单条内容有些针对全部内容有些又和内容没有直接关系）。只是现在Android机型屏幕巨大导致体型巨大，单手持握并操作有些难度（大拇指按到下面硬键的时候很难受）。我倒是认为改变这两个硬键的物理位置反而更重要一些。Menu键用的好会是个宝，不一定要cut掉。完全脱离Menu的设计，单独来看是没有什么问题，不过放弃Menu带来的主要变化就是上述说的需要cut掉一些功能或操作，这就引出了问题在当前界面中，展示出了很少