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

标签: android 用户界面 设计 | 发表时间:2012-03-07 14:08 | 作者:
出处:http://news.cnblogs.com/

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

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

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

上图: ICS 选项卡

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

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

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

第二个是下拉选项(dropdowns)

上图:Android 4.0 ICS 日历应用

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

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

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

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

 

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

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

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

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

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

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

如果你的应用的台头栏不是选项卡,它应该使用应用的图标,以便用户切换不同的活动。台头作为应用的切入点,应该被充分利用。

上图:地图应用的不同界面,注意动作栏的标识

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

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

youTube 的台头:录像和搜索

上图:应用台头使用动作选项

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

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

当用户选择了搜索:

上图:搜索在联系人和日历应用中

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

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

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

ICS 的设计和风格哲学

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

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

——Matias Duarte, Android UI/UX 组长

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

上图:在日程表中添加项目

更多信息:

Android 4.0 SDK  下载.

Engadget:Galaxy Nexus 的 截图 .

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

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

本文链接



相关 [android 用户界面 设计] 推荐:

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

- - 博客园_新闻
最新的 Android 冰淇淋三明治(Ice Cream Sandwich, ICS)操作系统,不仅仅是用户界面(UI)的简单改变,它几乎是对整个 Android 系统界面的重新定义. 为了让你更好地为 ICS 系统设计和开发应用,这里有一个简单的介绍和指南. 内容和活动导航:选项卡和下拉选项 (Tabs and Dropdowns).

用户界面设计原则

- - 人人都是产品经理
“设计绝不是简单的拼合,排列甚至编辑;设计是通过阐明,简化、明确、修饰,使之庄严,有说服性,甚至带一点趣味性,来赋予其价值及意义. ”——保罗·兰德(Paul Rand). 1.“明确”应该放在设计的首要位置. 对任何界面而言,“明确”是首要的也是最重要的一点. 人们必须能够辨别出它是什么,才能有效地使用你设计出来的界面.

50+PSD用户界面Web设计素材

- DayuLu - 互联网的那点事
对于很多设计初学者来说很多高手的界面设计得让他们惊叹. 其实,对于真正的设计老手来说,他们有能力设计出各种效果,但是即便这样也是需要大量的时间的. 在大多数的中小企业中这样的完全独立设计师很少见的. 老练的设计师都有一套属于自己的设计素材库,里面包罗万象会让各种菜鸟汗颜. 这些就好比日积月累的各种武术套路,当需要那种就自然的打了出来,快、准、狠.

用户界面设计中“状态”和“动作”的表达

- - 互联网的那点事...
前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题. 想想这个问题多年前已经开始讨论了,所以在此整理一下思路,与大家共享. 具体案例是这样的:如上图所示,在“启用”和“停用”搜索定制功能时,这个按钮到底是表示“状态”还是表示“动作”呢. 简单的说,上图中 1表示当前是停用状态,还是表示点击后为停用操作呢.

什么才是优秀的用户界面设计

- - 互联网的那点事
今天为大家分享一些 Good UI 在一些项目中获取的设计以及运营策略等方面的经验. 这是本人收藏了很久的干货,最近开始做网站产品,又把它翻出来了. Good UI 是一家研究用户体验的设计机构. 我们知道成功的页面设计不仅有很高的转化率更便于用户使用,既能满足商业目标更能为用户带来良好的体验. 整合相似的功能,去掉零碎的 UI 元素.

转载:免费的用户界面设计工具,工具包和资源

- Betula - Axure教程|手机交互设计|手机产品设计
来源:免费的用户界面设计工具,工具包和资源    发贴会员:图图网-sunqilong. 都是一些UI界面与设计使用的元素,软件,网站等. 内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计师,JS前段开发,手机产品设计,ipad产品设计等使用. Lumzy是一个网站应用和原型界面制作工具.

细节成就卓越——浅析iPhone用户界面设计精粹

- Shengbin - 腾讯CDC
  作为一款革命性产品,iPhone(这里泛指iPhone和iPod touch,当然还有iPad)为我们带来了许多意想不到的创意和惊喜. 过去两个月多的时间里,我们认真地咀嚼《iPhone Human Interface Guidelines》,感悟字里行间透露着的苹果的细致与智慧. 兴奋、激动之余,有太多的惊喜想与大家分享.

50个精美的 PSD 用户界面素材和设计模板资源

- brett80 - 博客园-首页原创精华区
  对于每一个网页设计师来说,有预先设计好的和可编辑的UI元素是组织和优化工作流程的关键. 这些元素可以让你快速制作出风格统一的网页原型. 今天,本文与大家分享50个精美的PSD资源,包含UI元素模板、表单、按钮、菜单、进度条、播放器、提示框等等. 注册和登录表单 PSD 资源. 这个素材包除了按钮之外,还包括菜单、多媒体播放器、导航等等很多资源,赶紧下载吧.

iPad用户体验暨UI设计—如何设计出优秀的用户界面

- Ken - 互联网的那点事
iPad划时代地将我们带入了平板电脑时代,对于传统的移动终端的设计师而言,一个拥有更大的触摸屏幕,更大空间的舞台展现在大家面前,看上去一切都是那么的美好. 然而如何在iPad上设计出优秀的用户界面. 相信对于设计师们的挑战与忧愁远不止屏幕放大那么简单. 大的屏幕、可以触摸的操作、支持多种手势…这一切条件都为让用户能沉浸于你的设计中提供了条件,那么如何将设计与用户生活的环境、习惯更好的结合,获得最佳的体验,就成为了一个挑战.

Android设计原则

- - 所有文章 - UCD大社区
译者按: 在 iOS HIG已经强大经典了N年之后,Android终于推出了一套比较系统的 HIG(大概是为了配合Android 4.0 Ice Cream Sandwich). 仔细比较两套HIG的“设计原则”部分,发现完全是截然不同的两种风格. iOS HIG走的是更专业型的路线,描述严谨且有不少的专业词汇(比如Metaphors、Consistency之类的).