IOS平台UI规范(三） - 游天堂X游聚社区

在iOS 里，UIKit 框架提供了很多你可以在程序中调用的界面元素。当你设计程序界面时，时刻谨记用户希望那些眼熟的视图和控件与内置程序中的行为一致。在你的程序里妥当地使用它们，这会对你有好处的。

状态栏、导航栏、tab 栏以及工具栏在iOS 中有各自的外观和行为。这些栏不是要求每个程序都必须有。但是，如果使用它，就要用对。这是因为用户在iOS 设备上对这些栏都很熟悉，包括上面展示的信息以及所具有的功能。

这类应用在运行中会始终隐藏状态栏，你要懂得这种设计的弊端。始终隐藏状态栏意味着用户必须退出你的程序才能看看是否需要给设备充电。

大多数iPad 程序不需要为了获得额外空间隐藏状态栏，因为状态栏的尺寸也太小了点。

在iPad 上，状态栏也表现得很低调，不会和你的程序争抢注意。由于程序界面上边缘的圆角和状态栏的小尺寸，使得状态栏看起来像是设备的边框。

当用户全屏观看媒体时，要把状态栏藏起来。如果你这么做的话，记得在用户轻击屏幕的时候再把状态来呈现出来。除非你有很必要的理由，最好别定义一个手势来召唤状态栏。用户发现不了，发现得了也记不住。合适的话，展示网络连接情况，这可以提醒用户远程网络连接正在工作。详情请参见“网络活动指示器”。

在iPone 上，定义状态栏的颜色。你可以选择灰色（默认色），透明黑或者半透明黑（alpha=0.5）要选择和程序风格一致的状态栏。例如，如果导航栏是不透明的，就不要用半透明的状态栏。

在iPhone 上，设定好状态栏的颜色改变是否用动画来展示。播放动画的话，老状态栏向上滑行直到从屏幕中消失，新的状态栏滑入位。

导航栏用于在层级结构的信息中导航，也可以用来管理屏幕信息欲知更多，详见“Navigation Controllers”和“UINavigationBar Class Reference.”

导航栏位于屏幕的顶部，上面紧邻状态栏。导航栏通常居中显示当前这一屏的标题。当在层级信息间穿梭时，用户可以触摸导航栏左边的返回按钮回到上一层。用户还可以使用导航栏上与当前内容相匹配的控件来管理屏幕内容。

所有在导航栏里的控件都放在凿出的坑里，这在iOS 里被称为边框样式（borderedstyle）。如果你把一个没边框的控件嵌在导航栏里，它会自动变成边框样式。

在iPhone 里，把屏幕从竖屏转成横屏模式会自动改变导航栏的高度（估计是想在横屏模式留出更多的空间给内容）。在iPad 上，导航栏的透明度和高度不会随旋转改变。

在iPhone 上，导航栏的是整屏通栏显示的。在iPad 上，导航栏可能会嵌在分栏中的某一栏里，不会横贯整屏。

使用当前视图的标题作为导航栏的标题。当用户浏览到新的层级时，应该做这样两件事：

确保导航栏上的文字容易懂。系统字体的可读性最强，合适的话你也可以自定义字体。

使用工具栏取代导航栏。如果你需要放置很多控件，或者不需要导航时，就用工具栏吧。

考虑在程序的最顶一级的工具栏放置分段控件（segment control）。如果能够帮助你扁平化信息结构，让用户更容易找到想要的东西，这样做就会很有用。如果你在导航栏上使用分段控件，要给子层次的导航栏返回按钮找好标题。详情请查看“分段控件” 。

避免用过多的控件填满导航栏，即使看起来好像有足够的空间。除了标题外，导航栏上最多放一个返回按钮，一个操作内容的控件。如果你要在导航栏上放分段控件，就不要放标题或其他控件了。

根据控件的意义选择系统提供的按钮。详情请查看“工具栏和导航栏中使用的标准按钮”。如果你决定定制自己的导航栏控件，请到“导航栏、工具栏和 tab 栏上用的图标”查看设计建议。

如果你想让导航栏与程序协调起来，可以定制一下导航栏的颜色。如果想让用户更关注栏下的内容，甚至可以把栏弄成半透明的。

如果你要这样定制导航栏，确保它和程序的其外部分外观协调起来。要是使用半透明的工具栏，就不要使用不透明的工具栏。而且，当设备在同一方向上时，不要让不同屏上的导航栏颜色和透明度变来变去的。

避免改变返回按钮的外观和行为。用户依赖标准的返回按钮帮助他们在层级信息中找到回家的路。

也许你觉得没有分段返回按钮展示的面包屑，用户就会迷路，那说明在你的程序里用户必须进入很深的层级才能获得信息。那么，还是把你的层级扁平化吧。

在iPhone 上，要考虑到由于设备方向变化导致的导航栏自动改变。确保你定制的导航栏图标适应横屏条件下的窄栏。不要把导航栏的高度写死。

工具栏上的控件等宽放置。控件会随着屏上内容的切换而改变，因为内容与用来操纵它的控件是匹配起来的。

在iPhone 上，横屏切换到竖屏时工具栏高度会自动变小。在iPad 上，工具栏的高度和透明度是恒定的。

在工具栏上要放那些用户能对当前内容所做的操作，不要那它来切换程序模式（Don’tuse a toolbar to switch among different modes in an application）。如果你要实现切换的效果，可以用去看“tab栏”。

在工具栏上放那些当前情景下用户最常用的功能。你也可以通过在工具栏上放置分段控件，来切换浏览数据的方式，或者程序模式（- -! 为何与上一段自相矛盾呢？原文：

You can also put a segmented control in a toolbar to give people access todifferent perspectives on your application’s data or to different applicationmodes）。欲知更多，详见“分段控件”。

每个工具栏上的控件至少要保持44×44 像素的面积。如果控件太密集，用户点击就很困难。

调用系统提供的控件要遵循使用规范。详情请查看“工具栏和导航栏中使用的标准按钮”。如果你决定定制自己的导航栏控件，请到“导航栏、工具栏和 tab 栏上用的图标”查看设计建议。

尽量避免在同一个工具栏上混合使用有边框和无边框的控件。使用任何一种都可以，但是不要混着用。

适当的时候，可以定制工具栏的颜色和透明度。如果你想让工具栏和整个程序的外观一致起来，可以去定制颜色。如果要鼓励用户浏览内容，可以把工具栏做成半透明的。

如果你用了半透明的工具栏，就不要用不透明的导航栏。设备方向不变时，不要改变在不同屏上使用不同颜色或透明度的工具栏。

Tab 栏位于屏幕的底部，并且始终可见。Tab 栏上展示图标和文字，同宽，黑底。当用户选中某个tab 时，这个tab 的背景色亮起，图片处于高光态。

在iPhone 上，tab 栏一次只能显示5 个以内的页签。如果程序有更多的tab，tab 栏可以展示前四个，第五个放一个“更多”，用列表的方式呈现其余的项目。在iPad 上，tab栏可以显示多于5 个tab。

不要使用tab 来执行对当前屏幕上元素的操作。如果你要达到这样的目的，可以选用工具栏“工具栏”。

一般而言，tab 栏是用来管理程序层面信息的。Tab 适合用于主程序界面，因为它可以很好地扁平信息层次，在同一时刻提供进入多个平级信息类的入口。

在iPad 上，你可能会在分栏或浮出层里下使用tab 栏，用于切换或过滤内容。但是，在浮出层或分栏底部放置分段控件会更好，因为在视觉上分段控件长的更协调。更多信息请详见“分段控件”

考虑在tab 上打红色小创可贴，柔和地沟通信息。你可以在tab 上打上小创可贴，用以显示那个tab 下的视图或模式有新信息。

调用系统提供的tab 图标要遵循使用规范。详情请查看“工具栏和导航栏中使用的标准按钮”。如果你决定定制自己的导航栏控件，请到“导航栏、工具栏和 tab 栏上用的图标”查看设计建议。

iOS 提供了一些用于定制信息展示方式的视图模板。每一种视图方式都有独特的属性和行为方式，使得它非常适于展示某一类型的信息。

浮出层会悬浮在主屏幕的上面。它还有一个箭头，指向触发它的控件或区域。浮出层上可以展示很多物体和视图，例如：

表格、图片、地图、文本、web 或者定制的视图导航栏、工具栏或tab 栏程序展示的内容相关的控件或物体。

在竖屏模式下，展示原本横屏模式下的左侧分栏。这样做时，要找一个合适的按钮去召唤它，给按钮合适的名字，把按钮放在屏幕顶部的导航栏或者工具栏上。

不要提供关闭浮出层的按钮。当浮出层没有继续存在的必要时，就应该自动消失。那么，到哪里才能判断浮出层还有没有利用价值呢？只要参考以下情况：

如果浮出层只是提供了一些对主界面有影响的选项或物品，那么，选择一做完，它就应该消失。这种行为与电脑上的“菜单”非常相似。记住，这种行为方式也适用于只显示了操作列表的浮出层：用户一点击列表中的某个按钮，浮出层就关闭。

有时，浮出层在用户做出选择后，也不一定要消失。用户可能想要多选、或者调整当前选择的属性。

包含菜单或inspector（检视窗口？）应该在用户点击浮出层以外的区域（包括召唤它的按钮）时关闭。在提供餐单的浮出层中，这种动作意味着用户放弃选择，所以不要影响主界面。在展示动作列表的窗口里，这个动作意味着“取消”。

如果要在浮出层上执行任务，要展示能完结或取消该任务并同时关闭浮出层的按钮。一般而言，用于执行编辑任务的浮出层上会有“完成”和“取消”。这些按钮提醒用户当前是一个编辑环境，可以选择保留或放弃输入的信息。当用户点击任何一个按钮时，浮出层都应关闭。

如何合理的话，你也可以在用户点击其他区域时不关闭浮出层。若果用户完成的这个任务很重要，这会是个好主意。否则，你应该在用户点击浮层外区域时保存用户输入的信息，就像用户点完成后你会做的那样。

一般而言，在用户点击浮层外区域时保存用户的工作。因为浮层没有明显的解散令，用户可能是不小心碰到了。除非用户点了取消，你才能舍弃他们的工作。

让浮出层的箭头尽量指向唤醒它的元素。这帮助人们记住浮出层是从哪儿冒出来的，与什么任务有关。

确保用户不用看主界面上被遮住的信息就能完成浮出层里的任务。浮出层会遮住它后面的内容，而且浮出层不能被拖到其他地方去。

确保同一时刻屏幕上只有一个浮出层。不应该同时展示多个浮出层（或者定制的看起来或行为像是浮出层的东西）。不要同时展示级联的或层叠的浮出层，不要一层套一层。不要在浮出层上面一层展示模态视图。除非是警告框，否则浮出层上面不要再展示东西。

可以的话，允许咏絮关掉浮出层，然后点一下就打开另一个浮出层。这在基本不同的工具栏按钮分别激活不同的浮出层时尤其有效，因为它不需要用户做过多的操作。

浮出层避免做得太大。太大的浮出层看起来像是把整个屏幕盖住了。它只要和它包含的内容一样大就好，并且指向激活它的地方。

最佳的浮出层宽度应该大于320 点，小于600 点。高度没有限制，所以你可以用它展示很长的列表。一般而言，含有任务或操作列表的浮出层最好直接全展示出来，不要让用户翻页。注意，系统可能会把高度和宽度调整到适应屏幕的大小。

在浮出层里，建议使用标准控件和视图。一般而言使用标准控件和视图的浮出层看起来会很棒，也容易理解。

使用定制背景色或纹理时要留意。确保标准界面元素在你定制的背景上看起来很棒，容易阅读。

合适的话，在展示浮出层时可以动态改变大小。你也许想在展示精简信息和扩展信息时改变浮出层的尺寸。真要改的话，可以用动画。这会非常合适，因为它可以避免让用户觉得好像是出现了一个新的浮出层，把旧的顶掉了。

你可以在分栏视图的左侧展示持久的信息，而在右侧展示子级细节信息。在这种设计模式里，用户在左侧选择项目，右侧展示与此项目相关的信息。

一般而言，一个在横屏下使用分栏视图的程序在设备转成竖屏后，就把左侧分栏的内容移到浮出层里。但你也可以不遵从此模式。如果在你的程序里合理的话，可以始终采用分两栏展示内容的方式。

避免右侧分栏比左边窄。虽然分栏的宽度随你定，但右侧分栏的宽度少于320 点的话看起来就不太好。

避免两个栏里都有导航栏。都有分栏的话就会让用户很难分辨两栏间的主次从属关系。

一般而言，左侧分栏的选中态要始终展示。这帮助用户理解左侧分栏项目与右侧内容间的关系。这很重要，因为右侧分栏的内容始终在变，但总要保持与左侧分栏选中项目的关系。

表格视图在一行行格子里展示信息，可以划分为块或进行归组。用户可以拖动内容，以显示更多行。用户可以点击选中一项，然后用控件增加或删除行，选中多拍，查看某一行的更多信息或者展开另一个表示视图。当用户选中某项目时，表格会短暂地高亮。

如果选中某项导致开始浏览新一屏内容，那么在新一屏滑入位前这一行就会高亮。当用户再回到原来那一屏的时候，原来被选中那一行会再次高光，提醒用户刚才选过什么。

朴素型（Plain）表格从屏幕一边开始展示表格，一直到另一边结束。一行里可以有多个内容段，右侧可选择展示一列半透明编号栏。每行开头可以有眉标，尾部可以有角标。

分组型（grouped）表格包含至少一组列表。每一组总是包含至少一项。每一组起始于眉标文字，收尾于脚标文字（A group can be preceded by header text and followed by footer text.这一句真不好翻译啊）。默认情况下，分组被放置在蓝色背景上，组内的背景是白色的。分组型表格没有编号。

iOS 提供了一些表格元素，用于拓展表格的功能。除非特别标注，这些元素仅适用于表格视图。

iOS 3 及以后的版本提供了4 种表格视图样式，为朴素型和分组型表格提供了最常见的表格样式。每一种样式最适合的表达内容有所不同。

默认型。默认型的单元格样式包括默认左对齐的标题，每一行最左边还有可选的图片。

在默认样式的单元格里，文本的外观暗示它代表项目的名称或标题，左对齐也使列表容易浏览。这使得默认样式很适合展示一列不需要辅助信息就能加以辨别的项目。

副标题型。默认型的单元格样式包括默认左对齐的标题，每一行最左边还有可选的图片。

在副标题型里，字符的显著性暗示它是项目的名称或标题，而副标题外观暗示它包含与主标题相关的辅助信息，左对齐也使列表容易浏览。这种样式适合项目看起来差不多的情况，用户可以利用额外的信息来帮助区分项目。

在这种单元格里，字符的外观暗示它是项目的名称或标题，而副标题的外观暗示它包含与主标题相关的重要信息左对齐和字体使列表容易浏览，右对齐的副标题将用户的注意吸引到它提供的相关信息上。这种布局尤其适合展示项目当前的状态，可能是该项目对应的子列表中被选中的那一项。

Value2.这个样式展示右对齐的蓝色子标题，右边紧邻左对齐的黑色主标题。图片不适用本样式。

在Value2 单元格中，右对齐、受限的宽度以及字体暗示这是标题，但左对齐的内容更加重要。

在这种布局下，每一行两部分内容的相接点位置相同。这在两列内容间创建了整齐的一列空隙，用户阅读右侧的主内容会更加轻松。

当呈现用户点击表格中某一项后出现的一列选项时，任何一种样式都适用。当呈现用户按下按钮或其他不在表格中的元素后出现的列表时，适用朴素型。

展示层级信息。朴素型样式尤其适合展示层级信息。列表中的每一项都是通往各种子信息的入口。用户通过在一系列列表中的选择来浏览层级信息。这个图标暗示用户点击该项后还会有子列表。

呈现概念上可归组的信息。两种表格样式都允许在各段的分割处添加段眉和段脚，以示分组。分组性表格的圆角可以很清晰地分割各组信息，即使在快速滚动时效果也很好。

展示有编号栏的信息。朴素型样式支持编号，可以让用户快速找到需要的信息。编号通常是贴在屏幕右边缘的一栏字符，通常是按字母表排序的字母。用户触摸（或拖拽）编号，展示相关的区域。

如果你要用编号栏，避免在屏幕右侧边缘展示信息（比如这种图标），因为会与编号栏冲突。

在用户选择列表项的时候提供反馈。用户希望在点击列表项的时候它能高光一下。点击后用户期望响应的动作会立即执行：出现一个屏新东西或者项目被勾选。

有时，即使与被选中项目相关的辅助细节或控件已经在同一屏出现了，被选中项还处于高光态。但是，我们不鼓励这样做。因为一列项目，加上选中项，加上相关的细节或控件，会乱成一锅粥。

用动画展示用户对列表项的改变。这可以提供反馈，增强用户直接控制的感觉。在“设置”中，关闭“自动调整时间”后，列表组会慢慢展开，展示设置“时间和日期”的区域。

如果表格内容很复杂，避免等到所有信息都载入后再展示。应该立刻展示文本，然后等复杂的信息完备后再展示它们。这种技术可以立刻给用户一些有用的信息，增加程序的反馈性。

考虑在等待载入信息时展示原有信息。如果你的程序展示的信息不太常变，这种技术可以让用户立刻看到一些有用的信息。如果信息经常变动，那就算了吧。在决定这样做之前，调查一下信息更新的频率以及很依赖新信息的用户所占的比重。

如果数据很复杂或载入很慢，要提供信号，暗示处理进行中。如果表格包含的信息很复杂，可能无法立刻提供有用的信息。这种情况下，不要只展示空格子。因为这会暗示程序挂了。你应该在屏幕中心放一个活动指示器，配上“载入中”这样的字符。这会给用户提供反馈，让他们知道程序还在继续努力。

朴素型表格的高度不能为适应内容而变化。分组型表格的行高是可以变得，但是在朴素型表格里就看起来很乱。

Value1 和Value2 的表格很适用于分组型。虽然几种表格样式你可以随便用，但value1和value2 与分组型表格最搭配。例如，“设置”用了value1，iPhone 版Contacts 用了value2。

尽量保持标题简洁，避免被截断。单词和短语被截断后很难阅读和理解。在各种表格样式中，文本截断都是自动的。但这可能因单元格样式和截断位置的不同而引起各种问题。

在副标题型样式中，短的文本标签也是最好。如果截断不可避免，尽量把重要的词放在前面。如果副标题的文字被截断了，用户可能不会太介意，因为这里的信息是辅助主标题的。

在Value1 样式中，自动截断很难避免。因为要在同一行展示两节信息。但截断也是有必要的，否则就没办法在两节信息间留下分隔空隙了。

在Value2 样式中，截断的字段会破坏两节文字间整齐的空隙。当行与行之间的空隙不一致时，用户会很难浏览右侧的细节信息。

你需要系统地检查一遍文字是否能被栏充分地包起来。竖屏模式和横屏模式都要检查，因为表格宽度也会有影响。

不要在一个方向上是包好的，而在另一个方向上不是不论采用什么表格样式，自适应的行高都会影响表格的整体展示效果。

文本视图是一个高度任意的圆角矩形。如果内容过多，超过了便捷显示范围，文本视图会提供拖动功能。

如果文本视图支持用户编辑，当用户在矩形内点击一下后，键盘就会出现。键盘的布局和输入方式由用户的语言设置决定。当用户触摸标有“.?123”的按键时，键盘会变成用于输入数字和标点符号的类型。

你可以对文字的字体、颜色和对齐方式进行设置，但必须要应用到整块文字。也就是说，不能只设置一部分文字的字体。默认的字体是系统字体，默认的颜色是黑色，因为这样的可读性最高。默认的对齐方式是左对齐。

如果你必须自定义各种颜色和字体，可以使用web 视图取代文字视图，用html 定义文字的样式。

你也可以根据需要用户输入的内容类型定义不同的键盘样式。欲知更多，详见“文本框Text Field”（p109）。

除了展示网页信息外，web 视图还会对网页内容进行一些自动化处理，比如将电话号码自动显示为电话超链接。

避免使用web 视图创建一个外观和行为与迷你网页浏览器相似的程序。用户希望使用iOS 上的Safari 来浏览网页内容，所以没必要在你的程序里做重复工作。

这三种视图都是当需要获得用户注意、或需要展示额外的信息和功能时临时出现的。当任意一种视图出现时，用户都不能再对主界面进行操作了。

警告框浮现在程序中央，覆盖在主程序之上。警告框的外观强调了这样一个事实，它的到来是由于程序或设备的状态发生了重要变动，并不一定是由用户最近的操作导致。用户必须刻意地关掉警告框才能继续进行操作。

警告框通常至少有一个按钮，用户点击后即可关闭窗口。警告框上也总会有标题，并展示额外的辅助信息。警告框的背景色是系统定义的，无法定制。

由于警告框不经常出现，所以一旦出现用户就会谨慎对待。切记限制警告框的数量，确保每一次展示的都是关键、有用的信息。

作为替代，考虑使用“进度指示器”或者“活动指示器”向用户提供与进度相关的反馈。

为了要求用户再次确认刚才触发的操作，即使是删除联系人等有潜在风险的操作，也只能使用操作列表（action sheet）不要提示那些用户无能为力的错误。

虽然有必要使用警告框对用户无法弥补的错误进行提示，但最高把这些消息嵌入到界面里。例如，与其每次服务中断时都提示用户一下，不如在最后一次链接成功时提醒用户。

你可以自由定制警告框的标题和内容，按钮的数量，按钮上的文案。但警告框宽度、背景皮肤以及文字的对齐方式不能更改。

句子大写样式（Sentence-style captitalization）：第一个字母大写，其他字母小写，除非是特定的名词或形容词。

警告文案要简洁地描述当前情景、告知用户他们可以做什么。理想条件下，你的文案要能让用户明白为什么会出现警告，并知道按哪一个按钮是合适的。

可以的话，使用句子片段。一个简短的，有信息的陈述要比一个完整的句子更容易理解。

表述负面影响时不要扭扭捏捏。用户知道警告框会告诉他们出问题了，提醒危险情景。

尽可能避免使用“你”“你的”“我”“我的”。有时，直接定位用户会带来误会，甚至可以被理解为是一种侮辱。

如果标题包含一个问句，那就使用句子大写样式，以问号结尾。一般而言，如果能避免附加辅助信息，就使用问句作为标题吧。

如果标题包含两个以上的句子，使用句子大写样式，并使用合适的标点结尾。通常是不应该用两个句子做标题的，但如果这样可以省掉辅助句子，也是可以考虑的。

如果要提供辅助信息，就写一个简短的完整句子。使用句子大写样式，并使用合适的标点结尾。

避免消息内容过长。可能的话，保持消息足够的短，一两行足以。如果消息过长的话，就需要滚动翻页，这可不是什么好体验。

避免解释“按某个键后有什么效果”。比如“按‘查看’可以浏览更多信息”。理想状态下，清晰的警告文案和富有逻辑的按钮标签足以给人们足够的信息明白当前的情况和合适的选择。然而，如果你觉得必须提供细致至极的解释，最好遵循这些原则：

要用“按”，而非“触摸”“点击”或“选择”，来描叙选择某个键，不要用引号把按钮标题框起来，但要保证它是首字母大写的。

一定要在两种设备方向上都检测一下警告框。因为横屏模式下，警告框的高会偏小，会和竖屏模式下略有不同。建议你优化一下警告框，以便在两种方向上看起来都很棒。

尽量采用有两个按钮的警告框。两键警告框通常是最有用的，因为方便用户在两种选择间做决策。只有一个按键的警告框不是好警告框，因为这样对于用户没什么意义，不能让用户掌控情景。包含多于三个选项的警告框太过复杂，因尽量避免。如果需要向用户展示多多于两个选择，应该考虑使用操作列表。

认真选择警告框上按钮的颜色。警告框的颜色或深或浅。在有两个按钮的警告框上，左边的按钮总是设色的，右边的总是浅色的。在一个按钮的警告框上，按钮总是浅色的。

如果双按钮警告框是用于启动某个用户期待的功能，那么取消功能应该放在左侧，用深色按钮表示。

给警告框的按钮赋以简短而富有逻辑的标题。最好的标题包含一到两个单词，与警告框所处的环境相适应。以下指南可以作为准备按钮文案时的参考。

优先考虑动词或动词短语，比如“取消”“允许”“恢复”和“忽略”等于警告框直接相关的词汇如果没有更合适的词，那么在表达“同意”时优先考虑“OK”。不要用“是（YES）”“否（NO）”

iPad 上的操作列表与iPhone 上的有些不同。iPhone 上的操作表总是从屏幕底部出现，悬浮在程序上方。操作列表的两端与屏幕的两条边相接，将其与程序以及最近的操作建立紧密联系。

在iPad 上，操作列表总是在浮出层中显示，从不与屏幕同宽。操作列表可以引发浮出层出现，也可以出现在一个已有的浮出层里。这两种情况下，在用户的操作以及操作列表的出现间都有强烈的视觉联系。

操作列表始终包括至少两个按钮，让用户选择怎样完成任务。当用户按下某个键后，操作列表消失。操作列表没有标题或者解释性的文字，因为它是在用户的某个操作后立即出现的（这足以说明它的身份）。

提供多种完成任务的方式供用户选择。操作列表允许用户提供与当前情景相符的选择，而不用把这些选择放在一个固定的地方。

在完成有潜在危险的任务前获得确认。操作列表的出现提醒用户接下来将面临的危险。这种提醒方式尤为重要，因为用户很可能不小心就触碰到哪里。

在iPhone 上，将操作列表的背景与导航栏和工具栏协调起来。如果你的程序使用黑色的导航栏和工具栏，那就使用半透明黑色背景。如果你的程序使用默认蓝色的导航栏和工具栏，那就使用默认蓝色背景。

在iPhone 上，提供取消按钮。这种用户能够轻易且安全地离开任务。把取消按钮放在最下面，鼓励用户在做出选择前通读操作列表。默认情况下，取消按钮的颜色与操作列表的背景色一致。

用没有动画的方式向用户在浮出层外触发的任务提供选择。没有动画的话，操作列表和浮出层同时出现。用这种方式展现操作列表的话，浮出层的箭头应指向用户触发任务的控件或区域。

不要放取消按钮，因为用户可以触碰浮出层外的区域来关闭操作列表，不用选择任何选项。

用有动画的方式向用户在浮出层外触发的任务提供选择。有动画时，操作列表从已有的浮出层里滑出来。

有动画的操作列表应该包含取消按钮，应为用户需要在不关闭浮出层的前提下就关掉操作列表。

无论哪种设备，有潜在危险的按钮要用红色背景。在操作列表顶端展示一个红色按钮，因为离顶部越近越能吸引注意。在iPhone 上，破坏性的按钮离操作列表底部越远，用户就越不可能在找Home 键的时候误按到它。

这对于用户来说十分讨厌。因为他们必须花费时间仔细考虑没有选择。而且，翻滚列表又不误按某个按钮是件难事。

模态视图会把整个程序屏幕折起来，让用户知觉到一个独立、临时的状态，供他们完成某些任务。

合适的话，模式视图可以拿来呈现文字、以及用于执行某个任务的控件。在模态视图上通常会有完成任务关闭对话框的按钮，或者有个放弃任何改动的“取消”按钮。

当需要在主程序上给用户提供完成某个子任务的独立空间时，可以考虑使用模态视图。

有些子任务需要很多步骤，而且平时没必要把这些控件一直放在屏幕上，这种情况最适合采用模态视图。

在iPad 上，选择与当前任务以及程序的视觉样式相匹配的模态视图风格。你可以选用：

在模态的封闭环境中完成的任务。例如：iPod 就用这种形式来完成创建Genius 播放列表的子任务。

页表（page sheet）。固定宽度768 像素，与当前屏幕同高。竖屏模式下，这种模态也能覆盖整个屏幕。横屏模式下，页表没覆盖的屏幕区域蒙上半透明的黑色层，避免用户去操作它。例如，Mail 使用这种方式来展示邮件编辑任务。

形式表（form sheet）。固定尺寸540×620 像素，相对屏幕居中对齐。其他没有覆盖的屏幕区域蒙上半透明的黑色层，避免用户去点击。当横屏模式下键盘可见时，形式表向上移动到状态栏下面。这有利于从用户获得信息。

相机行事（current context）。和父级视图的尺寸一致。这种样式很适合在分栏视图、浮出层等非全屏视图里面展示模态视图。

在iPad 上，不要在浮出层上面再蒙一层模态视图。不应该在浮出层上再放任何东西，但警告框是个例外。有时，你需要在用户对浮出层有所操作后展示浮出层。那就先把浮出层关掉，再展示模态视图。

在iPhone 上，让浮出层的外观与主程序一致起来。例如，浮出层上经常会有导航来，上面有用于完成或取消任务的按钮。这种情况下，导航栏的皮肤应该和主程序的导航栏一致起来。

在两种设备上，都应尽可能的在任务界面上展示它的标题。你也可以在视图的其他区域呈现一些文字，完整地介绍当前的任务，提供一些指南。例如，iPhone 版Message 在用户想要撰写短信时会展现模态视图。这个视图有与主程序相同的导航栏皮肤，标题上写的是“新信息”。

对于两种设备，选择合适的转场效果来展示模态视图。使用与主程序相符的样式，加强用户对“出现了模态视图，场景发生了临时改变”的知觉。可以从如下几种样式进行选择。

翻转：当前的主程序界面从右向左翻转，展现出模态视图。模态视图看起来像是主任务界面的背面。当遣散模态视图时，它水平地总左向右翻转，展现出原有的主程序，卷边：卷边看来与iPhone 上的Maps 页面卷曲效果相仿。当前页面的一角卷曲，展示其下方的模态视图。当用户离开模态视图时，卷曲的部分舒展开来，恢复原状。当你要展示的模态视图不是很大，也不需要太多交互时，可以考虑这种方式。比如用于设置属性选项。

如果你决定改变程序中模态视图的转场效果，避免太过花哨。用户会觉察到其中的差异，并任务这可能代表点什么。因此，最好使用用户容易发现且记住的模式，要逻辑清晰且具有一致性。

当任务在进行中时，活动指示器出现。任务完成后立即消失。用户不与活动指示器交互。

日期和时间拾取器最多可以展示四个独立的轮子，每一个展示一类值，比如月、小时。

用户拖拉每个轮子，直到透明的选择栏下出现想要的值。每个轮子上最终的值组成了拾

使用日期和时间拾取器让用户对包含多段内容的时间进行设置，比如日、月、年。日期和时间拾取器很容易使用，因为每一部分的取值范围都很小，用户也知道会出现什么。

合理的话，改变分钟轮的步长。默认情况下，分钟轮展示60 个值（0-59）。如果用户对时间精度要求不高，可以把分钟轮的步长设置的更大些，最高可达60。例如，对时间精度要求是“刻”，那就展示0，15，30，45. 在iPad 上，只在浮出层里展示日期和时间拾取器。iPad 不适合全屏展示日期和时间拾

用户按详情展示按钮，展示与某物体相关的额外信息和功能。这些额外细节或功能会展示在一个独立的视图里。

当详情展示按钮出现在表格视图的“行”里时，按在行的其他位置上不会激活细节展示按钮，这只会选中行或者触发程序自定义的行为。

通常，详情展示按钮会用在表格视图里，用以引导用户查看更多与某项目相关的细节或功能。当然，你也可以在其他视图模式使用它。

iOS 有两种信息按钮：深色i 浅色背景和浅色i 深色背景。用户按到它时，信息按钮会自动发光闪一下，同时立刻有所响应。比如翻转屏幕展示背面。

使用信息按钮可以展示配置详情或者选项。你可以使用与界面风格最相符的信息按钮样式。

在iPhone 上，使用信息按钮翻转屏幕，展示更多信息。通常，屏幕的背后展示那些不需要呈现在主界面上的配置选项。

在iPad 上，避免使用信息按钮翻转整个屏幕。相反，你可以使用信息按钮向人们展示他们可以进入包含更多信息的扩展视图。

你可以使用标签命名或描述界面的某一部分或者提供短消息给用户。标签最好用来展示少量文本。

当有数据传输时，网络活动指示器出现在状态栏上。当网络活动停止后它就消失。用户不与网络活动指示器交互。

当你的程序调用网络数据的时间稍长时，就应该展示网络活动指示器向用户反馈。如果数据传输很快就完成，就不用展示它了，因为很可能用户还没发现它就消失了。

每一页视图在页码指示器里都用一个圆点展示。圆点的顺序与视图的顺序一致。发光的圆点代表当前打开的视图。用户可以按下发光点左右的点，浏览前一页或后一页。

点的间距不能压缩。竖屏视图模式下总共可以容纳20 个点。如果你想放置更多的点，多余的点会被裁切掉。

当需要展示一系列同级别的视图时可以使用页码指示器。如果要展示的视图间存在层级关系，就不要用它了，因为页码指示器不能帮助用户记录步骤和路径。

将页码指示器水平居中放置在屏幕底部。这样它既可以总摆在外面，又不会碍眼。不要展示过多的点。

在iPad 上，考虑在同一屏上展示所有内容。iPad 的大屏幕不适于展示平级的视图，所以对页码指示器的依赖也小一些。

日期和时间拾取器起源于拾取器。当使用日期和时间拾取器的时候，用户拨动转盘，直到想要的值出现。在iPhone 上拾取器的尺寸与键盘一致。

当需要在一组值中作出选择时，拾取器用起来更简单。当用户对整组值的内容都有所了解时，拾取器会更加适合。这是因为在任意时刻都有很多值是隐藏起来的。如果用户对可选的值并不了解，拾取器就不适合了。

如果需要展示非常大量的值，还是用表格吧，别用拾取器。表格的高度更大，滚动翻页也会更方便。

任务或过程进行中时。进度指示器的槽从左向右被逐渐填充。在任何时候，已填充和未填充部分间的比例都能告知用户任务或过程多久能完成。用户不与进度指示器交互。

对可以预测总长度的任务或过程应当提供进度指示器，向用户反馈当前进度，尤其是当用户急切地想知道任务大概还要用多少时间。当进度指示器出现时，用户知道任务还在进行中，这样就能判断是继续等待还是终止进程。

你可以定义圆角矩形按钮内展示的标题或图片，也可以定义被按下后如何高亮反馈、标题的外观如何改变。

当搜索栏出现的时候，范围栏紧挨着出现在它下面，除非你使用的是搜索显示控制器（search display controler）。当使用搜索显示控制器的时候，横屏视图模式下范围栏会出现搜索框的右侧。

指南当对用户想搜索的范围有明确或典型的分类时，使用范围栏会很有帮助。例如：用户常常想只在邮件中的某一类中进行搜索。

搜索栏看起来像圆角的文本框。默认情况下，搜索按钮放在左侧。当用户点击搜索栏，键盘自动出现；当用户输入完毕后，输入的文本就按系统定义的那样处理。

占位符文本。可以用它来描述控件的作用（例如“搜索”）或者提醒用户是在哪里搜索（例如“Youtube”“Google”）。

书签按钮。这个按钮可以为用户提供便捷的信息输入方式。例如，在Maps 搜索模式下，用户可以用书签按钮访问标记的地点、最近的搜索和联系人。

只有当文本框里不存在用户输入的或占位符以外的文字时，书签按钮才会出现。因为有了用户输入的文字后，这个位置会放一个清空按钮。

当搜索栏任何非占位符的文字时，清空按钮就会出现。如果没有用户提供的或者非占位符，这个按钮就隐藏起来。因为没必要清空搜索栏的必要。

描述性标题。它会出现在搜索上上面。例如，它可以是一小段用于提供指引或介绍上下文的短语。

分段控件的长度由分段的数量决定，高度是固定的。每一段的宽度依比例而定，起决于分段的总数。当用户单击分段，可使其变成选中态。

确保每一个选项都可以轻松触摸。为了将每一段尺寸维持在44×44 像素以上，你需要限制段的数目。在iPhone 上，分段控件至多可以分成5 段。

尽可能让每一段的标题一致。因为所有段的宽度都是相同的，如果段上的文字标题长度、风格等不一致，会很难看。

避免同时使用文字和图标。分段控件上面可以放文字，也可以放图标，但只能选用一种。

滚动条包含滑轨和滑块，以及可选的图片，用于传达左右两端各代表什么。当用户拖拽滑块，值会实时地连续变化。

通常情况下，这些图片表示了最大值和最小值的意思。一个用来控制字体尺寸的滚动条可以在左侧放一个很小的字，在右侧放一个很大的字

在表格视图中展示两种简单、互斥的选项，比如是/否，开/关。所选的两个值要让用户可以预测，这样用户能知道切换后的效果。

你可以使用切换控件改变其他控件的状态。根据用户的选择，新的表单项可能会出现或消失，激活或失活。

文本框有固定的高度。用户按一下文本框后，会出现键盘。当用户按下回车键，文本框会按照程序预设的方式处理输入的字符。

使用文本框来从用户获得少量信息。在用户决定使用文本框前，想想是否有别的控件可以让输入变得简单，比如拾取器或者列表。

可以自定义文本框，帮助用户理解如何使用它。例如，你可以在文本框某一侧放上定制的图片，或者添加系统提供的按钮（比如书签按钮）。一般而言，可以把提示放在文本框左半部，把附加的功能放在右半部。

在文本框里放置提示语，帮助用户理解意图。比如“姓名”“地址”。如果没有其他的文字可放，就可以在这里放置提示语做占位符。

根据要输入的内容选择合适的键盘样式。键盘是主要的输入手段，随着用户的语言而变。例如，你也许想让输入URL、PIN 或电话号码变简单。iOS 提供几种不同的键盘，每一种都是为输入特定的内容而优化。

无论你在在做什么类型的程序，都应该熟悉一下使用系统提供的按钮和图片的准则，以便于：

iOs 提供了很多在工具栏和导航栏中使用的标准按钮。这些按钮适用于两种样式，每一种都有各自适合的用途：

l 有边框样式：例如，Phone Contacts 导航栏上的Add 按钮。这种样式对导航栏和工具栏都适合。

l 朴素样式：例如，Mail 工具栏上的Compose 按钮。这种样式只适合工具栏。事实上，如果你把导航栏上的按钮定义成有朴素型，它会自动变成导航栏。

所有系统提供的按钮，都是为了某种语意而设计，不要用作任何其他用途。千万不要不看说明文档，只凭图标的外观判断他的用途。为什么要这么强调呢？详见“界面元素要一致”

除了这些系统提供的按钮外，你还可以使用“编辑”“取消”“保存”“完成”“重做”“还原”来支持编辑或其他对内容的操作。

表格中列述的按钮既适合导航栏，也适合工具栏，但只有带边框的样式。如果你将其定义成不带边框的样式，它也会自动变回来。

卷页按钮为用户提供卷起页角查看更多信息的方式。例如，Maps 允许用户卷起右下角，查看控制地图的按钮。

不要使用卷页按钮切换整个屏幕。如果要切换屏幕，可以用信息按钮代替“信息按钮”。

确保页角不要完全卷上去，还要留一点在外面，以提醒用户这个只是暂态。如果卷上去的页面消失了，这就太像是全屏转场了，卷页的上下文就消失了。

就像其他标准按钮和图标那样，要确保按照说明文档来使用tab 栏图标。要根据图标的语义来用它，而非只看外表。这样，即使将来系统系统的图标升级了，也能保证意思不变。更多详情详见“界面元素要一致”

使用这些按钮时要保证语义正确。要根据图标的语义来用它，而非只看外表。更多详情详见“界面元素要一致”

虽然详情展示按钮经常使用在表格里，但也有很多其他地方可以用。更多信息请看“详情展开按钮”。iOS 中也有一些控件是只在表格中使用的。更多信息请看“表格视图”