Android Design Standards

本文从设计原则、风格、界面、模式、控件五个维度阐释安卓设计规范。通篇阅读下来可建立初步的安卓设计概念。

1.设计原则

A.着迷

  • 惊喜(漂亮的界面和悦耳的音效,提高易用性和掌控强大功能的感觉)
  • 真实的对象比菜单和按钮更有趣(人性化操作)
  • 个性(个性化,提供合理漂亮的默认样式的同时尽可能提供个性化功能)
  • 了解用户的喜好:记住用户喜好,不要重复询问

B.简洁

  • 简洁的句子:got Google?
  • 一图胜千言:尽量用图片去解释想法
  • 只展示用户需要的:不要给用户展示太多选择,将不重要的选项隐藏起来并让用户慢慢学习
  • 让用户知道ta在哪:通过页面样式的区别和页面切换的效果来告诉用户页面的位置
  • 不要弄丢用户的东西:记住用户创造的内容,并使之随时随地获取;
  • 颜行一致:不要给用户产生认知混淆
  • 只在重要时刻打断用户

C.惊奇

  • 用户使用引导
  • 用户永远没有错:提示用户做出改正时要保持和蔼和耐心;如果能系统自己解决就不要麻烦用户;
  • 给予哪怕微小的鼓励:反馈
  • 帮用户完成复杂的事情:通过步骤分解
  • 迅速完成最重要的事:功能展示的优先级

2.安卓用户界面:

结构

  • 主屏幕+所有应用+最近应用;
  • 系统栏:状态栏,导航栏
  • 通知抽屉:通知抽屉显示一些简要的信息,用户在任何时候都可以从状态栏访问它们。它收纳应用升级、提醒以及其他一些重要但不至于直接打断用户的信息。向下滑动状态栏可以打开通知抽屉。点击消息将会打开相应的应用。
  • 通用的应用ui:操作栏,导航抽屉,内容区域;

3.风格

A.设备与显示

  • 灵活(尺寸大小变化),优化布局,适用于各种设备(通过像素密度dpi实现)1
  • 如何开始为多种屏幕设计呢?一种方法是以一个基本的标准 (中等尺寸,MDPI) 开始,之后将其缩放到不同的尺寸。另一种方法是从最大的屏幕尺寸开始,之后为小屏幕去掉一些 UI 元素。

B.主题

  • 主题是一种使得 Android 应用保持统一风格的机制。风格样式定义了各种构建用户界面所需要的视觉元素,包括颜色、高度、边界填充和字体大小。为了提升各种应用的统一性,Android 为你的应用提供了两种系统主题:
    浅色 Holo 主题
    深色 Holo 主题

    将这些主题应用于设计中将使得应用更好的和 Android 设计语言融合起来。

C.触摸反馈

  • 视觉/触觉/听觉上的反馈
    2
  • 按钮的状态:
    3
  • 交流:当控件需要对复杂手势做出响应时,应帮用户了解该操作的结果;即通过反馈告诉用户操作会产生的结果(用户引导)
  • 边界:边界反馈

    D.度量单位和网格

  • 按像素密度分类的类别有 LDPI、MDPI、HDPI 和 XHDPI。为不同的设备优化你的应用界面,为不同的像素密度提供不同的位图。
  • 可触摸控件以48dp为基础单位:注意留白:界面元素之间的留白应该是8dp;
    例子

E.字体

  • roboto字体:专为界面渲染和高分辨率屏幕设计;
  • 默认字体颜色

Android 界面使用以下的色彩样式: textColorPrimary 和 textColorSecondary。在浅色主题中则使用 textColorPrimaryInverse 和 textColorSecondaryInverse。在设计框架中还包括了几种自带的触摸反馈效果。

  • 字体的缩放

为不同控件引入字体大小上的反差有助于营造有序、易懂的排版效果。但在同一个界面中使用过多不同的字体大小则会造成混乱。Android 设计框架使用以下有限的几种字体大小:字体大小 用户可以在“设置”中调整整个系统的字体大小。为了支持这些辅助特性,字体的像素应当设计成与大小无关的,称之为 (sp)。

F.颜色

  • 目的:强调信息,视觉对比效果;

G.图标

  • 图标在不同设备上的显示:提供不同尺寸的图标,dp;
  • 在设计图标时,对于五种主流的像素密度(MDPI、HDPI、XHDPI、XXHDPI 和 XXXHDPI)应按照 2:3:4:6:8 的比例进行缩放。例如,一个启动图标的尺寸为48x48 dp,这表示在 MDPI 的屏幕上其实际尺寸应为 48x48 px,在 HDPI 的屏幕上其实际大小是 MDPI 的 1.5 倍 (72x72 px),在 XDPI 的屏幕上其实际大小是 MDPI 的 2 倍 (96x96 px),依此类推。

提示: 虽然 Android 也支持低像素密度 (LDPI) 的屏幕,但无需为此费神,系统会自动将 HDPI 尺寸的图标缩小到 1/2 进行匹配。

  • 启动图标:启动图标在“主屏幕”和“所有应用”中代表你的应用。因为用户可以设置“主屏幕”的壁纸,所以要确保你的启动图标在任何背景上都清晰可见。启动图标
  • 操作栏图标:图像按钮;手机操作栏图标的整体大小应该是3232dp,图形区域为2424dp;
  • 颜色

颜色: #333333
可用: 60% 的透明度
禁用: 30% 的透明度

颜色: #FFFFFF
可用: 80% 的透明度
禁用: 30% 的透明度

  • 小图标:在应用的主体区域中,使用小图标表示操作或者特定的状态。例如在 Gmail 应用中,每条信息都有一个星型图标用来标记“重要”。小图标大小小图标尺寸:整体大小1615dp,图形区域1212dp;样式:中性,平面,简单,最好填充图标而非细线条勾勒;颜色:若图标可操作,则用和背景色形成对比的颜色
  • 通知栏图标:大小2424dp,图形区域2222dp;样式:简单平面,和启动图标相似;颜色:必须白色;

H.设计小技巧

  • 尽可能使用矢量图;避免缩放损失;
  • 使用更大的画布:为了更好的适配不同的像素密度,最好使用数倍于目标图标尺寸的画布。例如,启动图标在 MDPI、HDPI、XHDPI 和 XXHDPI 下的宽度为 48、72、96 和 144 px,使用 864x864 px 的画板可以降低缩放图标时的工作量。
  • 缩放时,按需重绘位图图层:

如果需要放大的图标中包含位图图层,这些图层需要进行手动重绘,以便在更高的像素密度下获得更好的显示效果。例如,为 MDPI 所绘制的 60x60 px 的圆,在适配 HDPI 屏幕时需重绘成 90x90 px。

  • 图标命名约定有助于图标文件的管理:
    图标类型 命名前缀 例
    图标 ic_ ic_star.png
    启动图标 ic_launcher ic_launcher_calendar.png
    菜单图标和操作栏图标 ic_menu ic_menu_archive.png
    状态栏图标 ic_stat_notify ic_stat_notify_msg.png
    标签选项卡图标 ic_tab ic_tab_recent.png
    对话框图标 ic_dialog ic_dialog_info.png
  • 按像素密度对图标进行归档
  • 删除最终版本中无关的元信息

I.自我标识

  • 适当使用高对比度端配色强带哦

J.写作风格

简短

只告知用户嘴必要的信息,避免冗长的表述,尽可能缩短文本长度;

简明

使用短词语/行为动词/简单名词;先说重要的事,一句话开头两个词应该表达出重要信息;仅说明必要信息;

友好

使用缩写;使用第二人称对话;保持随意轻松的腔调但避免使用俚语;

标点符号

句号: 如果toast、标签或通知消息等控件中只包含一句话,无需使用句号作为结尾。如果包含两句或更多,则每一句都需以句号结尾。

省略号: 使用 省略号 (…) 表示以下含义:

  • 未完成的状态, 例如表示操作进行中 (“下载中…”) 或是表示文本未能完全显示。

  • 菜单中需要进一步 UI 操作的条目 (例如 打印… or 分享…) 。

  • 例外: 如果该条目的描述文字中已经对进一步的操作进行了一定的描述则无需添加省略号, 例如 页面内查找 或 选定日期。

4.模式

A.应用结构

典型的 Android 应用由顶层视图和详细信息/编辑视图组成。如果出现深度且复杂的层级结构,使用分类目录视图连接顶层和详细信息。

顶层屏幕

首先展示内容;设计导航栏;

固定标签

同时显示多个顶层视图,且必须保证用户可通过左右滑动在不同视图之间切换;适合使用固定标签的情景

应用需要频繁的切换视图。
应用只有最多三个顶层视图。
希望向用户强调还有其他功能视图存在。

下拉菜单

适合使用下拉菜单 (Spinners) 的情景:

不希望标签栏占用过多的垂直空间。
用户切换视图时,数据集不发生变化,或者数据集的类型一样。

导航抽屉

从旁边划入;适合使用导航抽屉的情景:

不希望标签栏占用过多的垂直空间。
应用有很多顶层视图。
应用需要从低层视图直接切换到其他顶层视图。
应用需要在多个没有直接联系的视图之间切换。
应用可能会有较深的导航路径。

不要混合使用多种模式

请仔细斟酌应用的顶层视图设计,不要混合使用多种不同的模式。例如使用了固定标签,就不要为应用添加导航抽屉,否则用户可能会觉得复杂且混乱

分类目录

使用标签整合多个分类类别和数据视图;当分类相似时克采用滚动标签,不是很相似时用固定标签;优点:1.减少层层导航;2.使数据一直保持在用户关注的中心;

允许穿过多个层级端操作

在当前页面使用户可完成部分下级页面端操作;

同时对多个项目进行操作

详细信息

布局

使详细信息视图之间的导航变得简单

如果用户经常顺序浏览多个项目,那么应当让他们在详细信息视图中直接做到。考虑使用滑动视图 (swipe view) 或者其他替代方法实现这种操作。比如滑动视图;

在主页上显示有用的信息

使用操作栏提供统一的导航体验。

通过水平导航和快捷方式压缩导航层次。

通过多选使用户可以操作多条数据。

使用滑动视图 (swipe views) 在不同的详细信息视图中导航。

B.导航

返回键的功能

1.品目之间端导航;

2.“返回”键可以关闭弹出窗口 (对话框或者弹出信息)

3.返回”键可以关闭上下文操作栏,还可以清除当前的选择
4.“返回”键可以关闭屏幕键盘 (IME)

应用内的导航

导航到有多个入口的屏幕;

屏幕中切换视图;

从主屏幕或者通知进入你的应用的深层次屏幕;

间接通知:当你的应用需要同时通知多条信息时,可以通过单条通知将用户带入一个列表屏幕。这个屏幕列出所有的事件,并且可以让用户直接进入应用。这种通知叫做间接通知,在间接通知的列表屏幕按“返回”键将回到开启通知之前的屏幕;

弹出通知:跳过通知抽屉,直接将通知呈现在用户面前。不要滥用这种通知,除非用户必须立刻对信息做出响应时,才使用弹出通知。

应用间导航

应用之间有能力互相调用,用户可以直接从一个应用进入另一个应用。

安卓框架体系

activity定义一个包含信息和用户能够执行的所有相关操作的屏幕。你的应用就是一些 activity 的集合,包括了你编写的 activity 和从其他应用中复用的 activity。

Task 用于表示用户完成一个任务需要执行的 activity 队列。一个 task 可以只使用来自同一个应用的 activity,或者也可以使用来自不同应用的 activity。

Intent 作为一种机制,表示一个应用希望其他应用帮助它完成一个操作。应用中的 activity 可以向系统告知自己可以响应哪些 intent。例如比较常见的 intent “分享”,用户安装的许多应用可能都可以响应这个 intent 完成操作。

C.操作栏

操作栏的目的:突出重要的操作 (例如“新建”和“搜索”) 并且可以方便的使用。

在应用内提供统一的导航和视图切换体验。
将较少使用的功能收集到“更多操作”菜单中,减少界面上的杂乱布局。
为你的应用提供一个展示其特点的空间。

基本布局

1.应用图标+向上按钮;

2.视图控制(多个视图切换);

3.操作按钮;4.更多操作(隐藏较少呗用到的操作)

判断按钮是否能进入操作栏的标准(满足任何一条即可)

F — 常用

人们进入该屏幕,70% 是为了使用该功能吗?
人们经常连续使用这些功能吗?
完成这些操作多花一些时间很烦人吗?

I — 重要

这个功能很酷或者是你应用的卖点?
这个功能操作起来困难吗?

T — 典型

在类似的应用中,这是不是最主要的功能?
某些情况下,人们会不会对这个操作跑到更多功能菜单中而感到惊讶

上下文操作栏

浮于操作栏之上的临时操作兰,放置特定的子任务,一般在项目选择和文字选择时出现;

用户可以:

通过触摸选择项目。
在上下文操作栏中选择操作,并应用于所有已选项目。之后上下文操作栏自动消失。
通过导航栏的“返回”按钮关闭上下文操作栏,也可以通过点击上下文操作栏的选择图标关闭它。关闭上下文操作栏的同时要取消所有的选择。

当设计操作栏时,考虑以下问题

对于当前的任务,视图切换很重要吗?

如果视图切换对你的应用很重要,那么使用标签或者下拉菜单。

哪些操作应当一直出现在操作栏上,哪些可以放在“更多操作”菜单中?

按照 FIT 原则,考虑哪些操作放在操作栏上,哪些放在“更多操作”菜单中。如果操作栏中的图标太多了,使用底部的副操作栏。

哪些内容足够重要需要一直显示?

有时一些上下文信息对于你的应用很重要。比如收件箱中未读信息数量或者正在播放的歌曲信息。仔细考虑操作栏的布局安排。

D.导航抽屉:可折叠

关闭导航抽屉

当导航抽屉打开时,用户可以通过以下方式关闭它

  • 触摸导航抽屉以外的内容
  • 从屏幕的任何位置向左滑动 (包括从屏幕的右边缘开始)
  • 触摸应用操作栏的图标或者标题
  • 按“返回”按钮;
    使用导航抽屉的情景:有超过三个顶层视图,在深层视图之间导航;
    当导航抽屉打开时,清理操作栏,移除上下文相关的操作按钮,并显示应用的名称。

当导航抽屉打开后,隐藏上下文操作栏

首次启动时提示导航抽屉

当你的应用首次启动时,请打开导航抽屉,直到用户手动关闭它。这样确保用户了解如何使用导航抽屉,并且看到导航抽屉中有哪些项目。以后的应用启动可以不再自动打开导航抽屉。

给用户小提示

当用户触摸屏幕左边缘的时候 (左边缘 20dp 之内的位置),稍稍显示一点导航抽屉,提供有效的反馈,并且提示用户。

高亮

如果当前视图是导航抽屉中的一项,打开导航抽屉时高亮该项目,如果不是则不要高亮任何项目。

样式

导航抽屉的宽度可以根据应用的内容做出调整,但是请保持在 240dp 到 320dp 之间,其中每个项目的高度也不应低于 48dp。

E.多视图布局

预先为不同的屏幕尺寸和方向设计好应用的布局。

仔细考虑在不同的屏幕方向时,何种复合视图的布局是应用最好的选择。

寻找各种可能,将应用的视图组合成复合视图。

确保在屏幕旋转后,仍然提供相同的功能。

F.滑动视图

详细信息视图的滑动切换

标签的滑动切换

G.全屏模式

2种进入全屏模式的方式:

1.横屏模式:适用于不需要交互的应用,点击屏幕上的任何位置,调出系统栏。

2.沉浸模式:适用于需要频繁交互的应用,从屏幕的上/下边缘外向屏幕内滑动,调出隐藏的系统栏。

H.选择

如果你的应用可以执行多选,请使用上下文操作栏 (CAB)。

长按手势只用于选择,不要显示古老的上下文菜单。

如果不支持多选,那么长按手势应当没有任何的效果。

按照你在操作栏上排列内容的标准排列上下文操作栏中的内容。

I.确认和提示

确认是确保用户的确想要做出指定的操作。有些情况下,确认是以警告或者重要信息对话框的形式出现的,用户需要考虑再做出选择。

提示通过显示一些文字来告诉用户刚才的操作完成了。这样做可以避免后台操作带来的不确定性。有些情况下,提示可以提供一个撤销操作的选项。

一下下情况不需要提示:操作有其他形式的反馈或是可撤回的;凑走本身比较复杂,体现用户是深思熟虑过的;

J.通知

基本布局:所有通知的布局在基础上都包含:

  • 发送通知的应用图标或者发送人的头像
  • 通知标题和消息
  • 时间戳

当主图标显示发送人头像时,在副图标位置显示应用图标

扩展布局:

通过扩展布局显示消息的前几行或者图片的预览。

操作

Android 支持在通知底部显示附加操作。通过这些操作,用户可以对通知直接执行常见的任务,而不用打开应用。这样可以加快操作,配合上滑出消失操作,使用户的通知抽屉体验更加顺滑。

可以放入通知中的操作有以下特点:

  • 对于该通知重要、常用和典型的操作
  • 时间紧迫的
  • 不会与相邻的操作重复的
  • 不要放置:模糊的和点击通知得到的效果一样的操作,例如阅读或者打开

个性化

如果通知的内容来自于另一个用户 (比如一条消息),放个头像在通知上。

记住把应用作为次要图标放在通知内,让用户知道是哪个应用发出的通知。

去正确的地方

用户触摸通知后,打开你的应用并且将用户带到可以直接操作该通知内容的界面上。大多数情况下,应当是一个详细信息视图 (例如一条消息),不过也有可能是多条内容的列表 (处理 合并的通知 时)。如果进入的不是应用的顶级屏幕,那么在后退历史中增加导航路径,使用户可以通过“返回”键回到应用的顶级屏幕。更多信息,请参考 导航 一节的 系统到应用的导航。

正确设置通知的优先级

从 Jelly Bean 开始,Android 为通知增加了优先级标志。这样你可以使重要的通知相对于其他通知,总是显示在第一个。

合并通知

如果已经有正在等待处理的相同类型通知了,那么你的应用不应当再创建一条新的通知,而是将多条通知合并。

合并的通知提供了总体的信息描述,并且告知用户有多少条通知正在等待处理。

可以使用扩展布局为合并的通知提供更多信息。这样用户可以知道被合并的消息细节,并选择在应用中阅读通知内容。

保证通知是可选的:

用户应当可以控制通知。你的应用应当提供选项让用户可以关掉通知或者选择通知的方式,包括是否震动之类的。

使用独特的图标:

用户应当可以迅速的了解是哪个应用的通知正等待处理。

应当这么做:

观察已有的通知图标,为你的应用选择一个比较独特的。

应当这么做:

在通知中使用合适小图标样式,并且在通知操作中选择合适的 Holo Dark 操作图标。

应当这么做:

使你的图标保持简洁,不要使用难以分辨的细节。

不要这么做:

使用彩色突出你的应用。

正确的闪烁通知指示灯

许多 Android 都有个小灯,称之为通知指示灯,可以在屏幕关闭时告诉用户有通知在等待操作。有 MAX、HIGH 和 DEFAULT 优先级的通知会闪烁指示灯,低优先级的 (LOW 和 MIN) 通知不应该闪烁指示灯。

用户对通知的控制应该包括指示灯。通知指示灯应当显示的是白色。应用的通知不应该显示其他颜色,除非使用户指定

  • 构建用户真正关心的通知: Android 通知系统的设计就是要尽量减小对用户注意力的影响,但是仍要注意同时是会打断用户的操作的。当你设计通知时,请仔细考虑是否值得去打断用户。如果你不确定的话,给用户选择是否弹出通知,或者设置优先级标志。

好的应用只在需要它说话的时候才说话,但是有一些情况下有必要使用通知来打断用户。通知主要被用在时间敏感的事件上,特别是和其他人有关的同步事件。

何时不要显示通知

有些情况下不要使用通知影响用户:

不要用一些和他们没有直接关系或者不是时间敏感的事件干扰用户。例如社交网络的一些新鲜事,它们都不是很需要实时回应的。不过对于那些关注这些新鲜事的用户,给他们选择。

如果这个事件已经显示在屏幕上了,就不要再用通知了。而是在应用界面中通知用户。例如用户正在使用聊天应用的聊天的时候,就没必要再使用通知告知用户对方有回应消息了。

不要用技术细节来打扰用户,比如保存、同步或者升级。如果应用可以自己处理,就不要问用户。

不要用应用的错误消息打扰用户,如果应用可以快速恢复,那就不要问用户。

不要搞没有内容的通知,也不要打广告。通知是用来告诉用户某个事件,而不是仅仅为了打开一个应用。

不要仅仅是将你的应用显示在用户眼前。这样的通知只会使你的用户疏远你的应用。如果想让你的用户持续看到你的应用,做个小工具让用户可以选择放在主屏幕上。

通知的交互操作

图标区分通知,时间逆序从上到下排列;“正在进行的”通知不能被手动删除。

小部件:

  • 分类:信息小部件(显示重要信息,随时间改变;触摸打开相关应用)+列表小部件(浏览列表和在应用内打开制定项目的详细信息,可纵向滑动)+控制小部件(在主屏幕就打开常用说设置)+混合小部件(综合上面部件的特点)
  • 手势:触摸,纵向滑动
  • 小部件大小可让用户人为调整
  • 考虑布局:如何适应不同屏幕的大小

K.设置

不要把什么都放在设置里,按下面流程图仔细考虑:

人类能够短时间内记住的条目一般是 7±2 项。如果你给出了个超过 10 条条目的设置 (在通过上面的流程图筛选后),用户会觉得难以浏览、理解和对它们做出选择。

你可以将这些设置分组,把长列表变成短列表。同一组中相似的设置以下面的某一种方式排列:

  • 放在同一个分隔符下
  • 放在另一个屏幕中
    你可以任意组合使用上面两种分组方式来合理组织应用的设置项。

少于 7 项:
不用分组了,否则用户会觉得更复杂了。

8 到 10 项:
试着通过一两个分隔符分组。如果有的设置看起来比较独立,和其他的没有什么联系,那么可以按照以下的方案分组:
如果是比较重要的设置,直接把它们放在设置屏幕的最顶端。
否则在最下面用一个叫“其他”的分组摆放它们。

11 到 15 项:
类似上面的规则,试着用 2 到 4 个分隔符分组。

通过以下方法来减少分组数量:
如果有多于 2 个设置是给高级用户的,那么在主设置屏幕中放置一个“高级”按钮,将这些设置放置在点击后出现的子屏幕中。在“更多操作”中放置一个名为“高级”的条目以便导航。

找出“配对”的设置,尽量按照下面的“设计模式”将它们合并。例如你可以把两个相关的设置 (之前使用复选框) 合并为一个单选设置。

多于 16 项:
如果你可以把 4 项以上的设置组合在一组中,可以将它们放置在子屏幕中,在主屏幕用一个按钮连接到那里,这样可以有效的减少主屏幕中的设置项。

复选模式,单选,滑块,日期/时间,子屏幕,列表子屏幕,主开关,独立开关,相互依赖(一个设置的可用状态依赖于另一个设置的值;如果有多于 3 个设置依赖同一个选项,考虑使用由主开关控制的子屏幕,以便你的主设置屏幕不会被许多禁用的条目所弄乱。)

默认值

选择安全、中性、适合大多数用户的默认值。如果没有默认值,用户最倾向于选择哪个值?

哪个值是中性的?
哪个值最没有风险,最没有争议,最不过分?
哪个值消耗最少的电量和最少的数据流量?
哪个值最符合设计原则?
哪个值最符合设计原则?

为每个设置提供一个清晰而明确的标题,并且编写合适的副标题内容。副标题是用来表示状态的,除非它是个复选框才是做详细描述的.

L.帮助

假设每次请求帮助都是非常紧急的,不要增加额外的步骤增加用户的操作成本;

帮助内容的撰写原则:仔细考虑每一个像素,仅展示重要信息;图片比文字更容易理解;浏览而非阅读,请在排版上更友好;直接提供答案;

M.无障碍性

使导航符合直觉

使用推荐的控件大小

视觉元素的文字标签要有意义

Provide alternatives to affordances that time out

使用标准的开发框架控件或者让自定义控件支持 TalkBack

  • Android 包含了一些为视觉障碍人士提供方便的功能,这样就不需要你的应用作出较强烈的视觉变化。

TalkBack 是一个预安装的 Google 屏幕阅读器。通过阅读来反馈操作的结果,例如运行应用或者事件通知。

Explore by Touch 是与 TalkBack 结合使用的一个系统功能,你可以触摸屏幕,并且听到触摸的内容。

辅助功能设置让你可以设置设备的显示和声音,例如大号字体、语音阅读速度等。

N.纯粹的android

不要模仿其他平台上的ui元素;

不要使用专为其他平台设计的图标;

不要在列表中使用向右箭头;

5.控件

A.标签选项卡

滚动标签:可左右滑动;
固定标签;

B.列表

区域分割和列表条目

C.网格列表

基本网格列表的条目排列顺序:垂直滚动(从左到右从上到下);水平滚动(从上到下再从左到右)

D.滚动容器

滚动容器和滚动索引(按首字母查找条目)

E.下拉菜单

F.按钮

单图标;图标加文字(重要操作);仅文字;

G.文本框

当文字输入超出边界后,单行文本框会自动向左边滚动,使最右边的文字一直能够显示。当文本长度超过文本框宽度时,多行文本框会自动换行,当行数超出文本框高度时,会自动向上滚动,使用户能够看到最后一行。

自动完成文本框: 使用自动完成文本框时,它将会实时显示自动完成或者搜索结果,用户可以更容易和准确的输入内容。

文字选择:上下文操作栏;选择控制;(长按文本框选择文字进入文本选择模式)

H.滑块

交互式滑块

I.进度条和活动指示器

进度条应当表示从 0% 到 100% ,而且永远不会往回变成一个更小的值。如果有多个操作按顺序发生,使用进度条来表示整体的延时。

活动指示器用于那些不确定时间的操作。它们告诉用户要等一会儿操作才能完成,而不用将具体的细节说出来。

有两种活动指示器: 活动进度条和活动圈。这两种提供了自适应大小和 Holo Light/Holo Dark 两种主题。请在上下文周围选择合适的风格和大小。例如较大的活动圈比较适合大面积的空白区域而不是一个小对话框。每一个操作应该只使用一个活动提示器。

当使用活动圈时,不要配以文字。旋转的圆圈已经表明了正在进行后台操作。

自定义活动指示器:通过颜色区分状态;

J.开关

3种开关控件:复选框,单选按钮,开关;

K.对话框

警告对话框:分有标题栏和无标题栏,谨慎使用无标题栏,仅在有可能引起数据丢失、连接断开、收费等高风险的操作时才使用。并且标题应当是一个明确的问题,内容区提供一些解释。

弹出对话框:是一种轻量级的对话框,一般只让用户做出一个选择。弹出对话框不使用确定或取消按钮,而是让用户通过简单的触摸,在整个工作流中做出选择。

Toast 提供了轻量级的反馈信息。例如,当你在发送邮件前跳出撰写页面,“草稿已保存”的 Toast 让用户知道待会儿可以继续编辑。Toast 会在一定时间后自动消失。

L.选择器

提供了一种简单的方式,让用户在多个值中选择一个。除了可以通过点击向上/向下按钮调整值以外,也可以通过键盘或者手势。

选择器可以内嵌在一个表单中,但是由于它占的空间比较大,把选择器单独放在对话框里比较好。如果要嵌入表单,考虑使用文本框或下拉菜单以节省空间。

Thanks!