Android Design Pattern-II

育儿塘小组 清华大学美术学院 信息艺术设计系 交互设计（一）

目录 Contents 1. 处理数据 2. 输入数据 3. 导航 4. 通知 5. 个性化 6. 屏幕交互 7. 社区化

Dealing With Data

Getting Input

Navigation

Notifications

Personalize

Screen Interactions

Social

导航 Navigation

于俊杰 Ginger Yu

导航 Navigation

1. 突出重要功能 2. 大量内容中找到路径 3. 在内容中移动 4. 触发 5. 连接前后操作 6. 进入常用选项

Highlight important functionalities

A way through content

Move through content

Toggle between different sections or

activities

Access to contextual actions

Access to general operations

突出重要功能 Highlight important functionalities

•  操作栏 •  分类仪表盘 •  功能仪表盘

1 Action Bar

Dashboard-Catology

Dashboard-Features

导航

操作栏 Action Bar 1.1 突出重要功能

使用情景

如果想在屏幕上采取关键操作，可以使用操作栏。你不希望在菜单按钮下面隐藏它。操作栏是最适合用于像搜索，刷新或撰写等常用操作。当屏幕空间十分有限时，考虑把操作放到选项菜单中。

导航

•  位于屏幕的顶部以支持导航和突出重要的功能

•  替换标题栏（通常将其包括在内）

•  非常适合在使用应用过程中使用，例如搜索，刷新和撰写

•  它提供一个快速的链接入口，可以通过轻轻点击应用Logo进入到应用的首页

•  最好没有前后关系，但是每个页面中的可用操作是不同的

操作栏

导航

1.1 使用情景

•  轻松访问关键的功能 •  在你的应用程序中提供一个锚点

•  会显示应用的商标，所以用户知道他们正在哪个应用里

•  使用时会比在主菜单中提供选项占用更多的屏幕空间

•  使用宽屏模式时需要在屏幕上经过较远的距离

+ -

操作栏 Action Bar

导航

突出重要功能

1.1 具体案例

Twitter

Market

导航

2 在Tweets页面上还有一个额外的功能：刷新。

Twitter

1 Twitter的标志是始终在操作栏的左侧位置。从每个页面都可以直接返回应用的首页，正如展示所示。

导航

Twitter

3 创建tweet页面，在操作不能被应用之前就会出现提示。

导航

1.2 使用情景

当你的应用以内容为中心且可以被分成不同类别时你可以使用分类仪表盘。为了提高可搜索性，可以在仪表盘内包含搜索栏。该仪表板还可与操作栏同时使用。

分类仪表盘 Dashboard-

Catology

导航

突出重要功能

分类仪表盘

•  仪表板是您应用程序的欢迎屏幕。 •  它为用户提供了一个起点。 •  仪表板可以是静态或动态的，例如，你可以使用动态壁纸或者改变新的条目内容。

•  一个类别仪表板，与内容相接的入口点由几个不同的分类展示出来。

•  这些分类由图标或者标题的形式展示出来，以网格的形式铺满整个屏幕。

•  这种布局设计，用户可以更快地查找内容。

导航

1.2 使用情景

•  很好地概括了应用程序的内容

•  对于在海量内容中导航来说是一个简单的起点

•  仪表板占用大量的屏幕空间

•  想要获得所需的内容可能会花费额外的步骤

•  对于某些应用程序来说，直接进入应用比进入仪表盘会更有用 + -

分类仪表盘 Dashboard-

Catology

导航

突出重要功能

分类仪表盘 Dashboard-Catology 1.2 具体案例

Google Place

Documents to Go Factbook

导航

突出重要功能

Google Place

1 Google Places显示了寻找附近不同类别的地方。用户可以添加自定义类别。仪表盘包括一个搜索栏，以方便寻找位置。

导航

1.3 使用情景

当你的应用以内容为中心且可以被分成不同类别时你可以使用分类仪表盘。为了提高可搜索性，可以在仪表盘内包含搜索栏。该仪表板还可与操作栏同时使用。

功能仪表盘 Dashboard-Functionalities

导航

突出重要功能

功能仪表盘

•  仪表板是您应用程序的欢迎屏幕上，它为用户提供了一个起点。

•  仪表盘显示了各种功能，用户可以使用应用程序，并强调有什么新的。

•  仪表板可以是静态或动态的，例如，你可以包含的项目，如动态壁纸和不断变化的内容。

•  功能性的仪表盘在全屏的时候显示出与你的应有相关的关键功能。

•  它为重要的任务和功能提供简单的接口。

•  功能能会以图标加题目的方式在表格中排布。

导航

1.3 使用情景

•  很好地概括了应用程序的内容

•  对于在海量内容中导航来说是一个简单的起点

•  仪表板占用大量的屏幕空间

•  想要获得所需的内容可能会花费额外的步骤

•  对于某些应用程序来说，直接进入应用比进入仪表盘会更有用 + -

功能仪表盘 Dashboard-Functionalities

导航

突出重要功能

1.3 具体案例

Google Place

Documents to Go Factbook

功能仪表盘 Dashboard-Functionalities

导航

突出重要功能

Google Place

1 Google Places显示了寻找附近不同分类的地方。用户可以添加自定义类别。仪表板包括一个搜索栏，以方便寻找位置。

导航

2.1 使用情景

通常信息必须被分解成多个层级列出。点击一个条目可以使用户移动至有更多细节的层级，所以进入的层级越深，获得的详细信息也就越多。用户还可以通过更深层次的挖掘一系列文件夹来找到特定的文件。在最后的层级可以编辑条目。当信息需要在同一个屏幕上显示时，考虑使用扩展列表。当信息需要被比较或者同时查看时，请不要使用深入导航。同时也不要在深入导航中放入太多层级。

深入导航 Drill Down Navigation

大量内容中找到路径

导航

深入导航

1 信息是通过多层级在列表中组织起来的。点击列表中的一个条目…

2 打开了下一层级。在列表中再次单击其中的项目…

3 打开，在这种情况下，目前是最后一个层级。

导航

使用情景

•  可以针对确定的内容提供非常详细的信息

•  整个屏幕可用来显示详细的信息

•  不方便比较信息 •  用户在多层级的信息中可能会迷失

+ -

深入导航 Drill Down Navigation

导航

大量内容中找到路径 2.1

2.1 具体案例

Treintijden light

Dropbox

深入导航 Drill Down Navigation

导航

大量内容中找到路径

2 下一个清单显示出来：从该站出发的车次信息。

TwitTreintijden light ter 1

应用程序Treintijden light可以用来查询列车时间表或火车的计划车次。当列表中的一个车站被选中时

导航

TwitTreintijden light 3

显示了这方面的所有细节。

导航

2.2 使用情景

列表可以多次使用因此它的应用频率很高。列表视图是一种简单且直接的方式来显示导航项目，尤其是当项目的数量不是非常庞大的时候。垂直滚动的列表中，内容被放置在唯一层级中。次级标题将各个项目分成小组，这样使得导航更加容易。当你有大量的导航项目，可以考虑使用一个扩展列表，或深入导航 。

列表导航 List Navigation

导航

大量内容中找到路径

列表导航

1 内容显示在一个列表里。项目包含一个标题，通常伴随着一个图标或者图像。当然也允许有其他信息，只要那看起来还像一个列表。

2 当用户的手指在他希望的方向上（本案例中向上）移动时，列表会通过屏幕向上移动，可以看到新的条目。

3 当屏幕继续移动时，指示器会显示当前项目在整个列表中的位置。当用户停止滚动且列表停止移动时，指示器会渐渐淡出。

导航

使用情景

•  这是一个简单的方法来提供导航

•  当列表过于庞大时，会削弱用户对其的整体感知

+ -

列表导航 List Navigation

导航

2.2 大量内容中找到路径

具体案例

Shop Savvy

Calorie Counter

List Navigation

导航

2.2 大量内容中找到路径 列表导航

Shop Savvy

1 条形码扫描应用Shop Savvy在其首页使用了列表导航。从这里，用户可以作出选择，以执行一个操作。

导航

2.3 使用情景

当用户希望在不改变当前视图的前提下找到特定的数据时，可以使用分段控制。它可以作为对一组数据的过滤器。您还可以考虑使用模式选择器来将内容划分成不同的区域，在这里选择不同的部分，对应的内容被加载。如果数据并非出于一个系列，你可以考虑使用标签栏。当内容覆盖了确切的条目且不得不划分成不同的主题时，你应该使用模块标签。

分段控制 Segmented control

导航

大量内容中找到路径

分段控制

1 分段控制是一个水平对齐的分段，包括2-5个按钮，它类似于数据选择中的过滤器。当用户点击一个按钮...

3

2 被点击的按钮保持高亮…

导航

与该分段对应的数据显示出来

使用情景

•  它可以更快地帮助用户找到他想要的项目

•  劣势暂无

+ -

导航

2.3 大量内容中找到路径 分段控制 Segmented control

具体案例

Appie - Shops

Appie - my purchases

导航

2.3 大量内容中找到路径 分段控制 Segmented control

2 在这里，所有晚上8点以后仍然营业的超市显示出来。

Appie - Shops

1 在Appie你可以找到超市。在上面分段控制有助于筛选出正确的内容。现在，所有的超市都显示在地图上。

导航

2.4 使用情景

当希望用户在当前屏幕上寻找内容时，可扩展列表是非常有用的。内容可以按照类别分组，覆盖两个层级。当一组有许多子项，可以考虑使用深入导航以避免大量的滚动。

可扩展列表 Expandable list

导航

大量内容中找到路径

可扩展列表

1 可扩展的

•  项目按组组织（通常按照类别）为两级列表。群组可以单独展开以显示他们的子项目。在可扩展列表中每个项目的旁边有一个指示器，可以指示每个项目当前的状态。

•  根据设备不同，指示器有可能位于项目的左侧或者右侧，展开状态有可能是向右或者向下的。

2 已展开的

导航

使用情景

•  信息可以更容易进行比较

•  在一个屏幕上有大量的信息，所以不方便滚动

+ -

导航

2.4 Expandable list 可扩展列表 大量内容中找到路径

具体案例

App categories

Browser (Samsung Galaxy S)

导航

2.4 可扩展列表 Expandable list

大量内容中找到路径

2 使该项目扩展并且它的子项目显示出来。指示器在这里指向了顶部。

App categories

1 在应用分类中你可以对你的应用进行分类。该截图中显示了所有类别。这些类别是折叠的，因此它的子项是不可见的。点击一个类别…

导航

2.5 使用情景

当你有很多内容需要分配，且这些内容可以分成不同的模式或者区域时你可以使用模式选择器。选择器的工作原理相当于针对大量内容的过滤器。确保你分配在相同区域里的内容是相似的。不要为选择器添加任务。当你希望在不同活动中使用触发器时，请使用标签栏代替。当你不希望其他部分的内容通过转换到另一部分而加载时，你可以使用分段控制 。

模式选择器 Mode selector

导航

大量内容中找到路径

模式选择器

1 用户这在浏览的内容，在这里以列表的形式显示。

4 该表格可以通过轻击选择器或者表格外面的区域来关闭。

3 一个有着所有其他部分的表格滑入屏幕。

导航

2 在模式选择器中附带操作栏或者标题栏。它包括一个指示器，这样用户就可以知道他可以在不同的模式或者区域中转换（模式选择器中的元素是确定的），当前部分的标题是可见的。该部分或者模式的题目同样也可以在操作栏或者标题栏中显示出来。模式选择器同样可以放置在左侧或者右侧，或者位于操作栏或标题栏的内部。点击模式选择器…

5 当用户点击了表格中的其他部分时

6 特定部分，包含了其相应内容将会显示出来

7 指示器中的该部分会被选中。

使用情景

•  可以分配大量内容 •  用户对有效内容一目了然

•  对于用户来说，这是一个很吸引人的方式在不同的部分中进行切换

•  指示器往往难以察觉

+ -

导航

2.5 模式选择器 Mode selector

大量内容中找到路径

具体案例

Time Mobile

Engadget Twitter

导航

2.5 模式选择器 Mode selector

大量内容中找到路径

2 当用户点击指示器时，一个有着所有可选部分的表格滑入到屏幕中。

Time Mobile

1 Time Mobile拥有大量内容，被分为了很多类别。在开始页面中，“最新故事”部分被显示出来。标题在“Time”logo下方显示出来。

导航

4 ‘影片’部分被选中...

Time Mobile

3 由于该表格有很多内容，所以用户可以滑动向下。

导航

6 相应内容显示出来。请注意该科在'时代'标志所有权发生了变化。

Time Mobile

5 ...部分正在加载...

导航

2.6 使用情景

当你有大量的信息需要呈现并且希望分布在不同的部分的时候可以使用标签。这些部分将横向排列2-5个。该部分的分类标签内容会显示在标签中。选项卡和分段控制十分相似，尤其是在帮助用户在不想改变当前视图的情况下找到部分数据的时候，但是分段控制的原理和过滤器相似，标签则将数据分成不同的部分。当你希望用户在不同的数据中转换时，你应该使用标签栏 。

标签 Tabs

导航

大量内容中找到路径

标签

在一个特定主题，内容分为3个标签。每个标签代表一个方面或部分的主题。

2 该标签高亮并且相对应的内容显示了出来。当最后一个选项卡被点击时…

3 它被选中并且对应的内容显示出来。

导航

1 在这里第一个标签已经被选中。它显示了有关主题的信息。当第二个标签被点击时…

使用情景

•  非常直观的方式将数据分成不同的部分

•  最初来自网络界面，所以用户对此项原则非常熟悉

•  当应用同时包括标题栏或者操作栏或者一个头部区域时，它会占用很多的屏幕空间

•  当超过3个标签的使用时，每一个标签的空间非常有限 + -

导航

2.6 标签 Tabs

大量内容中找到路径

具体案例

Facebook

Android Market

导航

2.6 标签 Tabs

大量内容中找到路径

2 点击第二个标签，关于此用户的个人信息会显示出来。

Facebook

1 在facebook中，一个用户已被选中，关于此用户的信息被分成3个部分，第一个部分“墙”已经被选中。

导航

Facebook

3 在第三个标签下，该用户的所有照片会显示出来。

导航

2.7 使用情景

窗帘主要用于提供导航选项。你可以让窗帘中包含应用常用的快捷方式或设置，或者你可以用它来让用户切换到不同的部分，而这往往出现在新闻类应用程序中。这个选项与于模式选择器十分类似，但后者并不控制整个屏幕。您还可以使用窗帘，让用户方便地移动到其他功能，这需要在应用程序的任何位置均可访问。

窗帘 Windows Shade

导航

大量内容中找到路径

窗帘

1 窗帘控件在这里放置在屏幕的底部。它通常是一个水平放置，它使用三条水平线作为视觉提示。当用户点击并保持控制时（在某些情况下使用单击）...

2 向上推开（这里不需要通过点击），窗帘会跟随着滑入到屏幕中。用户可以在某一点释放手指控制，根据速度、拖拽的手势和当前空间在屏幕上停留的位置，窗帘控件有可能滑回至其原始位置。

3 或者它将覆盖整个屏幕，显示分配给它的内容或功能。

导航

4 可以通过拽回、点击返回按钮或者点击控制栏将其关闭。

使用情景

•  这是一种很好的吸引用户移动到不同内容中去的方式

•  它与物理中的窗帘十分相似，使用起来非常有趣

•  不会占用过多的屏幕空间

•  只有窗帘控制栏需要显示出来

•  如果没有给出正确的视觉提示，有可能会忽略该控件

•  被窗帘覆盖的内容不再可见，有可能给用户造成迷失感

•  有可能意外地触发滚动列表 + -

导航

2.7 窗帘 Windows Shade

大量内容中找到路径

具体案例

Facebook

Winamp New York Times

导航

2.7 窗帘 Windows Shade

大量内容中找到路径

2 它可以被点击，或者推上去，拖下来以显示通知信息。可以通过点击或者拖拽下来来关闭窗帘。

Facebook

1 在屏幕的下方 Facebook的仪表板使用窗帘来显示提示信息。但是没有给出明确的视觉提示以告知用户这的确是一个窗帘。

导航

2.8 使用情景

当用户不得不处理长列表或者项目是可以使用卷轴滑块。用户必须向下滚动才可能找到自己感兴趣的条目，但是到达页面的底部意味着需要大量的投掷滚动。卷轴滑块帮助用户在列表中快速移动。列表中的条目会按照字母顺序排序，例如联系人列表。在这种情况下，与卷轴滑块（上面有着当前处于焦点的字母）结合是非常有用的。（看Facebook和联系人屏幕截图示例）

卷轴滑块 Scroll thumb

导航

大量内容中找到路径

卷轴滑块

1 用户正在查看一个列表。

2 列表开始滚动。

3 在屏幕的右侧边缘会出现一个卷轴滑块。这是一个在页面上获得当前位置的指示器。

导航

卷轴滑块

4 卷轴滑块可以向上或者向下移动来帮助用户快速找到他们感兴趣的内容或项目。

5 当用户让卷轴滑块移动时，它会在两秒钟之后滑出屏幕，在当前位置显示列表。

导航

使用情景

•  滚动更快 •  使长列表易于管理

•  用户可能丢失列表的概况因为列表移动的很快（当项目并不是按照字母顺序排列时，用户并不知道具体停到哪里来查看）

+ -

导航

2.8 卷轴滑块 Scroll thumb

大量内容中找到路径

具体案例

Facebook

Dropbox Contacts

导航

2.8 卷轴滑块 Scroll thumb

大量内容中找到路径

2 当用户开始滚动起来，一个卷轴滑块会显示在屏幕边缘。用户可以拖动它向上或向下滚动。

Facebook

1 Facebook的好友部分在以前的版本是在这里显示。

导航

4 最后版本的Facebook给出了一个有关卷轴滑块崭新的设计，它增加了，在屏幕中间会显示朋友的首字母。

Facebook

3 当释放它时，它便滑出屏幕。

导航

2.9 使用情景

当你的应用程序有很多内容需要分配且不得不划分为很多区域时，你可以选择将这些部分作为项目放在顶部导航中，当他们无法适应屏幕宽度时可以进行水平滑动。重要的是，项目是彼此相似的。顶部导航并不意味着包括任何活动。如果是那样，您应该使用标签栏代替。可滑动的顶部导航可以应用于和模式选择器相同的情景。还有窗帘可以在相似的情景使用，但是在这里功能同样被占据，并非像顶部导航一样。

可滑动的顶部导航 Slideable top navigation

导航

大量内容中找到路径

可滑动的顶部导航

1 在屏幕的上方有水平排列的按钮或者标签，他们中的每一个都代表应用的一个部分。默认情况下，在最左边的按钮，处于被选中状态。只有少数适合屏幕。

2 所以用户可以通过滑动或者投掷手势将起滑动至左边以显示出剩下的全部。

3 被选中的部分保持不动，剩下的会随着手势移动，当移动距离足够远时有可能会不再显示出来。

导航

4 用户选择一个其他部分...

5 对应的内容被加载并且显示出来。

使用情景

•  它可以采用多个项目在顶部导航中

•  轻松切换到不同的部分

•  不需要为显示其他部分花费额外的点击（就像模式选择器），仅仅一个滑动手势就可以将屏幕外的项目显示出来

•  水平扫描并不简单（与模式选择器相反，纵向显示各个部分）

•  当一个部分被选中且移动，如果剩下的项目中的一个被选中，它会很容易消失掉不可见 + -

导航

2.9 可滑动的顶部导航 Slideable top navigation

大量内容中找到路径

具体案例

Mashable

Pulse

导航

2.9 可滑动的顶部导航 Slideable top navigation

大量内容中找到路径

2 当导航向左移动推出新的部分。

Mashable

1 社会媒体博客Mashable显示了一个可滑动的顶部导航。左边的按钮被选定为默认。

导航

4 然后显示出来。

Mashable

3 当新的部分被选中时，它所对应的内容被加载。

导航

Mashable

5 当顶部的导航移动到最后一个项目，项目编号11，顶部导航不会再进行移动。在这里，对于最右边的项目会显示黄色的外发光。

导航

3.1 使用情景

当你希望提供一个对于目标选择来说引人注意的方法时可以使用传送带，使用图形化的目标。它同样适用于当屏幕空间十分有限且可用导航条目非常多时。不要在用户需要一次性查看所有导航条目时使用传送带。当屏幕空间十分有限时，考虑使用选项菜单 显示导航条目。传送带可以有不同的形状与尺寸，这取决于屏幕的可用空间以及用户体验的需求。有两种常用的选项：在你的应用的初始页面使用全屏的传送带，另一个是通常在屏幕的顶端使用一个有许多菜单条目的传送带。

传送带 Carousel

导航

在内容中移动

传送带

1 项目以线性（从数字1到数字N）或循环方式组织。

2 焦点（可选）通过高亮或者增加尺寸来获得视觉中心。

3 用户可以通过在屏幕上向左或者向右划过来滚动项目。条目会按照手指移动的方向滑动。根据手指的移动，或者根据传送带的设置，一个或者多个条目穿过屏幕。传送带停止时，下一个焦点会显示出来。所有的项目始终处于可点击状态。

导航

使用情景

•  巧妙的利用屏幕空间 •  传送带使得目标选择获得参与式的体验

•  用户必须滑动才可以找到需要的选项

•  当屏幕空间十分有限时，传送带会占据很多的屏幕空间

+ -

导航

3.1 传送带 Carousel

在内容中移动

具体案例

Sportypal

IMDb

导航

3.1 传送带 Carousel

在内容中移动

Sportypal

1 在Sportypal中，用户可以通过循环的传送带来选择一项新的锻炼，在这里所有的条目都是可见的。当前这个条目是项目中的焦点。轻扫传送带，或者在肩头上点击，传送带每次会移动一步。所以用户想要到达他想选的锻炼至多需要两个步骤。

导航

3.2 使用情景

步骤导航用于用户需要以线性方式前进（例如多页教程、不同的文章等）。它可以保证用户对每一页都保持注意力。不要在用户需要在大量内容中寻找时使用步骤导航。如果是这样的话，可以考虑使用分页或添加一个搜索选项，以帮助寻找一个特定项目。

步骤导航 Stepping

导航

在内容中移动

步骤导航

1 步骤导航让用户在某时处理一个页面或一个项目。每一个屏幕上都有一个上一步和下一步按钮，第一屏除外。在第一屏上上一步按钮不会执行。

2 当用户点击下一步按钮…

3 下一屏内容会被加载出来。

导航

4 现在上一步按钮可以被点击了。

使用情景

•  引导用户线性地通过一系列数据，所以每一个条目都会引起注意

•  导航到特定的项目或屏幕将需要大量的点击

•  当用户通过很多屏幕时有可能会丢失焦点

+ -

导航

3.2 步骤导航 Stepping

在内容中移动

具体案例

Engadget

Google goggles tutorial HTC Sense - RSS reader

导航

3.2 步骤导航 Stepping

在内容中移动

2 下一篇文章被首先载入…

Engadget

1 在Engadget中，当用户选择了一篇文章时，他可以使用右下角的按钮移动到其他/较早的文章。在这里，这篇文章是20篇文章的第一篇，所以不能移回去。当他点击向前按钮。

导航

Engadget

3 完成加载后显示。

导航

4.1 使用情景

标签栏可以用于在应用中切换不同的模式或视图。用户应该在应用的任何地方都可以进入不同的模式之中。这意味着标签栏始终在屏幕的相同位置上，当前被激活的模式被突出显示。当你的程序有着清晰定义的模式、视图或者子任务时，使用标签栏。如果你希望针对数据进行特殊的过滤，例如显示所有项目中最喜欢的项目，可以使用分段控制。如果你需要在标签栏中放置超过5个选项，考虑将选项放置在选项菜单或传送带中 。你同样可以在右边添加一个更多按钮，点击后会打开一个对话菜单。如果你需要显示屏幕中的所有内容，功能仪表盘可以用来提供类似的导航。标签栏不应该在当前的模式中包含按钮来执行任何动作。如果是那样，可以考虑使用工具栏。

标签栏 Tab bar

导航

触发

标签栏

标签栏可以定位在屏幕的顶部或底部，它的功能是独立定位。它至多可以包含5个标签，在标签栏中，每个标签的间距是一样的。

1 第一个标签处于被选中状态，所以显示了对应的视图。当其他标签被点击时 2 属于哪个标签的内容会显示出来

导航

3 ...并且那个标签处于选中状态。

使用情景

•  允许在模式、视图或者任务之间轻松切换

•  对于用户来说是一种熟悉的导航方式

•  针对上下文选项主菜单保持可见性

•  标签栏可以让用户专注于内容

•  与选项菜单来说需要占据更多的屏幕空间来放置导航

•  最多只能同时有效地处理5个导航项目

+ -

导航

4.1 标签栏 Tab bar

触发

具体案例

Tunewiki

Engadget

导航

4.1 标签栏 Tab bar

触发

2 当另外的标签被按下是，在这种情况下，社区标签被高亮显示。在这两种视图下，用户可以继续申层次发掘他们正在寻找的东西。

Tunewiki

1 Tunewiki，社会化媒体播放器，使用只有图标的标签栏。目前激活的标签处于高亮状态。

导航

5.1 使用情景

上下文菜单与windows操作系统中的右键上下文菜单十分相似。它包含的功能用戶同样可以从其他地方找到。当你希望针对某些条目提供给用戶一些快捷方式来执行经常操作的命令，你可以将这些命令放在上下文菜单中。上下文菜单适用于（长）按下某个条目时。这些命令会按照相关度自上而下排列，最顶端的是最相关的。这些通常是需要在对条目进行普通点击时的选项。当针对每个条目都有多个视觉目标且又很多选项时，考虑使用快速操作栏。

上下文菜单 Context Menu

导航

连接前后操作

上下文菜单

1 当用户在一条特定的条目上长按时。 2上下文菜单，或者如你所知的长按菜单，打开了一个浮动的列表，上面排列着可供用户选择的操作选项。 3 或者通过点击后退按钮取消。

导航

使用情景

•  为经常使用的选项提供了一个快捷方式

•  作业直观：显示了特定条目上的操作选项

•  用户不得不去发现这里还有一个上下文菜单。没有为此提供视觉线索

•  会将用户的注意力从当前操作中转移开——有可能会使用户迷失

•  上下文菜单会占用大量的操作列表 + -

导航

5.1 上下文菜单 Context Menu

连接前后操作

具体案例

Gmail

Evernote

导航

5.1 上下文菜单 Context Menu

连接前后操作

2 打开了与此条目相关的充满命令的的上下文菜单。注意屏幕顶部的命令，阅读，有可能当用户在之前屏幕点击后，已经在进程中。

Gmail

1 在Gmail收件箱中，点击并保持在一个列表中的项目上。

导航

5.2 使用情景

你可以在为有内部目标竞争的条目中提供操作是使用快速操作气泡。它必须由一个独特的视觉目标引发，这样用户才知道可以做什么事情。要确保弹出的气泡框并非像传统的对话框一样阻碍了屏幕的正常使用，但是气泡框是位于所有条目之上的。在快速操作气泡框上只出现对于用户来说最重要且明显的操作。对于其他上下文操作，你可以选择使用上下文菜单 。不要在支持多项选择操作时使用快速操作按钮，就像Gmail。在这种情况下使用按钮条代替。

快速操作 Quick actions

导航

连接前后操作

快速操作

1 用户点击一个明确的视觉目标

2 在屏幕最上方图层弹出了一个快速操作框，它包括的最重要且最明显的操作。

3 在用户选择一个操作之后，动作会被直接执行，或者在确定了一个对话窗口之后执行。

导航

使用情景

•  对于屏幕内容来说破坏性较小

•  快速 •  有趣

•  视觉目标较难引起注意

+ -

导航

5.2 快速操作 Quick actions

连接前后操作

具体案例

Twitter

Samsung Galaxy S Contacts TaskKiller Free

导航

5.2 快速操作 Quick actions

连接前后操作

2 点击位于右侧的目标，会打开与此tweet相关的快速操作气泡框。注意，现在的目标是突出显示的。

Twitter

1 Twitter的android应用第一个版本在每一条tweet的右侧显示了视觉目标。其他的目标是tweets中的链接以及用户的头像。点击它们将分别打开链接或者用户的资料页面。

导航

5.3 使用情景

“滑过操作”模式到目前为止并没有适用于很多应用，但是它提供了一个漂亮快捷的方式来使用户选择针对一个条目可以直接操作的动作。这些被显示出来的操作必须是针对该条目最重要且显而易见的。该模式可以以两种形式存在。在线框图中的第一种解释：扫过之后，用户可以通过点击图标来选择执行一个操作。第二种是当用户扫过条目时，该操作直接执行。第二组截图的例子正是说明了这种形式。用户可以在两个方向上轻扫某个条目。有可能轻扫的方向不同，显示出来的操作也不尽相同。鉴于这种上下文情境的模式，你可以通过长按代替扫过，来调动图层中的动作。对此行动你可以称之为扫过，这需要有上下文地选择一个条目，并不能适用于整个屏幕。如果是那样，您应该把选项放在选项菜单中 。或者，当条目被点击且在详细页面中显示出来时，可将其添加至工具栏中 。你同样可以使用快速操作或者上下文菜单来代替刷过操作，但前者更有趣快捷。

滑过操作 Swipe for action

导航

连接前后操作

滑过操作

1 用户对列表中的一个项目执行扫过收拾。在这里他向右侧滑过。

2 列表中的清单被一个图层覆盖，该图层会以手势滑过相同的方向迅速的滑入屏幕内。

3 当该条目被覆盖时，针对该条目可以执行的操作的图标会立即显示出来。

导航

使用情景

•  快速 •  有趣 •  当用户熟悉它以后，他将会随时认真地执行用户的手势

•  由于缺乏视觉提示，该控件很难被发现

•  由于在执行刷过动作后，新添加的图层将覆盖此条目，因此用户有可能会对刚刚刷过的条目产生疑惑

•  这可能需要一段时间让用户熟悉它

•  用户在执行刷过动作之前并不知道将会出现什么可能的操作。

•  条目必须足够大以使用户可以执行扫过的命令

•  你必须点击返回键才能关闭此控件 + -

导航

5.3 滑过操作 Swipe for action

连接前后操作

具体案例

Twitter

Samsung Galaxy S - List with contacts

导航

5.3 滑过操作 Swipe for action

连接前后操作

2 显示出5个可供用户选择的操作。

Twitter

1 在列表中所有的tweets都可以向左侧或者右侧滑动。

导航

4 它覆盖了另一个人。所有没有被覆盖的操作是相同的：回复、转发、喜欢、查看用户资料和分享。用户同样可以通过长按来查看这些。

Twitter

3 用户可以扫过第二个条目。

导航

6 一个用户可以回复的屏幕显示出来。

Twitter

5 当一个动作被选中时，这里是第一个操作，答复...

导航

6.1 使用情景

你可以使用选项菜单来展示与当前屏幕内容相关的选项，也可以命令其开启另一项活动。这些选项并不应用于内容中被选中的项目。如果是那样的话，你需要上下文菜单 。当你无法使用屏幕的剩余空间，且对于当前活动有至多6个命令，可以应用选项菜单。当菜单命令超过6个，剩余的选项可以应用在扩展选项菜单中 ，通过“更多”按钮进入。

选项菜单 Options menu

导航

进入常用选项

选项菜单

1 当用户按下'菜单'按钮时，选项菜单中出现。选项菜单包括了针对当前屏幕所有相关的选项，无论是动作还是启动其他活动的链接。

2 选项菜单有1-6项内容，包括图标和题目。图标是用来标识选项，标题用来支持识别。选项按照相关程度自左至右、自上至下排列，在首要位置提供最相关的选项。菜单中的图标可以安排在每行2-3个格子内。

按下返回按钮、菜单按钮或者触摸屏幕菜单以外的区域时，菜单会关闭。

导航

使用情景

•  在选项菜单中有效的利用屏幕空间显示命令

•  只有选项与用户相关时才会显示出来

•  命令在每个屏幕中都不尽相同-或者根本不相关-这会使用户产生困惑

•  用户只有在按下菜单按钮时才能看到适用的选项 + -

导航

6.1 选项菜单 Options menu

进入常用选项

具体案例

gStrings

Shuffle Gmail

导航

6.1 选项菜单 Options menu

进入常用选项

gStrings

1 GString，一款可以谱曲的应用，在它的选项菜单中提供了3个命令。

导航

6.2 使用情景

您的选项菜单如果有超过6个选项时可以使用当前控件。

可扩展选项菜单 Expanded options menu

导航

进入常用选项

可扩展选项菜单

1 当使用者按下菜单按钮时，选项菜单从底部滑出，选项菜单中包括针对当然活动的全球通用命令，或者是开启另一个活动。

2 选项菜单包括1-6项内容，他们包含图标和标题。图标用来识别选项，标题则用来辅助识别。这些选项应该按照相关性自左至右、自上而下的排列，首先提供最相关的选项。菜单中的图标可以按照两列三行或者三列两行的格式放置。

3 当你有超过6个项目需要在选项菜单中放置时，请将第六个按钮设置为“更多按钮”，它需要被放置在右下角。

导航

4 当单击更多按钮时会打开扩展菜单，由底部滑入并且替换了图标菜单。扩展才按展示了一个只有文字内容的列表。

使用情景

•  避免使用频率较少的选项塞满屏幕

•  进入扩展菜单需要额外步骤

•  用户必须猜测哪些选项在扩展菜单中

+ -

导航

6.2 可扩展选项菜单 Expanded options menu

进入常用选项

具体案例

Astro

Google maps

导航

6.2 可扩展选项菜单 Expanded options menu

进入常用选项

2 一个额外的文字选项列表出现，代替了图标菜单。

Astro

1 文件管理应用程序Astro在其图标菜单中有超过6个选项，所以当“更多”选项被点击时...

导航

6.3 使用情景

当在一个确定的情境中，你想给用户一个简单的方式来完成多种动作可以使用工具栏。以此来代替将动作放入选项菜单中 ，你可以在屏幕上留出一条横向空间，那里可以容纳5个按钮。当你需要在工具栏中出现更多的选择时，请将最右边的按钮设置为“更多按钮”。你不应该在应用中使用工具栏来转换不同的视图或模式。如果是那样，您应该使用标签栏代替。

工具栏 Toolbar

导航

进入常用选项

工具栏

1 在当前的活动中，工具栏可以最多呈现5个执行动作的按钮。该工具条可以显示在屏幕上任何地方，它有一个固定的位置，收起工具栏可以移除屏幕。工具栏中的按钮只包含图标。当按下工具栏中的一个按钮时，这里分享了在它上面展示的一些内容。

2 一个对话框弹出来，上面有一些可供选择的选项，或者点击后腿按钮取消。

导航

使用情景

•  用户可以快速选择一个他想执行的动作

•  由于它在页面中的位置是固定的，所以工具栏有可能被滚动出页面，那时它将不可见

+ -

导航

6.3 工具栏 Toolbar

进入常用选项

具体案例

Wapedia

Skyfire Browser Google Places

导航

6.3 工具栏 Toolbar

进入常用选项

2 只有一个位向上滚动，工具栏是在页面底部可见。

Wapedia

1 Wapedia首页的工具栏不显示页面时，首先加载...

导航