Android的界面设计规范

作者：Bruce Lee
出处：/BruceLee521
样式
设备和显示器
Android有百万计的手机、平板电脑和其他设备，这些设备都有各种屏幕尺寸。

利用Android 的灵活的布局系统，您可以创建小到手机大到平板的各种应用程序。

变通
拉伸和压缩布局，以适应不同的高度和宽度。

优化布局
在大型设备中有额外的屏幕空间利用。

但在移动手持设备上需要创建复合的视图，结合多个视图来显示更多的内容，并且是这些视图易于导航。

所有的资源
提供不同的屏幕分辨率（DPI）的资源，以确保您的应用程序在任何设备上看上去都很好，比如32*32，64*64。

策略
那么设计这些多尺寸的屏幕，应该从哪个规格开始？一种方法是先设计标准设备的（正常大小和MDPI），然后设计向上和向下比例的尺寸。

另一种方法是从最大屏幕尺寸的开始，然后缩减，并找出我们需要使在小屏幕上的折中的UI。

主题
主题是Android机器应用统一样式到应用程序或活动的一。

样式指定用户界面元素的视觉属性，如颜色，高度，填充和字体大小。

为了促进更大的平台上的所有应用程序之间的凝聚力，Android 提供了三个系统的主题，你可以从中选择来构建应用程序：
全亮主题
全暗主题
全亮与全暗动作条主题
Gmail是使用全亮的主题。

Settings是使用全暗主题. Talk使用全亮与全暗动作条主题.
触摸反馈
使用颜色和明亮来响应触摸，强化行为的手势，并表明什么样的动作是允许的什么样的是不允许的。

当用户触摸可操作的区域，应用程序需要可视化的反应。

这让用户知道哪些对象被触摸了，你的应用程序是“听”到触摸了。

状态
Android的UI元素具有内置的触摸反馈，包括状态，用于指示触摸元素是否会产生什么反应。

通讯
当你的对象作出反应，更复杂的手势，帮助用户了解操作的结果将是什么。

例如，在最近，当你开始刷的缩略图左或右，开始暗淡。

这有助于用户明白，刷卡会导致被删除的资料。

当用户尝试向上或向下滚动过去的一个可滚动区域，边界视觉效果要提示给用户。

例如，如果用户试图向上滚动第一主屏幕面板，应该指示进一步向上导航是不可能的。

已经有很多Android 的滚动UI部件（如列表或网格列表）支持内置的边界反馈，如果构建自定义的部件，要记住做边界反馈。

度量和网格
移动设备不仅不同的物理尺寸，而且在屏幕分辨率（DPI）。

为了简化多个屏幕设计的方式，手机（小于600dp）平板（大于或等于600dp）。

有几种分辨率LDPI，MDPI，HDPI，XHDPI。

优化您的应用程序的用户界面的布局设计来取舍不同的分辨率，并提供可供选择的不同分辨率位图图像。

要做到不同分辨率的设备无关性。

48d p基准单位
触摸式UI组件通常使用48dp基准单位，比如有些空间可能是48dp*2。

为什么48d p基准单位
48dp转换为物理尺寸大约约9mm左右。

这是一个经过多个用户验证过比较适合触摸屏的尺寸，舒适的触摸空间在（7-10毫米）的范围内，这将能够可靠地，准确地定位触摸的手指。

如果设计的元素已经保证高度和宽度是48dp，那么具体原则如下：
你的目标永远不会小于推荐的最小目标尺寸--7mm，无论他显示在什么样的屏幕上。

你要在整体的信息密度以及与其他UI元素的靶向性之间做一个很好的妥协。

缝隙的原则
每个UI元素的缝隙8dp为基准单位。

排版（字体）
Android的设计语言依赖于传统的排版工具，如比例，空间，节奏和基础网格对齐。

成功地使用这些工具可以帮助用户快速了解屏幕信息。

Roboto是专门为用户界面和高分辨率屏幕要求而设计的。

默认情况下，目前的TextView的框架支持常规，粗体，斜体，粗斜体。

默认的颜色
Android的UI使用默认颜色的风格：textColorPrimary和textColorSecondary。

对于全亮主题使用textColorPrimaryInverse和textColorSecondaryInverse的。

框架的文本颜色样式也支持触摸反馈状态的变化。

字体比例
相同的用户界面有太多的不同尺寸会很混乱。

Android框架使用下面的一组有限的大小：
用户可以选择系统范围内的缩放因子设置应用程序中的文本。

为了支持这些辅助功能，应做到尺寸无关。

支持可扩展的类型的布局，应该对这些设置进行测试。

颜色
颜色
使用颜色的目的是为了突出重点。

选择适合自己品牌并能与可视化组件之间形成对比的颜色。

需要注意的是红色和绿色对于色盲用户可能无法区分。

调色板
在Android的调色板中蓝色是标准颜色。

每种颜色都有一个对应的暗的阴影，在需要时，可以用来作为一种补充。

图标
一个图标是一个图形，占用屏幕空间的一小部分，并提供了一个快速，直观的表示的一个动作，状态，或应用。

启动应用程序
启动应用程序图标在屏幕的首页并且是所有应用程序的可视化表示。

由于用户可以更改在主屏幕的壁纸，确保程序运行图标在任何类型的背景下是清晰可见的。

尺寸和比例
移动设备上的启动图标必须是48x48的DP。

启动图标上显示谷歌游戏上必须是512x512像素。

属性
完整资源，48x48DP
样式
使用一个独特的阴影。

体现三维的效果，在前视图看来要有轻微的角度，从上方观察要一样，用户感受到一些图标的深度。

动作条
动作栏图标的图形按钮是在你的应用中对于操作人最重要的按钮。

每个按钮都应该使用简单明了的比喻来表示一个单一的功能，大多数人都可以一目了然的知道这个图标的应用的基本功能。

要使用预定义的说明，如“刷新”和“共享”
尺寸和比例
电话的动作条图标应该是32x32 dp
核心区域的比例和大小
整体大小为32x32 dp，核心区域24x24 dp
样式
样式要形象的，平面的，而不要过于详细复杂，要线条流畅或尖锐的形状，笔触要比较厚重。

如果图形简单单薄，要将其向左或向右旋转45度，核心区域空间线条厚重些。

空白和有线条的空白空间的厚度至少保持2个DP。

颜色
底色是: #333333
可以操作时: 60%透明
不能操作时: 30%透明
底色: #FFFFFF
可以操作时: 80% opacity
不能操作时: 30% opacity
小/上下文图标使用在应用程序内部，用来说明一个表面的行为或提供特定的状态。

例如，在Gmail应用程序中，每个消息都有一个星形图标，来表示邮件为重要。

尺寸和比例
小图标应该是16x16 dp
核心区域的比例和大小
整体大小为16x16 dp，核心区域12x12 dp
样式
样式要中性色彩的，平面的，简单的。

笔触比较细小，使用填充的形状更容易被注意。

使用简单的视觉隐喻，使用户可以很容易地认识和理解它是干什么的。

颜色
不要使用非中性色，目的是要达到保守的风格。

例如，Gmail使用黄色的星形图标来表示书签消息。

如果图标能触摸反应的，选择还有要与背景形成反差色。

通知图标
如果应用程序有通知信息，每当有新的通知可以在状态栏中显示一个图标。

尺寸和比例
通知图标必须是16x16 dp
核心区域的比例和大小
整体大小为24x24 dp，核心区域22x22 dp 样式
样式使用平面和简单的，使用单一的并有视觉隐喻的图标作为执行图标。

颜色
通知图标必须是全白了。

此外，系统可以缩小和变暗图标。

文本风格
应用中文本原则
文本要简短
要简洁的，简单的和精确的。

一般不要操作30个字符的限制（包括空格），除非必须超过30个字符，否则不要违反这个规定。

文本要简单
要把你的用户是聪明并且精干的，但用户又不知道太多的技术术语并且英语讲的不太好。

使用简单的字，多用主动动词和常用的名词。

文本要友好
使用缩略形式。

使用第二人称（“你”）与用户对话。

如果用正式交流的文本读起来不顺畅，我们可以用非正式对话的方式表达，这可能比用正式的交流文本产生更好的效果。

不要让用户感到唐突并且恼人的、频繁的，让用户感到安全、快乐和活力。

先阐述重要的
前两个词语（约6个字，包括空格）要体现出本段文本的主题了。

如果做不到那要重新构建这段文本。

保证说明白必要内容，并且不絮烦
不要试图解释细微的差别，并且絮絮叨叨。

避免重复
如果一个显著并长期被重复使用在一个屏幕或文本块里的内容，找一种方式只使用一次。

文本要简短
下面是在设置向导中使用的文本
太正式了更好
文本要简单
下面是来自本地位置设置
不易懂更好
文本要友好
下面是来自程序崩溃的提示对话框
混乱和恼人的-“Sorry”的用词只能是在伤口上洒盐。

更短，更直接，没有虚假道歉的标题
先阐述重要的
热门信息放在后面了，错误的做法热门信息放在前面了，正确的做法
目的放在后面，错误的做法目的放在前面，正确得做法
保证说明白必要内容，并且不絮烦
来自安装向导，是说的明白，但冗余描述说明白必要的，并且精简
模式
保证我们的应用的一致性并且新颖时尚、先进的。

Andrioid的新特性
新版本J e l l y B e a n-A n d r o i d4.1的新特性
通知
通知在Android4.1中得到了显着的增强：
l 用户可以立即从发出处收到通知
l 通知大小和布局上更灵活
l 通知可以按优先级和重要性排序
l 通知可以折叠和展开
基础的通知布局并没有改变，因此应用程序设计的早期版本通知的外观可以不用修改。

可调整大小的应用程序小部件
Widget是主屏幕自定义一个重要方法，它允许是用户从应用程序的主屏幕对最重要的数据和功能直接“一目了然”的看到。

Android4.1引入了改进的应用程序小工具，它可以自动调整大小和根据条件加载不同的内容，调整大小和加载内容的因素包括：
l 当用户从主屏幕上删除他们
l 当用户拉伸他们的大小
l 当主屏幕上可用的空间量变化
您可以提供单独的横向和纵向布局小部件，当屏幕方向的变化时系统会适当的调整小部件。

小部件的类型决定了它的界面细节，这些需要在设计的时候要注意。

无障碍(辅助功能)
Android的其中一个任务是组织全世界的信息并使所有人都可以从中受益。

Android是要达到适用于所有用户的目的，其中包括残疾人，视力障碍的，色觉障碍的，听力障碍的等。

辅助功能的设计要考虑下面的一些细节：
l 操作导航更加直观
l 使用建议的触摸目标大小
l 有意义的视觉UI元素标记
l 超时操作的处理
l 使用标准的框架控件或启用定制的TalkBack控件
您可以提供单独的横向和纵向布局小部件，当屏幕方向的变化时系统会适当的调整小部件。

小部件的类型决定了它的界面细节，这些需要在设计的时候要注意。

新版本I c e C r e a m S a n d w i c h-A n d r o i d4.0的新特性
导航条
在Android 4.0的手机上移除了传统的硬件键，取而代之的是一个虚拟导航栏，里面包含了“返回”，“主页”和“最近”按钮。

在介绍兼容的部分会介绍如何处理硬件键和菜单键。

动作栏
动作栏是Android应用程序的一个最重要结构元素。

它可以使应用程序在不同版本平台的导航和界面操作变得一致。

多窗格布局
用Android创建应用程序，考虑比例以及在不同屏幕尺寸下的展现是很重要的。

多窗格布局可以分别显示不同的活动内容，可以在平板电脑或更小的设备上提供丰富的组合视图。

选择
长按一个对象是新的数据选择方式，这将会显示和这个对象关联的动作栏，动作栏允许对选择数据进行表面操作。

手势
手势是用户通过操纵屏幕对象达到与应用程序进行交互的目的。

下面列出了Android支持的核心手势。

触摸
触发一个对象缺省的功能，动作是压下，抬起
长按
数据选择的入口，允许你在一个视图里选择一个或更多项然后使用上下文动作栏操作选择的数据，不要使用长按来显示上下文菜单，动作是压下，等待，抬起
滑动屏幕
滑动超过一屏的内容，或者在同层次的视图之间导航，动作是压下，移动，抬起
在一个视图里重新整理数据，或者移动数据到它的包含体内(比如文件夹、主页等)，动作是长按、移动、抬起。

双击
放大一个内容，也作为文本选择的第二手势。

动作是快速双击。

捏开
放大一个内容，动作是2个手指压下，向外移动，抬起。

捏闭
缩小一个内容，动作是2个手指压下，像内移动，抬起。

应用程序结构
应用程序有许多种布局变化来满足不同的需求。

例如：
l 像计算器或相机的应用程序，是建立在一个屏幕里只处理一个单一的核心功能。

l 像电话应用程序，是在几个不同活动之间切换，它没有更深的导航。

l 像Gmail或商店应用程序，有比较深的视图导航，并每个视图有一些数据。

应用程序的结构很大程度上取决于想展现给用户的表面内容和任务。

一般结构
一个典型的Android应用程序是由顶层到详细内容视图或编辑视图组成的。

如果导航层次结构比较深而且复杂，使用目录视图连接顶层和细节视图。

顶层视图
的顶层应用程序通常由不同的意见，您的应用程序支持。

的意见相同的数据或显示不同的表述，您的应用程序暴露一个完全不同的功能方面。

应用程序的顶层通常包括其所支持的不同视图。

视图既可以把相同数据用不同方式展示，又可以展现应用程序的不同功能。

目录视图
目录视图可以更深入下层数据。

详细视图/编辑视图
详细内容/编辑视图是展现或创建数据。

顶层视图
你的启动屏幕的布局要特别注意。

这是用户启动您应用程序看到的第一个画面后，因此它应该是对新用户和老用户都具有同样的体验。

问问你自己：“什么是典型用户最有可能在应用程序想要做的”，并据此构建第一屏幕的体验。

把内容向前
很多应用程序的核心都是内容的展现。

避免只在界面上出现导航，要让用户在你的第一画面中快速获得他们想要的内容。

第一屏要选择具有视觉吸引力、适当的内容类型和屏幕大小的布局。

上图是Google商店应用程序的第一个界面，从第一个界面可以导航到应用程序，音乐，书籍，电影和游戏的商店。

这个界面也提供量身定制的推介和促销活动，这些表面的内容丰富了用户感兴趣的体验。

从上面的搜索操作栏很容易进行搜索操作。

把导航和操作设置在动作栏上
在您的应用程序的所有屏幕显示的动作栏要提供一致的导航和界面的主要的动作。

在顶层视图要对动作栏做如下特别考虑：
l 使用动作栏显示应用程序的图标或标题。

l 如果应用程序顶层视图包含多个视图，或是经常要在不同用户帐户之间进行切换，为了确保用户在不同视图或不同帐号间导航容易，在动作栏增加视图控件。

l 如果您的应用程序可以让人们创建内容，从顶层就有创建内容的入口。

l 如果内容是可搜索的，动作栏中要包含“搜索”动作，使用户可以穿过导航层次结构进行搜索。

上图是电子邮件的应用，这是一个一个高效的、易用的、高密度数据列表应用。

导航可以支持不同账户和最近访问的标签之间切换。

在底部分割动作栏中可以创建一个新的邮件或搜索。

为应用程序创建唯一的标识
为您的应用程序创建一个唯一的标识重要性高于动作栏。

应用程序要通过数据排列方式，以及用户如何与它进行交互通信来创建比较独特标识。

特别是对于富媒体应用，要努力创造独特的布局来展示你的数据，这将比千篇一律的简单列表视图要重要的多。

上图是3D 旋转木马式的封面来展示音乐，这是这个应用程序的一个独特的标识。

默认在最近试听中展示用户最后听过的一些歌曲。

目录视图
一般而言对于深层次的以数据为主应用程序，并且数据是可以查看和管理的，一般是通过组织目录视图与详细视图的级别，来使你的应用层序变得没那么深的层次，使用户感觉导航最小化。

即使从顶层视图到细节视图的垂直导航步骤通常取决于应用程序的内容结构，但还是有几种方法可以减少视图之间繁重的导航。

类别选项卡和数据显示选项卡的组合使用
如果对类别熟悉或类别的数量不多将是非常成功的。

它具优势是除去了一级继承关系，并且还保持在用户关心的核心。

丰富的数据类别之间的横向导航会给你一种休闲的浏览体验，而不会感觉是一个明确的导航步骤。

如果分类是熟悉的、可预测的或密切相关的，使用滚动标签（如并非所有的项目同时显示）。

水平滚动标签的数量要保持在一个可控范围内，以减少航行的困难。

经验法则：不超过5-7标签。

上图是Google商店应用程序，使用了标签显示类别选择和类别内容。

类别之间的导航可以左/右滑动。

选项卡类别如果没有密切的关系，赞同固定标签，同时所有类别都显示出来，不要通过滑动。

上图是YouTube使用固定标签切换，这些标签都是相对无关的功能区之间进行切换。

允许贯穿层次
利用的快捷方式使用户能够更快的到达自己的目标。

为了让用户可以从顶层调用列表或网格视图里的数据项目的操作，在列表视图上使用下拉菜单直接进入数据项操作。

这可以让用户不用导航很深的层次就可以直接调用深层的操作动作。

上图是音乐应用程序，用户可以在分类视图中（册页）对一个数据项（歌曲）采取行动，，从而无需到浏览歌曲的详细信息视图。

适用多个数据项
尽管目录视图主要是用来引导用户到详细内容视图，但要记住，经常也对数据集进行操作。

例如，如果你允许详细视图中删除一个项目，你也应该允许用户在分类视图中删除多个项目。

分析哪些详细视图操作要适用于集合项目。

然后，使用允许多选择，应用这些动作到多个项目类别视图。

详细视图/编辑视图
详细视图允许您查看和操作数据。

详细视图中的布局取决于所显示的数据类型，因此在不同的应用程序中会有很大的不同。

布局
考虑到用户会在详细视图中执行的操作来安排相应的布局。

上图应用程序的详细视图的目的是为了展现的通讯录的选项。

列表视图可以高效地浏览和快速访问电话号码、电子邮件地址和其他信息。

把电话和短信用一个分割线切分并组合在一起。

熄灯模式
像媒体和游戏的沉浸式内容，给用户最佳的体验是全屏无干扰的。

但是，这并不意味着你不能还提供其它的动作，像共享，评论，搜索。

如果在一定短的时间内用户没有和内容作任何互动，动作栏和所有的系统UI自动消失，使用户可以很好浏览内容。

我们把这种叫熄灯模式。

如果用户要做一些操作，他可以触摸屏幕上，退出无人熄灯模式，而出现动作栏。

上图是谷歌图书的详细视图是熄灯模式的最好体验，通过熄灯模式和页面翻转动画来读取实际内容。

确保详细视图之间的导航高效
如果用户想看看在序列中的多个项目，使项目内的详细视图之间可以进行导航。

使用刷卡试图或其他技术，如缩略图视图控件，实现这一目标。

上图Gmail使用刷卡视图从一个详细视图到另一个详细视图。

除了支持滑动手势让页面左右移动，也可以为杂志提供一个缩略图视图控件，可以让用户快速跳转到特定的页面。

导航
一致的导航是一个整体的用户体验的必不可少的组成部分。

与用户行为不一致和出乎用户意料的操作会让用户感到很反感。

Android 3.0的显着变化是全局导航行为。

亲切地遵循返回与向上导航的设计规范，这将使你的应用程序的导航变为可预测和可靠的。

Android 2.3和更早的版本在应用程序里面的导航是依赖于系统的硬“返回”按钮。

在Android3.0中引入的动作条，第二种导航机制出现了---“向上”按钮，它是一个图标或向左的符号。

向上与返回
向上按钮用于应用程序中基于屏幕层次之间的导航关系。

举例来说，如屏幕是显示项目清单，选择一个项目需要显示屏幕B（更详细介绍了该项目），然后屏幕B应该提供一个按钮来返回到屏幕A.
如果屏幕是一个应用程序最顶层（即应用程序主页），就不应该出现一个向上按钮。

系统的“后退”导航按钮，是按用户最近访问过的历史屏幕的时间先后顺序编排的。

它一般是根据屏幕上的时间之间的关系，而不是应用程序的层次结构来返回的。

以前查看过的屏幕也是当前屏幕的父层次，按返回按钮与向上按钮有相同的结果。

然而，“向上”按钮可以确保用户仍然在你的应用程序中，不同的是，“返回”按钮可以使用户返回到主屏幕，甚至是一个不同的应用程序。

“返回”按钮还支持一些并无直接关系到屏幕到屏幕的导航行为：
l 消除浮动窗口（对话框，弹出窗口）
l 消除上下文操作栏，移除选定项目的高亮
l 隐藏屏幕上的键盘（IME）
应用程序中使用导航
多个入口点导航到屏幕的
有时一个屏幕在应用程序结构中没有一个严格的位置，并且能从多个入口点到这个屏幕，如设置屏幕，在您的应用程序中需要从任何其它屏幕可以达到设置屏幕。

在这种情况下，应该选择“向上”按钮返回到引用它的屏幕，这等同于“返回”按钮。

更改屏幕视图
更改屏幕视图的选择不会改变“向上”与“返回”行为：屏幕仍然在应用程序的层次结构的相同位置，并没有创建新的导航历史。

例如下面一些视图的改变：
l 使用标签或左、右拨动切换视图
l 使用下拉切换视图（又名倒塌标签）
l 筛选列表
l 排序列表
l 更改显示特性（如缩放）
兄弟屏幕之间导航
当您的应用程序支持选择列表的项目之一到这些项目的详细视图的导航，它往往需要支持到从列表的其中一个项中去到列表顺序中的另一个项。

例如，在Gmail中，在同一个收件箱中通过
向左或向右滑动很容易实现从一个会话到一个新的或旧的视图。

正如更改屏幕视图时，这种导航没有改变的“向上”和“返回”的行为。

但是也有值得注意的例外发生，浏览相关细节的视图没有和指定的列表绑在一起，例如，当浏览应用市场里同一开发商的应用程序，或相同的艺术家的专辑。

在这种情况下，每一个链接都创造了历史，导致“返回”按钮贯穿用户每个先前查看过的屏幕。

应该使用“向上”按钮绕过这些相关的屏幕和导航，直接到最近浏览过视图的上一级容器屏幕。

你完全有能力基于你对详情视图的了解，使去到上一级的操作行为更聪明便捷。

从上面的例子扩展应用商店，想象用户最后是从一本书的详细视图导航去观看同名书改编的电影。

在这种情况下，“向上”按钮可以不通过先前用户的浏览返回到容器屏幕（电影）。