2011年手机产品设计趋势(1):精致实用的界面

首发于MDchina.org

前言

2010年底Apple在线软件商店App Store中的软件数量超过30万个,而Google在线软件商店Android Market里的软件数量已经突破10万,Windows Phone 7也于今年10月正式发布,随着手机硬件造价的降低和应用数量的上升,移动互联网的发展前景普遍被看好。但是移动互联网没有固定盈利模式之前,如何依靠产品优秀的用户体验侵占手机桌面和用户琐碎的时间是众开发者们面临的主要问题之一。

汇总本年度手机应用程序和热点问题之后,不难看出其中的趋势性特征,如精致的界面、操作体验、基于硬件的应用和消息推送等问题。可以预计的是,在2011年的产品设计中这些特征会逐渐得到强化。

精致实用的界面

iPhone2

自从iPhone 4视网膜屏幕(Retina Display) 发布,成为迄今为止在移动设备上能见到的最细腻、显示细节最清晰的屏幕,326显示精度比普通印刷品还要高,而以往普通手机的96像素,Android平台各种手机在120-240像素区间内,iPhone 4之前的屏幕也只有164像素。

clock

高精度意味着同样大小的屏幕上可以显示更多的细节,这对界面视觉设计要求也更高。出色的设计也能让你的应用程序脱颖而出,同时美观的界面看起来更好用。

2-81 m9

为了保证视觉效果统一性,各产品都不遗余力地弥补终端差异性,wap网站通过识别终端分辨率和平台显示不同的视觉效果,客户端也会在Android平台达到屏幕完美适配。

多主题

weico2

在安装包容许的情况下,为应用程序设计多套主题也是设计师满足用户多样化需求的手段之一。优先满足主体需求,也能照顾到用户的个性化需求。

控件

设计师也不再满足于系统提供的看起来千篇一律的标准控件,特别是Android平台黑乎乎的表格视图让人难以忍受。后半年新出的应用程序大多采用更为美观的自定义控件,提升用户体验的同时注重产品的品牌形象。

m4 m3

根据产品的实际情况修正的自定义控件,也能带来操作上的便利。如可爱的小地陪没有使用Android的下拉框控件,虽然单栏一次无法展现多个选项,但是去掉了弹框能减少了操作步骤和等待时间,而小米分享将引入网页和iPad中的气泡框。由于设计经验有限,需要避免网页设计的照搬,设计适用于手机的控件是交互设计们需要关注的问题。

字体

spiekermann15

早期Nokia为了满足低像素手机的字体显示要求,设计了点阵式字体Nokia Sans,为了让用户一眼就能识别出Nokia,该字体一直沿用至今。但手机渲染字体的能力已经显著提升,针对高分辨率设计的Android的Droid和iPhone的Helvetica更能适应显示要求。

ziti

但是界面中过多的细节也会有损用户体验,如像素提升一倍,对界面中的文字的阅读享受并没有相应成倍提升,相反字体过于锐利反而会干扰阅读,造成视觉疲劳,甚至不如低精度的电子书。现在还处在手机界面设计的早期,还没有像网页设计那样多种设计风格,也正如现代主义那样,“形式追随功能”的功能主义特征仍是先期产品设计的原则,避免过度设计。

布局

wp77

顶部标题栏、中部正文和底部工具/标签栏是常见的手机界面布局,根据操作情境在调用合适的控件。一方面设计要关注如何让界面更为巧妙地布局,如在标题栏中显示Tab分栏和充分利用表视图,另一方面似乎如何巧妙都不满足用户的屏幕显示尺寸的需求,主体部分最大化已经在部分应用程序和操作系统中有所体现。如随着操作Android自带浏览器chrome掩藏地址栏,而Windows Phone 7掩藏状态栏。

尺寸

95ca_Twittergoldenratio_thumb

在网页设计中栅格系统和比例关系能大大提高网页的规范性,页面中所有组件的尺寸都是有规律的。

golden

图片来自Tencent CDC Blog

如上图的布局尺寸主要包括比例和模数尺寸,界面设计中不存在孤立的元素。除了色彩之外,布局和采用有联系的模数尺寸和建立界面元素的联系,看起来更为协调,,克服视觉的不确定性。但一方面手机端界面设计还需要考虑手指点击,另一方面手机屏幕统一程度低,同样的设计在各个终端看起来不尽相同,规范性尺寸设计较低。但是未来如条件容许,科学精确性设计是必然化趋势。

Android与iPhone应用程序界面设计的差异性

elya妞阿智分析时偏重于硬件和界面布局,问题普遍存在,有必要重新分析。分析问题前,先确认几个前提。Android的自身版本分裂严重,主要体现在屏幕分辨率多样化带来的界面适配问题、按键布局混杂和不同版本对于API的修改导致的程序系统兼容性,而iPhone则保持很好的统一性。

android

iphone

两个平台视觉风格、开源代码、绘制界面成本和自定义标准控件的不同,比如两个平台的图标,虽然都是以前视图为主,但是iPhone的图标看起来亮晶晶,Android图标则比较朴素。

goo goo2

所以Google Books在两个平台视觉上不同也纯属正常,iPhone提供了非常方便的表视图(table view),适合于处理像微博那样的数据流,Android实现同样的视图成本较高,需要重新定义控件,更不会愚蠢到为了同样效果把iPhone的实现效果改的和Android一样。

opera opera2

如果是一个几乎不用系统自定义的控件,比如OperaMini,各平台效果几乎完全一样,一方面设计风格所致,另一方面是Android可以实现iPhone上全触摸的操作效果,也就是兼容iPhone的界面设计。

视觉风格上不好评价对错,但是操作上可以。比如把iPhone上优秀的设计移植到Android上,提升了操作效率,这也是有益的,甚至是第三方应用程序在帮助操作系统解决差异性问题。对于控件和信息架构方式,两个平台并不存在互斥性。

某位兄台谈起项目时提到之前两个平台做的太相似,现在又改回来了,其实没有必要。设计上以效率优先,即使耗费成本,也是值得做的。另外很少有用户同时使用Android和iPhone两部手机指责设计师做的两个不一样。

1qq 2qq

如果效率上没有差异,仅是布局上不同,倾向于遵从各平台的使用习惯。如果之前是iPhone的用户,现在使用Android感觉不习惯,也属于平台问题,设计上还注意平台的差异,避免制造新问题。比如个人第一次使用时,会把左上角和右下角图标当成返回。因为和手机的物理返回键太近,右界面仍会经常操作错误。

注:1.个人使用习惯,不具有普遍意义。2.使用豌豆荚带外壳截屏时,图中有“使用豌豆荚截屏字样”,还要PS掉,其实Andorid状态栏已经有豌豆荚的小图标。

手机用户使用模式

首发于MDchina.org

之所以用“使用模式”,是从《搜索模式》中得到灵感,书中将搜索比做一次对话,是一个反复和互动的过程。不仅仅是回答问题,首先展开试探性的对话或者参考咨询,更好地理解用户需求。在个人看来,交互是用户和手机的信息交流,有输入和输出过程,只不过对象不同而已,但是用户需求是相似的,在电脑上有阅读、查询和娱乐的需求,在手机上同样存在。用户通过电脑寻找信息,形成特有的模式在手机端也有表现,即使两者存在使用情境和硬件方面的差异。

用户在搜索前需要预备好关键词,然后再打开搜索引擎进行搜索,是一个带有目的的主动使用过程,但是用户使用过程可以细分为:

  • 浏览式的多答案搜索,机会主义搜索者凭本能行事,他们只有关于所要查找的内容的模糊概念,并基于找到的结果来改进搜索。
  • 查找式的单一答案搜索,专注的搜索者搜索特定问题的单个答案。
  • 研究式的深入了解搜索,严格的研究者寻找对某个特定主题的深入了解。

因为手机输入麻烦和页面信息量有限等问题,研究式搜索在手机端比电脑端有所减少,对内容的查准率要求更高,而不是像电脑端平衡查准率和查全率。当电脑端的内容移植到手机上时,趋向于轻量级,不要过分期望用户会深入使用,这也是为什么Lukew提倡优先为手机设计(Mobile First),有限的显示空间和用户使用应用程序的模式强迫设计师抓住主体内容。

查找式的搜索是用户带有目的的主动使用,这在手机端占据的比例会更高。比如找到去某个地方的乘车路线,当这个任务完成之后,用户可能就停止使用应用程序或者浏览器。在手机开锁前带有较为强烈的使用目的,这时是快速启动应用程序对用户非常有帮助,比如点心操作的平移手势达到的目的是开锁+选择功能。

article_WindowsPhone7

而Windows Phone 7更为极端,假象用户非常繁忙,手机开锁之后就能看到短信数、电话数和各种SNS和应用程序推送的消息,不需要像iPhone那样翻看各个应用程序在决定是否继续使用。从界面、动画到Metro风格的图标设计都是为高效实用服务的。仅目前而言,这种思路并不适合大部分用户,微软又超前设计了。

虽然iPhone也有推送消息,不过设计的比较难用,打断用户原有操作,推送数分散在各个界面不便让用户查找。所以在使用iPhone时存在不少机会主义成分,开锁之后可能还没决定使用哪个应用程序。

而Android桌面插件相对实用,比如来邮件和微博插件,主界面上切换到插件页面直接查看内容,应用程序处于待实用和时时更新状态,虽然会耗电但省去打开应用程序的过程,而iPhone的多任务运行在后台不可见状态,ios4之后只是方便了应用程序之间的切换。

用户使用手机的时间很零散,比如等待公车和做地铁,处于无聊状态,拿起手机随意把玩,或许被新闻或者微博吸引一会的注意力。用户此时是无目的的随机使用手机。这也是为什么要求手机应用程序设计的功能简单,打开应用程序就能呈现用户感兴趣的内容和功能并留住用户,否则用户会关闭切换到其他应用程序,这和其他三种行为模式都不相同的。

这些理论可以用于解释一些操作系统和应用程序的设计思路,未来的设计趋势也掩藏其中,就不在这继续深入了。

相关资料:[PPT]Search & Discovery Patterns

16Fun用户体验

首发于MDchina.org

16

16Fun(一路Fun),类似于My Twon,也是一款基于地理位置的社群游戏。游戏中你可以通过虚拟报到、消费、买卖房产、等游戏方式与在现实生活中的商家、热门地点、好友互动。整套程序确实像大富翁那样占房子、升级房子和收过路费等等,趣味性还可以。还未深入使用,发现界面设计中也有不少需要改进的细节。

IMG_0017 IMG_0019

登录界面需要选择任务再输入,而不是以登录/注册为主,对比色看起来挺别扭。在输入时,ios会根据程序对输入框的属性定义调整为合适的输入键盘,比如在输入邮箱时,虚拟键盘显示输入邮箱常用的@和标点。

IMG_0020 IMG_0021

其实程序也可以定义部分按键,如右下角的“return”没有意义,在淘宝登录界面会相应调整为“next”和“done”(这一条由Fish小朋友贡献)

IMG_0022 IMG_0024

根据使用情景对虚拟键盘的调整便于输入和减少键盘切换,将界面上的操作集中在键盘上。有些应用程序也会把界面中工具栏放置上虚拟键盘上方,只有需要的时候才会出现工具栏,减少占用界面上的空间。

IMG_0029 IMG_0030

更有甚者将系统控件重新定义,与控件面板(action sheet)等标准控件达到的使用效果是相同的。

IMG_0027 IMG_0028

使用中对16fun的操作和信息架构颇为疑惑,一时没搞明白怎么玩,提示信息帮助过于零碎。My town在初次使用时会显示使用教程,这在游戏设计中比较普遍,对于应用程序如果多次使用提示信息的话,则说明程序设计的过于难用了。

IMG_0010 IMG_0011

16fun底部的标签栏(status bar)操作起来像是工具栏(toolbar),点击之后却进入新界面,选择其他功能还需要返回主界面,信息架构上不合理。

IMG_0015 IMG_0016

平移手势可以刷新界面,这已经成了标配了。

虽然都和大富翁的游戏概念,魔力城市和16fun还是有区别的。魔力城市以游戏的概念引导用户签到,让用户的签到更有价值。而16fun是游戏中嵌入签到的操作,是结合现实地理位置的游戏,设计的更复杂。现有16fun也是比较粗糙,时不时还能弹出英文广告,第一次看到字体不清楚的iPhone程序。如果有地图产品愿意做这样的产品,视觉效果会更为逼真,应用程序中可以加以利用地图的开放接口。

dfmz

百度三维地图

我很想把东方明珠占为己有,然后向游客受租金,不管是否在其附近签到,只要开启了应用程序,从旁边路过都要被收租,应用程序实现自动签到,每天都可以生成一张外出路线图。在附附近遇到朋友时,应用程序还有提醒业务。

魔力城市用户体验

moli

官方介绍:魔力城市是真实城市的移动社交娱乐平台。您可以在魔力城市中记录您的生活,结交新的朋友,与好友进行互动游戏。您还能拥有自己的地产,一圆财富梦想!手机的进步有时会让我们忽视了身边真实世界的美好。不过,同样是手机的进步,有时也可能帮助我们发现身边更多的精彩世界。下一个转角的签到,您会遇见谁呢?

moli2 moli3

试用了Android版,最初以为又是一个签到手机客户端,没想到结合了大富翁游戏,把签到游戏化,个人是很喜欢这个idea:

  1. 区别于街旁,这种游戏化的签到比获得勋章更吸引人,而且有助于朋友的互动,有SNS的元素。
  2. 区别于大众点评网等产品,这些需要大量数据,不适合小公司做。
  3. 有潜力从侧面解决LBS无法精准签到的问题。
  4. “我爸不是李刚”等文案很个性化,这个是产品的魅力所在,可以放大到全部产品的细节当中。差异化竞争,否则又是一个无聊的签到客户端。
  5. 现有签到很单调,其实用户已经有的行为可以再利用,比如我经常签到美食,下次到陌生的地方可以推荐美食店。
  6. 线下实体商店有很多促销活动,比如DQ冰激凌的会员本,到各个地方的店面消费会有奖励,提升用户的忠诚度。线上的签到可以转化这种已有的促销方式,单纯的签到技术缺乏吸引力。
  7. 网页首页上对用户去过的地方生成地图,用户还可以在地图上查看各个地方的“主人”,视觉元素对用户更有冲击力。
  8. 设计重点是怎么把这个产品的游戏化再完善。
  9. 如果应用百度的三维地图,就更像大富翁了,可以继续强化产品特征。

现有产品设计缺点:

  1. 手机客户端登录时没有产品介绍,不能吸引人注册。
  2. 界面颜色过于混杂。
  3. 已经和微博等网站互通,但是做的还不好,社会化元素和通过gmail邀请对于产品传播至关重要。
  4. 界面上过于单调,还不能刺激用户签到。大厅里可以显示谁做的什么,需要营造下氛围。
  5. 产品结构上没有大问题,作为第一个版本已经不错了。细节还需要完善,比如电话和地图看起来不是“可点击”,进度条显示在中间。