Android 4.0用户界面设计和元素-ICS简介

最新的Android冰淇淋三明治(Ice Cream Sandwich, ICS)操作系统,不仅仅是用户界面(UI)的简单改变,它几乎是对整个Android系统界面的重新定义。为了让你更好地为ICS系统设计和开发应用,这里有一个简单的介绍和指南。

内容和活动导航:选项卡和下拉选项 (Tabs and Dropdowns)

对于内容型应用,如何为你的用户提供简单直观的导航是非常重要的。ICS操作系统有几个通用方法来实现,第一个就是可滑动选项卡。

Tabs in the People app
Tabs in the YouTube app
上图: ICS 选项卡

Android一直是支持选项卡的,但是在ICS上面,这种导航变得更加时尚和简单使用。如上图所示,我们用两个例子:1)联系人应用 和2)YouTube应用 来看一下新的功能。

新用法: 用户可以通过水平滑动在不同的选项卡界面切换 - 一个ICS支持的通用导航手势。

新外表: 被选中的选项卡用宽下划线表示。选项卡,要么是图标,要么是标签。(图和文字不兼得,和iOS不同)

第二个是下拉选项(dropdowns)
A dropdown in the Calendar app
上图:Android 4.0 ICS日历应用

下拉选项在切换相似内容或者相似逻辑时是最好的导航选择,就譬如说在日历应用中 - 下拉选项被广泛应用在单日,星期,月和用户日程表之间的切换。除此以外,组之间的切换也建议使用下拉,譬如说在联系人应用中,不同组的联系人用下拉来选择。

下拉选项:选项卡右下角的小三角表示。

动作栏:不是只在最上面。

动作栏一直作为提供用户快捷操作的最好方式包含在Android API里面。

Bottom action bar in Maps

上图:动作栏在Email和地图应用中,与屏幕下沿对齐。

动作栏,开发者应该把最重要的用户操作放在这一栏。用Android Email应用来讲,这些操作包括”写Email”,“搜索”,和“刷新”。动作栏根据当前界面的不同,所包括的操作也不同。当用户在邮件界面,这些操作变成:”删除”,“文件夹”和“前后邮件”:

Bottom action bar in Email

上图:在不同界面,动作栏的图标和动作相应改变

动作栏图标设计:简单,实体单色或使用文字:

Text action in Maps

上图:地图应用中动作栏的文字提示

应用的抬头:活动导航(activity navigation)和其他动作

如果你的应用的台头栏不是选项卡,它应该使用应用的图标,以便用户切换不同的活动。台头作为应用的切入点,应该被充分利用。
App headers
上图:地图应用的不同界面,注意动作栏的标识

在地图应用中,默认台头是应用本身的图标和名字或者logo。当你开始使用应用,在不同界面,就会有不同的信息。开发人员应该充分利用这一栏为用户提供快捷、直观的导航。

台头也可以作为信息展示:在单一目的地界面,台头显示了我所搜索的目的地和到达所需时间。在email界面,台头显示了我所搜索的联系人信息和可以提供的动作。

Messaging app

youTube的台头:录像和搜索。
YouTube app
上图:应用台头使用动作选项

 境况适应 (context-adapting):搜索和列表设定

在ICS上,有两个默认的动作:搜索和列表设定,给了用户界面更加丰富的互动。

当用户选择了搜索:
Search in the People app
Search in the Calendar app
上图:搜索在联系人和日历应用中。

后退箭头出现,然后台头被搜索条取代,开发者可以选择包括语音搜索或者不包括。

另外一个境况适应的例子是有复选框的列表。举例来说,在Email应用中,当用户在复选了email时,台头变成了一共3封email被选中。
Checking off emails in the Email app

然后,相对应的,底部动作栏更新成了:对于选中的email可以执行的不同操作:删除,标识,压缩和star他们。
Checking off emails in the Email app

ICS的设计和风格哲学

在这款新推出的Android系统中,我们可以看出他们更新了设计理念。这个不仅仅是方便使用,还保证了风格和一致性。这些努力让Android的界面更加漂亮的同时,也让她更加容易辨识:干净、简单、时尚。

我们去除了很多不必要的界面元素,开始更多地使用空白和视觉元素来创造通透的结构。。我们使用更多的色彩,来创造光、影。

– Matias Duarte, Android UI/UX 组长

这些都可以在ICS的细节之处体现-摁钮没有修饰,自然融合在界面设计中。文字框用线条拉开。在界面修饰中凸显内容和图像。颜色柔和但是鲜明。

Adding an event in the Calendar app
上图:在日程表中添加项目。

更多信息:

Android 4.0 SDK 下载.

Engadget:Galaxy Nexus 的截图 .

希望这篇报道能够帮助你们设计和开发出简单、美观、实用的应用。

 

英文原文:actionbar   编译:伯乐在线 – 潘文佳

【如需转载,请标注并保留原文链接、译文链接和译者等信息,谢谢合作!】

收藏 评论

关于作者:潘文佳

潘文佳:软件工程师。从事iPhone/iPad、Android手机应用开发。关注移动应用产品设计和市场展望。(新浪微博:@小粉豬潘小佳) 个人主页 · 我的文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部