iOS 7人机交互指南-UI Elements-Controls

iOS 7人机交互指南-UI Elements-Controls


重要：这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核，但并非最终版本，仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的，是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化，届时，你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。（其中一些重要变化，我们也会进行更新。译文如有纰漏，敬请指正）

活动指示器（activityindicator）
Date Picker（日期时间选择器）
联系人添加按钮（Contact Add Button）
细节展示按钮（Detail Disclosure Button）
信息按钮 （Info Button）
标签 （Label）
网络活动指示器（Network Activity Indicator）
页面控制器（Page Control）
选择器（Picker）
进度视图 （Progress View）
刷新控件（Refresh Control）
分段控件（Segmented Control）
滑动器（Slider）
步进器（Stepper）
开关（Switch）
系统按钮（System Button）
文本框(TextField)


活动指示器（activityindicator）
活动指示器显示了任务或进程正在处理中。



如何在代码中定义活动指示器，可以查看“UIActivityIndicatorView Class Reference”。

外观和行为
当处理/加载任务时，活动指示器就开始旋转，任务完成时自动消失。用户无须与之进行交互。

使用指南
在toolbar或者主屏幕中使用活动指示器来表明有进程正在处理，活动指示器并不提示何时结束进程。

1.不要展示一个静止的活动指示器，因为用户会认为这是一个停滞的进程。
2.使用活动指示器提示用户他们的任务或者进程正在进行中，要比告诉用户进程何时结束更重要。
3.如果合适，自定义活动指示器的尺寸和颜色，使之与视图的背景相协调。


日期时间选择器（Date Picker）
日期时间选择器用以展示组件的日期和时间，比如小时、分钟、日以及年。



关于如何在代码中定义日期时间选择器，可以参看 “Date Pickers”。

外观和行为
日期时间选择器最多可有4个独立的滑轮，每个滑轮都会显示不同类别的值，例如月份或小时。用户轻弹或拖动滑轮，直到在选择器正中间水平展示了他们想要的数值。最后，各滑轮选中的值组成了最终的值。

选择器总体尺寸和iphone的键盘一样。

日期时间选择器有四种模式，每种模式展示了不同数目的滑轮（包含了一组不同的时间值）。
1.日期和时间。日期和时间模式是默认的模式，用滑轮展示了日历日期、时间以及分钟值。外加一个可选的滑轮用于设定AM/PM。
2.时间。时间模式展示了小时和分钟值，外加一个可选的滑轮用于设定AM/PM。
3.日期。滑轮的日期模式展示月、日以及年。
4.倒计时计时器。滑轮的计时器模式展示了小时和分钟。你可以指定总持续时间，最长为23小时59分钟。

使用指南
使用日期时间选择器可以让用户选择日期和时间，而不是输入由多个部分组成的时间或者日期值。比如一个日、月、年的日期模式。日期时间选择器简单易用，因为各个部分的值都有一个相当小的选择范围，用户熟知这些值的含义。

1.尽可能地展示内联内容的日期时间选择器。最好避免用户进入不同的视图去使用日期时间选择器。

2.如果有必要，改变分钟滑轮的间隔。默认情况下，一个分钟滑轮展示60个刻度值（0-59）,。如果你需要展示精度不是很高的时间间隔，你可以对分钟滑轮进行设置，从而展示更大的时间间隔，只要这个间隔能除尽60。比如你可能希望按时刻（quarter-hour）展示时间间隔，0、15、30、45。


联系人添加按钮（Contact Add Button）
联系人添加按钮可以让用户把现有联系人添加至文本框或者其他基于文本的视图中。



学习如何在代码中定义联系人添加按钮，可参看“Buttons”。

外观和行为
用户点击添加联系人按钮，显示联系人列表。当用户从列表中选择一个联系人，列表则会关闭，并且联系人会被添加至包含联系人添加按钮的视图中。

使用指南
1.联系人添加按钮可以让用户不使用键盘就能方便地访问联系人。比如，用户在Mail的“发送给...”中可以点击联系人添加按钮，而不是输入收件人的名字。

2.由于联系人添加按钮的功能是输入联系人信息的替代选择，所以并不推荐在不能使用键盘输入的视图中添加这个按钮。


细节展示按钮（Detail Disclosure Button）
细节展示按钮显示了与项目相关的细节或功能。



学习如何在代码中定义细节展示按钮，可查看”UITableViewCell Class Reference“和“Buttons”。

外观和行为
使用细节展示按钮来获得某个特定项目的功能和信息。附加的信息和功能显示在一个单独的视图中。
对于表格行内的细节展示按钮，点按行内其他地方不会激活按钮，相反地会选中该行，或者是触发app定义的行为。

使用指南
在表格视图中使用Detail Disclosure button可以让用户看到跟列表项目相关的更多细节或功能。不过，你也可以在其他类型的视图中使用这个元素，来为用户显示更多项目相关的信息或功能。


信息按钮（Info Button）
信息按钮用以展示app的配置信息，有时显示在当前视图的背面。




学习如何在代码定义信息按钮，可参看“Buttons”。

外观和行为
iOS包括两种类型的信息按钮，浅色内容上的深色按钮和深色内容上的浅色按钮。

使用指南
使用信息按钮来展示app的配置信息或选项。你可以使用与app UI最匹配的信息按钮类型。


标签（Label）
标签用于展示静态的文本。



关于如何学习在代码中定义标签，可参看“UILabel Class Reference”。

外观和行为
标签可展示任意数量的静态文本。除了除了拷贝文本，用户无需与标签交互。

使用指南
1.使用标签命名或者描述UI的一部分，或者为用户提供简短的信息。标签最适合展示少量文本。

2.确保标签的可读性。最好支持Dynamic Type，并使用UIFont method preferredFontForTextStyle来获得获得文本或展示标签。如果你选择使用自定义字体，那不要牺牲清晰来换取花哨的文字效果或艳丽的颜色。


网络活动指示器（Network Activity Indicator）
网络活动指示器出现在状态条中，表明当前网络传输正在进行。



在代码中使用UIApplication method networkActivityIndicatorVisible来控制指示器的可见性。

外观和行为
伴随着网络传输，网络传输指示器会在状态条中一直转动，直到网络活动结束才消失。用户无需与之交互。

使用指南
当连接网络超过数秒时，网络活动指示器为网络传输提供了反馈。如果网络连接时间较短，则无显示该指示器，因为很可能在用户注意到它之前就已经消失了。


页面控制器（Page Control）
页面控件可指示打开的视图数量以及当前可见的视图。



学习如何在代码中定义页面控件，可参考“Page Controls”。

外观和行为
1.页面控制器上的“点”代表app中当前打开的屏幕。从左至右，这些“点”代表了视图先后打开的顺序（ps：最左边的点代表最先打开的视图）。默认情况下，这些代表当前可见视图的“点”是不透明的，而所代表的视图都是半透明的。用户点击当前“点”的左侧或者右侧可展示上一个或者下一个视图。

2.页面控制器上的“点”不会因为数量增加而缩小，相互挤压。竖屏方向的屏幕大约可以容纳20个“点”，如果你想显示多于这个数目的“点”，系统会截掉一部分。

使用指南
页面控制器适用于app中所有视图同级对等的情况。如果app以层级视图显示信息，那就不要使用页面控件，因为页面控件并不能帮助用户通过特定的路径回到上一步。

页面控件垂直居中于打开的视图底部边缘和屏幕的底部边缘，保持可见的同时又不会干扰用户。避免在当前屏幕方向展示过多的“点”。


选择器（Picker）
选择器可显示用户选择的任意数据集合。



学习如何在代码中定义选择器，可查看“UIPickerView Class Reference”。

外观和行为
选择器是日期时间选择器的通用模式。跟日期时间选择器一样，用户可旋转选择器的滑轮直到出现他们想要的值。包括背景在内，选择器的总体大小跟iphone上的键盘一般大。

使用指南
选择器方便用户从一组数据中进行选择。当用户熟悉所有选项值时，通常最好使用选择器。因为当滑轮静止时，大部分数值选项是隐藏的。如果你需要提供大量而不被用户所熟悉的数值选项集，那么选择器可能不是一个很适合的控件。特别当用户熟悉所有选项时，选择器是最佳选择。因为选择器静止不动时，其大部分的选项都是不可见。如果你需要提供大量且不被用户熟知的选项集，选择器可能不是合适的控件。

1.尽可能地展示一个内联内容的选择器。避免用户进入其他不同视图使用选择器。

2.如果你需要展示大量的选项值，考虑使用table view，而不是选择器。因为table view的最大高度可以快速滚动数据。


进度视图（Progress View）
Progress View可以显示进程或任务可预知的进度。



学习如何在代码中定义Progress View，可参看“UIProgressView Class Reference”。

外观和行为
iOS提供了两种类型的进度视图，外观上非常详细，仅在高度上有所区别。

1.默认风格适合用在app的主要内容区。
2.bar style（条状进度条）比默认进度条样式细瘦一些，适合在toolbar中使用。

伴随任务或进程处理，进度条由左向右填充。任何时候，进度条上已填充和未填充的进程比例都能提示用户，任务或进程多久可以完成。用户无需与之交互。

使用指南
1.使用进度条来反馈定义明确的持续性任务，特别是在需要告诉用户任务大约需要多长时间的时候，进度条就显得尤为重要。当你展示进度条时，你是在告诉用户他们的任务正在处理中，你给了用户足够的信息来决定他们是否想要等待任务完成或者取消它。

2.如果合适，自定义进度条的外观，以使之与app的风格相协调。你可以为进度轨道和进度条填充部分指定一个自定义颜色或者图片。


刷新控件（Refresh Control）
刷新控件执行了用户触发的内容刷新--典型代表是以table形式（比如mailbox列表）



学习如何在代码中定义刷新控件，可参看“UIRefreshControl Class Reference”。

外观和行为
默认情况下，刷新控件是隐藏的，直到用户下拉table顶部边缘执行了刷新的动作。刷新控件看起来有点像活动指示器（activity indicator）。

刷新控件也能展示标题，使用自定义颜色。

使用指南
通过刷新控件，用户可以用一个一致的方式“通知”table或者其他视图立即更新内容，而不用等待下次自动更新。以下指南可以帮你确保你的刷新控件能提高用户体验。

1.不要仅仅因为提供了刷新控件就停止自动更新内容。即便用户欣赏能够请求立刻执行内容更新，但他们仍重视内容的自动更新。如果你依赖用户执行所有的刷新，那么没有意识到刷新控件的用户有可能怀疑为什么你的app展示的是过期的数据，你希望给用户立刻刷新内容的选择，但你并不想让用户负责每次更新。

2.可使用短标题。但不要用标题来描述如何使用刷新控件。


圆角矩形按钮（Rounded Rectangle Button）
iOS 7弃用了圆角矩形按钮，相反，使用了系统按钮--对应的类型是UIButtonTypeSystem的UIButton。使用指南可参看“System Button”。


分段控件（Segmented Control）
分段控件是一套segment（分段）的线性集合，每个segment起到按钮的作用，以显示不同的视图。




学习如何在代码中定义分段控件，可以参看“Segmented Controls”。

外观和行为
分段控件的长度由分段的数量决定，其高度是固定不变的。每个segment的宽度与其数量成比例。当用户点击一个segment，则显示被选中的状态。

使用指南
使用分段控件来提供密切相关但又互斥的选项。

1.确保每个分段控件都易于点击。为了保证每个segment有44*44 points可点击区域，你需要限制segment的数量。在iphone上，分段控件的segment数量应少于5个。

2.尽可能地让每个segment上的文本标签/内容长度保持一致。因为分段控件中所有的segment宽度相同，而用长度不均的文本填充的segment看起来也不是那么美观。

3.避免在单个segment中混合使用文本和图片。分段控件可以包含文本或图像，单个segment也可以包含文本或者图片，但不能同时包含两者。一般来说，在单个分段控件内，最好避免在一些segment中放置文本，而在其他segment中放置图片。

4.如果合适，可以自定义分段控件的外观。比如，你可以自定义背景色或者提供自定义图片。如果你提供了一个背景图片，你也可以为segment的选中状态指定不同的背景图片，以及不同segment之间divider的外观。（某些情况下，提供一个可缩放背景图片是个不错的选择，学习创建可缩放背景图片，可参看“Creating Resizable Images”中文 英文）

如果你自定义分段控件的背景外观，你要确保自动居中控件的文本内容或者图片内容看起来依然很好。如果需要，你可以使用bar metrics API来调整分段控件中内容的位置。（学习定义bar metrics，可参看“UISegmentedControl”中对外观定制API的描述）


滑动器（Slider）
滑动器允许用户在限定的范围内调整某个值或者进程。




如何在代码中定义滑动器，可参看“Sliders”

外观和行为
滑动器由一个水平轨道，thumb（用户可以滑动的圆形小控件）和两张可选图片（表达左右端值）组成。当用户沿着滑动器拖拽thumb，数值和进程就会连续不断地更新，并展示在水平轨道上。

使用指南
滑动器可以让用户高精度控制他们所选的值或者当前的进程。

如何合适，自定义滑动器的外观。比如你可以遵循以下几点：
1.设置滑动器的宽度以使之与app的UI相匹配。
2.定义thumb的外观，让用户对滑动器的状态一目了然。
3.在滑动器两端提供图片，以帮助用户理解滑动器做了什么。通常，这些自定义图片对应滑动器取值范围的最大值和最小值。滑动器可控制图片尺寸，比如可以在最小值端展示一个小图片，在最大值端展示一张非常大的图片。

4.根据thumb所在的位置（ps：最大值端或者最小值端）和控件所处的状态，为滑动器的水平轨道定义一个不同的外观。


步进器（Stepper）
步进器可以增减某个常数值。



学习如何在代码中定义进步器，可查看“Steppers”

外观和行为
进步器是由两个分段控件组成，其中一个显示增加的符号，一个显示减少的符号。用户点击一个分段（segment）来增加或者减少某个值。进步器并不展示用户更改的值。

使用指南
1.一般来说，当用户可能需要做一些小的调整以达到某个值时，可使用进步器。比如，用户可能会在打印机选项活动页面使用进步器来设置打印份数，用户很少去改变这个值。另一方面，并不怎么需要使用进步器来帮用户选择页面范围，因为这些值可能有很大变化。

2.确保进步器作用的值显而易见。进步器不会展示任何数值，所以你要确保用户知道他们使用进步器改变了哪个值。

3.如果合适，自定义进步器的外观使之与你app的类型相协调。你可以为控件指定一个自定义颜色，或者你可以提供自定义背景图片，或者divider，或者增加减少的符号。


开关（Switch）
开关是用来展示两种相互排斥的选择或者状态





如何在代码中定义开关，可参看“Switches”。

外观和行为
开关展示当前有效的值，用户可滑动控件来选择反向值。用户也可以点击控件在选项之间进行切换。

使用指南
1.在表格行中使用开关可以给用户两种简单的、对立的选择，比如yes/no或者on/off。

2.你可以用开关控件改变视图中UI元素的状态。根据用户做出的选择，新的列表项目可能出现或者消失，或者列表项目会变成可用或不可用的。


系统按钮（System Button）
系统按钮执行app特有的动作。





如果你需要做一个包含bezel的按钮，使用UIButtonTypeCustom类型的按钮，并提供一个自定义背景图片。

学习如何在代码中定义系统按钮，可参看“Buttons”。

外观和行为
iOS 7系统按钮不包括bezel或者背景外观。一个系统按钮可以包括图标或者文本标题，可以指定tint color或者接受其父类的颜色。

注意：在iOS 7中，UIButtonTypeRoundedRect已经被重新定义为UIButtonTypeSystem。使用iOS 6中圆角矩形按钮的app会自动获得系统提供的按钮外观，当它链接至iOS 7时。

使用指南
使用系统按钮来发起/执行行动，当你为系统按钮提供文本标题时，请遵循以下方法：
1.标题字母要大写--每个字母都要大写，除了冠词、并列连词以及少于四个字母的介词。

2.避免创建过长的标题。过长的标题会被截短，不利于用户弄明白其中的意思。

你可以指定标题或者图片展示在系统按钮中，并且当用户点击按钮时，你可以“通知”按钮加亮，以及指定按钮高亮时标题和图片的外观。你也可以给按钮内容“着色”。


文本框(TextField)
文本框接受用户的单行输入。




学习关于定义文本框，以及自定义使之展示图片和按钮，可查看“TextField”。

外观和行为
文本框高度固定且带圆角。用户点按文本框，则出现键盘；当用户解除键盘，文本框即以app特有的方式处理输入。

使用指南
使用文本框获得用户少量的信息。在你决定使用文本框前，先考虑是否有其他控件能让用户的输入变得更简单，比如选择器或者列表。

1.自定义一个文本框，如果能帮助用户理解如何使用它。比如，你可以在文本框的右侧或左侧展示图片，或者添加系统提供的按钮，比如书签按钮。一般来说，你应该在文本框左侧指明其使用目的，在文本框右侧展示附加功能，比如书签。

2.适当情形下，在文本框右侧展示清除按钮。当这个元素展示时，点击此按钮来清除文本框中的内容，不用考虑其他任何你可能会显示在这里的图像。

3.如果可以帮助用户理解文本框的目的，可在文本框中显示提示，比如“名字”和“地址”。当文本框中没有其他文本时，会显示一个placeholder text（占位符文本）。

4.为你希望用户输入的文本类型指定一个适合的键盘类型。比如，你可能想方便用户输入一个URL、一个PIN或者一个电话号码。iOS提供了几种不同的键盘类型，旨在帮助不同类型的输入。了解更多可用的键盘类型，可参考“UIKeyboardType”文档。学习如何在app中管理键盘，可参考“iOS App Programming Guide”中“Managing the Keyboard”一节。

注意：你无法控制键盘的输入方式和布局，因为它们的属性取决于用户的语言设置。