以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://xdc.baidu.com/?p=1044

Android 4.0应用界面设计分析

作者:小彭Jason  |   发布: (编辑)kent.zhu   |   时间:2012-01-11 16:33:04 文字大小:- +

我总是觉得,直到谷歌在2011年10月19日上午十点,公布了有关Android 4.0系统信息的时候,Android与IOS的火拼才算正式开始。 虽然苹果对待这个眼中的“私生子”始终贯彻着严厉的专利打压政策,但Android在全球的市场份额却保持着快速增长。势如破竹的表象背后,是潜藏已久的、巨大的中低端移动市场。Android的胜利,只是因为给了人们更多选择。

从2007年中到2011年中各大智能手机平台的用户量变化图,我们便能直观的看到Android惊人速度(信息来源:调查机构ChangeWave Research)。

对于新系统,我想谷歌是充满自信的。如果说在4.0之前,Android手机只是一个“实惠”的代名词。我想从Android 4.0 开始,系统界面在一致性上有了许多改善,Android所代表的,将是一个越发成熟的用户体验。那么,作为开发者,Android 应用的界面应该如何设计?如果你仔细观察 Google 近期的一系列应用上的设计,应该能发现在一些指导性的要点,而这些设计也正在被第三方应用采用。

就在几周前,androiduipatterns 网站针对 Android 应用的界面设计提出了一些规范性建议,其中包含了大部分功能界面的视觉规范,值得借鉴。

一、起始界面

起始界面是功能的导航界面,大量的跳转都要通过主界面来完成。因此,一个应用的视觉与交互体验也是从这里开始的。作为用户的第一印象,一个好的起始界面应该给人以家的感觉。

起始界面要怎样设计?这里有三点很重要:标题、色彩以及功能图标的整体布局。

顶端的应用LOGO/用户名左对齐,相关操作右对齐;界面采用产品的标准色系,以达到统一和简练;与IOS的九宫格排列不同,这里建议在界面中排列3-6个带有描述的平面图标作为功能引导。

那么,什么应用使用这样的起始界面呢?看这三个例子: Aldiko,Evernote 和 Google+。

二、分界面

应用的分界面可以有许多形式,但一些功能的应用已经十分广泛。用户在此基础上尝试着记住和理解它。例如顶工具条就是一个被普遍接受和容易掌握的概念。

与起始页面的title布局大同小异,谷歌在这里建议将应用的LOGO或者HOME键设置在屏幕的左上角。在屏幕的右上角设置最为重要的操作图标,在这个位置,本应只有屏幕内所涉及到的操作,而搜索功能似乎可以成为一个习惯性的“例外”。

这里有些例子:

三、列表界面

应用可能需要处理大量的数据,而列表则是将数据规则化呈现的一种方式。列表界面应该足够清晰,为用户提供一个好的概览,同时,列表界面的操作栏应该允许用户对列表进行单项或多项操作。除此之外,这里还提供了更为细化的列表规范,“复选框——文本项——相关操作”的布局模式可以满足更为复杂的功能需求。

两个比较好的范例是 Aldiko 和 Google Mail。需要注意的是,列表的选择框通常是在左边,但是在 Aldiko 中,文件夹图标在左边非常突出,于是 Aldiko 选择框放在了右边,达到界面上的一种平衡。

四、载入列表

应用可能需要处理大量的信息,比如微博类产品的信息流页面。对于用户来说,这意味着列表长度几乎是无尽的。目前,许多应用已经采用了比较通用的处理方法,当下滑到列表已缓冲条目下部的边界时,自动加载更多的信息。

下面是两个例子: Android Market 和 Twitter。

五、长按

对某个单项信息进行操作,一种交互方式是长按。这也许不是最明显的操作,但是节省屏幕空间,也很符合“情景菜单”的理念。在视觉实现上,有两个要点需要注意:
1、当用户准备删除项目的时候,不要覆盖选定的项目。用户始终能够看到项目内容,方能肯定删除操作。
2、呼出界面只显示简单操作。如果需要更多更复杂的操作,最好单独设置页面。

下面的三个例子:Aldiko,Astro 文件管理器和 Google+。

六、多选操作

对列表进行多选操作,最好在列表项目左侧增加复选框,当选定了多个项目后,屏幕下方自动给出操作栏,这样可以更加节省屏幕空间。批量处理结束后,操作栏自动消失。如下图。

七、标签

从Android 4.0 开始,系统进一步突出了 ,如下图。

Android Market 和 Google+ 是两个好例子。

八、实例分析

看了这么多规范和例子,大家已经对Android的UI风格有了一个整体上的理解。那么下面我将以facebook和twitter为例,简要分析它们在Android与IOS平台上的应用界面设计,从而突出两个平台的设计差异。

facebook

在IOS平台,UI设计延续了ios app传统的布局模式。LOGO于Titlebar顶部居中,左右两侧为功能键,下方为搜索框。在中部,设置九宫格图标,风格和色彩都沿用了网页版的设计,而底部则作为新消息的提示区。色彩上沿用了品牌色系,而控件的尺寸和质感,采用了iphone原生的GUI风格。

Android版则依照Android系统的视觉规范,title被置于左上角,功能按钮右对齐。信息流页面,tab位于页面布局的中上部,更符合Android系统的操作习惯。items的排版与IOS平台基本保持一致,只是减去了快速编辑按钮(因为长按会自动弹出)。

Twitter

由于iphone深入定制twitter,产品和系统高度整合,twitter的IOS客户端基本延续了原生系统的视觉环境。title并没有使用LOGO,而是以用户昵称加以替换。这种模式便于多账户更换登陆,同时增加了产品的主体性,让APP更好地融入到平台的原生环境中。

在Android平台。tittle与工具被放置在topbar左右两侧,而tap则被移动到了topbar的下方,从而形成了一个综合的持久导航。除了导航工具,图标的形态也根据Android平台的视觉环境进行设计,符合Android的UI风格。

九、总结

不同系统平台都倾向于打造独特的交互和视觉模式,从而吸引自身的用户群体。同一款APP,想要做到最大程度的推广,就要满足不同平台的开发需要,这种需要不仅是代码层面,更在于交互和视觉层面。如果说APP是词语,那么每个系统平台就是独立的语境。想要最大程度的准确传达出词语含义,语法和语气就要符合语境的要求。

从用户体验的角度来考虑,一个好的操作平台,就是一套完整的感官系统,它所代表的,是一个公司在品牌与技术能力方面的综合诠释。用户在长期的使用过程中,就必然会形成固定的操作习惯,人们在使用前期,需要花费精力和时间进行记忆与练习,在基本掌握后,就将转化为潜意识的反射行为,这也是大脑为了减轻记忆负担所形成的运作模式。

如果一个第三方应用的交互与视觉设计,和搭载系统的UI环境大相径庭,就会引发一些问题。因为用户在操作过程中,是少有耐心学习新的交互行为,磨合的过程就会导致误操作,从而影响用户体验的流畅性。试想一下,如果我们用筷子去吃西冷牛扒会是怎样的一种体验?

虽然Google并没有在界面上给出太多限制,但是随着Android平台的发展,应用界面逐渐形成一套统一的规则和界面应是一个大体趋势。一套产品,若要给用户留下良好的第一印象,就需要认真考量跨平台的设计问题,无论在交互层面还是视觉层面。当然这并不意味着所有的设计都必须千篇一律,如果你的界面能够保证易用性的同时又有不俗的视觉表现,不妨去大胆创新。不过,遵循原生系统的现有规范还是会减少你大量的开发成本。

参考文献:

http://www.ifanr.com/65085

http://www.androiduipatterns.com/2011/12/how-should-android-apps-look-like_16.html

更多
打印  |  类别:业界信息  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买