Android Design Pattern-III

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

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

Dealing With Data

Getting Input

Navigation

Notifications

Personalize

Screen Interactions

Social

通知 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 使用情景

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

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

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

•  不能与用户交互

+ -

通知

提示信息 Options Menu

通知应用的活动

1.1 具体案例

Wordpress

HTC Sense - Alarm

通知

提示信息 Options Menu

通知应用的活动

2 单击“是”

Wordpress

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

通知

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

Wordpress

通知

进度对话框 Progress Bar Dialog 1.2 通知应用的活动

使用情景

对话框通常是一个弹至最前的小窗口，它迫使用户注意到它。而进度对话框通常用来指示应用正在载入或执行某个动作。如果您希望让用户了解当前应用程序的进展状况，那个可以使用进度对话框，它用来量化动作的进展状况。 如果您不想显示具体的进展状况，那么可以选用等待指示框。而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

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

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

操作流程

通知

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

使用情景

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

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

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

+ -

通知

进度对话框 Progress Bar Dialog 1.2 通知应用的活动

具体案例

SMS Eraser

Ringdroid

通知

进度对话框 Progress Bar Dialog 1.2 通知应用的活动

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

Ringdroid

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

通知

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

Ringdroid

通知

等待指示框 Progress Wheel

Dialog

1.3 通知应用的活动

使用情景

对话框通常是一个弹至最前的小窗口，它迫使用户注意到它。如果您希望让用户了解当前应用程序正在执行动作而繁忙，但又确定确定的进展状况，那么您可以选用等待指示框。 如果您想量化具体的进展状况，那么可以选用进度对话框。而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

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

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

操作流程

通知

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

使用情景

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

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

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

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

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

通知

等待指示框 Progress Wheel

Dialog

1.3 通知应用的活动

具体案例

SMS Eraser

Ringdroid

通知

等待指示框 Progress Wheel

Dialog

1.3 通知应用的活动

2 点击“登录”按钮

Twitter

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

通知

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

Twitter

通知

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

使用情景

等待指示图标用以表明应用正在载入将要显示的内容。当这页的内容被载入时，它可以应用到整个屏幕；而当一个标签页的内容被载入时，它又可以应用到页面内的一部分。此外，也可以将其缩小放置到标题栏或是动作栏中。 等待指示仅在当前屏幕内显示，它并不放置在对话框内，也并非由用户的某个具体动作所触发，这与进度对话框的情况完全不同。如果您遇到的情况并非如此，那么您应当考虑使用一个进度条。 如果您希望呈现一个可以量化的且由用户触发的动作的进展，那应该考虑使用进度对话框。而当应用转入后台运行后，如果您希望显示事件的进展状态，您应该使用状态栏通知。

通知

操作流程

通知

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 显示提示信息，表明项目已删除。

此步骤可选

使用情景

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

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

+ -

通知

警告框 Alert Dialog 2.1 要求回应

具体案例

Evernote

Twidroyd

通知

Google Goggles

警告框 Alert Dialog 2.1 要求回应

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

Evernote

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

通知

4 点击“确定”确认

Evernote

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

通知

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

Evernote

通知

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

Notification

2.2 要求回应

使用情景 但您的应用需要通知相关事件且需要用户回应的时候，您可以使用事件驱动的通知。该通知应该可以被累加，如新收到的邮件可以以数字累加的形式显示出来，而不是每封新邮件都进行信息通知。 而当应用转入后台运行后，状态栏通知仍然可以使用。如果您需要用户的回应且应用是活动的，您可以使用警告框。而如果您希望通知不可以被忽视，那么应该使用持久的通知。

通知

操作流程

通知

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

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

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

操作流程

通知

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

通知

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

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

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

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

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

•  可能在阅读即被清除

+ -

通知

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

Notification

2.2 要求回应

使用情景

具体案例

HTC Sense

Samsung Galaxy S

通知

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

Notification

2.2 要求回应

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

HTC Sense

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

通知

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

HTC Sense

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

通知

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

2.3 要求回应

使用情景 但您的应用需要某个整个事件中通知用户，您可以在状态栏上继续持久的通知。状态栏上的持久通知可以直接提供事件的最新状况（例如安装应用程序，或是播放歌曲）。如果您仅想通知用户一次，可以考虑使用状态栏上事件驱动通知。 而当应用转入后台运行后，状态栏通知仍然可以使用。如果您需要用户的回应且应用是活动的，您可以使用警告框。

通知

操作流程

通知

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

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

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

操作流程

通知

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

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

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

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

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

+ -

通知

使用情景

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

2.3 要求回应

具体案例

Stock Android - USB

HTC Sense - Update an app

通知

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

2.3 要求回应

HTC Sense - Player Pro

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

HTC Sense - Update an app 1

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

通知

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

HTC Sense - Update an app 3

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

通知

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

HTC Sense - Update an app

通知

个性化 Personalize

黄博宇

个性化

个性化 Personalize

1. 管理自己的帐户 2. 设置偏好项目

Manage Their Accounts

Set Favorite Items

个性化

管理自己的帐户 Manage Their Accounts

•  登录 •  创建帐户 •  专注按钮 •  选项菜单

1 Login

Create Account

Dedicated Button

Options Menu

个性化

管理自己的帐户 1.1 登录

使用情景

你的应用程序处理的个人资料，例如姓名，电子邮件地址，邮件，喜好，结算信息，信用卡号码等大量的可登录平台独立的，共享的PC机，网络和智能手机的相关数据。 如果用户没有帐户，登录表单可以为用户提供一个注册链接。此外，当用户想要再次登出时，它还可以显示一个复选框来提醒用户。此外，它也可以显示记忆的用户，当用户很可能再次退出复选框。可能和方便的将是让用户只登录一次，并保持他以后的登录状态。为他们在每一次软件登录上节省了时间。

个性化

Manage Their Accounts

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

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

3 密码以圆点的方式显示

操作流程

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

个性化

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

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

1.1 使用情景

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

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

+ -

个性化

管理自己的帐户 登录 Manage Their Accounts

1.1 具体案例

Last.fm Gmail Twidroyd

个性化

管理自己的帐户 登录 Manage Their Accounts

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

Last.fm

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

个性化

2 Last.fm

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

个性化

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

使用情景

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

个性化

Manage Their Accounts

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

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

操作流程 1

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

个性化

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

操作流程 2

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

个性化

使用情景

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

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

+ -

个性化

管理自己的帐户 Manage Their Accounts

创建帐户 1.2

1.2 具体案例

Sportypal Layar InstaFetch

个性化

管理自己的帐户 Manage Their Accounts

创建帐户

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）

+ -

个性化

管理自己的帐户 Manage Their Accounts

专注按钮 1.3

1.3 具体案例

Wordpress Seesmic Gmail

个性化

管理自己的帐户 Manage Their Accounts

专注按钮

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

Wordpress

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

个性化

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

Wordpress

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

个性化

管理自己的帐户 使用情景

添加帐户选项只有在那些可以处理多个帐户的应用程序中，才能被允许使用。代替登出和用其他用户名密码登录，两个或以上的帐号可以相邻存在。用户可以在这些帐户之间切换并创建和删除帐户。 当使用的有选择添加帐号的专用按钮不是太重要时，你应该把它放在选择菜单中。你也可以考虑把选项同时放置在屏幕和选项菜单两个地方。

个性化

Manage Their Accounts 选项菜单 1.4

1 使用者按下菜单硬键

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

操作流程

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

个性化

4 帐户接下来被验证

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

操作流程

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

个性化

使用情景

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

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

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

+ -

个性化

管理自己的帐户 Manage Their Accounts

选项菜单 1.4

1.4 具体案例

Seesmic Wordpress

个性化

管理自己的帐户 Manage Their Accounts

选项菜单

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

Seesmic

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

个性化

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

Seesmic

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

个性化

2 Seesmic

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

个性化

设置偏好项目 Set Favorite Items

•  收藏 •  选项菜单

2 Favorites

Options Menu

个性化

2.1 使用情景

当你的应用程序提供了大量的内容项目，并且希望用户能够区分这些项目时，可以使用此模式。提供一个快捷收藏链接，并列在列表中。此链接通常以星的形状显示。此外，还可以只通过项目菜单，提供关注项目列表。 如果想要辨别多个类别时可以使用标签或文件夹，而不要使用收藏模形式。

个性化

设置偏好项目 Set Favorite Items

收藏

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

操作流程

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

个性化

2 收藏链接被点击

2.1 使用情景

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

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

+ -

个性化

设置偏好项目 Set Favorite Items

收藏

2.1 具体案例

HTC Browser History Gmail

个性化

收藏 设置偏好项目 Set Favorite Items

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

HTC Browser History

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

个性化

HTC Browser History

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

个性化

2.2 使用情景

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

个性化

设置偏好项目 Set Favorite Items

选项菜单

1 用户点击“菜单”硬键

操作流程

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

个性化

2 选项菜单滑入到屏幕中， 这里包括了“关注”选项

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

使用情景

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

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

+ -

个性化

设置偏好项目 Set Favorite Items 2.2 选项菜单

具体案例

HTC Browser History NS Reisplanner NU

个性化

设置偏好项目 Set Favorite Items 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 星评级敲打和存储。用户必须点击对话框外返回到视频。

社区化