Android Design Pattern-CH Part i

transcript

Android Design Pattern-I

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

目录 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 呈现数据方式改变

操作流程

处理数据

菜单选项 Options Menu 1.1 使用情景

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

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

•  操作过多：需要2步 •  太过复杂：如果各个屏中的菜单项不尽相同，那么用户必须记住该选项的确切位置 + -

处理数据

查看数据

菜单选项 Options Menu 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 具体案例

处理数据

Google Places

查看数据 1.2

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

处理数据

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

处理数据

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

标签栏 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

处理数据

加载

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

具体案例

TVGids.tv Nederland

处理数据

RSS Feeds(HTC Desire)

Brower(Samsung Galaxy S)

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

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

RSS Feeds(HTC Desire)

处理数据

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

使用情景

当您想显示或隐藏部分数据而不改变当前的视图时，分段显示将是一个很好的选择。对于同样的一组数据来说，您应当考虑使用一个标签栏。内容涉及同一个主题，但必须被划分成不同的部分时，应该使用模块化的标签。分段显示是由几个分段按钮水平构成的，一般包括2~5个按钮，即可以看做是对应内容的过滤器。

处理数据

分段显示 Segmented

Control

操作流程

处理数据

2 被点击的按钮突出显示

1 当点击某个按钮

3 显示对于的数据

使用情景

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

•  （空）

处理数据

Control

5.2 展示大量内容

具体案例

Android Market

处理数据

Foursquare

Control

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

Android Market

处理数据

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

使用情景

通常，信息会被划分进不同的信息层次。点击某个项目使用户进入更深的层级，而越深的层级，信息的粒度越细，从而可以获得更多细节的内容。用户可以通过一系列的文件夹从而找到某个特定的文件。在最底层的项目将可以被编辑。而需要信息展现在一个屏幕上时，应当考虑使用扩展列表。同样当信息需要被进行比较或同时被查看时，避免使用这一模式。也应该保持层级不能太深。

处理数据

数据分页 Data Drill Down

操作流程

处理数据

3 此为最终层级的页面

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

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

使用情景

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

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

•  信息间不易进行比较 •  用户在不同层级间容易迷失（提供面包屑(breadcrumbs)）

处理数据

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

具体案例

Treintijden Light

处理数据

Calorie Counter

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

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

Treintijden Light

处理数据

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

处理数据

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

Treintijden Light

动态载入列表 Options Menu

5.4 请参看此页

处理数据

展示大量内容

使用情景

列表在多数情况下十分有效并且也被广泛使用的。列表视图是一种简单直接的方式来展示导航的项目，尤其是当列表项目并不太多且您希望所有内容可以在一屏中被查看时。而列表中的项目可以被放置到同一个层、垂直的滚动清单中。而加入标签后，列表项目可以被划分到不同的组别中，这样更易于导航。但当您有大量的导航项目时，请考虑使用扩展列表、信息分页抑或是动态载入列表。另一个很好的解决方案是加入滚动卷轴(Scroll Thumb)，但此时列表内容将必须按字母顺序进行排列。

处理数据

静态列表 Static List

操作流程

处理数据

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

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

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

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

使用情景

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

•  载入耗费一定时间 •  需要更多的滚动来查看分页的内容

处理数据

静态列表 Static List

具体案例

Engadget

处理数据

Amazon MP3

Control

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

输入数据

输入文本 Enter Text 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

输入数据

使用情景

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

选择多个项目 Select Multiple Items 4.1 复选框

输入数据

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

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

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

操作流程

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

输入数据

4.1 使用情景

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

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

复选框

输入数据

4.1 具体案例

Gmail Gallery

复选框

输入数据

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

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

输入数据

设置日期和时间 Set Time and Date

•  加减按钮 •  滚轮

5 Plus & Minus

输入数据

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

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

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

滚轮

输入数据

具体案例

HTC Sense Alarm HTC Sense Calendar

滚轮

输入数据

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

HTC Sense Alarm

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

输入数据

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

HTC Sense Alarm

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

输入数据