iPhone VS Android 应用程序界面

iPhone和Android应用程序界面形式不同,而iPhone选择应用程序要易于Android。

iphone_openclose

如当前界面都为手机系统主界面,iPhone选择应用程序的操作为:

  1. 左右平移手势切换页面
  2. 查找到应用程序并点击

android_applications

Android选择应用程序的操作为:

  1. 点击APPlication menu
  2. 上下平移手势滚动页面
  3. 查找到应用程序并点击

首先Android必须在触摸屏精准点击这个约40×40像素的显示区域,而iPhone可以直接开始查找功能。

Android的应用程序排列不分页,程序一多就记不住每个程序所在的确切位置,查找起来比较费力。而iPhone有分页,每页的功能的4×4的排列方式,现在手机上已经装了5页的应用程序,我能基本记住每个功能所在的确切位置,如第二页右上角是“植物大战僵尸”。

这些也影响到切换功能的操作。如已运行某个程序,iPhone切换应用程序的操作为:

  1. 按Home键,关闭程序返回进入应用程序的界面
  2. 左右平移手势切换页面(如果查找的应用程序已在当前界面,此步操作可省略)
  3. 查找到应用程序并点击

Android切换应用程序的操作为:

  1. 按Home键,关闭程序返回主界面
  2. 触摸屏精准点击APPlication menu,由物理按键切换到触摸屏
  3. 上下平移手势滚动页面
  4. 查找到应用程序并点击

iPhone最快可以2步运行新的应用程序,而Android却必须执行以上4步操作,操作的效率低于iPhone。

在应用程序中,iPhone有表视图、标签栏、工具栏和控件列表等标准组件,有利于组织信息、信息扁平化和操作流畅度,而Android的标准组件效果较差。

部分内容来源于lukew’s blog

避免输入

常有用户常抱怨iPhone的输入按键太小,难以点击,手机的输入速度一直是个难点。因此手机交互设计如要出现输入框,要重点考虑如何减少输入,提升用户操作的流畅度。另外,手机的显示能力有限,不能像网页那样提供大量的选项供用户选择,每个界面都必须提供最有价值的信息。

提供选项。对于用户经常输入的字符可以提炼为热门选项,便于用户选择。

比如使用手机购买数字点卡,对于购买量大的的热门点卡(魔兽和Q币等),QVGA(240*320像素)的手机可以提供10个选项。如用户已购买过某类商品时,可替换热门点卡的数据,采用购买记录和热门点卡相结合的方法。数字点卡属于用户重复消费的商品,而机票、电影票和图书不是重复消费的商品,如将此类购买记录放置在首页够用户选择就没有意义。

热门选项的必须够“热门”,如10个选项的点击率为30%,那就可以减少30%的用户输入,那就达到热门选项的目的。但是如热门选项的点击率不到10%,那对于手机有限的显示空间来说,这就是一种浪费。

选项过多则不便查找,还不如直接输入。

控件记忆性。将用户输入的字符记录在输入框中,iPhone的输入框可以加入“书签”功能,可以记住用户输入的所有字符。点击“书签”,进入table view或者自定义弹出框,显示的顺序按输入的时间顺序依次排列。

输入的数据要有个过滤的过程,对于无价值的输入字符不予保存。如手机充值功能中用户填写10位的手机号码,点击“充值”按钮,手机客户端提醒用户输入手机号码格式错误,此时这10位手机号码不应记录。

利用手机系统信息。手机的通讯录包含姓名、手机号码和地址等信息,在填写表格时可以调用这些信息。如当为朋友手机充值时,需通讯录中找到手机号码,然后背下来,打开程序找到手机充值功能再输入手机号码。如能调用手机的通讯录,点击手机号码输入框右边的图标,进入通讯录后选择好友的手机号码即可。

快速查找。iPhone的通讯录有按姓名首字母查找姓名的功能,便于从大量数据中搜索。如购买飞机票要搜索城市,可提供城市便宜首字母搜索的功能,输入“N”,过滤出“南京”和“南宁”等城市。

数据的重复利用。对于同类的字符可以重复利用,如填写机票的乘客信息时,需要输入的手机号码,可以调用手机充值功能中已经输入过的有效手机号码。

如输入无法避免,可引导用户输入,如告知用户输入数据有什么作用。在输入之后提供用户有效的信息,让用户感觉耽搁一些时间去输入是有价值的。

iPad用户体验准则

本文译自《iPad User Experience Guidelines》,供个人学习之用,水平有限,难免有欠妥之处。

iPad用户体验最主要体现在内容和交互:

  • 淡化程序UI,以便用户关注所需的内容。
  • 美观的内容形式,富有真实感。
  • 充分利用设备的性能来增强内容的交互性。

支持所有方位

优秀iPad程序的其中一个重要因素是可以在所有方位上运行。竖向的大屏幕可以满足用户浏览内容的需求(当竖屏幕较小时,用户就会将屏幕旋转为横屏幕,这样一行就可以显示较多的文字)。用户不太会注意最小设备结构minimaldevice frame;使用iPhone时,用户单手握住手机时,屏幕多为竖向显示;而双手使用iPad,屏幕的显示方位并不能确定或者home按键的位置,他们不认为设备有默认方位。这就导致用户期望程序可以在当前方位上运行。所以程序尽量满足iPad各方位的运行要求。

保证以首要内容为重点。当旋转iPad的方位时,如重点显示的内容发生变化,用户会感觉对程序失去控制。

旋转时如何显示辅助信息或者功能。尽管能保证上一条,还要考虑如何显示较为次要的信息。例如邮箱功能中,首要内容时发邮件,次要内容是联系人和收件箱的列表。

5cc5f4aa74742a4472c39af571fc9d96

横屏的次要内容显示在左边的分视图中

7e34a19a48b392473774cdcdfa60287f

竖屏的次要内容显示在气泡框中。

再如,横屏时,一款游戏以长方形显示,当旋转到竖屏时,需要调整屏幕上的显示区域,游戏显示边框的上面或者下面增加显示空间,用于显示辅助信息,而不是垂直拉伸显示区域来撑满整个屏幕。

避免布局变化过大或者无缘由地改变。所有方位中都显示相似的UI布局旋转时尽可能保留信息和文本的原有格式。尤其阅读文本时,重要的是避免旋转之后用户找不到读到哪儿了。如果非要对页面重新布局,可以使用动画帮助用户理解当前页面的变化。例如,当旋转时要必须增加或者移除文本框时,可以选择隐藏动作并在新布局中简单地淡出。为了有助于合理地设计旋转动作,可考虑在真实的生活中是如何和它们交互的。

避免使用UI元素或者定义一个旋转的手势来完成旋转动作。应该是内容随着iPad的旋转而旋转。

为每个显示方位各提供一个启动图片。比如提供1004×768和748×1024的图片来满足两个方位的显示要求。

仔细考虑程序是否可以在所有方位上运行。有些程序只能在横屏或者竖屏下显示,此时:

  • 显示程序为正常显示方式,无论当前iPad是什么方位。避免使用UI元素来告知用户旋转设备。支持180度旋转。
  • 可以特殊处理输入式旋转动作。有些游戏把旋转设备当成操作方式,这时候横竖屏切换时,可不改变游戏的显示方位。

继续阅读iPad用户体验准则

Android vs iPhone icon设计指南

Android

在研究Android的icon设计之前,有必要先了解Android的界面是如何适配多样化屏幕的。

适配性

上一篇博文中提到,由于同一个UI元素(如100 x100像素的图片)在高精度的屏幕上要比低精度的屏幕上看起来要小,为了让这两个屏幕上的图片看起来效果差不多,可以采用以下两种方法:

  • 程序将图片进行缩放,但是效果较差。
  • 为这两个精度屏幕的手机各提供一个图片。

但是屏幕的参数多样化,为每一个精度的屏幕都设计一套icon,工作量大并且不能满足程序的兼容性要求,势必要对屏幕的分级,如在160dpi和180dpi的手机屏幕上采用同一套icon,当这套icon在240dpi效果满足不了设计要求,就需要另做一套稍大些的icon。

在Android 1.5以及更早的版本中,只支持3.2″ 屏幕上的HVGA (320×480)分辨率,开发人员也不需要考虑界面的适配性问题。从Android 1.6之后,平台支持多种尺寸和分辨率的设备,这也就意味着开发人员在设计时要考虑到屏幕的多样性。

为了简化设计并且兼容更多的手机屏幕,平台依照尺寸和分辨率对屏幕进行了区分:

  • 三种尺寸:大,中,小。
  • 三种精度:高(hdpi),中(mdpi)和低(ldpi)。

程序可以为这三种尺寸的屏幕提供默认资源,如有需要,还可以为各种精度的屏幕提供资源。在运行时,系统会根据屏幕布局加载正确尺寸或者精度的图片。

882027856d10e9ea4cf26566334b1e64

Android的icon尺寸

在运行时,程序为最佳显示效果提供了三种方法:

1.图片缩放

基于当前屏幕的精度,平台自动加载任何未经缩放的限定尺寸和精度的图片。如果图片不匹配,平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。例如,当前为高精度屏幕,平台会加载高精度资源(如图片),如果没有,平台会将中精度资源缩放至高精度。

2.自动定义像素尺寸和位置

如果程序不支持多种精度屏幕,平台会自动定义像素绝对位置和尺寸值等,这样就能保证元素能和精度160的屏幕上一样能显示出同样尺寸的效果。例如,要让WVGA高精度屏幕和传统的HVGA 屏幕一样显示同样尺寸的图片,当程序不支持时,系统会对程序慌称屏幕分辨率为320×533,在(10,10)到(100,100)的区域内绘制图形完成之后,系统会将图形放大到(15,15)到(150,150)的屏幕显示区域。

3.兼容更大尺寸的屏幕

当前屏幕超过程序所支持屏幕的上限时,定义supports-screens元素,这样超出显示的基准线时,平台在此显示黑色的背景图。例如,WVGA 中精度屏幕上,如程序不支持这样的大屏幕,系统会谎称是一个320×480的,多余的显示区域会被填充成黑色。

但为了达到最佳的显示效果,最好的方法还是设计多套图片。那就有必要对于所有的屏幕依据精度值进行分级(高中低),之后再设计三套icon:

  • 先为主流的中精度屏幕(HVGA)设计一套icon,确定图片的像素尺寸。
  • 为高精度屏幕将图片放大到150%,为低精度屏幕将图片缩小至75%。
  • 将这三套资源放置到程序的三个文件夹下 :res/drawable-mdpi/ 、res/drawable-hdpi/、 res/drawable-ldpi/。程序在运行时,平台会根据屏幕的精度调取合适的icon。

设计指南

58d1faff469edb0f62de82fb01924b9a

Android标准icon

Launcher Icon是程序主界面上的功能图标,Android对于各个icon的风格有一定的要求:

  • 符合当下的流行趋势,避免过度使用隐喻。
  • 高度简化和夸张,小尺寸图标也能易于识别,不宜太复杂。
  • 尝试抓住程序的主要特征,比如音像作为音乐的icon。
  • 使用自然的轮廓和形状,看起来几何化和有机化,不失真实感。
  • Icon采用前视角,几乎没有透视,光源在顶部。
  • 不光滑但富有质感。

fd0378be097596c861c6f08409452a37

正确和错误的icon

另外,所有的icon都有文字标签,不要在设计时把文字也放到icon中。

Launcher Icon通常是一个较大的标准图标中包含一个小图标,使用一个中性色彩和一个主要色彩,并保持高度的对比,不宜过度饱和。

6cf8ba140c8d0350a8e4be31ff34b952

推荐色值

尺寸和定位

Launcher icons要有多样化的形状和样式,但又要形成统一的视觉风格,其尺寸和定位也用统一:

  • (Full Asset)红色边框为图标尺寸
  • (Icon)蓝色边框是图形尺寸,比图标尺寸稍小,图形之外的空间用于显示阴影和特殊效果。
  • (Square Icon)橙色边框是另外一种图形尺寸。两种类型的图形尺寸可以达到统一的视觉权重。

Icon dimensions for high-density (hdpi) screens:

fb0fb8e2d5df033d57a950cf3338fd2c

  • Full Asset: 72 x 72 px
  • Icon: 60 x 60 px
  • Square Icon: 56 x 56 px

Icon Dimensions for medium-density (mdpi) screens:

f9ba29b2948b2e74c7fbf343a338c829

  • Full Asset: 48 x 48 px
  • Icon: 40 x 40 px
  • Square Icon: 38 x 3

Icon Dimensions for low-density (ldpi) screens:

f48dd36ce33debf971e116c60068e306

  • Full Asset: 36 x 36 px
  • Icon: 30 x 30 px
  • Square Icon: 28 x 28 px

模板

下载Android的标准图标模板,在此基础上绘制icon,后期还要加上阴影效果。

WVGA (高精度) 屏幕的阴影:

f217e7c610052b91c3595f90f872061e

  1. Effect: Drop Shadow
  2. Color: #000000
  3. Blend Mode: Multiply
  4. Opacity: 75%
  5. Angle: 90°
  6. Distance: 2px
  7. Spread: 0%
  8. Size: 5px

另外,还有Menu icon 、Status bar icon 、Tab icon、 Dialog icon 和List view icon的设计教程请查看原文吧。

非常详尽的icon设计教程,一个程序里要放置三套icon,还有Android硬件比较好,不然内存爆掉了。

iPhone

iPhone对于icon的设计建议:富有吸引力和可识别性。由于app软件可供全球的用户下载,所以在设计时,也要考虑到用户不同的文化背景。

bdb7e36abaf4309b6a6a0bbf558d98f5

程序icon的设计:

  • 57×57像素,直角。
  • 无发光效果。
  • 无透明度。

将图片命名为Icon.png,放置在程序的资源包中,iPhone os会自动生成一个icon。

724d8ea7f10a36a9258b6a92ff9a7955

iPhone的icon设计就这么简单,iPhone的屏幕只有320×480像素,所以程序没有适配性问题。

参考文章:

《Icon Design Guidelines, Android 2.0》

《iPhone human interface guidelines》

手机交互设计原则

以下是根据平时设计工作中总结出手机交互设计原则,国内相关资料非常少,只能自己边实践边研究,恐有误,仅供参照。

屏幕

手机屏幕尺寸分为物理尺寸和显示分辨率。

  • 物理尺寸是按英寸对角线计算。
  • 显示分辨率指的是屏幕图像的精密度,是指屏幕所能显示的像素的多少。
  • 显示精度是每英寸上可以显示像素(DPI)。

NOKIA N78的物理尺寸为2.4英寸,显示分辨率为240*320像素;HTC T7278的物理尺寸为2.8英寸,显示分辨率为480*640像素。两款手机显示精度不同,同样100*100像素大小的图片在这两款手机上看到的效果也不同,同样大小的图片在HTC T7278看起来要比NOKIA N78小的多。

f876bdad24bab829295f9a19e8f2f4d3

分辨率种类(不完全统计):

  1. 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
  2. 240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416
  3. 360*480 360*640 400*800 480*320 480*360
  4. 480*640 480*800 480*854 480*864 640*480  800*480

一款软件适配所有分辨率的手机难度较大,势必需要先挑选主流分辨率进行设计,在此基础上适配其他分辨率的手机。鉴于2010年QVGA(240*320)屏幕的市场占有率将达到70%,可将QVGA的手机当成主要的设计对象。

视觉重点自上而下

大多数情况下浏览者看电脑屏幕时都不由自主的以“F”形状的模式阅读网页,而手机屏幕很小,显示能力有限,屏幕上内容尽收眼底,阅读文字时自上而下,因而信息的重要性也是从上到下依次排列。

78b853ea6e3740d869cda090415b0b3b

“F”形状的模式阅读

简洁

手机屏幕的显示能力有限,使用物理按键时,无法向电脑或者触摸屏那些跳跃式操作,必须依次切换控件的焦点,例如手机界面中的翻页程序,用户使用最多的就是“下一页”,将“下一页”放置为第一个控件便于用户操作,方案1优于方案2。

b623e50fc14b131fed76a7143101a07b

界面简洁的途径:

  • 减少控件的数目,使程序的主功能显然易见,引导用户操作。
  • 当内容过多时,要突出重要信息,便于用户快速浏览。
  • 显示出错信息时,不要只告知用户程序出现错误,要提供有用的信息引导用户完成操作。
  • 手机上网的速度慢,一般在6k/s,这就要求页面的内容尽量精简,避免过多的图片。
  • 页面的内容控制在两屏以内,也不能空白。比如当用户支付电影票之后,不能只显示“支付成功”,可以引导用户使用其他功能。

简洁要求文字描述简练,但也要充分利用手机屏幕上仅有的显示空间。例如iPhone的搜索栏,搜索框用于内容搜索,点击之后会显示虚拟键盘,除了左边默认的搜索图标之外,搜索栏还包含其他元素。

b8746a1ff7b17a2c95bfbc0345a63e45

  • 占位符文本。可以提醒用户搜索栏的功能(例如“Search”)或者搜索的内容(如Google或YouTube)。
  • 书签按钮记住用户的搜索内容,如在地图搜索中,书签按钮可以快速地查到已标记位置、最新搜索的内容和联系人。默认在搜索栏上用户没有输入文本或者占位符文本时,书签按钮才可能显示。
  • 清除按钮。可以快速地删除搜索栏中内容,默认在用户在搜索栏中输入文本时,才会显示清除按钮。

任务

当完成一个任务需要多步操作时,可将任务进行拆分成多个子任务,每个界面完成一个子任务。如逻辑清晰并保证用户操作的流畅性,可适当地增加页面跳转次数和点击的次数。如使用e指通客户端购买电影票的任务有:查询电影→选择放映场次→选座→确定订单→支付。

cc4b1ea10f55b3a66939af89b24f188c

关注首要任务也是用户对于程序满意度的重要因素。所以在设计时,要保证界面上的每一个元素的设计都取决于当前首要任务,用户完成任务是否需要这些元素。举个具体的例子:这些信息或者功能对于用户购物是否有帮助呢?如果不是,这些信息或者功能是否在另外的使用情境中至关重要吗?

避免输入

使用标准iso手机按键时,用户平均每分钟输入英文21个单词,在手机上输入将减慢用户操作的速度,过多的文本输入是在浪费用户的时间和精力,如非要输入,需保证“物有所值”,用户会感觉到并没有因为输入而耽误了任务完成。

以下途径可以避免输入:

  • 使用列表选项的形式。
  • 增加控件的可记忆性。

一致性

手机界面上出现的颜色、字体、文字和图片等元素要保持一致,一致性可以使用户知道在哪些地方找到特定的功能或信息,同时还能使得他们知道这些功能的正确使用方法。例如,返回上一级可以表述成:返回,上一级,后退,撤退……对于用户而言,这些文字没有明显的区别,但在手机界面显示时要只使用一种和同一个位置,如iPhone界面中的“返回”只显示在导航栏的左边。

30d6f442c5db3f82b608ccd9b506c802

熊猫看书

使用情境

5c7d2cc8dde8ff02522b0431e56467fa

手机QQ

手机属于移动设备,可以在各种场合使用,如地铁、路边、超市、飞机上等,手机可以切换到飞机模式。手机可以在各个时间段使用,手机QQ也可以切换使用模式:标准模式、室外模式和夜间模式。

操作方式

手机操作有物理按键和触摸等多种操作方式,当同样的程序要在多种操作方式下使用,需顾及手指点击时可点区域的大小。使用物理按键时,按钮可以只是两个字,选中控件即可操作,而iPhone的可点击区域最好不低于44×44像素。

反馈

程序需给予合理的反馈,让知道用户程序当前的状态。

cc492c6907607c537bad6adf5da719c4

比如iPhone的运行指示,运行指示表示后台有程序正在运行,但任务完成时不会提醒用户。当程序无法立即完成联网时,状态栏上会显示运行指示。当程序执行的任务无法立即完成时,工具栏上会显示稍大点的运行指示。运行指示提供了很好的反馈机制,明确地告知用户程序正在运行比告诉用户任务已经完成更为重要。