正在使用的Android应用程序

首发于同步控

作为移动互联网从业人员,各种热门的应用程序都要研究,特别是和自己项目相关的同类产品,要从视觉设计、交互设计、信息架构和运营等角度去理解。

作为Moto Milestone用户,日常生活中也要使用到各种应用程序。学工业设计出身,钟爱简洁的MUJI、宜家、1984和豆瓣,选择手机应用程序时对界面的视觉自然要求较高,这就像程序员喜欢前沿技术一样,职业背景甚至会影响日常选择产品的方式。

XDash之邀聊聊常用的应用程序,大家熟悉的Gmail、Gtalk和浏览器之类自不用多说,所以挑选四款曝光率较低的“日常用品”。

Jorte

jorte1 jorte2

Jorte就像简化版的Google日历,主体功能简洁易用,不常用的功能都放置在设置中。开启程序第一页显示日历,可以快速查看日程安排。可以选择不同的视觉风格和排列方式,动态效果的视图转换,左右手势平移翻页。可以同步Jorte日历或者Google日历,支持数据的导出和导入,有同步控的朋友会喜欢。

这些功能基本可以快速高效地满足用户对于日历的绝大部分的使用需求,支持竟达16种样式的桌面插件,比其他任何应用程都要多,可以满足任何屏幕显示空间需求。

jorte4 jorte3

点击日期时,新建活动时弹出对话框,还可以选择“前一天”和“第二天”,这两个选项其实没有必要。Moto Milestone的分辨率为480*854像素,即使在横向分辨率为320像素,每个日期的可点击区域也能达到45像素,转换精度之后已经能满足成人用户的手指肚的点击面积,误点击的可能性很小。

点击单个任务可以查看任务的详情,设置状态和编辑。“显示细节”的下划线样式是网页设计中使用规范,个人对于客户端中出现这样的设计挺反感,这和Android自身控件设计也有关系吧。页面中把一些不常用的“高级”选项掩藏起来,还是非常符合用户操作习惯的。

3651 3652

和Jorte相比,在安卓市场中排名第六的365日历的设计稍复杂,页面中的信息量大,功能更多。365日历是把ios的设计完全移植到Android的典型,对物理返回键操作响应不灵敏,个人对其操作感觉挺别扭。

365日历有农历节气,符合国情。日程和日历只是视图方式不同,两个相邻的视图中信息量中有很大重复度。刚开始使用时默认显示的是北京天气,以为可以在“更多”或者“设置”中修改,失败两次之后才知道在“工具”的天气中,不支持自动定位,这也是功能做多之后经常出现的问题。

3655 jorte5

在桌面插件上和时间结合,插件使用便捷度比Jorte高,占据用户主屏幕位置。

百度身边

shenb2 shenb1

12月份刚出的百度身边,已经有wap版和Android版,开机界面的大白熊挺可爱,看起来很亲切。以个人的审美观而言,之前使用的大众点评网的客户端界面设计需要大改改,使用半年界面设计几乎没有改观。下半年新出的LBS产品百度身边、盛大切客和QQ美食都比它美观。不过目前而言,大众点评网的数据优势很明显。

对于LBS产品个人不关注有什么签到功能,而是能获得什么样便利的信息服务。问过几位做LBS产品的同行,对于用户的签到有什么改进,得到的答案是用户喜欢签到就行,发布自己当前所在的位置和做的事情。个人窃以为想法有些单纯,这样会让产品非常纯粹,围绕签到或者用户的地理位置还有很多设计可以做。

对于百度身边,个人关注是如何快速发现周边的商户,获取信息帮助我确定行动目标,还有在到达目的可以做什么。百度身边的界面细节上还需再斟酌下,个人看到首页面那么多“>”就会抓狂。手机产品的主界面显示什么,可以反映产品设计以什么为重点,如大众点评网的主页面显示商区和频道,街旁的主页面为好友的签到信息。

Mtime时光网

mtime1 mtime

经常去看电影的话,Mtime是必不可少的。去年也做过查询电影和选座位的手机产品,对Mtime关注比较多,个人也确实有查看电影的需求。

Mtime可以快速查看当前热映电影和查看即将上映的电影。和ios版一样,首页上显示系统浏览图片的控件,动态的海报切换效果很实用。有可靠的电影评分、必要但简短的电影简介、影评和预告片。支持两种选择方式,可以先选择电影院再选择电影,也可以先选择电影再选择电影院。查询放映场次,同时可以查看电影院的地理位置和影院资料。

mtime4 mtime2

作为一款web端移植的手机查询工具并且很少更新的应用程序已经设计的很不错了,简洁易用。在选择影院时遇到小麻烦,一是没有按照拼音排序,二是没按用户选择次数排序,三是没有按地区排序,四不支持搜索,可以进入地图查看周边的电影院,如果电影院不在附近只能按顺序查找。选择完电影院之后,查看该电影院正在热映的电影,点击“其他”按钮,本想切换电影院,没想到当前页面变为全部影院的热映电影。使用过程中只有选电影院稍不方便,其余使用都是非常流畅的。

小米分享

xiaomi m5

喜欢小米分享的原因的很简单,可以很方便地更换高质量的桌面壁纸,顺手换了手机铃声。

而PC端还需要上网站,选择合适的应用程序,保存到本地在应用为桌面壁纸,挺麻烦。如果选择在手机网站中下载图片,更换壁纸的时候还需要经过难用的图片剪切过程。

在选择安装包时,用户自己会选择机型,应用程序自身也可以识别手机的分辨率,便于应用程序根据分辨率筛选合适的图片。

m2 m7

程序中可以直接下载图片和设置为壁纸,非常方便。左右手势可以切换图片,是使用过程中偶然发现的。小米分享可以在应用程序中直接管理已下载的资源,无须去系统路径中查找。

另外还要下载铃声、书籍和音乐,豌豆荚也有这些功能,不过需要连接电脑,适合在没有WIFI情况下使用。由于豌豆荚的手机客户端功能简单,从豌豆荚中下载的资源之后使用体验并不好,体验过程并不完善,比如下载的图书需要在系统文件夹中查找。

m6 m8

小米分享总体视觉和交互做的满好,有点小缺陷。比如我的壁纸中点击“在线壁纸”,可以去全部壁纸中下载资源,在全部壁纸中点击“我的壁纸”,又返回原来的界面,两个界面之后可以循环跳转。虽然统一了视觉效果,但是刚使用时个人没想明白,以为点击之后又跳转到下一级。

在进入到全部壁纸或者我的壁纸时,主界面底部的四标签栏可以保留,当然也会影响主体内容的显示空间。点击“搜索”页面会跳转,“推荐/最新/最热”都是标签栏,而“搜索”却是一个工具,放在并列的位置,但是传达的信息却不是并列的。其实“搜索”页面中完全可以直接显示搜索框,不必跳转新页面。

小米分享下载的文件对于手机而言很好地控制了流量,离开WIFI环境会自动断开下载,这对关注流量的用户很重要。同时支持定时更换壁纸,支持桌面插件,可以利用手机系统中已有的微博、短信和SNS网站分享资源,这也是手机应用程序的标配了。

读书支持书签,记录阅读到的页码,但是笑话当中需要个人自助翻页,还需要完善。

结语

还有Google地图、友录通讯录和随手记等产品,喜欢的手机产品的共同特点是简洁易用,美观的视觉效果,信息结构清晰。手机应用程序应该能快速地完成主要功能,因为对产品的使用深度和时间比PC端要短,移动的使用环境导致使用时耐心度差。

如果设计中还有让人眼前一亮的创新设计或者技术含量的设计那就更酷了,欢迎大家交流使用心得。

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

百度三维地图

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