最新Android4.0 UI设计规范.pdf

1、 Android 4.0 设计规范 优先导读十大改变 & 规范全文翻译 在拜读和翻译了 Android design 设计指导后，对比 Android 4.0 与 Android2.3 及之前版本的 app设计指导，总结了 Android 4.0 设计的 10 大改变： 1. 导航栏 (详见模式 PATTERNS导航 Navigation) 由之前 的物理按键导航（返回、菜单、搜索、主页）变成了嵌入屏幕的虚拟按键（返回、主页、最近任务）。 左侧为早期有 4 个物理按键的 手机，右侧为新版只有 3 个虚拟按钮的手机 把菜单项和搜索项从导航栏去掉，把之前通过长按主页键才出现的最近任务直接展示在导航

2、栏中。 Android Design Translated by CDC | 江宁 张云 2 最近任务的界面 把菜单收起的同时，在软件界面的操作栏上增加了“更多操作”（ action overflow），如下图中的黄色圆点所示。 黄色圈部分为“更多操作”（ action overflow）的位置和点击后内容的展示方式 Android Design Translated by CDC | 江宁 张云 3 2. 操作栏 (详见模式 PATTERNS操作栏 Action bar) 操作栏从之前的 app 图标操作，变成如下图所示： 1 向上 2 Spinner 3 重要操作 4 更多操作。 其中，向

3、上按钮，点击后是去到当前界面的上一个层级，非第一层级界面有此按钮，第一层级界面则无向上按钮； Spinner 是用于展示内容的下拉菜单，其内容包括视图的快速切换和显示相关内容的完整信息；更多操作（ action overflow）是集合操作栏中不常用的和非重要操作的地方。 操作栏可以拆分成下图中的 1 主操作栏、 2 顶部栏和 3 底部栏。如果需要，顶部栏可以承载选项卡 tabs，底部栏可以承载主要操作和被收起的更多操作（ action overflow）。 在空间足够的横向屏幕展示界面时，被拆分的操作栏，可以灵活合并在一起。如下图中的手机端横竖屏操作栏所示。 Android Design T

4、ranslated by CDC | 江宁 张云 4 3. 多面板布局 (详见模式 PATTERNS多面板布局 Multi-pane layouts) 多面板布局更多的是针对平板电脑，把手机端的目录视图和详情视图两个层级的界面，甚至更多的页面，复合展示在同一个界面中，有效地利用平板电脑的屏幕空间， 扁平化层级结构，简化导航。这 点在 iPad 上已经运用得相当娴熟了。 4. 选择 (详见模式 PATTERNS选择 Selection) Android4.0 中的长按与 Android2.3 及更早期的版本有很大的不同。早期版本长按操作后，是出Android Design Translated

5、by CDC | 江宁 张云 5 现情境菜单的浮出层。在 Android4.0 中，长按后在操作栏的位置会覆盖一个临时的情境操作栏，不再弹出情境菜单浮出层。在临时情境操作栏的环境下，当前界面的内容项允许被单个处理，也允许被批量处理。 长按 Android2.3 及更早期系统版本的内容项时，出现情境菜单的浮出层。 长按 Android4.0 系统版本的内容项时，情境菜单栏覆盖在操作栏上。 Android Design Translated by CDC | 江宁 张云 6 在情境菜单环境下，支持批量操作。 5. 返回和向上 (详见模式 PATTERNS返回和向上 Navigation with

6、Back and Up) 返回按键用在手机全局的虚拟导航栏中，基于用户最近查看的界面历史，采用时间倒序的方式，连接界面间的关系。向上按钮用在操作栏的左侧，基于层级结构，点击后是去到当前界面的上一个层级，若当前界面已经是最高一级，则没有向上按钮。 黄色部分为点击向上按钮后的页面路径，红色部分为点击返回按钮后的页面路径 Android Design Translated by CDC | 江宁 张云 7 6. 主题样式 (详见风格 STYLE主题样式 Themes) 推出三套默认主题： Holo 浅色主题、 Holo 深色主题、 Holo 浅色底 +深色操作栏主题。主推 app在这三套默认主题的基

7、础上做设计，以加快 app 研发效率，但只是建议使用，并没有完全强制。视觉设计师们可以重点看下 STYLE 和 BUILDING BLOCKS 这两章。 7. Widgets (详见开始吧 GET STARTEDUI 概览 UI Overview) 在原 apps 页里 ，用选项卡 tabs 的方式增加了 widgets 内容。一改用隐晦方式添加 widget 的操作和把 widgets 零散放在桌面呈现的方式。在 app设计中，应该提高对 widget 设计的重视程度。 Android Design Translated by CDC | 江宁 张云 8 8. 兼容性 (详见模式 PATTE

8、RNS兼容性 Compatibility) 向后兼容，考虑到物理导航按键手机如何兼容 Android 4.0 系统和虚拟导航手机如何兼容Android2.3 和更早期版本的 apps。 在物理导航按键手机上安装 android4.0 系统，点击物理按键，在屏幕下方出现更多菜单 action overflow 的内容。 Android Design Translated by CDC | 江宁 张云 9 在新的虚拟导航手机上安装为 android2.3 及更早版本系统设计的 app，会在屏幕下方的虚拟导航的右侧出现 action overflow 按钮（如上图的黄色部分）。 在新的虚拟导航手机上

9、安装 android4.0，点击 action overflow 后的展示状态如上图。 9. 强调纯粹的 Android 应用设计 (详见模式 PATTERNS纯粹的 Android) 在 Android4.0 app 设计准则中，特别强调为 Android 设计纯粹的 Android app，切勿使用其他平台 特定元素的注意事项，有以下 5 个方面： （ 1）强调视觉元素的样式要符合 android 系统； （ 2）不用其它平台特有的图标； （ 3）不在界面的下方使用选项卡 tabs； （ 4）区分向上和返回，不在操作栏上使用返回样式的按钮； （ 5）不在内容列表里使用向右箭头。 Andro

10、id Design Translated by CDC | 江宁 张云 10 Android 系统里，选项卡（ tabs）会固定放在屏幕上方，不会放在下方。这点与 ios 系统不同。 10. 其它细节 增加许多新的交互细节、信息展示和视觉样式等规范，详细见翻译。其中，有几点在此强调下： （ 1）新增了横滑移除内容 的交互手势。在部分模块中，支持向左或向右横滑移除内容的操作，如最近任务和消息通知抽屉。 （ 2） 视觉的平面化，栅格风正在 4.0 中上演。 （ 3） 在 writing style 中明确指出写 wording 时，要直接使用第二人称“你”。 - 以下部分为 规范 全文翻译。And

11、roid Design Translated by CDC | 江宁 张云 12 目录 开始吧 GET STARTED . 13 创新版本 13 设计原则 14 UI 概览 20 设计风格 STYLE . 23 设备和显示 23 主题样式 24 触摸反馈 25 标准和网格 26 字体 28 颜色 30 图标 30 写作风格 35 模式 PATTERNS 36 新的 Android 4.0 . 36 手势 37 应用结构 40 导航 48 操作栏 54 多面板布局 61 横划视图 64 选择 66 通知 68 兼容性 73 Android 就是 Android . 76 积木 /控件 BUILD

12、ING BLOCKS . 79 选项卡 Tabs 79 列表 80 网格列表 81 滚动 83 Spinners（下拉菜单） . 84 按钮 85 文本输入 86 滑块 87 反馈 88 选择控件 90 对话框 91 选择器 93 http:/ Android Design Translated by CDC | 江宁 张云 13 开始吧 GET STARTED 欢迎来到 Android Design，这里是你学习如何设计 Android Apps 的地方。 创新版本 - 雪糕三明治（ Android 4.0）是 Android 设计的里程碑。我们通过扩展应用在蜂巢平板电脑和其他移动设备的新的

13、设计方式，触碰到几乎系统的每一个像素。从最为基本的元素开始，我们使用了一个专门为高分辨率显示而设的新字体： Roboto。其他的大改变包括设备里框架级的操作栏（物理按键），及支持没有物理按键的新设备。 我们把核心 apps 和整个系统的设计焦点放到三个大目标上。在你设计 Android apps 的时候，请你也考虑这三点： 1. 迷惑我吧 漂亮不只是外表上的。 Android apps 在多个层次上都漂亮且具有美感。它的转场快速清晰；排版和样式干脆利落及具有意义。 App 图标本身就是件艺术品。就像一个制造精良的工具，你的app 应该追求漂亮、简洁，并创造一种神奇的体验，这些都可以使你所向无敌

14、。 2. 简化我的生活 Android apps 能让生活更简单且容易理解。当人们第一次使用你的 app 时，他们应该凭直觉就能了解到最重要的功能是什么。但不能只为用户的第一次使用而设计， Android apps 把正在进行的后台杂务如文件管理和同步都隐藏。简单的任务从来不要求复杂的步骤，而复杂的任务会为人量身定 做。任何年龄与文化的人都可以感觉到很好的操纵感，不会因过多选择和无关紧要的动画而感到不知所措。 Android Design Translated by CDC | 江宁 张云 14 3. 让我感到惊艳 只是让 App 易于使用还不足够， Android apps 希望人们能不断尝

15、试新东西和用创意的方式来使用 app。 Android 让人们通过多任务、通知和跨 app 分享，把 apps 结合到新的工作流中。 同时，你的 app 还应该是很个人化的，让人们通过清晰和优雅的方式享受到伟大的科技。 设计原则 - 为了保持用户的兴趣， Android 用户体验设计团队设定了以下的原则。把它当做是你自己的创意和设计的思想。除非有恰当的理由，否则不要偏离它。 让我着迷 1. 惊喜 一个漂亮的界面，一个精心准备的动画，或一个适时的声音效果都是体验的乐趣。微妙的效果都可以贡献出强大的力量。 2. 真实对象比按钮和菜单更有趣 让人们直接触摸操作你 app 里的对象。它可以减少执行任务

16、的认知负担，同时可以更多地满足情感 需求。 3. 个性化 人们喜欢增加个人的东西，它们让人感觉更有亲切感及控制感。提供实用、漂亮、有趣、可自定义，且不妨碍主要任务的的默认设置。 Android Design Translated by CDC | 江宁 张云 15 4. 记住人们的习惯 学习人们的使用习惯。跟随用户的使用行为，比一遍又一遍的重复问要好。 简单我的生活 1. 尽量表达简洁 使用简单词、短句子。人们看到长句会不自觉的跳过。 2. 图片比文字好理解 使用图片来解释想法。图片获得人们更多的注意力，比文字更有效率。 Android Design Translated by CDC | 江

17、宁 张云 16 3. 为我作决定，但要让我有决定权 尽最大努力去猜而不是什么都问用户。太多的选择和决定会让人们不爽。为了预防你的猜测是错的，要提供后退。 4. 只在需要的时候显示我需要的内容 人们看到太多选择会不知所措。把任务和信息打散成一个个小的、容易操作的内容。隐藏此时不必要的操作选项。 Android Design Translated by CDC | 江宁 张云 17 5. 让我知道我在哪 知道自己在哪可以给人们自信。让你的 app 每页看上去都有区别，使用转场显示各个屏之间的关系。在任务进程中提供清晰的反馈。 6. 永不丢失我的东西 为人们保存他们花时间创建的东西，并在任何地方都可

18、以获取它们。记住设置，个性化触控，及创建电话、平板电脑和电脑之 间的同步。这可以使升级成为世界上最容易的事。 7 如果看上去一样，就应该操作也一样 为了更好的分辨功能，让他们视觉上的区别更大一些。避免那些看上去差不多的样式但操作起来却不一样。 Android Design Translated by CDC | 江宁 张云 18 8 真的很重要时才打断我 你要像一位贴心的助理一样，帮用户挡住那些不重要的骚扰。因为打断会令人费神且沮丧，所以人们希望保持专注，除非是非常重要和讲求时效的事情，才愿意被打断。 让我惊喜吧 1. 给我一些可以通用的操作方式 当人们自己搞懂一些事情的时候会感觉很赞。利用其

19、它 Android apps 已有的视觉样式和通用方式让人们学习你的 app 变得很容易。例如，横划就是一个很好的导航的快捷切换方式。 2. 这不是我的错 当你让用户改正时要温和些。用户在使用你的 app 时会期望它很智能。如果出了问题，给出清晰的恢复指引，而不是详细的技术细节。当然，如果你可以在后台解决会更好。 Android Design Translated by CDC | 江宁 张云 19 3. 不断地鼓励 把复杂的任务分拆成容易完成的一个个小步骤。即使操作有了很小的改变也要给出反馈。 4. 帮我完成那些繁重的活 让新手顺利完成一些他们也没有预想自己能完成的任务，这可以让他们觉得自己

20、也是个专家。例如，提供照片滤镜效果，只需通过 几个简单的步骤，使一个非专业的照片看上去也很棒。 5. 让重要操作快起来 你的 app 中不是所有的功能都一样重要。决定哪些才是最重要的功能，让他们容易发现并且使用起来非常灵敏。就如照相机的快门和音乐播放器的暂停。 Android Design Translated by CDC | 江宁 张云 20 UI 概览 - Android 系统 UI 提供的框架非常重要。其中包括了主界面（ Home）的体验，设备的全局导航及通知栏。 你的 app 在保持 Android 体验的一致性和使用的愉快度上，有重要的作用。这一章的结尾，我们介绍了你的 app 要

21、达到这个目标的实现要点。 先快速看看这些最重要的 Android 界面： Home，全部 app 界面，及最近界面 1. 主界面 Home Home 是一个可定制收藏 app、文件夹和小工具的地方。通过左右横划来导航不同的 home 屏面板。 无论你横划到哪个 home 屏面板，底部始终有一栏为“我的最爱”，可以把最重要的 app 和文件夹放在这里展示。 点击底部栏“我的最爱”中间的“全部应用”按钮可以到达全部 app 和小插件的展示页面。 2. 全部 app 界面 这里可以让你浏览设备中全部安装了的 app 和小插件。 用户可随意拖拽 app 或小工具的图标，到达 Home 任意面板空的位置

22、放下。 3. 最近任务界面 这里提供了一个在最近使用的 app 之间切换的快捷方式。它为多个同时进行的任务提供了一个清晰的导航路径。 最近按钮是在导航栏的最右边。展示了用户最近使用的 app，他们通过时间顺序组织，把最近使用的放在最底部。 Android Design Translated by CDC | 江宁 张云 21 UI 栏 - UI 栏是专用于显示通知、设备的通讯状态以及设备导航的区域。通常， UI 栏会跟随所运行的app 的需要而显示。如果是需要沉浸式体验的 app 如电影或图片，可以暂时隐藏 UI 栏，让用户尽情享受全屏内容不受打扰。 1. 状态栏 左边显示等待通知，右边显示如

23、时间、电池水平、信号强度。向下划动状态栏 显示通知详情。 2. 导航栏 Android 4.0 的新特性。只在没有传统硬件导航栏的设备上显示。放置了设备的导航控件包括返回， Home 和最近任务，在 Android2.3 以及更早版本还有菜单键。 3. 系统栏 在平板电脑上使用，包含了状态栏和导航栏的元素。 通知 - 通知是用户可以在任何时候从状态栏获取简短信息的地方。它提供了更新、提醒以及那些未重要到需要打断用户的重要信息。向下滑动状态栏可以打开通知抽屉。点击其中一个通知打开相应的 app。更多请看 通知 。 Android Design Translated by CDC | 江宁 张云

24、22 大部分的通知都是一行标题一行信息。这里推荐两行的布局。如有必要，你可以增加第三行。时间戳是可选元素。 App UI- 一个典型的 Android app 包含了操作栏和内容区域。 1. 主操作栏 这是 app 的命令和控制中心。主操作栏包含了导航 app 层级和视图的元素，及最重要操作。 2. 视图控制 让用户切换 app 提供的不同视图。视图包含了内容不同的组织方式或不同的功能。 3. 内容区域 内容显示区域。 4. 次操作栏 次操作栏提供了一种方式，就是把操作从主操作栏，分配放置到次操作栏，它可以在主操作栏的下方或屏幕的底部。这个例子中，次操作栏把没放在主操作栏上的一些功能展示在底部

25、。 Android Design Translated by CDC | 江宁 张云 23 设计风格 STYLE 打造在任何设备上都视觉诱人的 apps。 设备和显示 - Android 赋予了成千上万的手机、平板电脑和其它设备动力，它们包含了各种各样的屏幕大小和构成元素。利用 Android 灵活的排布系统，你可以创建从大屏幕大到小屏幕优雅转换的 apps。 灵活 扩展和缩小你的布局来适应不同的高度和宽度。 Android Design Translated by CDC | 江宁 张云 24 优化布局 在大设备上时，利用额外的屏幕版面。创建包含多视图的复合视图，以展示更多的内容和更便捷的导

26、航。 为全部设备做好准备 为不同屏幕分辨率提供资源，保证你的 app 在任何设备上都漂漂亮亮。 策略 当你为不同屏幕设计时，从哪开始？ 一个方法是：在标准基础（ MDPI）上开始，然后放大或缩小，以适应到其它尺寸。另一个方法是从设备的最大尺寸开始，然后缩小，并适应到你需要的小屏幕尺寸。 想了解关于此话题的更多内容，请看 支持多屏幕 。 主题样式 - 主题样式是 Android 为了保持 app 或操作行为的视觉风格一致而创造的机制。风格指定了组成用户界面元素的视觉属性，如颜色，高度，空白及字体大小。为了各个 app 在平台上达到更好的统一效果，这次 Android 雪糕三明治系统为你的 app

27、 提供了 3 套系统主题： * Holo 浅色主题 * Holo 深色主题 * Holo 浅色底 +深色操作栏主题 使用这些主题可以快速帮助你的 app 适应 Android 的整体视觉语言。 选择最适合你的 app 需求和设计的系统主题吧。如果你想要一个更独一无二的样式，从系统主题开始也是一个好主意。系统主题为你之后选用自己的视觉风格提供了一个坚固的基础。 Android Design Translated by CDC | 江宁 张云 25 触摸反馈 - 使用颜色和光作为触摸的反馈，加强手势行为的结果，暗示哪些操作能用，哪些操作被禁用。 无论何时用户触摸了一个可操作区域，你的 app 都要

28、提供视觉反馈。使用户知道哪些可操作。 状态 大部分 Android 的 UI 元素都内置有触摸反馈，包括暗示触摸元素是否有效果的状态。 沟通 当有更复杂的手势时，帮助用户理解操作的结果。例如，在最近任务里，当你开始横划缩略图时，它会变暗淡。这帮助用户理解横划会引起对象的移除。 Android Design Translated by CDC | 江宁 张云 26 边界 当用户尝试滚动超过内容边界时，要给出一个明确的视觉线索。例如，如果一个用户在第一个 home 屏继续往左滚动，屏幕的内容就会向右倾斜，让用户知道再往这个方向的导航不可用。很多 Android 可滚动的 UI 部件（如列表和网格列

29、表）都已经内置支持边界反馈。如果你要自定义，记得要做边界反馈。 标准和网格 - 设备不仅有屏幕物理大小的不同，还有屏幕密度的不同（ DPI， dots per inch）。屏幕物理大小是手机（小于 600DP）或平板电脑（大于或等于 600dp）的物理尺寸。屏幕密度是 LDPI， MDPI，HDPI， XHDPI。通过为不同屏幕大小设计不同的布局，为不同屏幕密度提供不同的位图图像，来优化您的 app 的用户界面。 48dp 规律 通常把 48dp 作为可触摸的 UI 元件的标准。 Android Design Translated by CDC | 江宁 张云 27 为什么是 48dp？ 一般

30、来说， 48dp 转化为一个物理尺寸约 9 毫米。建议的目标大小为 7-10 毫米的范围，这是一个用户手 指能准确并且舒适触摸的区域。 如果你设计的元素高和宽至少 48dp，你就可以保证： 1. 触摸目标绝不会比建议的最低目标（ 7mm）小，无论在什么屏幕上显示。 2. 在整体信息密度和触摸目标大小之间取得了一个很好的平衡。 注意空白 每个 UI 元素之间的间距是 8pd。 Android Design Translated by CDC | 江宁 张云 28 字体 - Android 的设计语言依赖于传统的排版工具，如大小，空间，节奏，以及与底层网格对齐。成功应用这些工具可以帮助用户快速了解

31、信息。为了更好支持排版， Android 冰淇淋三明治介绍一种新的字体： Roboto，专门为高分辨率屏幕下的 UI 而设。目前 TextView 的框架默认支持常规，粗体，斜体，粗斜体。 Android Design Translated by CDC | 江宁 张云 29 默认文字颜色 Android UI 使用了以下默认颜色样式： textColorPrimary 和 textColorSecondary。 浅色主题使用 textColorPrimaryInverse 和 textColorSecondaryInverse.。框架里的文本颜色样式同样支持使用时不同的触摸反馈状态。 字体大

32、小 使用不同大小字体对比，可以创建有序的，易理解的布局。然而，在相同的用户界面有太多不同大小的字体，会很乱。 Android 框架使用以下的大小： 用户可 以在设置 app 中选择系统级的文本缩放。 Android Design Translated by CDC | 江宁 张云 30 颜色 - 使用颜色是为了强调内容。选择适合你品牌的颜色，可以为视觉元素提供更好的对比。注意的是红绿颜色对红绿色盲不适用。 调色板 蓝色是 android 调色板里的标准颜色。每个颜色都有对应的一系列饱和度，供需要的时候使用。 图标 - 图标在屏幕中虽然只占一小块地方，但它为操作、状态和 app 提供了一个快速且直观的表现形式。 启动图标 启动图标是放在 home 或全部 app 界面上代表你的 app 的视觉表现。由于用 户可以改变 home页的壁纸，所以要确保你的启动图标在任意壁纸上都清晰可见。