Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Android design pattern
- 2. 目录 Contents 1. 处理数据 Dealing With Data 2. 输入数据 Getting Input 3. 导航 Navigation 4. 通知 Notifications 5. 个性化 Personalize 6. 屏幕交互 Screen Interactions 7. 社区化 Social
- 4. 处理数据 Dealing with Data 1. 更改视图 Change view on a set of data 2. 提示程序正在加载 Know app is loading items 3. 搜索 Search 4. 排列数据 Sort data 5. 展示大量内容 Show a vast amount of content
- 5. 处理数据 更改视图 Change View on a Set of Data 1 • 菜单选项 Options menu • 专用按钮 Dedicated button • 标签栏 Tab bar
- 6. 处理数据 使用情景 更改视图 菜单选项 1. Options Menu 1 一组数据可以以各种方式呈现，例如以列表、网格或是地图。 用户可能需要在各个视图间进行切换。 最常见的需求是从列表变换到地图视图、或是图标视图。 当没有足够的屏幕空间显示一个专用按钮，或是一个标签栏 时，可以在菜单项目中提供“更改视图”选项。
- 7. 处理数据 操作流程 3 呈现数据方式 改变 1 点击“菜单” 实体键 2 选项按钮从底 部弹出，点击
- 8. 处理数据 使用情景 查看数据 菜单选项 1. Options Menu 1 • 使用户的注意力始终 • 过于隐晦，用户无法 集中在屏幕上，仅在 直接看到 需要时显示改变视图 • 操作过多：需要2步 的选项 • 太过复杂：如果各个 屏中的菜单项不尽相 + - 同，那么用户必须记 住该选项的确切位置
- 9. 处理数据 具体案例 查看数据 菜单选项 1. Options Menu 1 Google Maps Samsung-My Files
- 10. 处理数据 Google Maps 1 谷歌地图里 2 但是当列表 查看“方向” 滚动后，用 时，默认显 户便无法看 示列表视图。 到顶部的按 用户可以点 钮了 击顶部的 “我的位置” 切换到地图 视图
- 11. 处理数据 Google Maps 3 因此在菜单 4 点击后进入 选项中加入 地图视图。 了“切换到 但改页菜单 地图”的选 中不再有 项 “切换到列 表”选项了， 因为底部已 经提供了固 定的按钮
- 12. 处理数据 使用情景 更改视图 专用按钮 1. Dedicated Button 2 按钮可以包含文字、图标或者皆有，抑或在两个图标间切换。 按钮不必始终出现在同一个地方，但需要提防这样可能会给 用户带来困扰。建议是始终为其提供来回切换的选项。 当你希望用户始终有一个选项以在视图间切换时，你应该考 虑使用专业按钮。但当屏幕空间不允许时，可以考虑使用标 签栏或菜单选项来替代。
- 13. 处理数据 操作流程 1 地图视图中，改 按钮表示可以切 换至列表视图 2 点击后切换至 列表视图 3 再次点击可以 切回地图视图
- 14. 处理数据 使用情景 查看数据 专用按钮 1. Dedicated Button 2 • 直接明了：用户可直 • 不必要的情况下，按 接看到可用的视图。 钮也始终可见。 • 操作简单：只需1步 + -
- 15. 处理数据 具体案例 查看数据 专用按钮 1. Dedicated Button 2 Layar Google Places
- 16. 处理数据 Layar 1 顶部显示的 2 在地图视图 双个按钮暗 中，双按钮 示用户可以 依然存在， 从当前视图 但此时选项 切换至实景 已经改为切 视图或是地 换至现实视 图视图 图和换回列 表视图
- 17. 处理数据 Layar 3 现实视图中 则为切换至 地图和列表 视图
- 18. 处理数据 使用情景 更改视图 标签栏 1. Tab Bar 3 但您的应用主要功能是查看数据，或是您认为更改视图这一 操作会被大量使用时，您可以考虑将相应的视图标签页加入 到标签栏中。 但屏幕空余空间不足以容纳一个标签栏或是专用的按钮，或 者更改视图仅仅是一个次要的功能时，请考虑将这一功能加 入到菜单选项中。
- 19. 处理数据 操作流程 1 标签栏中包含几 个可供查看不同 视图的标签页 2 点击后强调这 3 这一标签 相应视图展现 出来，并可在 其他标签页间 切换
- 20. 处理数据 使用情景 更改视图 标签栏 1. Tab Bar 3 • 方便快捷：为在不同 • 占用宝贵的屏幕空间 视图间切换提供了一 种快速便利的方式 • 一目了然：所有视图 选项可以直接呈现给 用户（而不是隐藏在 + - 菜单选项里） • 始终为用户提供一定 的导航
- 21. 处理数据 具体案例 更改视图 标签栏 1. Tab Bar 3 Wikitude Toilet Finder
- 22. 处理数据 Wikitude 1 搜索结果以 2 但点击“地 列表视图显 图”标签时， 示，并在标 搜索结果则 签栏中突出 展现在地图 显示相应的 上 标签页
- 23. 处理数据 提示程序正在加载 Know app is loading items 2 • 动态载入列表 Dynamic loading of a list
- 24. 处理数据 使用情景 提示程序正在 加载 动态载入列表 2. Options Menu 2 当内容的列表很长时，不建议将全部列表一次加载完毕。 只加载列表的顶端部分将大大地节省了用户等待的时间。
- 25. 处理数据 操作流程 3 “正在载入” 1 的说明文字和 列表中的一部 指示动画出现， 2 分项目是预先 表明项目正在 当用户滑动列 载入的 加载。完成后， 表，并到达预 载列表的最后 指示信息消失 项目时
- 26. 处理数据 使用情景 提示程序正在 加载 动态载入列表 2. Options Menu 2 • 更好的性能：因为所 • 用户无法预知多少信 有项目并非完全一次 息将被加载 加载完成 • 用户每次查看更多信 • 省去了用户通过点击 息时都必须等待 来查看更多的项目 + -
- 27. 处理数据 具体案例 提示程序正在 加载 动态载入列表 2. Options Menu 2 Android Market Gmail AppBrain
- 28. 处理数据 Android market 1 1 软件的名单 2 是动态加载 的。一个 “正在载入” 的提示表明 有更多的项 目正在被加 载。
- 29. 处理数据 搜索 Search 3 • 搜索栏 Search bar • 主菜单 Main menu • 专门项目 Dedicated item
- 30. 处理数据 使用情景 搜索 搜索栏 3. Search Bar 1 绝大多少的搜索功能已由搜索栏来提供，例如搜索栏一直出 现在屏幕的一个固定位置。但搜索功能同样可以由操作栏中 专门的按钮、实体键、或者是菜单选项中的图标来提供。它 们以相似的方式操作。 如果用户需要经常在应用的大量的数据中搜索相关的条目， 那么您应当考虑在屏幕上方增加专门的搜索栏。
- 31. 处理数据 操作流程 3 用户可点击图 标在弹出框中 选择搜索模式 1 但搜索栏载入或激 活后，字段被选中、 显示光标，表明用 户可以输入 2 底部键盘推出，同 时搜索框、与选择 的搜索模式相关搜 索历史列表出现
- 32. 处理数据 操作流程 4 打开相应的搜 索类型后，字 段再次被选中 5 输入时，提供 搜索建议。用 户点击搜索按 7 钮后开始查询 搜索完成后， 6 将呈现出搜索 或通过点击回车键， 结果列表 而通常按键文字会改 为“搜索”或“确定”
- 33. 处理数据 使用情景 搜索 搜索栏 3. Search Bar 1 • 容易识别，各个应用 • 而多种搜索模式并不 程序中已经普遍使用 明显，用户必须注意 • 提供多种搜索模式， 具体的图标 从而可以过滤搜索结 果 + -
- 34. 处理数据 具体案例 搜索 搜索栏 3. Search Bar 1 Google Search Wapedia
- 35. 处理数据 Google Search 1 用户可以通 2 当用户开始 过部件 输入时， (Widget)打 “语音输入” 开谷歌搜索 的按钮变为 “搜索”按 钮，并且显 示搜索建议
- 36. 处理数据 Google Search 3 在弹出的搜 4 当用户选择 索模式选择 了搜索应用 框中，用户 模式后，搜 可以通过点 索建议中将 击框内右上 仅显示已安 角的图标， 装的应用 来添加或删 除搜索的类 型
- 37. 处理数据 使用情景 搜索 主菜单 3. Main Menu 2 搜索在应用中往往是一个比较重要的功能，但当屏幕空白面 积有限时，加入一个搜索栏或是一个专用按钮都太实际，这 时候您应当考虑将其加入到菜单选项中。 当搜索的功能十分重要时，菜单选项中加入搜索选项可以和 一个专门的搜索栏（在屏幕顶部的一个固定位置）配合使用。
- 38. 处理数据 操作流程 1 单击“菜单”实 体键，菜单选项 推出 2 点击“搜索” 选项 3 搜索栏出现在屏幕顶部，左边 为搜索模式的选择图标，同时 字段被选中、右边的“搜索” 按钮以及底部的键盘显示出来
- 39. 处理数据 使用情景 搜索 主菜单 3. Main Menu 2 • 节约屏幕空间：相比 • 需要操作多步来进行 专门的搜索栏而言 搜索操作 • 搜索的位置往往并不 明确（是出现在应用 的所有的菜单中还是 + - 仅仅这屏中？）
- 40. 处理数据 具体案例 搜索 主菜单 3. Main Menu 2 Dorpbox Google Maps Android Market
- 41. 处理数据 Google Search 1 搜索位于菜 2 点击后，搜 单中的第一 索框和键盘 个选项 推出以让用 户完成搜索
- 42. 处理数据 使用情景 搜索 专用项目 3. Dedicated Item 3 当您的屏幕布局不足以容纳一个操作栏，且搜索操作相当总 要，不适合将其放入菜单选项中时，您应该考虑将搜索功能 整合到标签栏、仪表盘(dashboard)或是导航列表中。
- 43. 处理数据 操作流程 1 当标签页别点 击后 2 搜索栏或搜索 页出现，用户 可以进行搜索 3 点击软键盘上的回车 键或搜索图标后，搜 索结果呈现出来
- 44. 处理数据 使用情景 搜索 专用项目 3. Dedicated Item 3 • 方便用户访问 • 占用宝贵的屏幕空间 + -
- 45. 处理数据 具体案例 搜索 专用项目 3. Dedicated Item 3 Last.fm Calorie Counter Evernote
- 46. 处理数据 Evernote 1 主屏幕的仪 2 点击后，用 表盘 户可以在搜 (dashboard) 索栏中键入 的右下角提 搜索词汇 供了搜索图 标
- 47. 处理数据 Evernote 3 需要注意的 是，在搜索 页顶部的操 作栏中仍然 提供了一个 搜索按钮， 以便用户可 以开始新的 搜索
- 48. 处理数据 排列数据 Sort Data 4 • 拖拽 Drag & drop • 排序对话框 Sort-key Dialog
- 49. 处理数据 使用情景 排列数据 拖拽 4. Drag & Drop 1 当您的应用中的列表顺序很重要并且需要被自定义的时候， 您应该考虑使用拖拽功能。 这个功能需要提供清晰的视觉提示。可供拖拽的图标应该出 现在列表的右边。需要显示出列表确切的移动状态，让用户 明了当前的情况。 如果您希望列表可以按一定次序（例如：名称或大小）自动 排列时，应该考虑使用排序对话框来排序。
- 50. 处理数据 操作流程 1 用户点击“按 钮”实体键 2 菜单选项推入， 点击“重新排 列”的选项 3 拖拽功能开启， 提示图标显示 在列表右侧 4 带有“确定”和 “取消”的按钮 栏推入屏幕
- 51. 处理数据 操作流程 5 6 释放后，该列表进入恰 用户点击并将 当的位置。此时用户点 其拖拽到屏幕 击“确定”“取消”以 上不同的位置 完成操作
- 52. 处理数据 使用情景 排列数据 拖拽 4. Drag & Drop 1 • 方便直观地排列列表 • 步骤繁琐：需要很多 操作来完成排序 • 排序的指示图标不易 察觉 + -
- 53. 处理数据 具体案例 排列数据 拖拽 4. Drag & Drop 1 Google Stocks HTC Sense Music Player Playlist Noodles
- 54. 处理数据 Google Searcks 1 当前显示为 2 当点击“菜 股票的列表 单”实体键 后，菜单项 目推入，此 时选择“重 新排序”
- 55. 处理数据 Google Search 3 拖拽的图标 4 用户点击并 出现在每个 拖拽项目 列表的右侧
- 56. 处理数据 Google Stocks 5 释放后，列 表呈现出新 的顺序
- 57. 处理数据 使用情景 排列数据 排序对话框 4. Sort-key Dialog 2 当您的应用中的展示了很多项目，并且每个项目都拥有很多 属性（如名称、大小和日期）时，您应当考虑加入排序的功 能。因为用户需要浏览特定感兴趣的项目，或是在特点的属 性上进行比较。此时，可以考虑使用排序对话框的模式。 理想状态下，每个属性提供一种排序方式，且至少提供两种 排列方式。如果您希望用户可以按自己的方式独立进行排序， 请考虑使用拖拽功能。 排序时，全部的项目需要保持用户。如果您只希望显示特定 的与用户相关的类别或项目时，请考虑使用过滤选项。
- 58. 处理数据 操作流程 1 排序通常运用在 长串的列表，其 包含多项的属性 3 用户点击该选 项 2 点击“菜单”实 体键，选项中包 含排序选项
- 59. 处理数据 操作流程 4 弹出对话框， 其中包含可用 的排序选项 6 根据用户的选 择后，列表从 新排序 5 用户点击一个 项目后，对话 框关闭
- 60. 处理数据 使用情景 排列数据 排序对话框 4. Sort-key Dialog 2 • 依据用户的选择自动 • 步骤繁琐：需要很多 排序，使用户更快捷 操作来完成排序 地获取相关信息 • 由于所有项目可见， • 相比静态列表而言， 所有查看所需的项目 增添了灵活性 时仍然需要滚动 + - • 在改变列表排序选项 时无法看见列表内容 的快速变换
- 61. 处理数据 具体案例 排列数据 排序对话框 4. Sort-key Dialog 2 HTC Sense Footprints Uninstaller
- 62. 处理数据 HTC Sense Footprints 1 当查看保存 2 当点击“菜 的地点清单 单”实体键 时，一个地 后，菜单项 点列表被打 目推入，此 开 时选择“排 序”
- 63. 处理数据 HTC Sense Footprints 3 点击相应选 4 选择后对话 项后，弹出 框退出，并 对话框，其 且列表被重 中包含了可 新排序 供选择的排 序方式
- 64. 处理数据 展示大量内容 Show a Vast Amount of Content 5 • 扩展列表 Expandable list • 分段显示 Segmented control • 数据分页 Data drill down • 动态加载列表 Dynamic loading of a list • 静态列表 Static list
- 65. 处理数据 使用情景 展示大量内容 扩展列表 3.. 5 Expandable List 3 1 当信息需要在同一屏中呈现时，可以使用扩展列表。此时信 息按组别分类在两个层级中。组别点击后可以单独展开，以 显示子级信息。此外，扩展列表的项目旁边应该包含指示图 标，来表明当前该组别所处的状态。 但当一组数据中包含太多子项目时，应该考虑使用数据分层 来避免过长的滚动。
- 66. 处理数据 操作流程 1 点击 2 列表展开
- 67. 处理数据 使用情景 展示大量内容 扩展列表 5. Expandable List 1 • 便于信息间的比较 • 如果包含大量信息， 依然无法避免多长的 滚动 + -
- 68. 处理数据 具体案例 展示大量内容 扩展列表 3.. 5 Expandable List 3 1 TVGids.tv Nederland RSS Feeds(HTC Desire) Brower(Samsung Galaxy S)
- 69. 处理数据 RSS Feeds(HTC Desire) 1 订阅的源以 2 点击一个项 折叠的列表 目后，该组 形式展现出 下的源展开， 来，同时暗 同时指示箭 示可扩展的 头指向下方 箭头图标显 示在条目的 右边
- 70. 处理数据 使用情景 展示大量内容 分段显示 3. 5 Segmented Control 2 3 当您想显示或隐藏部分数据而不改变当前的视图时，分段显 示将是一个很好的选择。对于同样的一组数据来说，您应当 考虑使用一个标签栏。内容涉及同一个主题，但必须被划分 成不同的部分时，应该使用模块化的标签。 分段显示是由几个分段按钮水平构成的，一般包括2~5个按 钮，即可以看做是对应内容的过滤器。
- 71. 处理数据 操作流程 1 当点击某 个按钮 2 被点击的按 钮突出显示 3 显示对于的 数据
- 72. 处理数据 使用情景 展示大量内容 分段显示 5. Segmented Control 2 • 便于处理大量的相似 • （空） 数据 + -
- 73. 处理数据 具体案例 展示大量内容 分段显示 5. Segmented Control 2 Android Market Layar Foursquare
- 74. 处理数据 Android Market 1 在这里，所 2 点击最热免 以的应用们 费后，显示 被分为三段： 该分段下的 最多购买、 条目 最热免费 最新上架
- 75. 处理数据 使用情景 展示大量内容 数据分页 3. 5 Data Drill Down 3 通常，信息会被划分进不同的信息层次。点击某个项目使用 户进入更深的层级，而越深的层级，信息的粒度越细，从而 可以获得更多细节的内容。用户可以通过一系列的文件夹从 而找到某个特定的文件。在最底层的项目将可以被编辑。 而需要信息展现在一个屏幕上时，应当考虑使用扩展列表。 同样当信息需要被进行比较或同时被查看时，避免使用这一 模式。也应该保持层级不能太深。
- 76. 处理数据 操作流程 1 信息通过多层 列表组织起来。 2 点击某个项目 后进入下一个 层级 3 此为最终层级 的页面
- 77. 处理数据 使用情景 展示大量内容 数据分页 5. Data Drill Down 3 • 在合适的情景中，您 • 信息间不易进行比较 可以提供十分细致的 • 用户在不同层级间容 信息 易迷失（提供面包屑 • 整个屏幕都可以用来 (breadcrumbs)） 显示信息 + -
- 78. 处理数据 具体案例 展示大量内容 数据分页 5. Data Drill Down 3 Treintijden Light Calorie Counter
- 79. 处理数据 Treintijden Light 1 该应用可以 2 第二级列表 用来查询火 显示从该站 车时间、车 出发的火车 次和制定行 清单。用户 程计划。选 需要从中选 择站点的操 择一个 作将从这一 级列表开始
- 80. 处理数据 Treintijden Light 3 第三级将呈 现所有的相 关细节
- 81. 处理数据 展示大量内容 动态载入列表5. Options Menu 4 请参看此页
- 82. 处理数据 使用情景 展示大量内容 静态列表 3. 5 Static List 3 5 列表在多数情况下十分有效并且也被广泛使用的。列表视图 是一种简单直接的方式来展示导航的项目，尤其是当列表项 目并不太多且您希望所有内容可以在一屏中被查看时。而列 表中的项目可以被放置到同一个层、垂直的滚动清单中。而 加入标签后，列表项目可以被划分到不同的组别中，这样更 易于导航。 但当您有大量的导航项目时，请考虑使用扩展列表、信息分 页抑或是动态载入列表。另一个很好的解决方案是加入滚动 卷轴(Scroll Thumb)，但此时列表内容将必须按字母顺序进行 排列。
- 83. 处理数据 操作流程 1 当加载一个动态 列表时，如果载 入时间很长，请 3 手指滑动时， 新项目出现 考虑加入一个进 度指示 2 内容将展示在一个列表中。 每个项目包括一段文字， 也可以有包含图标或图像， 4 滚动时，右侧出 现控件指示当前 所处整个列表的 但请保证它依然看起来是 位置。滚动停止 个列表 后，指示消失
- 84. 处理数据 使用情景 展示大量内容 静态列表 5. Static List 5 • 所以的信息同一时间 • 载入耗费一定时间 呈现到屏幕上，不需 • 需要更多的滚动来查 要等待或点击来查看 看分页的内容 更多的内容 + -
- 85. 处理数据 具体案例 展示大量内容 分段显示 5. Segmented Control 2 Engadget Amazon MP3
- 86. 处理数据 Engadget 1 当用户加载 2 底部的下一 新的文章列 页中包含了 表时，一个 其他的20个 进度指示表 项目，这两 明正在载入 个箭头可以 新的页面 在页面间前 进或后退
- 88. 输入数据 输入数据 Getting Input 1. 输入值 Enter a Value 2. 输入文本 Enter Text 3. 选择预定义值 Select a Predefined Value 4. 选择多个项目 Select Multiple Items 5. 设置日期和时间 Set Time and Date
- 89. 输入数据 输入值 Enter a Value 1 • 滑块输入 Slider • 单选列表 Spinner
- 90. 输入数据 使用情景 滑块输入 输入值 1. Slider 1 滑块通常在设置页面中出现，当用户必须 为某些事情输入一个值时，比如距离或者 音量。用户可以在允许的范围内做出选择 只有当个别几个选项可供选择时，可以考 虑使用单选按钮或滚轮。
- 91. 输入数据 操作流程 这样对应的值 3 滑块由一个被控制块 就是显示出来， 分成两部分的水平条 或者在调整音 1 带组成。左侧突出的 量的时候会播 部分对应当前选定值。 放相应是声音。 右侧显示用户还有多 少可以调整的值。 4 要确认新的值 点击确定 2 当用户将滑块 滑到右边，左 边高亮的部分 就会增加
- 92. 输入数据 使用情景 滑块输入 输入值 1. Slider 1 • 对于输入值来说是一 • 当值的范围很大时， 个很直观的方式且易 很难输入一个精确的 于理解 值 • 使用快捷 • 有趣 + -
- 93. 输入数据 具体案例 滑块输入 输入值 1. Slider 1 Clock-Set Alarm Layar-Filter Settings Nexus One-Display Settings
- 94. 输入数据 Clock-Set Alarm 1 在改变闹铃 2 当选中滑块 的声音大小 并拖拽时， 时可以使用 他会高亮， 滑块 并且当前的 数值会显示 出来并持续 几秒钟，当 用户停止控 制时会渐渐 消失
- 95. 输入数据 使用情景 单选列表 输入值 1. Spinner 2 当用户需要在预定义列表中选择项目时，可 以使用单选列表。如果没有足够的空间来显 示整个列表的项目，也可以使用单选列表。 单选列表通常用在设置界面中，与内容组合 使用，比如单个项目，复选框，时间和日期 的选择。单选按钮在单选列表中，用以表示 只有一个项目可以选择。
- 96. 输入数据 操作流程 单选列表类似于一个下拉 以前选定的项目 3 列表。它拥有的项目清单， 或默认项被选中。 从中用户可以选择一个项 这种情况也会发 1 目。所选的项目显示在文 生在没有项目被 本框中。项目按钮的右侧 选中的时候。 显示一个选择，以方便用 户识别。 2 在当前的屏幕中 出现一个对话框， 5 选定的项目显 示在微调框中。 4 显示列表中的所 有子项目。列表 当一个项目被 中的每个项目都 选中，对话框 配有一个单选按 消失。 钮。
- 97. 输入数据 使用情景 单选列表 输入值 1. Spinner 2 • 节约有限的屏幕空间 • 项目列表只有在点击 • 介绍预定的选择，帮 后才可见 助用户做出选择 • 项目列表对话框掩盖 • 单选列表是快捷有效 了画面和背景，可能 的数据输入方法。 会造成使用者混淆 + - （迈克尔马丁内兹） • 不允许输入自定义值
- 98. 输入数据 具体案例 单选列表 输入值 1. Spinner 2 Facebook Calender Astrid
- 99. 输入数据 Facebook 1 在Facebook 2 打开一个含 的事件邀请 有3个选项 页面中，用 的项目列表， 户可以答复 其中没有任 的区域运用 何一个选项 的就是微调 被选择。 选择。文本 将显示为 “等待批复”
- 100. 输入数据 Facebook 3 点击一个选 4 对话框消失。 项的选择按 面前选择的 钮 选项被选中。
- 101. 输入数据 输入文本 Enter Text 2 • 全局输入 Pan & Scan • 展开输入 Extract
- 102. 输入数据 使用情景 全局输入 输入文本 2. Enter Text 1 组织应用与软键盘之间的可用空间有很多 种形式。全局输入是使用软键盘的默认模 式，因为它是对现有应用最安全的。当应 用程序的输入域低于屏幕的中间领域时， 可以使用全局输入模式。
- 103. 输入数据 操作流程 3 输入框变为高 亮显示，可以 1 通过软键盘输 入字符 输入框被选中 2 键盘展开并出 现在输入框下 方 4 当键盘隐藏时， 屏幕返回到原来 的位置，输入的 文本将显示在输
- 104. 输入数据 使用情景 全局输入 输入文本 2. Enter Text 1 • 屏幕布局只需要很小 • 要求全屏，这可能给 的改动 用户造成混淆 • 应用程序和键盘都可 见：输入内容清晰 + -
- 105. 输入数据 具体案例 全局输入 输入文本 2. Enter Text 1 Astrid Calendar
- 106. 输入数据 Astrid 1 在Astrid中， 2 输入框抬起， 一个用于添 为软键盘腾 加新任务的 出空间。在 输入框位于 这里，输入 屏幕底部， 框被视为一 当点击时 个独立的视 图，因此任 务界面停留 在了原先的 位置
- 107. 输入数据 Astrid 3 此时就可以 4 键盘被隐藏 在输入框内 后，输入框 输入文本了。 回到了它原 左下角的按 来的位置， 钮可以用来 并且输入的 隐藏键盘 文本显示在 了框内
- 108. 输入数据 使用情景 展开输入 输入文本 2. Enter Text 2 在可用空间组织文本框与软键盘的方式有 好多种。展开输入模式通常使用在需要显 示软键盘和可用空间过于有限的情况下。 它通常只使用在应用程序为横向的时候。 当你的应用程序的方向是纵向，可以考虑 使用全局输入的方式。
- 109. 输入数据 操作流程 3 文本框扩展，并 1 且与软键盘占满 展开输入形式通 屏幕输入框变得 常使用在横向界 高亮，并且可以 面上 通过软键盘输入。 2 当输入栏被点击 时 4 之前的界面被显示出来， 并且输入的内容被显示在 了之前的输入框中
- 110. 输入数据 使用情景 展开输入 输入文本2. Enter Text 2 • 有足够的空间，输入 • 输入框从应用程序中 文本 扩展开来。内容对于 用户来说并不清晰 + -
- 111. 输入数据 具体案例 展开输入 输入文本 2. Enter Text 2 Twitter Gmail Dropbox
- 112. 输入数据 Twitter 1 在横向模式下，用户如果想 要编辑文本，必须要点击文 本框 2 点击后，屏幕只显示了 一个文本输入框，键盘， 以及一个更新按钮。
- 113. 输入数据 Twitter 3 用户可以开始输入他的 tweet 4 而当键盘被隐藏时，原 来的文字输入框再次出 现。
- 114. 输入数据 选择预定义值 Select a Predefined Value 3 单选列表 Spinner 参照此页
- 115. 输入数据 选择多个项目 Select Multiple Items 4 • 复选框 Checkbox
- 116. 输入数据 使用情景 复选框 选择多个项目 4. Select Multiple Items 1 你想让用户选择多个有相同动作需要执行 的项目。当项目的数量过于庞大时。你可 以添加选择来对所有项目选择或取消选择
- 117. 输入数据 操作流程 2 用户可以点击相 1 每一个项 应的复选框来选 目都有一 择列项目。项目 个复选框 可以通过再次点 击复选框来取消 选择。 当一个复选框被选中时， 3 带有按钮的工具栏就出 现了，它包含一个或多 个操作，可以通过点击 4 当用户点击动作按 钮时，系统将执行 所需的操作上已选
- 118. 输入数据 使用情景 复选框 选择多个项目 4. Select Multiple Items 1 • 这是一种完成众多项 • 用户可能不会注意到 目中单一动作的最快 这里存在一种多项选 捷方式 择的功能 + -
- 119. 输入数据 具体案例 复选框 选择多个项目 4. Select Multiple Items 1 Gmail Gallery
- 120. 输入数据 Gmail 1 Gmail提供的 2 当复选框被 项目复选框 点击，他们 出现在项目 需要选中的 列表的左侧。 项目就被选 应该说，它 中了 们很不容易 被看清楚
- 121. 输入数据 设置日期和时间 Set Time and Date 5 • 加减按钮 Plus & Minus • 滚轮 Wheel
- 122. 输入数据 加减按钮 使用情景 设置日期和时间 5. Set Time and Date 1 加减按钮形式的时间设定模式在用户需要 设定时间或日期的各种情况下，都是很有 效的。除了这种方式以外，你必须要用到 键盘输入。当然你也可以选择使用滚轮形 式在调整时间和日期，但这种形式的时间 调整工具在所有的Android设备中是不标准 的。
- 123. 输入数据 操作流程 在点击一个指定目标（通常是一个 在对话框顶部 3 显示时间的可触目标）后，一个设 置时间的对话框就会出现在当前界 的时间值也会 随着用户的控 1 面的上方。它至少包括需要设置的 时间和日期，设置时间的控件，和 制而改变 确认动作与取消动作的两个按钮。 此外，还可以提供一个am/pm按钮， 以便用户从上下午之间切换 2 通过加减控制，用户可以设置 所需的时间。在控键上的每一 次点击都可以使时间数值相应 地增加或减少，通过长按，值 4 通过击“ok”按 钮，用户即可确 会变化得更快 认设置的时间
- 124. 输入数据 加减按钮 使用情景 设置日期和时间 5. Set Time and Date 1 • 容易理解它是如何工 • 与滚轮模式相比稍显 作的，因为它与设置 缺乏乐趣 数字时钟的共同点很 • 基于时间的格式，对 多。用户对于这些是 话框的宽度会随着值 熟悉。 的变化而变化，数值 + - 进位时可能会造成很 突然的效果（moeffju）
- 125. 输入数据 加减按钮 具体案例 设置日期和时间 5. Set Time and Date 1 NS Reisplanner Samsung Galaxy S Calender
- 126. 输入数据 NS Reisplanner 1 荷兰铁路部 2 打开一个时 门提供了一 间设置的对 个旅游信息 话框以完成 的应用软件。 设置时间的 点击第二个 任务 模块的项目 可以显示旅 行时间
- 127. 输入数据 滚轮 使用情景 设置日期和时间 5. Set Time and Date 2 滚轮形式的时间设定模式在用户需要设定 时间或日期的各种情况下，都是很有效的。 相比加减按钮形式而言，它提供了一种更 加有趣的时间设定形式。如果你想要你的 用户运用键盘设置时间，还是考虑使用加 减按钮形式吧。
- 128. 输入数据 操作流程 在点击一个指定目标（通常是一个 显示时间的可触目标）后，一个设 通过点击“确定”按钮， 3 置时间的对话框就会出现在当前界 确认时间设置。点击“取 1 面的上方。它至少包括两个滚轮， 消”按钮放弃时间修改。 和确认动作与取消动作的两个按钮。 时间设置窗口关闭，返回 此外，还可以添加额外的用以设置 到前一个画面。 年和上下午的选择，滚轮当中被选 中的值将被高亮显示 2 用户可以滑动滚轮来 设置时间，使它们缓 慢转动。快速的抛拽 可以使它们转动的速 度变快，随后它们会 缓慢停止
- 129. 输入数据 滚轮 使用情景 设置日期和时间 5. Set Time and Date 2 • 与传统的设置方式相 • 用户并不能通过键盘 比更加有趣 输入来设定滚轮 • 用户易懂，创造熟悉 • 分钟在到达59后便不 的交互方式 再继续到00 • 比键盘输入花费更长 • （迈克尔马丁内兹） 的时间 + - • 用户不能从日历上选 择时间，因此要选择 一个类似本月第二个 星期五的日期会非常 困难
- 130. 输入数据 具体案例 滚轮 设置日期和时间 5. Set Time and Date 2 HTC Sense Alarm HTC Sense Calendar
- 131. 输入数据 HTC Sense Alarm 1 若须设置一 2 一个由三个 个HTC报警 滚轮的时间 器，用户需 设置窗口弹 要选择一个 出 时间
- 132. 输入数据 HTC Sense Alarm 3 用户可以运 4 确认或取消 用手势转动 后返回前一 滚轮。点击 个画面 底部按钮将 确认或取消 输入的时间
- 134. 导航 Navigation 1. 突出重要功能 Highlight important functionalities 2. 大量内容中找到路径 A way through content 3. 在内容中移动 Move through content 4. 触发 Toggle between different sections or activities 5. 连接前后操作 Access to contextual actions 6. 进入常用选项 Access to general operations
- 135. 导航 突出重要功能 Highlight important functionalities 1 • 操作栏 Action Bar • 分类仪表盘 Dashboard-Catology • 功能仪表盘 Dashboard-Features
- 136. 导航 使用情景 突出重要功能 操作栏 1. Action Bar 1 如果想在屏幕上采取关键操作，可以使用操 作栏。你不希望在菜单按钮下面隐藏它。操 作栏是最适合用于像搜索，刷新或撰写等常 用操作。当屏幕空间十分有限时，考虑把操 作放到选项菜单中。
- 137. 导航 操作栏 • 位于屏幕的顶部以支持导航和 突出重要的功能 • 替换标题栏（通常将其包括在 内） • 非常适合在使用应用过程中使 用，例如搜索，刷新和撰写 • 它提供一个快速的链接入口， 可以通过轻轻点击应用Logo进 入到应用的首页 • 最好没有前后关系，但是每个 页面中的可用操作是不同的
- 138. 导航 使用情景 突出重要功能 操作栏 1. Action Bar 1 • 轻松访问关键的功能 • 使用时会比在主菜单 • 在你的应用程序中提 中提供选项占用更多 供一个锚点 的屏幕空间 • 会显示应用的商标， • 使用宽屏模式时需要 所以用户知道他们正 在屏幕上经过较远的 + - 在哪个应用里 距离
- 139. 导航 具体案例 1 1. Twitter Market
- 140. 导航 Twitter 1 Twitter的标 2 在Tweets页 志是始终在 面上还有一 操作栏的左 个额外的功 侧位置。从 能：刷新。 每个页面都 可以直接返 回应用的首 页，正如展 示所示。
- 141. 导航 Twitter 3 创建tweet页面，在操作 不能被应用之前就会出现 提示。
- 142. 导航 突出重要功能 使用情景 分类仪表盘 1. Dashboard-Catology 2 当你的应用以内容为中心且可以被分成不同 类别时你可以使用分类仪表盘。为了提高可 搜索性，可以在仪表盘内包含搜索栏。该仪 表板还可与操作栏同时使用。
- 143. 导航 分类仪表盘 • 仪表板是您应用程序的欢迎屏幕。 • 它为用户提供了一个起点。 • 仪表板可以是静态或动态的，例如， 你可以使用动态壁纸或者改变新的 条目内容。 • 一个类别仪表板，与内容相接的入 口点由几个不同的分类展示出来。 • 这些分类由图标或者标题的形式展 示出来，以网格的形式铺满整个屏 幕。 • 这种布局设计，用户可以更快地查 找内容。
- 144. 导航 突出重要功能 使用情景 分类仪表盘 1. Dashboard-Catology 2 • 很好地概括了应用程 • 仪表板占用大量的屏 序的内容 幕空间 • 对于在海量内容中导 • 想要获得所需的内容 航来说是一个简单的 可能会花费额外的步 起点 骤 + - • 对于某些应用程序来 说，直接进入应用比 进入仪表盘会更有用
- 145. 导航 突出重要功能 具体案例 分类仪表盘 1. Dashboard-Catology 2 Google Place Documents to Go Factbook
- 146. 导航 Google Place 1 Google Places显示了寻找附近 不同类别的地方。用户可以 添加自定义类别。仪表盘包 括一个搜索栏，以方便寻找 位置。
- 147. 导航 突出重要功能 使用情景 功能仪表盘 1. Dashboard-Functionalities 3 当你的应用以内容为中心且可以被分成不同 类别时你可以使用分类仪表盘。为了提高可 搜索性，可以在仪表盘内包含搜索栏。该仪 表板还可与操作栏同时使用。
- 148. 导航 功能仪表盘 • 仪表板是您应用程序的欢迎屏幕上， 它为用户提供了一个起点。 • 仪表盘显示了各种功能，用户可以 使用应用程序，并强调有什么新的。 • 仪表板可以是静态或动态的，例如， 你可以包含的项目，如动态壁纸和 不断变化的内容。 • 功能性的仪表盘在全屏的时候显示 出与你的应有相关的关键功能。 • 它为重要的任务和功能提供简单的 接口。 • 功能能会以图标加题目的方式在表 格中排布。
- 149. 导航 突出重要功能 使用情景 功能仪表盘 1. Dashboard-Functionalities 3 • 很好地概括了应用程 • 仪表板占用大量的屏 序的内容 幕空间 • 对于在海量内容中导 • 想要获得所需的内容 航来说是一个简单的 可能会花费额外的步 起点 骤 + - • 对于某些应用程序来 说，直接进入应用比 进入仪表盘会更有用
- 150. 导航 突出重要功能 具体案例 功能仪表盘 1. Dashboard-Functionalities 3 Google Place Documents to Go Factbook
- 151. 导航 Google Place 1 Google Places显示了寻找附近 不同分类的地方。用户可以 添加自定义类别。仪表板包 括一个搜索栏，以方便寻找 位置。
- 152. 导航 大量内容中找到路径 使用情景 深入导航 2. Drill Down Navigation 1 通常信息必须被分解成多个层级列出。点击一 个条目可以使用户移动至有更多细节的层级， 所以进入的层级越深，获得的详细信息也就越 多。用户还可以通过更深层次的挖掘一系列文 件夹来找到特定的文件。在最后的层级可以编 辑条目。当信息需要在同一个屏幕上显示时， 考虑使用扩展列表。当信息需要被比较或者同 时查看时，请不要使用深入导航。同时也不要 在深入导航中放入太多层级。
- 153. 导航 深入导航 1 信息是通过多层级在列表 中组织起来的。点击列表 中的一个条目… 3 打开，在这种情况下， 目前是最后一个层级。 2 打开了下一层级。在 列表中再次单击其中 的项目…
- 154. 导航 大量内容中找到路径 使用情景 深入导航 2. Drill Down Navigation 1 • 可以针对确定的内容 • 不方便比较信息 提供非常详细的信息 • 用户在多层级的信息 • 整个屏幕可用来显示 中可能会迷失 详细的信息 + -
- 155. 导航 大量内容中找到路径 具体案例 深入导航 2. Drill Down Navigation 1 Treintijden light Dropbox
- 156. 导航 TwitTreintijden light ter 1 应用程序 2 下一个清单 Treintijden 显示出来： light可以用 从该站出发 来查询列车 的车次信息。 时间表或火 车的计划车 次。当列表 中的一个车 站被选中时
- 157. 导航 TwitTreintijden light 3 显示了这方 面的所有细 节。
- 158. 导航 大量内容中找到路径 使用情景 列表导航 2. List Navigation 2 列表可以多次使用因此它的应用频率很高。列 表视图是一种简单且直接的方式来显示导航项 目，尤其是当项目的数量不是非常庞大的时候。 垂直滚动的列表中，内容被放置在唯一层级中。 次级标题将各个项目分成小组，这样使得导航 更加容易。当你有大量的导航项目，可以考虑 使用一个扩展列表，或深入导航 。
- 159. 导航 列表导航 3 当屏幕继续移动时，指示器会显 示当前项目在整个列表中的位置。 当用户停止滚动且列表停止移动 时，指示器会渐渐淡出。 1 内容显示在一个列表里。项 目包含一个标题，通常伴随 着一个图标或者图像。当然 也允许有其他信息，只要那 2 当用户的手指在他希望的方 向上（本案例中向上）移动 时，列表会通过屏幕向上移 看起来还像一个列表。 动，可以看到新的条目。
- 160. 导航 大量内容中找到路径 使用情景 列表导航 2. List Navigation 2 • 这是一个简单的方法 • 当列表过于庞大时， 来提供导航 会削弱用户对其的整 体感知 + -
- 161. 导航 大量内容中找到路径 具体案例 列表导航 2. List Navigation 2 Shop Savvy Calorie Counter
- 162. 导航 Shop Savvy 1 条形码扫描 应用Shop Savvy在其 首页使用了 列表导航。 从这里，用 户可以作出 选择，以执 行一个操作。
- 163. 导航 大量内容中找到路径 使用情景 分段控制 2. Segmented control 3 当用户希望在不改变当前视图的前提下找到特 定的数据时，可以使用分段控制。它可以作为 对一组数据的过滤器。您还可以考虑使用模式 选择器来将内容划分成不同的区域，在这里选 择不同的部分，对应的内容被加载。如果数据 并非出于一个系列，你可以考虑使用标签栏。 当内容覆盖了确切的条目且不得不划分成不同 的主题时，你应该使用模块标签。
- 164. 导航 分段控制 2 被点击的按钮 保持高亮… 1 分段控制是一个水平对齐的 分段，包括2-5个按钮，它类 似于数据选择中的过滤器。 当用户点击一个按钮... 3 与该分段对应的数 据显示出来
- 165. 导航 大量内容中找到路径 使用情景 分段控制 2. Segmented control 3 • 它可以更快地帮助用 • 劣势暂无 户找到他想要的项目 + -
- 166. 导航 大量内容中找到路径 具体案例 分段控制 2. Segmented control 3 Appie - Shops Appie - my purchases
- 167. 导航 Appie - Shops 1 在Appie你可 2 在这里，所 以找到超市。 有晚上8点 在上面分段 以后仍然营 控制有助于 业的超市显 筛选出正确 示出来。 的内容。现 在，所有的 超市都显示 在地图上。
- 168. 导航 大量内容中找到路径 使用情景 可扩展列表 2. Expandable list 4 当希望用户在当前屏幕上寻找内容时，可扩展 列表是非常有用的。内容可以按照类别分组， 覆盖两个层级。当一组有许多子项，可以考虑 使用深入导航以避免大量的滚动。
- 169. 导航 可扩展列表 1 可扩展的 2 已展开的 • 项目按组组织（通常按照类别）为两级列表。群组可以 单独展开以显示他们的子项目。在可扩展列表中每个项 目的旁边有一个指示器，可以指示每个项目当前的状态。 • 根据设备不同，指示器有可能位于项目的左侧或者右侧， 展开状态有可能是向右或者向下的。
- 170. 导航 大量内容中找到路径 使用情景 可扩展列表 2. Expandable list 4 • 信息可以更容易进行 • 在一个屏幕上有大量 比较 的信息，所以不方便 滚动 + -
- 171. 导航 大量内容中找到路径 具体案例 可扩展列表 2. Expandable list 4 App categories Browser (Samsung Galaxy S)
- 172. 导航 App categories 1 在应用分类中 2 使该项目扩 你可以对你的 展并且它的 应用进行分类。 子项目显示 该截图中显示 出来。指示 了所有类别。 器在这里指 这些类别是折 叠的，因此它 向了顶部。 的子项是不可 见的。点击一 个类别…
- 173. 导航 大量内容中找到路径 使用情景 模式选择器 2. Mode selector 5 当你有很多内容需要分配，且这些内容可以分 成不同的模式或者区域时你可以使用模式选择 器。选择器的工作原理相当于针对大量内容的 过滤器。确保你分配在相同区域里的内容是相 似的。不要为选择器添加任务。当你希望在不 同活动中使用触发器时，请使用标签栏代替。 当你不希望其他部分的内容通过转换到另一部 分而加载时，你可以使用分段控制 。
- 174. 导航 模式选择器 1 用户这在浏览的内 容，在这里以列表 的形式显示。 3 一个有着所有其 他部分的表格滑 入屏幕。 6 特定部分，包含 了其相应内容将 会显示出来 2 在模式选择器中附带操作栏或者 7 指示器中 5 的该部分 标题栏。它包括一个指示器，这 样用户就可以知道他可以在不同 当用户点击了表格 会被选中。 的模式或者区域中转换（模式选 中的其他部分时 择器中的元素是确定的），当前 部分的标题是可见的。该部分或 者模式的题目同样也可以在操作 4 栏或者标题栏中显示出来。模式 该表格可以通 选择器同样可以放置在左侧或者 过轻击选择器 右侧，或者位于操作栏或标题栏 的内部。点击模式选择器… 或者表格外面 的区域来关闭。
- 175. 导航 大量内容中找到路径 使用情景 模式选择器 2. Mode selector 5 • 可以分配大量内容 • 指示器往往难以察觉 • 用户对有效内容一目 了然 • 对于用户来说，这是 一个很吸引人的方式 + - 在不同的部分中进行 切换
- 176. 导航 大量内容中找到路径 具体案例 模式选择器 2. Mode selector 5 Time Mobile Engadget Twitter
- 177. 导航 Time Mobile 1 Time Mobile拥 2 当用户点击 有大量内容， 指示器时， 被分为了很多 一个有着所 类别。在开始 有可选部分 页面中，“最 的表格滑入 新故事”部分 被显示出来。 到屏幕中。 标题在 “Time”logo下 方显示出来。
- 178. 导航 Time Mobile 3 由于该表格 4 ‘影片’部分 有很多内容， 被选中... 所以用户可 以滑动向下。
- 179. 导航 Time Mobile 5 ...部分正在 6 相应内容显 加载... 示出来。请 注意该科在' 时代'标志所 有权发生了 变化。
- 180. 导航 使用情景 大量内容中找到路径 标签 2. Tabs 6 当你有大量的信息需要呈现并且希望分布在不 同的部分的时候可以使用标签。这些部分将横 向排列2-5个。该部分的分类标签内容会显示 在标签中。选项卡和分段控制十分相似，尤其 是在帮助用户在不想改变当前视图的情况下找 到部分数据的时候，但是分段控制的原理和过 滤器相似，标签则将数据分成不同的部分。当 你希望用户在不同的数据中转换时，你应该使 用标签栏 。
- 181. 导航 标签 1 在这里第一个标签已经 被选中。它显示了有关 主题的信息。当第二个 3 它被选中并且对应的 内容显示出来。 标签被点击时… 2 该标签高亮并且相对应的内 容显示了出来。当最后一个 选项卡被点击时… 在一个特定主题，内容分为3个 标签。每个标签代表一个方面 或部分的主题。
- 182. 导航 使用情景 大量内容中找到路径 标签 2. Tabs 6 • 非常直观的方式将数 • 当应用同时包括标题 据分成不同的部分 栏或者操作栏或者一 • 最初来自网络界面， 个头部区域时，它会 所以用户对此项原则 占用很多的屏幕空间 非常熟悉 • 当超过3个标签的使用 + - 时，每一个标签的空 间非常有限
- 183. 导航 具体案例 大量内容中找到路径 标签 2. Tabs 6 Facebook Android Market
- 184. 导航 Facebook 1 在facebook 2 点击第二个 中，一个用 标签，关于 户已被选中， 此用户的个 关于此用户 人信息会显 的信息被分 示出来。 成3个部分， 第一个部分 “墙”已经 被选中。
- 185. 导航 Facebook 3 在第三个标 签下，该用 户的所有照 片会显示出 来。
- 186. 导航 使用情景 大量内容中找到路径 窗帘 2. Windows Shade 7 窗帘主要用于提供导航选项。你可以让窗帘中 包含应用常用的快捷方式或设置，或者你可以 用它来让用户切换到不同的部分，而这往往出 现在新闻类应用程序中。这个选项与于模式选 择器十分类似，但后者并不控制整个屏幕。您 还可以使用窗帘，让用户方便地移动到其他功 能，这需要在应用程序的任何位置均可访问。
- 187. 导航 窗帘 1 窗帘控件在这里放置在屏幕 的底部。它通常是一个水平 放置，它使用三条水平线作 3 为视觉提示。当用户点击并 保持控制时（在某些情况下 或者它将覆盖整个屏幕， 使用单击）... 显示分配给它的内容或 功能。 4 可以通过拽回、点击返 2 回按钮或者点击控制栏 向上推开（这里不需要通过点击）， 将其关闭。 窗帘会跟随着滑入到屏幕中。用户 可以在某一点释放手指控制，根据 速度、拖拽的手势和当前空间在屏 幕上停留的位置，窗帘控件有可能 滑回至其原始位置。
- 188. 导航 使用情景 大量内容中找到路径 窗帘 2. Windows Shade 7 • 这是一种很好的吸引用 • 如果没有给出正确的视 户移动到不同内容中去 觉提示，有可能会忽略 的方式 该控件 • 它与物理中的窗帘十分 • 被窗帘覆盖的内容不再 相似，使用起来非常有 可见，有可能给用户造 趣 成迷失感 + - • 不会占用过多的屏幕空 • 有可能意外地触发滚动 间 列表 • 只有窗帘控制栏需要显 示出来
- 189. 导航 具体案例 大量内容中找到路径 窗帘 2. Windows Shade 7 Facebook Winamp New York Times
- 190. 导航 Facebook 1 在屏幕的下方 2 它可以被点 Facebook的仪 击，或者推 表板使用窗帘 上去，拖下 来显示提示信 来以显示通 息。但是没有 知信息。可 给出明确的视 以通过点击 觉提示以告知 或者拖拽下 用户这的确是 来来关闭窗 一个窗帘。 帘。
- 191. 导航 大量内容中找到路径 使用情景 卷轴滑块 2. Scroll thumb 8 当用户不得不处理长列表或者项目是可以使用 卷轴滑块。用户必须向下滚动才可能找到自己 感兴趣的条目，但是到达页面的底部意味着需 要大量的投掷滚动。卷轴滑块帮助用户在列表 中快速移动。列表中的条目会按照字母顺序排 序，例如联系人列表。在这种情况下，与卷轴 滑块（上面有着当前处于焦点的字母）结合是 非常有用的。（看Facebook和联系人屏幕截图 示例）
- 192. 导航 卷轴滑块 1 用户正在查看一个列表。 3 在屏幕的右侧边缘会 出现一个卷轴滑块。 这是一个在页面上获 得当前位置的指示器。 2 列表开始滚动。
- 193. 导航 卷轴滑块 4 卷轴滑块可以向上或者 向下移动来帮助用户快 速找到他们感兴趣的内 5 当用户让卷轴滑块移动时，它 会在两秒钟之后滑出屏幕，在 容或项目。 当前位置显示列表。
- 194. 导航 大量内容中找到路径 使用情景 卷轴滑块 2. Scroll thumb 8 • 滚动更快 • 用户可能丢失列表的 • 使长列表易于管理 概况因为列表移动的 很快（当项目并不是 按照字母顺序排列时， 用户并不知道具体停 + - 到哪里来查看）
- 195. 导航 大量内容中找到路径 具体案例 卷轴滑块 2. Scroll thumb 8 Facebook Dropbox Contacts
- 196. 导航 Facebook 1 Facebook的 2 当用户开始 好友部分在 滚动起来， 以前的版本 一个卷轴滑 是在这里显 块会显示在 示。 屏幕边缘。 用户可以拖 动它向上或 向下滚动。
- 197. 导航 Facebook 3 当释放它时， 4 最后版本的 它便滑出屏 Facebook给 幕。 出了一个有 关卷轴滑块 崭新的设计， 它增加了， 在屏幕中间 会显示朋友 的首字母。
- 198. 导航 大量内容中找到路径 使用情景 可滑动的顶部导航 Slideable top navigation 9 2. 当你的应用程序有很多内容需要分配且不得不 划分为很多区域时，你可以选择将这些部分作 为项目放在顶部导航中，当他们无法适应屏幕 宽度时可以进行水平滑动。重要的是，项目是 彼此相似的。顶部导航并不意味着包括任何活 动。如果是那样，您应该使用标签栏代替。可 滑动的顶部导航可以应用于和模式选择器相同 的情景。还有窗帘可以在相似的情景使用，但 是在这里功能同样被占据，并非像顶部导航一 样。
- 199. 导航 可滑动的顶部导航 2 所以用户可以通过滑动或者投掷 手势将起滑动至左边以显示出剩 下的全部。 4 用户选择一个 其他部分... 5 对应的内容被 加载并且显示 3 出来。 1 被选中的部分 在屏幕的上方有水平排列的 保持不动，剩 按钮或者标签，他们中的每 下的会随着手 一个都代表应用的一个部分。 势移动，当移 默认情况下，在最左边的按 动距离足够远 钮，处于被选中状态。只有 时有可能会不 少数适合屏幕。 再显示出来。
- 200. 导航 大量内容中找到路径 使用情景 可滑动的顶部导航 Slideable top navigation 9 2. • 它可以采用多个项目 • 水平扫描并不简单 在顶部导航中 （与模式选择器相反， • 轻松切换到不同的部 纵向显示各个部分） 分 • 当一个部分被选中且 • 不需要为显示其他部 移动，如果剩下的项 + - 分花费额外的点击 目中的一个被选中， （就像模式选择器）， 它会很容易消失掉不 仅仅一个滑动手势就 可见 可以将屏幕外的项目 显示出来
- 201. 导航 大量内容中找到路径 具体案例 可滑动的顶部导航 Slideable top navigation 9 2. Mashable Pulse
- 202. 导航 Mashable 1 社会媒体博 2 当导航向左 客Mashable 移动推出新 显示了一个 的部分。 可滑动的顶 部导航。左 边的按钮被 选定为默认。
- 203. 导航 Mashable 3 当新的部分 4 然后显示出 被选中时， 来。 它所对应的 内容被加载。
- 204. 导航 Mashable 5 当顶部的导航 移动到最后一 个项目，项目 编号11，顶部 导航不会再进 行移动。在这 里，对于最右 边的项目会显 示黄色的外发 光。
- 205. 导航 使用情景 在内容中移动 传送带 3. Carousel 1 当你希望提供一个对于目标选择来说引人注意 的方法时可以使用传送带，使用图形化的目标。 它同样适用于当屏幕空间十分有限且可用导航 条目非常多时。不要在用户需要一次性查看所 有导航条目时使用传送带。当屏幕空间十分有 限时，考虑使用选项菜单 显示导航条目。传 送带可以有不同的形状与尺寸，这取决于屏幕 的可用空间以及用户体验的需求。有两种常用 的选项：在你的应用的初始页面使用全屏的传 送带，另一个是通常在屏幕的顶端使用一个有 许多菜单条目的传送带。
- 206. 导航 传送带 1 项目以线 性（从数 字1到数字 N）或循环 方式组织。 2 焦点（可选）通 过高亮或者增加 3 用户可以通过在屏幕上向左或者向右 划过来滚动项目。条目会按照手指移 动的方向滑动。根据手指的移动，或 者根据传送带的设置，一个或者多个 尺寸来获得视觉 条目穿过屏幕。传送带停止时，下一 个焦点会显示出来。所有的项目始终 中心。 处于可点击状态。
- 207. 导航 使用情景 在内容中移动 传送带 3. Carousel 1 • 巧妙的利用屏幕空间 • 用户必须滑动才可以 • 传送带使得目标选择 找到需要的选项 获得参与式的体验 • 当屏幕空间十分有限 时，传送带会占据很 多的屏幕空间 + -
- 208. 导航 具体案例 在内容中移动 传送带 3. Carousel 1 Sportypal IMDb
- 209. 导航 Sportypal 1 在Sportypal中，用户可以通 过循环的传送带来选择一项 新的锻炼，在这里所有的条 目都是可见的。当前这个条 目是项目中的焦点。轻扫传 送带，或者在肩头上点击， 传送带每次会移动一步。所 以用户想要到达他想选的锻 炼至多需要两个步骤。
- 210. 导航 使用情景 在内容中移动 步骤导航 3. Stepping 2 步骤导航用于用户需要以线性方式前进（例如 多页教程、不同的文章等）。它可以保证用户 对每一页都保持注意力。不要在用户需要在大 量内容中寻找时使用步骤导航。如果是这样的 话，可以考虑使用分页或添加一个搜索选项， 以帮助寻找一个特定项目。
- 211. 导航 步骤导航 1 步骤导航让用户在某 时处理一个页面或一 个项目。每一个屏幕 上都有一个上一步和 3 下一屏内容会 被加载出来。 下一步按钮，第一屏 除外。在第一屏上上 一步按钮不会执行。 2 当用户点击下 一步按钮… 4 现在上一步 按钮可以被 点击了。
- 212. 导航 使用情景 在内容中移动 步骤导航 3. Stepping 2 • 引导用户线性地通过 • 导航到特定的项目或 一系列数据，所以每 屏幕将需要大量的点 一个条目都会引起注 击 意 • 当用户通过很多屏幕 时有可能会丢失焦点 + -
- 213. 导航 具体案例 在内容中移动 步骤导航 3. Stepping 2 Engadget Google goggles tutorial HTC Sense - RSS reader
- 214. 导航 Engadget 1 在Engadget中， 2 下一篇文章被 当用户选择了一 首先载入… 篇文章时，他可 以使用右下角的 按钮移动到其他 /较早的文章。 在这里，这篇文 章是20篇文章的 第一篇，所以不 能移回去。当他 点击向前按钮。
- 215. 导航 Engadget 3 完成加载后 显示。
- 216. 导航 使用情景 触发 标签栏 4. Tab bar 1 标签栏可以用于在应用中切换不同的模式或视图。 用户应该在应用的任何地方都可以进入不同的模 式之中。这意味着标签栏始终在屏幕的相同位置 上，当前被激活的模式被突出显示。当你的程序 有着清晰定义的模式、视图或者子任务时，使用 标签栏。如果你希望针对数据进行特殊的过滤， 例如显示所有项目中最喜欢的项目，可以使用分 段控制。如果你需要在标签栏中放置超过5个选 项，考虑将选项放置在选项菜单或传送带中 。你 同样可以在右边添加一个更多按钮，点击后会打 开一个对话菜单。如果你需要显示屏幕中的所有 内容，功能仪表盘可以用来提供类似的导航。标 签栏不应该在当前的模式中包含按钮来执行任何 动作。如果是那样，可以考虑使用工具栏。
- 217. 导航 标签栏 标签栏可以定位在屏幕的顶部或底部， 它的功能是独立定位。它至多可以包 含5个标签，在标签栏中，每个标签的 间距是一样的。 3 ...并且那个标签处 于选中状态。 1 第一个标签处于被选中状态，所 以显示了对应的视图。当其他标 签被点击时 2 属于哪个标签的 内容会显示出来
- 218. 导航 使用情景 触发 标签栏 4. Tab bar 1 • 允许在模式、视图或 • 与选项菜单来说需要 者任务之间轻松切换 占据更多的屏幕空间 • 对于用户来说是一种 来放置导航 熟悉的导航方式 • 最多只能同时有效地 • 针对上下文选项主菜 处理5个导航项目 + - 单保持可见性 • 标签栏可以让用户专 注于内容
- 219. 导航 具体案例 触发 标签栏 4. Tab bar 1 Tunewiki Engadget
- 220. 导航 Tunewiki 1 Tunewiki，社 2 当另外的标签 会化媒体播放 被按下是，在 器，使用只有 这种情况下， 图标的标签栏。 社区标签被高 目前激活的标 亮显示。在这 签处于高亮状 两种视图下， 态。 用户可以继续 申层次发掘他 们正在寻找的 东西。
- 221. 导航 使用情景 连接前后操作 上下文菜单 5. Context Menu 1 上下文菜单与windows操作系统中的右键上下 文菜单十分相似。它包含的功能用戶同样可以 从其他地方找到。当你希望针对某些条目提供 给用戶一些快捷方式来执行经常操作的命令， 你可以将这些命令放在上下文菜单中。上下文 菜单适用于（长）按下某个条目时。这些命令 会按照相关度自上而下排列，最顶端的是最相 关的。这些通常是需要在对条目进行普通点击 时的选项。当针对每个条目都有多个视觉目标 且又很多选项时，考虑使用快速操作栏。
- 222. 导航 上下文菜单 1 当用户在一条特定的条 2 目上长按时。 上下文菜单，或者如你 3 所知的长按菜单，打开 或者通过点击后退 了一个浮动的列表，上 按钮取消。 面排列着可供用户选择 的操作选项。
- 223. 导航 连接前后操作 使用情景 上下文菜单 5. Context Menu 1 • 为经常使用的选项提 • 用户不得不去发现这 供了一个快捷方式 里还有一个上下文菜 • 作业直观：显示了特 单。没有为此提供视 定条目上的操作选项 觉线索 • 会将用户的注意力从 + - 当前操作中转移开—— 有可能会使用户迷失 • 上下文菜单会占用大 量的操作列表
- 224. 导航 具体案例 连接前后操作 上下文菜单 5. Context Menu 1 Gmail Evernote
- 225. 导航 Gmail 1 在Gmail收件箱 2 打开了与此条 中，点击并保 目相关的充满 持在一个列表 命令的的上下 中的项目上。 文菜单。注意 屏幕顶部的命 令，阅读，有 可能当用户在 之前屏幕点击 后，已经在进 程中。
- 226. 导航 使用情景 连接前后操作 快速操作 5. Quick actions 2 你可以在为有内部目标竞争的条目中提供操作 是使用快速操作气泡。它必须由一个独特的视 觉目标引发，这样用户才知道可以做什么事情。 要确保弹出的气泡框并非像传统的对话框一样 阻碍了屏幕的正常使用，但是气泡框是位于所 有条目之上的。在快速操作气泡框上只出现对 于用户来说最重要且明显的操作。对于其他上 下文操作，你可以选择使用上下文菜单 。不 要在支持多项选择操作时使用快速操作按钮， 就像Gmail。在这种情况下使用按钮条代替。
- 227. 导航 快速操作 3 在用户选择一个操作之后，动作 会被直接执行，或者在确定了一 个对话窗口之后执行。 1 用户点击一个明确的视 觉目标 2 在屏幕最上方图层弹出了一 个快速操作框，它包括的最 重要且最明显的操作。
- 228. 导航 使用情景 连接前后操作 快速操作 5. Quick actions 2 • 对于屏幕内容来说破 • 视觉目标较难引起注 坏性较小 意 • 快速 • 有趣 + -
- 229. 导航 具体案例 连接前后操作 快速操作 5. Quick actions 2 Twitter Samsung Galaxy S Contacts TaskKiller Free
- 230. 导航 Twitter 1 Twitter的android 2 点击位于右侧 应用第一个版本 的目标，会打 在每一条tweet的 开与此tweet 右侧显示了视觉 相关的快速操 目标。其他的目 作气泡框。注 标是tweets中的 意，现在的目 链接以及用户的 标是突出显示 头像。点击它们 的。 将分别打开链接 或者用户的资料 页面。