Android design pattern

Android Design

Pattern

育儿塘小组

目录 Contents

1. 处理数据

2. 输入数据

3. 导航

4. 通知

5. 个性化

6. 屏幕交互

7. 社区化

Dealing With Data

Getting Input

Navigation

Notifications

Personalize

Screen Interactions

Social

处理数据 Dealing With Data

丁棘

处理数据 Dealing with Data

1. 更改视图

2. 提示程序正在加载

3. 搜索

4. 排列数据

5. 展示大量内容

Change view on a set of data

Know app is loading items

Search

Sort data

Show a vast amount of content

更改视图 Change View on a Set of Data

• 菜单选项

• 专用按钮

• 标签栏

1 处理数据

Options menu

Dedicated button

Tab bar

菜单选项 Options Menu

1.1 更改视图

使用情景

一组数据可以以各种方式呈现，例如以列表、网格或是地图。用户可能需要在各个视图间进行切换。

最常见的需求是从列表变换到地图视图、或是图标视图。

当没有足够的屏幕空间显示一个专用按钮，或是一个标签栏时，可以在菜单项目中提供“更改视图”选项。

处理数据

1 点击“菜单”实体键

2 选项按钮从底部弹出，点击

3 呈现数据方式改变

操作流程

处理数据


1.1 使用情景

• 使用户的注意力始终集中在屏幕上，仅在需要时显示改变视图的选项

• 过于隐晦，用户无法直接看到

• 操作过多：需要2步

• 太过复杂：如果各个屏中的菜单项不尽相同，那么用户必须记住该选项的确切位置

+ -

处理数据

查看数据


1.1 具体案例

Google Maps

处理数据

Samsung-My Files

查看数据

2 但是当列表滚动后，用户便无法看到顶部的按钮了

Google Maps

处理数据

1 谷歌地图里查看“方向”时，默认显示列表视图。用户可以点击顶部的“我的位置”切换到地图视图

4 点击后进入地图视图。

但改页菜单中不再有“切换到列表”选项了，因为底部已经提供了固定的按钮

Google Maps

处理数据

3 因此在菜单选项中加入了“切换到地图”的选项

专用按钮 Dedicated Button

1.2 更改视图

使用情景

按钮可以包含文字、图标或者皆有，抑或在两个图标间切换。

按钮不必始终出现在同一个地方，但需要提防这样可能会给用户带来困扰。建议是始终为其提供来回切换的选项。

当你希望用户始终有一个选项以在视图间切换时，你应该考虑使用专业按钮。但当屏幕空间不允许时，可以考虑使用标签栏或菜单选项来替代。

处理数据

1 地图视图中，改按钮表示可以切换至列表视图

2 点击后切换至列表视图

3 再次点击可以切回地图视图

操作流程

处理数据

专用按钮 Dedicated Button

1.2 使用情景

• 直接明了：用户可直接看到可用的视图。

• 操作简单：只需1步

• 不必要的情况下，按钮也始终可见。

+ -

处理数据

查看数据

专用按钮 Dedicated Button 具体案例

Layar

处理数据

Google Places

查看数据 1.2

2 在地图视图中，双按钮依然存在，但此时选项已经改为切换至现实视图和换回列表视图

Layar

处理数据

1 顶部显示的双个按钮暗示用户可以从当前视图切换至实景视图或是地图视图

处理数据

3 现实视图中则为切换至地图和列表视图

Layar

标签栏 Tab Bar

1.3 更改视图

使用情景

但您的应用主要功能是查看数据，或是您认为更改视图这一操作会被大量使用时，您可以考虑将相应的视图标签页加入到标签栏中。

但屏幕空余空间不足以容纳一个标签栏或是专用的按钮，或者更改视图仅仅是一个次要的功能时，请考虑将这一功能加入到菜单选项中。

处理数据

1 标签栏中包含几个可供查看不同视图的标签页

2 点击后强调这这一标签

3 相应视图展现出来，并可在其他标签页间切换

操作流程

处理数据

使用情景

• 方便快捷：为在不同视图间切换提供了一种快速便利的方式

• 一目了然：所有视图选项可以直接呈现给用户（而不是隐藏在菜单选项里）

• 始终为用户提供一定的导航

• 占用宝贵的屏幕空间

+ -

处理数据

1.3 标签栏 Tab Bar

1.3 更改视图

具体案例

Wikitude

处理数据

Toilet Finder

1.3 标签栏 Tab Bar

1.3 更改视图

2 但点击“地图”标签时，搜索结果则展现在地图上

Wikitude

处理数据

1 搜索结果以列表视图显示，并在标签栏中突出显示相应的标签页

提示程序正在加载 Know app is loading items

• 动态载入列表

2 处理数据

Dynamic loading of a list

动态载入列表 Options Menu

2.2 提示程序正在

加载

使用情景

当内容的列表很长时，不建议将全部列表一次加载完毕。

只加载列表的顶端部分将大大地节省了用户等待的时间。

处理数据

1 列表中的一部分项目是预先载入的 2 当用户滑动列表，并到达预

载列表的最后项目时

3 “正在载入”的说明文字和指示动画出现，表明项目正在加载。完成后，指示信息消失

操作流程

处理数据

使用情景

• 更好的性能：因为所有项目并非完全一次加载完成

• 省去了用户通过点击来查看更多的项目

• 用户无法预知多少信息将被加载

• 用户每次查看更多信息时都必须等待

+ -

处理数据



加载

具体案例

Android Market

处理数据

Gmail



加载

AppBrain

2 Android market

处理数据

1 1 软件的名单是动态加载的。一个“正在载入”的提示表明有更多的项目正在被加载。

搜索 Search

• 搜索栏

• 主菜单

• 专门项目

3 处理数据

Search bar

Main menu

Dedicated item

搜索栏 Search Bar

处理数据

搜索 3.1

使用情景

绝大多少的搜索功能已由搜索栏来提供，例如搜索栏一直出现在屏幕的一个固定位置。但搜索功能同样可以由操作栏中专门的按钮、实体键、或者是菜单选项中的图标来提供。它们以相似的方式操作。

如果用户需要经常在应用的大量的数据中搜索相关的条目，那么您应当考虑在屏幕上方增加专门的搜索栏。

1 但搜索栏载入或激活后，字段被选中、显示光标，表明用户可以输入

2 底部键盘推出，同时搜索框、与选择的搜索模式相关搜索历史列表出现

操作流程

处理数据

3 用户可点击图标在弹出框中选择搜索模式

操作流程

处理数据

5 输入时，提供搜索建议。用户点击搜索按钮后开始查询

4 打开相应的搜索类型后，字段再次被选中

6 或通过点击回车键，而通常按键文字会改为“搜索”或“确定”

7 搜索完成后，将呈现出搜索结果列表

使用情景

• 容易识别，各个应用程序中已经普遍使用

• 提供多种搜索模式，从而可以过滤搜索结果

• 而多种搜索模式并不明显，用户必须注意具体的图标

+ -

处理数据


搜索 3.1

具体案例

Google Search

处理数据

Wapedia


搜索 3.1

2 当用户开始输入时，“语音输入”的按钮变为“搜索”按钮，并且显示搜索建议

Google Search

处理数据

1 用户可以通过部件(Widget)打开谷歌搜索

4 当用户选择了搜索应用模式后，搜索建议中将仅显示已安装的应用

Google Search

处理数据

3 在弹出的搜索模式选择框中，用户可以通过点击框内右上角的图标，来添加或删除搜索的类型

处理数据

3.2 使用情景

搜索在应用中往往是一个比较重要的功能，但当屏幕空白面积有限时，加入一个搜索栏或是一个专用按钮都太实际，这时候您应当考虑将其加入到菜单选项中。

当搜索的功能十分重要时，菜单选项中加入搜索选项可以和一个专门的搜索栏（在屏幕顶部的一个固定位置）配合使用。

主菜单 Main Menu

搜索

1 单击“菜单”实体键，菜单选项推出

2 点击“搜索”选项

3 搜索栏出现在屏幕顶部，左边为搜索模式的选择图标，同时字段被选中、右边的“搜索”按钮以及底部的键盘显示出来

操作流程

处理数据

使用情景

• 节约屏幕空间：相比专门的搜索栏而言

• 需要操作多步来进行搜索操作

• 搜索的位置往往并不明确（是出现在应用的所有的菜单中还是仅仅这屏中？）

+ -

处理数据

3.2 主菜单 Main Menu

搜索

具体案例

Dorpbox

处理数据

Google Maps

Android Market

3.2 主菜单 Main Menu

搜索

2 点击后，搜索框和键盘推出以让用户完成搜索

Google Search

处理数据

1 搜索位于菜单中的第一个选项

使用情景

当您的屏幕布局不足以容纳一个操作栏，且搜索操作相当总要，不适合将其放入菜单选项中时，您应该考虑将搜索功能整合到标签栏、仪表盘(dashboard)或是导航列表中。

处理数据

专用项目 Dedicated Item

3.3 搜索 3.3

2 搜索栏或搜索页出现，用户可以进行搜索

3 点击软键盘上的回车键或搜索图标后，搜索结果呈现出来

操作流程

处理数据

1 当标签页别点击后


3.3 使用情景

• 方便用户访问 • 占用宝贵的屏幕空间

+ -

处理数据

搜索

具体案例

Last.fm

处理数据

Calorie Counter

Evernote


3.3 搜索 3.3

2 点击后，用户可以在搜索栏中键入搜索词汇

Evernote

处理数据

1 主屏幕的仪表盘(dashboard)的右下角提供了搜索图标

处理数据

3 需要注意的是，在搜索页顶部的操作栏中仍然提供了一个搜索按钮，以便用户可以开始新的搜索

Evernote

排列数据 Sort Data

• 拖拽

• 排序对话框

4 处理数据

Drag & drop

Sort-key Dialog

拖拽 Drag & Drop

处理数据

排列数据 4.1

使用情景

当您的应用中的列表顺序很重要并且需要被自定义的时候，您应该考虑使用拖拽功能。

这个功能需要提供清晰的视觉提示。可供拖拽的图标应该出现在列表的右边。需要显示出列表确切的移动状态，让用户明了当前的情况。

如果您希望列表可以按一定次序（例如：名称或大小）自动排列时，应该考虑使用排序对话框来排序。

操作流程

处理数据

3 拖拽功能开启，提示图标显示在列表右侧

1 用户点击“按钮”实体键

2 菜单选项推入，点击“重新排列”的选项

4 带有“确定”和“取消”的按钮栏推入屏幕

操作流程

处理数据

5 用户点击并将其拖拽到屏幕上不同的位置

6 释放后，该列表进入恰当的位置。此时用户点击“确定”“取消”以完成操作

使用情景

• 方便直观地排列列表 • 步骤繁琐：需要很多操作来完成排序

• 排序的指示图标不易察觉

+ -

处理数据

拖拽 Drag & Drop

排列数据 4.1

具体案例

Google Stocks

处理数据

HTC Sense Music Player Playlist

Noodles

拖拽 Drag & Drop

排列数据 4.1

2 当点击“菜单”实体键后，菜单项目推入，此时选择“重新排序”

Google Searcks

处理数据

1 当前显示为股票的列表

4 用户点击并拖拽项目

Google Search

处理数据

3 拖拽的图标出现在每个列表的右侧

处理数据

5 释放后，列表呈现出新的顺序

Google Stocks

排序对话框 Sort-key Dialog

处理数据

排列数据 4.2

使用情景

当您的应用中的展示了很多项目，并且每个项目都拥有很多属性（如名称、大小和日期）时，您应当考虑加入排序的功能。因为用户需要浏览特定感兴趣的项目，或是在特点的属性上进行比较。此时，可以考虑使用排序对话框的模式。

理想状态下，每个属性提供一种排序方式，且至少提供两种排列方式。如果您希望用户可以按自己的方式独立进行排序，请考虑使用拖拽功能。

排序时，全部的项目需要保持用户。如果您只希望显示特定的与用户相关的类别或项目时，请考虑使用过滤选项。

操作流程

处理数据

3 用户点击该选项

1 排序通常运用在长串的列表，其包含多项的属性

2 点击“菜单”实体键，选项中包含排序选项

操作流程

处理数据

4 弹出对话框，其中包含可用的排序选项

5 用户点击一个项目后，对话框关闭

6 根据用户的选择后，列表从新排序

使用情景

• 依据用户的选择自动排序，使用户更快捷地获取相关信息

• 相比静态列表而言，增添了灵活性

• 步骤繁琐：需要很多操作来完成排序

• 由于所有项目可见，所有查看所需的项目时仍然需要滚动

• 在改变列表排序选项时无法看见列表内容的快速变换 + -

处理数据


排列数据 4.2

具体案例

HTC Sense Footprints

处理数据

Uninstaller


排列数据 4.2

2 当点击“菜单”实体键后，菜单项目推入，此时选择“排序”


处理数据

1 当查看保存的地点清单时，一个地点列表被打开

4 选择后对话框退出，并且列表被重新排序


处理数据

3 点击相应选项后，弹出对话框，其中包含了可供选择的排序方式

展示大量内容 Show a Vast Amount of Content

• 扩展列表

• 分段显示

• 数据分页

• 动态加载列表

• 静态列表

5 处理数据

Expandable list

Segmented control

Data drill down

Dynamic loading of a list

Static list

使用情景

当信息需要在同一屏中呈现时，可以使用扩展列表。此时信息按组别分类在两个层级中。组别点击后可以单独展开，以显示子级信息。此外，扩展列表的项目旁边应该包含指示图标，来表明当前该组别所处的状态。

但当一组数据中包含太多子项目时，应该考虑使用数据分层来避免过长的滚动。

处理数据

扩展列表 Expandable List

3.3 展示大量内容 5.1

操作流程

处理数据

1 点击 2 列表展开

使用情景

• 便于信息间的比较 • 如果包含大量信息，依然无法避免多长的滚动

+ -

处理数据

展示大量内容扩展列表 Expandable List

5.1

具体案例

TVGids.tv Nederland

处理数据

RSS Feeds(HTC Desire)

Brower(Samsung Galaxy S)

3.3 展示大量内容扩展列表 Expandable List

5.1

2 点击一个项目后，该组下的源展开，同时指示箭头指向下方

RSS Feeds(HTC Desire)

处理数据

1 订阅的源以折叠的列表形式展现出来，同时暗示可扩展的箭头图标显示在条目的右边

使用情景

当您想显示或隐藏部分数据而不改变当前的视图时，分段显示将是一个很好的选择。对于同样的一组数据来说，您应当考虑使用一个标签栏。内容涉及同一个主题，但必须被划分成不同的部分时，应该使用模块化的标签。

分段显示是由几个分段按钮水平构成的，一般包括2~5个按钮，即可以看做是对应内容的过滤器。

处理数据

分段显示 Segmented Control


操作流程

处理数据

2 被点击的按钮突出显示

1 当点击某个按钮

3 显示对于的数据

使用情景

• 便于处理大量的相似数据

• （空）

+ -

处理数据


5.2 展示大量内容

具体案例

Android Market

处理数据

Layar

Foursquare



2 点击最热免费后，显示该分段下的条目

Android Market

处理数据

1 在这里，所以的应用们被分为三段：最多购买、最热免费

最新上架

使用情景

通常，信息会被划分进不同的信息层次。点击某个项目使用户进入更深的层级，而越深的层级，信息的粒度越细，从而可以获得更多细节的内容。用户可以通过一系列的文件夹从而找到某个特定的文件。在最底层的项目将可以被编辑。

而需要信息展现在一个屏幕上时，应当考虑使用扩展列表。

同样当信息需要被进行比较或同时被查看时，避免使用这一模式。也应该保持层级不能太深。

处理数据

数据分页 Data Drill Down


操作流程

处理数据

3 此为最终层级的页面

1 信息通过多层列表组织起来。

2 点击某个项目后进入下一个层级

使用情景

• 在合适的情景中，您可以提供十分细致的信息

• 整个屏幕都可以用来显示信息

• 信息间不易进行比较

• 用户在不同层级间容易迷失（提供面包屑(breadcrumbs)）

+ -

处理数据

展示大量内容数据分页 Data Drill Down

5.3

具体案例

Treintijden Light

处理数据

Calorie Counter

展示大量内容数据分页 Data Drill Down

5.3

2 第二级列表显示从该站出发的火车清单。用户需要从中选择一个

Treintijden Light

处理数据

1 该应用可以用来查询火车时间、车次和制定行程计划。选择站点的操作将从这一级列表开始

处理数据

3 第三级将呈现所有的相关细节

Treintijden Light


5.4

请参看此页

处理数据

展示大量内容

使用情景

列表在多数情况下十分有效并且也被广泛使用的。列表视图是一种简单直接的方式来展示导航的项目，尤其是当列表项目并不太多且您希望所有内容可以在一屏中被查看时。而列表中的项目可以被放置到同一个层、垂直的滚动清单中。而加入标签后，列表项目可以被划分到不同的组别中，这样更易于导航。

但当您有大量的导航项目时，请考虑使用扩展列表、信息分页抑或是动态载入列表。另一个很好的解决方案是加入滚动卷轴(Scroll Thumb)，但此时列表内容将必须按字母顺序进行排列。

处理数据

静态列表 Static List


操作流程

处理数据

4 滚动时，右侧出现控件指示当前所处整个列表的位置。滚动停止后，指示消失

1 当加载一个动态列表时，如果载入时间很长，请考虑加入一个进度指示

2 内容将展示在一个列表中。每个项目包括一段文字，也可以有包含图标或图像，但请保证它依然看起来是个列表

3 手指滑动时，新项目出现

使用情景

• 所以的信息同一时间呈现到屏幕上，不需要等待或点击来查看更多的内容

• 载入耗费一定时间

• 需要更多的滚动来查看分页的内容

+ -

处理数据

静态列表 Static List


具体案例

Engadget

处理数据

Amazon MP3



2 底部的下一页中包含了其他的20个项目，这两个箭头可以在页面间前进或后退

Engadget

处理数据

1 当用户加载新的文章列表时，一个进度指示表明正在载入新的页面

输入数据 Getting Input

黄博宇

输入数据

输入数据 Getting Input

1. 输入值

2. 输入文本

3. 选择预定义值

4. 选择多个项目

5. 设置日期和时间

Enter a Value

Enter Text

Select a Predefined Value

Select Multiple Items

Set Time and Date

输入数据

输入值 Enter a Value

• 滑块输入

• 单选列表

1 Slider

Spinner

输入数据

输入值 Slider

1.1 滑块输入

使用情景

滑块通常在设置页面中出现，当用户必须为某些事情输入一个值时，比如距离或者音量。用户可以在允许的范围内做出选择

只有当个别几个选项可供选择时，可以考虑使用单选按钮或滚轮。

输入数据

1

滑块由一个被控制块分成两部分的水平条带组成。左侧突出的部分对应当前选定值。右侧显示用户还有多少可以调整的值。

2 当用户将滑块滑到右边，左边高亮的部分就会增加

3 这样对应的值就是显示出来，或者在调整音量的时候会播放相应是声音。

操作流程

4 要确认新的值点击确定

输入数据

1.1 使用情景

• 对于输入值来说是一个很直观的方式且易于理解

• 使用快捷

• 有趣

• 当值的范围很大时，很难输入一个精确的值

+ -

输入值 Slider

滑块输入

输入数据

1.1 具体案例

Clock-Set Alarm

Layar-Filter Settings

Nexus One-Display Settings

输入值 Slider

滑块输入

输入数据

2 当选中滑块并拖拽时，他会高亮，并且当前的数值会显示出来并持续几秒钟，当用户停止控制时会渐渐消失

Clock-Set Alarm

1 在改变闹铃的声音大小时可以使用滑块

输入数据

输入值 Spinner

1.2 单选列表

使用情景

当用户需要在预定义列表中选择项目时，可以使用单选列表。如果没有足够的空间来显示整个列表的项目，也可以使用单选列表。单选列表通常用在设置界面中，与内容组合使用，比如单个项目，复选框，时间和日期的选择。单选按钮在单选列表中，用以表示只有一个项目可以选择。

输入数据

1

单选列表类似于一个下拉列表。它拥有的项目清单，从中用户可以选择一个项目。所选的项目显示在文本框中。项目按钮的右侧显示一个选择，以方便用户识别。

2 在当前的屏幕中出现一个对话框，显示列表中的所有子项目。列表中的每个项目都配有一个单选按钮。

3 以前选定的项目或默认项被选中。这种情况也会发生在没有项目被选中的时候。

操作流程

4 当一个项目被选中，对话框消失。

5 选定的项目显示在微调框中。

输入数据

1.2 使用情景

• 节约有限的屏幕空间

• 介绍预定的选择，帮助用户做出选择

• 单选列表是快捷有效的数据输入方法。（迈克尔马丁内兹）

• 项目列表只有在点击后才可见

• 项目列表对话框掩盖了画面和背景，可能会造成使用者混淆

• 不允许输入自定义值

+ -

输入值单选列表

输入数据

Spinner

1.2 具体案例

Facebook

Calender

Astrid

输入值

输入数据

单选列表

Spinner

2 打开一个含有3个选项的项目列表，其中没有任何一个选项被选择。

Facebook

1 在Facebook

的事件邀请页面中，用户可以答复的区域运用的就是微调选择。文本将显示为“等待批复”

输入数据

4 对话框消失。面前选择的选项被选中。

Facebook

3 点击一个选项的选择按钮

输入数据

输入文本 Enter Text

• 全局输入

• 展开输入

2 Pan & Scan

Extract

输入数据


2.1 全局输入

使用情景

组织应用与软键盘之间的可用空间有很多种形式。全局输入是使用软键盘的默认模式，因为它是对现有应用最安全的。当应用程序的输入域低于屏幕的中间领域时，可以使用全局输入模式。

输入数据

1 输入框被选中

2 键盘展开并出现在输入框下方

3 输入框变为高亮显示，可以通过软键盘输入字符

操作流程

4 当键盘隐藏时，屏幕返回到原来的位置，输入的文本将显示在输入框中。

输入数据

2.1 使用情景

• 屏幕布局只需要很小的改动

• 应用程序和键盘都可见：输入内容清晰

• 要求全屏，这可能给用户造成混淆

+ -


全局输入

输入数据

2.1 具体案例

Astrid

Calendar


全局输入

输入数据

2 输入框抬起，为软键盘腾出空间。在这里，输入框被视为一个独立的视图，因此任务界面停留在了原先的位置

Astrid

1 在Astrid中，一个用于添加新任务的输入框位于屏幕底部，当点击时

输入数据

4 键盘被隐藏后，输入框回到了它原来的位置，并且输入的文本显示在了框内

Astrid

3 此时就可以在输入框内输入文本了。左下角的按钮可以用来隐藏键盘

输入数据

2.2 展开输入

使用情景

在可用空间组织文本框与软键盘的方式有好多种。展开输入模式通常使用在需要显示软键盘和可用空间过于有限的情况下。它通常只使用在应用程序为横向的时候。当你的应用程序的方向是纵向，可以考虑使用全局输入的方式。


输入数据

1 展开输入形式通常使用在横向界面上

2 当输入栏被点击时

3 文本框扩展，并且与软键盘占满屏幕输入框变得高亮，并且可以通过软键盘输入。

操作流程

4 之前的界面被显示出来，并且输入的内容被显示在了之前的输入框中

输入数据

2.2 使用情景

• 有足够的空间，输入文本

• 输入框从应用程序中扩展开来。内容对于用户来说并不清晰

+ -


输入数据

展开输入

2.2 具体案例

Twitter

Gmail

Dropbox


输入数据

展开输入

2 点击后，屏幕只显示了一个文本输入框，键盘，以及一个更新按钮。

Twitter

1 在横向模式下，用户如果想要编辑文本，必须要点击文本框

输入数据

4 而当键盘被隐藏时，原来的文字输入框再次出现。

Twitter

3 用户可以开始输入他的tweet

输入数据

选择预定义值 Select a Predefined Value

单选列表

3 Spinner

参照此页

输入数据

选择多个项目 Select Multiple Items

• 复选框

4 Checkbox

输入数据

使用情景

你想让用户选择多个有相同动作需要执行的项目。当项目的数量过于庞大时。你可以添加选择来对所有项目选择或取消选择


4.1 复选框

输入数据

1 每一个项目都有一个复选框

2 用户可以点击相应的复选框来选择列项目。项目可以通过再次点击复选框来取消选择。

3 当一个复选框被选中时，带有按钮的工具栏就出现了，它包含一个或多个操作，可以通过点击项目，取消按钮工具。

操作流程

4 当用户点击动作按钮时，系统将执行所需的操作上已选定的项目。

输入数据

4.1 使用情景

• 这是一种完成众多项目中单一动作的最快捷方式

• 用户可能不会注意到这里存在一种多项选择的功能

+ -


复选框

输入数据

4.1 具体案例

Gmail

Gallery


复选框

输入数据

2 当复选框被点击，他们需要选中的项目就被选中了

Gmail

1 Gmail提供的项目复选框出现在项目列表的左侧。应该说，它们很不容易被看清楚

输入数据

设置日期和时间 Set Time and Date

• 加减按钮

• 滚轮

5 Plus & Minus

Wheel

输入数据

5.1 使用情景

加减按钮形式的时间设定模式在用户需要设定时间或日期的各种情况下，都是很有效的。除了这种方式以外，你必须要用到键盘输入。当然你也可以选择使用滚轮形式在调整时间和日期，但这种形式的时间调整工具在所有的Android设备中是不标准的。


加减按钮

输入数据

1

在点击一个指定目标（通常是一个显示时间的可触目标）后，一个设置时间的对话框就会出现在当前界面的上方。它至少包括需要设置的时间和日期，设置时间的控件，和确认动作与取消动作的两个按钮。此外，还可以提供一个am/pm按钮，以便用户从上下午之间切换

2 通过加减控制，用户可以设置所需的时间。在控键上的每一次点击都可以使时间数值相应地增加或减少，通过长按，值会变化得更快

3 在对话框顶部的时间值也会随着用户的控制而改变

操作流程

4 通过击“ok”按钮，用户即可确认设置的时间

输入数据

5.1 使用情景

• 容易理解它是如何工作的，因为它与设置数字时钟的共同点很多。用户对于这些是熟悉。

• 与滚轮模式相比稍显缺乏乐趣

• 基于时间的格式，对话框的宽度会随着值的变化而变化，数值进位时可能会造成很突然的效果（moeffju）

+ -


加减按钮

输入数据

5.1 具体案例

NS Reisplanner

Samsung Galaxy S Calender


加减按钮

输入数据

2 打开一个时间设置的对话框以完成设置时间的任务

NS Reisplanner

1 荷兰铁路部门提供了一个旅游信息的应用软件。点击第二个模块的项目可以显示旅行时间

输入数据

5.2 使用情景

滚轮形式的时间设定模式在用户需要设定时间或日期的各种情况下，都是很有效的。相比加减按钮形式而言，它提供了一种更加有趣的时间设定形式。如果你想要你的用户运用键盘设置时间，还是考虑使用加减按钮形式吧。


滚轮

输入数据

1

在点击一个指定目标（通常是一个显示时间的可触目标）后，一个设置时间的对话框就会出现在当前界面的上方。它至少包括两个滚轮，和确认动作与取消动作的两个按钮。此外，还可以添加额外的用以设置年和上下午的选择，滚轮当中被选中的值将被高亮显示

2 用户可以滑动滚轮来设置时间，使它们缓慢转动。快速的抛拽可以使它们转动的速度变快，随后它们会缓慢停止

3 通过点击“确定”按钮，确认时间设置。点击“取消”按钮放弃时间修改。时间设置窗口关闭，返回到前一个画面。

操作流程

输入数据

使用情景

• 与传统的设置方式相比更加有趣

• 用户易懂，创造熟悉的交互方式

• （迈克尔马丁内兹）

• 用户并不能通过键盘输入来设定滚轮

• 分钟在到达59后便不再继续到00

• 比键盘输入花费更长的时间

• 用户不能从日历上选择时间，因此要选择一个类似本月第二个星期五的日期会非常困难 + -


滚轮

输入数据

5.2

具体案例

HTC Sense Alarm

HTC Sense Calendar


滚轮

输入数据

5.2

2 一个由三个滚轮的时间设置窗口弹出

HTC Sense Alarm

1 若须设置一个HTC报警器，用户需要选择一个时间

输入数据

4 确认或取消后返回前一个画面

HTC Sense Alarm

3 用户可以运用手势转动滚轮。点击底部按钮将确认或取消输入的时间

输入数据

导航 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 使用情景

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

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

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

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

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


导航

突出重要功能


1.2 具体案例

Google Place

Documents to Go

Factbook

导航

突出重要功能

Google Place

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

导航

1.3 使用情景

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

功能仪表盘 Dashboard-Functionalities

导航

突出重要功能

功能仪表盘

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

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

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

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

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

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

导航

1.3 使用情景

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

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

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

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

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


导航

突出重要功能

1.3 具体案例

Google Place

Documents to Go

Factbook


导航

突出重要功能

Google Place

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

导航

2.1 使用情景

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

深入导航 Drill Down Navigation

大量内容中找到路径

导航

深入导航

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

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

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

导航

使用情景

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

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

• 不方便比较信息

• 用户在多层级的信息中可能会迷失

+ -


导航

大量内容中找到路径 2.1

2.1 具体案例

Treintijden light

Dropbox


导航


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 可滑动的顶部导航



具体案例

Mashable

Pulse

导航

2.9 可滑动的顶部导航



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首页的工具栏不显示页面时，首先加载...

导航

通知 Notifications

丁棘

通知 Notifications

1. 通知应用的活动

2. 要求回应

Notify of an activity in app

Request a response from user

通知应用的活动 Notify of an Activity in App

• 提示信息

• 进度对话框

• 等待指示框

• 等待指示

1 通知

Toast message

Progress bar dialog

Progress wheel dialog

Progress wheel

提示信息 Options Menu

1.1 通知应用的活动

使用情景

提示信息适用于反馈短小的信息，例如“文件已保存”，但需要确定用户是否正在关注屏幕。提示信息也可以使用在您的应用不活动时，但很可能由于这一提示方式的特点而会使用户错过这一消息。

此外，提示信息并不需要用户的回应，如果您希望用户做出反应并采取行动，那么应该考虑使用一个状态栏通知(Status

bar notification)或者是对话框(Dialog)来代替。

通知

1 提示信息可以由用户或应用本身触发

2 提示信息会自动淡入淡出，且只占用少量的屏幕空间。此外，提示信息在应用不活动时依然可见

操作流程

通知

1.1 使用情景

• 当用户的注意力集中在屏幕上时，是很高效的信息推送方式

• 推送信息时不破坏原有屏幕内容

• 用户没有关注屏幕时可能会错过该消息

• 不能与用户交互

+ -

通知


通知应用的活动

1.1 具体案例

Wordpress

HTC Sense - Alarm

通知


通知应用的活动

2 单击“是”

Wordpress

1 用户可以选择删除一篇博客

通知

3 一个“删除成功”的提示消息出现

Wordpress

通知

进度对话框 Progress Bar Dialog


使用情景

对话框通常是一个弹至最前的小窗口，它迫使用户注意到它。而进度对话框通常用来指示应用正在载入或执行某个动作。如果您希望让用户了解当前应用程序的进展状况，那个可以使用进度对话框，它用来量化动作的进展状况。

如果您不想显示具体的进展状况，那么可以选用等待指示框。而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

1 进度对话框可以由用户或应用本身触发，例如在应用启动时

2 进度对话框至少包含标题和一个进度条，此外可以增加额外的文字和诸如“取消下载”的按钮

操作流程

通知

3 该对话框会在活动结束时自动关闭，或由用户点击“取消”关闭

使用情景

• 为用户提供了精确的、量化的进度情况

• 该对话中途可以有“取消”的选择

• 强迫将焦点由应用转到对话框本身，打断用户的流程并迫使用户等待其关闭

+ -

通知



具体案例

SMS Eraser

Ringdroid

通知



2 一个正在加载的进度对话框弹出

Ringdroid

1 当用户选择了一首歌曲进行编辑

通知

3 加载完成后，歌曲以编辑模式显示

Ringdroid

通知

等待指示框 Progress Wheel Dialog


使用情景

对话框通常是一个弹至最前的小窗口，它迫使用户注意到它。如果您希望让用户了解当前应用程序正在执行动作而繁忙，但又确定确定的进展状况，那么您可以选用等待指示框。

如果您想量化具体的进展状况，那么可以选用进度对话框。而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

1 进度指示框可以应用于很多任务，比如在应用的登录画面

2 登录的数据需要验证，中间轮状的指示图标表明无法确定完成该操作所需的确切时间

操作流程

通知

3 登录完成后，用户进入应用的仪表盘页面

使用情景

• 清晰地表明一个动作正在被执行

• 在具体登录前可以防止用户继续操作

• 用户无法知晓等待的时间

• 在处理时，用户无法操作应用，被迫等待或跳转到其他应用

• 指示框内无法取消当前的操作

+ -

通知



具体案例

SMS Eraser

Ringdroid

通知



2 点击“登录”按钮

Twitter

1 登录时需要填写自己的用户名和密码

通知

3 出现进度指示框，提示用户等待

Twitter

通知

等待指示 Progress Wheel


使用情景

等待指示图标用以表明应用正在载入将要显示的内容。当这页的内容被载入时，它可以应用到整个屏幕；而当一个标签页的内容被载入时，它又可以应用到页面内的一部分。此外，也可以将其缩小放置到标题栏或是动作栏中。

等待指示仅在当前屏幕内显示，它并不放置在对话框内，也并非由用户的某个具体动作所触发，这与进度对话框的情况完全不同。如果您遇到的情况并非如此，那么您应当考虑使用一个进度条。

如果您希望呈现一个可以量化的且由用户触发的动作的进展，那应该考虑使用进度对话框。而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

操作流程

通知

1 点击

3 加载完后，显示内容

2 一个等待指示在空白页上显示，表明在加载

使用情景

• 通知用户正在加载

• 由于等待指示仅显示在加载内容页内，而非屏幕的上部（像进度对话框那样）用户可以继续的操作或转到应用的其他部分

• 用户无法知晓确切的加载时间

+ -

通知

通知应用的活动等待指示 Progress Wheel

1.4

具体案例

Facebook

Foursquare

通知

通知应用的活动等待指示 Progress Wheel

1.4

Android Market

2 用户的个人资料被打开后加载并未完成，此时等待指示出现在内容区域和动作栏内

Facebook

1 在仪表盘上点击相应图标查看好友的个人资料

通知

3 加载完成后，内容（如图片和文字）即显现出来

Facebook

通知

要求回应 Request a Response from Users

• 警告框

• 状态栏-事件驱动通知

• 状态栏-持久的通知

2 通知

Toast message

Status bar – Event-driven notification

Status bar – Ongoing notifications

警告框 Alert Dialog

2.1 要求回应

使用情景

对话框通常是一个弹至最前的小窗口，它迫使用户注意到它。而警告框即是一个要求用户注意并给予回应的对话框。这可能由各种操作来触发，如删除或“你希望跟随我们的Twitter

吗？”抑或其他不可逆操作。该操作在用户回应之前无法继续进行。而警告框中可以包含一到三个或是其他可选的项目，例如复选框或单选按钮列表来提供这些回应的选项。

警告框通常会和提示信息结合使用，为用户提供该动作的完整反馈。当所操作的动作不需要用户回应时，您可以选用提示信息来提供反馈。

而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

操作流程

通知

1 点击“菜单”实体键

5 返回至删除项目来自的列表

3 屏幕变暗，弹出警告框，询问用户是否确认删除

2 点击“删除”菜单选项

4 用户通过选择“确定”“取消”以继续 6

显示提示信息，表明项目已删除。此步骤可选

使用情景

• 在动作执行之前用户无法继续，从而避免了用户犯错

• 为执行动作增加了一步，当执行细微操作时，这一模式会惹人烦恼

+ -

通知


2.1 要求回应

具体案例

Evernote

Twidroyd

通知

Google Goggles


2.1 要求回应

2 点击菜单选项内的“删除”按钮

Evernote

1 以删除一个语音笔记为例

通知

4 点击“确定”确认

Evernote

3 弹出警告框，询问是否确认删除

通知

5 之后显示提示消息，表明删除成功

Evernote

通知

状态栏-事件驱动通知 Status Bar – Event-driven Notification

2.2 要求回应

使用情景

但您的应用需要通知相关事件且需要用户回应的时候，您可以使用事件驱动的通知。该通知应该可以被累加，如新收到的邮件可以以数字累加的形式显示出来，而不是每封新邮件都进行信息通知。

而当应用转入后台运行后，状态栏通知仍然可以使用。如果您需要用户的回应且应用是活动的，您可以使用警告框。而如果您希望通知不可以被忽视，那么应该使用持久的通知。

通知

操作流程

通知

1 一次性的事件，如收到新邮件可以以这一模式通知用户

2 之后，图标显示在状态栏上

3 状态栏可以以窗帘的形式拉下。通知的细节得以显示。而其他事件驱动事件也将得以呈现

操作流程

通知

4 扩展后的信息可以被点击，并打开相应的应用 5 用户可以点击“清除”来关

闭通知

6 当点击“清除”后，拉开的窗口收回，状态栏上的图标被清除

• 不会打扰用户目前的活动

• 为后台运行的应用提供了信息推送的方式

• 提供一个快速访问相应应用的途径

• 可能不会引起用户的及时关注

• 可能在阅读即被清除

+ -

通知


2.2 要求回应

使用情景

具体案例

HTC Sense

Samsung Galaxy S

通知


2.2 要求回应

2 用户拉下状态栏后，通知扩大了显示区域。事件驱动通知（这里是电子邮件）显示出来

HTC Sense

1 在状态栏左侧的图标显示通知

通知

4 事件驱动通知被清除，但持久的通知仍然呈现

HTC Sense

3 点击“清除”将关闭展开的窗口，并将取消状态栏上的事件驱动通知

通知

状态栏-持久的通知 Status Bar – Ongoing Notification

2.3 要求回应

使用情景

但您的应用需要某个整个事件中通知用户，您可以在状态栏上继续持久的通知。状态栏上的持久通知可以直接提供事件的最新状况（例如安装应用程序，或是播放歌曲）。如果您仅想通知用户一次，可以考虑使用状态栏上事件驱动通知。

而当应用转入后台运行后，状态栏通知仍然可以使用。如果您需要用户的回应且应用是活动的，您可以使用警告框。

通知

操作流程

通知

1 持续性的事件，如进入USB连接模式。一个事件开始后，通知将伴随着整个事件一直存在

2 持续的通知文本可以出现在状态栏上

3 状态栏可以以窗帘的形式拉下。通知的细节得以显示。持续的通知出现在其顶部

操作流程

通知

4 扩展后的信息可以被点击，并打开相应的应用，且不受“清除”按钮的影响

5 即使消息被点击后，消息任何会出现在状态栏上，直到该事件终结

• 不受“清除”的影响，增加用户阅读的机会

• 提供整个事件的更新，保证用户在整个流程中都可以知情

• 如果用户并不认为通知足够总要，那么可能会被看做是多余的

+ -

通知

使用情景


2.3 要求回应

具体案例

Stock Android - USB

HTC Sense - Update an app

通知


2.3 要求回应

HTC Sense - Player Pro

2 用户拉下状态栏后，顶部显示了一个下载进度条，点击可以进入Android

Market


1 当下载一个应用时，一个下载的图标出现在状态栏中

通知

4 下载完成后，通知变为一个事件驱动通知，并由不同的图标来表示


3 通知可以更新状态栏上下载的文字信息

通知

5 打开窗帘后，应用程序已经安装成功的消息显示在底部


通知

个性化 Personalize

黄博宇

个性化

个性化 Personalize

1. 管理自己的帐户

2. 设置偏好项目

Manage Their Accounts

Set Favorite Items

个性化

管理自己的帐户 Manage Their Accounts

• 登录

• 创建帐户

• 专注按钮

• 选项菜单

1 Login

Create Account

Dedicated Button

Options Menu

个性化

管理自己的帐户 1.1 登录

使用情景

你的应用程序处理的个人资料，例如姓名，电子邮件地址，邮件，喜好，结算信息，信用卡号码等大量的可登录平台独立的，共享的PC机，网络和智能手机的相关数据。

如果用户没有帐户，登录表单可以为用户提供一个注册链接。此外，当用户想要再次登出时，它还可以显示一个复选框来提醒用户。此外，它也可以显示记忆的用户，当用户很可能再次退出复选框。可能和方便的将是让用户只登录一次，并保持他以后的登录状态。为他们在每一次软件登录上节省了时间。

个性化


1 在屏幕显示两个输入框，一个是用户名或电子邮箱地址，一个是密码。此外还有个用于登录的专用按钮

2 软键盘聪屏幕下方出现，用户可以输入自己的信息

3 密码以圆点的方式显示

操作流程

4 日志中的按钮是可见的，虽然只是一个组成部分。用户可以通过点击按钮选择登录

个性化

5 他可以点击Enter按钮，使屏幕键盘滑出。登录按钮现在完全可以点击。

6 通过对登录按钮，进度以对话框的形式通知用户，他们的用户名和密码正在被进行身份验证。如果组合是正确的，用户登录成功

1.1 使用情景

• 在登录过程中几乎始终相同，所以用户知道该怎么做

• 当用户忘记了密码，他不得不到应用程序的网站上查询

+ -

个性化

管理自己的帐户登录


1.1 具体案例

Last.fm

Gmail

Twidroyd

个性化

管理自己的帐户登录


2 当输入框被点击时，用户就可以用软键盘输入自己的帐户信息。同样，密码将以点的形式显示以保护用户的隐私。注意键盘右下角是Done，而不是箭头。点击它可以使键盘滑出

Last.fm

1 在Last.fm，用户必须登录访问自己的喜好和个人数据。一个用户名和密码提供一个字段，以及一个登录操作按钮。作为一个额外的，一唱注册按钮显示为用户谁不诺特有帐户。

个性化

2 Last.fm

3 点击登录按钮后，应用程序显示出一个对话框，提示用户他们的帐户正在被验证

个性化

管理自己的帐户 1.2 创建帐户

使用情景

你的应用程序处理大量的个人资料，例如姓名，电子邮件地址，邮件，喜好，结算信息，信用卡号码等。要使用户开始使用你的应用程序的工作，他需要先登录，进入一个只有他可以进入，并编辑自己的个人信息的安全环境中。通过PC机，网络和智能手机的数据共享，注册可以是独立的平台，

个性化


1 在第一次启动应用程序，用户进入欢迎页面。在那里，他可以选择登录或者创建一个帐户，如果他从来没有为这个应用程序注册，后者是可以选择的。

2 用户被要求给出一个用户名和密码。当他完成后，他点击Enter键，它可能会显示文本‘完成’，并且屏幕上的键盘滑出

操作流程 1

3 “创建帐户”和“取消”按钮出现。

个性化

4 进度对话框出现，提示帐户正在创建。

操作流程 2

5 结束后，第二个对话框将显示“注册完成”

个性化

使用情景

• 在登录过程中几乎始终相同，所以用户知道该怎么做

• 通过注册很多应用和服务，用户需要管理所有的用户名和密码，这对于用户是困难。

+ -

个性化


创建帐户 1.2

1.2 具体案例

Sportypal

Layar

InstaFetch

个性化


创建帐户

2 当所有数据都被输入，且键盘被关闭后，事实上并没有注册按钮

Sportypal

1 在Sportypal中，你可以建立一个帐号，上传您的所有训练到网上。此帐户可通过点击屏幕上的“我的个人主页”

选项建立

个性化

4 当在选项菜单中点击注册选项时，会出现一个要求输入密码的对话框

Sportypal

3 若要注册，用户必须点击菜单按钮。这时就会出现可以点击的注册选项。如果注册按钮被最后一个输入框下方代替的话会更好

个性化

6 在注册结束后会有一封email

发过来，告诉我们可以接受来自sportypal.com的链接，并用我们刚才注册过的邮箱地址和密码登录

Sportypal

5 一个新的对话框告诉我们注册已经完成

个性化

管理自己的帐户专注按钮

使用情景

添加帐户选项只有在那些可以处理多个帐户的应用程序中，才能被允许使用。代替登出和用其他用户名密码登录，两个或以上的帐号可以相邻存在。用户可以在这些帐户之间切换并创建和删除帐户。

在一些应用软件中，用选择菜单建立帐户也是可行的。

个性化

Manage Their Accounts 1.3

1 在帐户概览页面，已列出了两个帐户，用户可以点击“添加帐户”按钮

操作流程

2 用户必须输入用户名和密码，然后点击登录按钮进行登录

个性化

3 一个进度对话框显示正在对该帐户进行验证。

5 一个祝贺成功的消息弹出以便让用户确认该帐户已被添加

操作流程

4 新建的第三个帐户已列出

个性化

使用情景

• 对于添加帐户来讲，这是一个简单的方法，因为屏幕上的按钮时可见的

• 输入帐户信息时只需要点一下

• 按钮占用了屏幕的可用空间（Brian Cooley）

+ -

个性化


专注按钮 1.3

1.3 具体案例

Wordpress

Seesmic

Gmail

个性化


专注按钮

2 填写帐户信息：博客UPL，用户名，密码，填好后就可以点击“Save”

Wordpress

1 还没有帐户被添加到Wordpress时，起始页显示了三个按钮牛，第二个按钮可以用来帐户

个性化

4 完成后，博客被添加到了我们打开的页面。

Wordpress

3 进程对话框显示帐户正在创建

个性化

管理自己的帐户使用情景

添加帐户选项只有在那些可以处理多个帐户的应用程序中，才能被允许使用。代替登出和用其他用户名密码登录，两个或以上的帐号可以相邻存在。用户可以在这些帐户之间切换并创建和删除帐户。

当使用的有选择添加帐号的专用按钮不是太重要时，你应该把它放在选择菜单中。你也可以考虑把选项同时放置在屏幕和选项菜单两个地方。

个性化


选项菜单 1.4

1 使用者按下菜单硬键

2 选项菜单滑入到屏幕中，并且“添加帐户”选项被点击

操作流程

3 用户输入用户名和密码，然后按下“登录”按钮。

个性化

4 帐户接下来被验证

5 完成后，帐户被添加到帐户列表中

操作流程


个性化

使用情景

• 不占用任何屏幕剩余空间

• 用户必须要发现选项是可用的

• 需要额外的一次点击来到达“添加帐户”选项

+ -

个性化


选项菜单 1.4

1.4 具体案例

Seesmic

Wordpress

个性化


选项菜单

2 当菜单硬键被点击时，选项菜单滑入到屏幕中来

Seesmic

1 Seesmic的以前的建立显示了Twitter的帐户，签订底部英寸在文本explaines，用户可以添加一个帐户使用的选项菜单。

个性化

4 用户名和密码被输入后，用户可以通过点击注册按钮继续

Seesmic

3 用户需要选择添加一个Twitter 或一个

GoogleBuzz帐户

个性化

2 Seesmic


个性化

设置偏好项目 Set Favorite Items

• 收藏

• 选项菜单

2 Favorites

Options Menu

个性化

2.1 使用情景

当你的应用程序提供了大量的内容项目，并且希望用户能够区分这些项目时，可以使用此模式。提供一个快捷收藏链接，并列在列表中。此链接通常以星的形状显示。此外，还可以只通过项目菜单，提供关注项目列表。

如果想要辨别多个类别时可以使用标签或文件夹，而不要使用收藏模形式。

个性化


收藏

1 一个快速收藏链接按钮（通常为星形）出现在项目的右上角

操作流程

3 链接按钮变得高亮，并且项目收藏成功

个性化

2 收藏链接被点击

2.1 使用情景

• 只需一步就可以从大量项目中做区分

• 在区分中只能实现一级区分（因为收藏按钮只有开与关）

+ -

个性化


收藏

2.1 具体案例

HTC Browser History

Gmail

个性化

收藏设置偏好项目 Set Favorite Items

2 当星被点击后，它变成高亮显示，一个祝贺成功的提醒也显示出来，提醒用户该链接已被添加收藏

HTC Browser History

1 在HTC浏览器中会给用户一个已访问网站的总览列表，每一个网站都有一个快捷收藏链接

个性化

HTC Browser History

3 在总览列表中，收藏项目通过高亮的星星标记能够被轻易识别出来

个性化

2.2 使用情景

当考虑到用户需要多次返回自己之前浏览的内容且无需考虑它在什么地方时，可以考虑使用保存或书签等方式。例如：所有的浏览器都有给网页添加书签的选项。大多数浏览器在添加书签方面会为用户提出多种方式。始终保持选项菜单中的书签选项可用是一种很好的方法，因为用户可能会有在那里寻找“添加书签”的可能性

个性化


选项菜单

1 用户点击“菜单”硬键

操作流程

4 弹出祝贺添加成功的信息，确认添加成功

个性化

2 选项菜单滑入到屏幕中，

这里包括了“关注”选项

3 点击关注后，项目被添加到关注列表中

使用情景

• 由于用户对网络书签上熟悉的概念，他们可能会直观地在选项菜单中寻找选项。

• 用户必须发现该选项可用

+ -

个性化


2.2 选项菜单

具体案例

HTC Browser History

NS Reisplanner

NU

个性化


2.2 选项菜单

2 点击“菜单”硬键，并选择“添加书签”

HTC Browser History

1 在HTC Sense’s浏览器中设置书签是简单且快捷的

个性化

4 一个祝贺成功的提醒也显示出来，提醒用户添加书签成功

HTC Browser History

3 为一个书签命名，然后点击“Done”

个性化

屏幕交互 Screen Interactions

于俊杰 Ginger Yu

屏幕交互 Screen Interactions

1. 移动内容

2. 滚动内容

3. 缩放内容

Move content around the screen

Scroll through content

Zoom in on content

2.1 使用情景

当内容不在屏幕上时，用户应该可以向上滚动。为了保持移动整个屏幕，使用“滑动”手势。这样他可以控制速度和屏幕滑动的距离。滑动的手势经常用于阅读。这是一个标准的姿势，所以它始终可用。当用户想滚动更快，他可以使用投掷滚动手势（这个选项应该始终可用），或者使用卷轴滑块。

滑动滚动 Slide to scroll

滚动内容

屏幕交互

滑动滚动

1 内容以列表形式呈现。

2 想要查看更多内容，用户将其手指放在屏幕上，并且向上滑动。屏幕会按照手指移动的相同方向移动。用户同样可以向相反的方向滑动。

3 指示器会显示还有多少内容可以呈现。

屏幕交互

4 当用户的手指离开屏幕时，列表会停留在相同的位置。

使用情景

• 用户可以通过速度的快慢来控制滑过的内容

• 每次做滑动时，用户只能最远滑到自己手指可以够得到的距离

+ -

屏幕交互

2.1 滑动滚动 Slide to scroll

滚动内容

具体案例

Twitter

屏幕交互

2.1 滑动滚动 Slide to scroll

滚动内容

Twitter

1 在Twitter中，用户需要通过向下滑动时间轴来阅读所有tweets。当用户将其手指放在屏幕上并且向下滑动时，屏幕会伴随手指移动直到手指释放。在展示出的例子中，手指向下滑动了三次。

屏幕交互

2.2 使用情景

当内容不在屏幕上，用户应该能够向上滚动。当用户想要快速滑动到屏幕中特定的区域，他可以使用“投掷”手势。这会使内容在屏幕上快速的通过，速度取决于手指移动的速度。它会慢慢停下来。滚动可向上或向下，但总是在垂直方向。投掷滑动是一个标准手势，与滑动滚动一起。如果你想让用户可以控制滑动的速度，考虑使用卷轴滑块。

投掷滚动 Fling to scroll

滚动内容

屏幕交互

投掷滚动

1 用户在屏幕上用手指进行快速的投掷动作。

2 与手指移动的速度相关，内容按照手指移动的方向移动。

3 指示器会显示还有多少内容可以显示。

屏幕交互

4 随着时间的过去，滑动的速度会慢慢下降直到完全停止下来。

5 指示器也会停止移动，并且将会慢慢淡出。

使用情景

• 只需要一个投掷动作就可以在众多内容中移动

• 用户无法得知会在什么地方停止下来，因为内容在屏幕上移动的速度是很快的

+ -

屏幕交互

2.2 投掷滚动 Fling to scroll

滚动内容

具体案例

Twitter

屏幕交互

2.2 投掷滚动 Fling to scroll

滚动内容

Twitter

1 Twitter的tweets时间线包括的许多内容。当用户使用投掷手势在屏幕上向上移动以企图看到更多内容时，内容会快速的通过屏幕，然后慢慢减速直到停止下来。

屏幕交互

3.1 使用情景

在内容上双击可以放大，例如网页，图像或者地图。通过双击允许用户进行特定目标的方法（例如一段特定的文本，或者地图上的某条街道）以提高内容的可视性。缩放级别是固定的，屏幕内容是适应了放大倍数。如果你想得到连续不断的放大，或者如果没有特定的目标来放大，可以考虑使用捏与张开。理想情况下，这两种放大的方法都会使用，允许用户根据其需要选择合适的方式。

双击缩放 Double tap to zoom

缩放内容

屏幕交互

双击缩放

1 在内容上双击可以放大，例如网页，图像或者地图。显示的内容通常是全屏幕的。

2 用户可以双击屏幕上的一个特定的目标，放大这一目标。

3 放大的级别是固定的，屏幕内容适用于放大（例如文本会换行以适用于屏幕的宽度）

屏幕交互

双击缩放

4 如果用户再次双击… 5 内容会缩小至原始尺寸

屏幕交互

使用情景

• 在一个特定的目标缩放 - 放大后，不需要进行筛选

• 固定倍率水平能够实现更快的放大（比捏和张开）

• 画面内容瞬间 - 提高可读性

• 不允许连续不断的放大-只有一个固定的缩放级别

+ -

屏幕交互

3.1 双击缩放 Double tap to zoom

缩放内容

具体案例

Internet Browser

HTC Sense Gallery

Google maps

屏幕交互

3.1 双击缩放 Double tap to zoom

缩放内容

2 浏览器中的文章放大了，并且自动按照屏幕的宽度将文字换行。当用户再次双击…

（屏幕上的任何位置均可）

Internet Browser

1 在浏览器中，网页是全屏显示，缩放到屏幕的宽度。当一个特定的项目，在这种情况下是文章，双击它

屏幕交互

Internet Browser

3 浏览器缩放至屏幕下适合的尺寸。

屏幕交互

3.2 使用情景

当您希望连续放大或缩小内容时可以使用捏和展开功能。捏和张开允许用户进行特定目标的放大，然而，屏幕内容通常并不适用于放大级别（例如文字无法换行）。总是使用两个手势来完成，以避免对放大方法造成疑惑。如果你想放大至一个固定级别，或者想确定放大的文字可以换行，考虑使用双击放大。

捏和张开 Pinch & Spread

缩放内容

屏幕交互

捏和张开

1 收缩和展开的手势用于缩放对象。收缩和展开用于可以缩放的内容，如网页，图片或地图。这些内容通常全屏幕显示。

2 用户可以使用两个手指触摸屏幕，然后张开手指以放大特定的目标。放大的级别是连续的，并且取决于手指移动的距离。

3 在大部分移动电话的模型中屏幕内容并不适用于放大（例如文本无法换行），HTC模式是一个例外，当放大时文字会换行。

屏幕交互

捏和张开

4 要缩小，用户用两个手指触摸屏幕，捏在一起。同样，它的缩小是连续的，这依旧取决于手指移动的距离。

5 内容不能够以比原尺寸还小的状态呈现出来。

屏幕交互

使用情景

• 允许连续不间断的放大

• 针对特定目标放大-不需要在放大后进行筛选

• 比较难找到合适的放大倍数

• 屏幕上的内容通常是不适合放大（除HTC型号）

• 并非所有的设备都支持多点触摸（如华为Ideos） + -

屏幕交互

3.2 捏和张开 Pinch & Spread

缩放内容

具体案例

Google maps

Angry birds

屏幕交互

3.2 捏和张开 Pinch & Spread

缩放内容

2 放大地图。

Google maps

1 在谷歌地图，当前位置以箭头标记显示在地图上。可以使用展开手势

屏幕交互

社区化 Social

于俊杰 Ginger Yu

社区化 Social

1. 响应内容 Respond to content

1.1 使用情景

当你的应用程序中的内容已分享或者可以被其他用户查看时，例如照片、视频、音频或者文字等，你可以对其添加评论功能。

评论 Comments

响应内容

社区化

评论

1 想要添加评论应当先点击你的目标（例如一个按钮，或者在这个例子中是一个输入框）

2 在一个键盘滑入至屏幕内后

3 将现有选中的文字推到上面。用户可以开始输入，当他完成...

社区化

4 ...通过点击提交按钮添加评论意见。或者通过点击后退按钮取消。

5 当评论已经提交时，它将会在已有的文字内容下方显示出来。评论会在此条评论后面添加，所有的新评论都会从底部显示出来，这样可以保持评论按照时间顺序排序。

使用情景

• 暂无 • 在评论框看起来太小

+ -

社区化

1.1 评论 Comments

响应内容

具体案例

Facebook

Bright

社区化

1.1 评论 Comments

响应内容

2 当文本输入框被点击激活时，键盘在屏幕中出现，且文本输入框被选中。注意用于提交评论的评论按钮以及清空按钮，它用户清除所有已经被输入的文字。

Facebook

1 在Facebook的个人更新页面中，在屏幕的下方的固定位置显示了一个文本输入框。

社区化

4 哎页面的底部显示了评论。

Facebook

3 在输入文字且点击了提交评论按钮后，一个提示对话框会提示你评论已经被提交。

社区化

1.2 使用情景

当你希望通过用户对其内容进行质量评价时可以使用星级排名。项目的星级评价会影响到其他用户在选择时候打开或者下载该项目时所作的决定。高排名（更多的星星）会促使用户更有可能下载。通常情况下，5星足以提供一个足够的评价区间。正如上文所述，显示的排名还可以显示一半星星。不要忘记对排名添加数字，这样会使排名更加真实有效。另外一个方法，让用户发表他们对项目的意见，由喜欢或不喜欢，请使用评论。

星级排名 Rating – Stars

响应内容

社区化

星级排名

1 对于每一个项目，用来表示的等级星星显示出来（通常是5星）。这个等级是考虑到项目的所有评分的平均值。

2 在该项目的详细视图，等级的可能性会显示出来。从左至右等级通过高亮的星星显示出来。请注意等级中并没有完全显示高亮星星，半个高亮的星星会给等级评价带来细微的差别。当用户点击星星...

3 ...出现一个对话框，用于评级项目。用户可以通过点击来分配给该项目的等级数，保存且排名。

社区化

使用情景

• 这是一个快速的方法供用户添加评级

• 为你的应用内容增加价值，因为用户会乐于给出他们的观点

• 暂无

+ -

社区化

1.2 星级排名 Rating – Stars

响应内容

具体案例

YouTube

社区化

1.2 星级排名 Rating – Stars

响应内容

2 在信息页面中（通常显示了大量的排名），一个有着排名选项的工具栏显示出来。当点击时…

YouTube

1 youtube在列表中会显示视频的排名。

社区化

4 当登录时，出现一个对话框，在其中可以给出的评级。

YouTube

3 用户需要登录到自己的YouTube帐户。

社区化

YouTube

5 星评级敲打和存储。用户必须点击对话框外返回到视频。

社区化