3.2　对标准组件的建议

组件可以构成画面中的各块内容，这些块包括视图、控件、警示等。在画线框图时，你只需要找出合适的组件，将其安排到合适的画面中。当然，这么说就像写一本畅销小说，只是把合适的词语按合适的顺序摆放而已。对于杰出的应用软件，你需要大量的智慧来组织设计，但要这么做，你得确保自己熟悉要用到的这些模块。

应当优先选取操作系统提供的标准组件，而不是构建自己的组件来组织设计，这是规则。对于几乎所有需求，都有标准控件把工作可靠、可预见地实现。标准控件有用户熟悉的好处，用户理所当然会花多数时间到其他应用软件上。第14章将深入研究如何选择标准做法和定制做法。

要想对iOS平台提供的标准组件有基本了解，应当阅读《iOS人机界面指导原则》。本章开头就说过这句话，第2章也说过。你确实需要阅读这份资料。它会让你明白苹果公司关于这些组件如何使用的基本立场。但对于如何高效组织组件的进一步建议意见，要基于苹果公司和第三方的示例。这里是对每个单独组件的简介。

3.2.1　栏目

这些基本的屏幕栏目用于显示内容和控件。

·状态栏。关于状态栏，你唯一要决定的就是是否要隐藏它，还有在iPhone上，它该是怎样的风格。状态栏的不同状态主要影响应用软件身临其境的程度。越身临其境地处理，越能避免用户对所显示的内容分神。标准的浅色状态栏与界面是协调的。在不必埋头操作的应用软件（例如，通信或数据生成性应用软件）里，标准的浅色状态栏是最合适的。最不合适的地方则是媒体或娱乐性应用软件，你可能想隐藏状态栏，以免用户分神。但不要只是为了炫耀你做得多么花哨、多么身临其境，而隐藏状态栏。用户通常关心时间和其电池目前的容量。只有在身临其境方面比你想隐藏的状态栏信息更重要时，才这么做。如果不隐藏状态栏，则要记住在线框图和原型应用软件中各画面的顶部，容纳20点的高度；并考虑出现双倍高度的状态栏时，你画面该做什么（请参看4.7.8节的说明）。

·导航栏。导航栏在iPhone上横跨屏幕顶部，而在iPad上则为专门的视图。它高44点，而在iPhone的横向放置模式为32点。导航栏是人们在不同画面间切换的主要方式。它位于视图的顶部，被做成提醒用户在何处、如何回到上一级的提示。不要把导航栏与工具栏混为一谈。导航栏只显示回退按钮、标题，可能还有单个有边风格的按钮来管理内容（例如，添加按钮、编辑按钮、视图按钮等）。

·工具栏。工具栏在iPhone上横跨屏幕顶部，而在iPad上则为专门的视图。它包含控件。有44点高，而在iPhone的横向放置模式为32点。如果导航控制器是在画面间切换的主力，工具栏就对等地在各画面上选取命令。工具栏可以包含的控件数量有限，所以要谨慎选择这些控件。在iPhone上，最多可有5个44×44的按钮；iPad没有硬性限制，但你最好不要让工具栏显得混乱。与桌面计算机用户不同，iOS用户不会习惯操作一大堆控件。所以要考虑用单个按钮合并功能，通过采用浮动框、模态视图和动作单这些方法（参看第14章）。

·工具栏上的按钮有两种可选风格：常规的和有边的。有边风格可以强调某个物件是按钮，而无边就会让人糊涂。有文本标签的按钮就是需要额外强调的例子。另一个示例就是当没有按钮内容悬浮在同一工具栏时，这也正是导航栏中按钮总是有边化的原因，否则它就会被当作画面标题的一部分。《iOS人机界面指导原则》反对在同一工具栏内使用不同的按钮风格，但在iPad上，这种设计无关紧要。iWork应用软件在工具栏左侧放置有边按钮，右侧放置无边按钮。那很好，只要别混用这两种风格的按钮即可（图3.7给出了Keynote工具栏的示例）。

图3.7　Keynote在iPad和iPhone上有着相似的工具栏设置。为了使画面井井有条，有边按钮、无边按钮分开放置

·页签栏。页签栏有49点高，横跨整个屏幕，经常位于它切换的内容下面（页签栏的目的在本章3.1.3节已经详细说明）。对页签栏绘制线框图时，要记住它们比工具栏稍高一些，而且只能在iPhone上放置五个页签栏。曾经流行过定制的页签栏，可以通过将其突出于栏目顶部来增强某页签栏的效果。Instagram应用软件曾让这种设计名扬天下。但这种实践看起来已经落伍，已经不再出现在那个应用软件里。只是昙花一现而已。

3.2.2　内容视图

有一些基本的通用的视图来呈现内容和控件。

·浮动框。前面你了解了浮动框很棒的原因，所以这里有些诀窍来运用它们。对大部分浮动框而言，用户期望的是320点宽，那正是“iPhone在iPad里”的感觉。太宽的浮动框会让人感觉笨拙，像是从小三角条目耷拉下来一样，而表单可能更适合。要把浮动框做成需要的那样高，但当然不是太高。

·当在浮动框的不同画面间切换时，你不用操心（因为浮动框对于内容太高）会留下空白位置，或者（因为浮动框太短）需要滚动。这样的小缺陷比让用户每次到某处时，用到重调尺寸的动画要好。所以只要能在浮动框中找到适合所有画面的高度，并坚持用这个高度即可。

·分割视图。记住侧边栏总是320点宽，模仿iPhone屏幕的宽度，让你可以对侧边栏和iPhone画面采取近似的布局。一般来说，侧边栏在横向放置模式下总是可见的；在纵向放置模式下，它总是隐藏，需要从边上滑进。但要感谢官方Facebook应用软件，其提供的滑进侧边栏不管在哪种放置模式下，只要未被传唤，就总是隐藏。这种设计更多地关注于内容区，牺牲了快速访问。其代价就是，分割视图有些不太标准，因此难以实现和维护。在强调两种放置模式内容的重要性时，要权衡这一点。

·表格视图。表格视图是用来显示信息“到哪里”的组件，可编辑或不可编辑。表格视图可以出现在侧边栏、主内容区、浮动框、模态视图等各处。它们可用来切换到其他画面（采用箭头标记或展开细节按钮）、用来选取（通过检查标记）或编辑数据（简言之，通常采用取值风格）。“表格视图”这个名字有些误导：你可能以为表格会有多列，但iOS的表格视图只有一列（尽管每个单元格可以显示多位信息）。可以选择两种标准表格风格或四种标准单元格风格，每个风格都有个不好描述的名字，因此让这些风格难以直截了当。

·文本视图。标准文本视图很直观。文本视图在需要显示或用户需要输入大量文本时很适用。当然，“大量”是相对的。

·网页视图。要用网页视图有个充实的理由：为了从网站调入实际网页，来完成登录或在用户内容中点击某个链接的任务。以前你得用网页视图来显示丰富格式的文本（即文字有某种格式），因为标准文本视图只能显示无格式文本。但在iOS6中，可以将格式文本放入标签和文本视图中。（有些应用软件尝试将其大多数功能放入网页视图，实际运行一个包含在iOS应用软件内的网页应用软件。对于这种特别做法的建议，可参看第14章混合网页应用软件的注意事项。）

表格视图可用到下列风格的单元格。

·平白表格。该表格风格将内容一路放到视图的边界；有个示例，就是Mail应用软件中的消息清单。平白表格最适合显示单一、同质的条目列表，特别是列表很长时。这就是你看到它用于电子邮件消息、联系人、音轨、待办事项清单，或者其他单一能列很长条目集合的原因。但即使在这样的同质列表中，仍可以有子分类指示符，如字母表中的字母。在这些情况下，你可以使用节头（section header）。节头浮动于各行间，作为眼睛查找的分组标记，不可点击。如果分节后的列表还太长，则可以沿屏幕边界提供索引，以快速跳到选定的分组。如果没有很多数据，或者对于未按字母顺序将各节排列成熟悉的方式，索引会显得很傻或者很难看。

·分组表格。该表格风格在独立的叠层中保存内容，并采用圆形边角。iPhone上的Settings应用软件就是这样的例子。分组表格适合在屏幕上呈现异质的信息，这时各节的区分是至关重要的，或者当你提供的控件或标签不合适放到表格单元中时。想象一下，若Settings应用软件只有一个平白风格的表格来容纳所有设置，那么各类选项间就没有明确的分隔，也没有地方放置说明性标签，还有大量的节会包含人为标题，却只有一个条目。请参看表3.1对平白表格与分组表格的比较。

表3.1　平白表格视图与分组表格视图的比较

·默认单元格。默认单元格风格只是呈现一个文字标签，也可以是张图片。这种风格通常用于导航，提供的信息可帮助用户识别他们下一步要导航的地方。例如，在Music应用软件里识别音乐家，在Contacts应用软件里标识联系人等。设计者本可以用子标题风格来包含足量其他数据，但在这些地方他们明白，用户基本上总想导航到详细信息的全屏状态下。没有哪个单条信息有益于从细节屏幕升级到单元格，所以设计者让此单元格保持简洁，鼓励用户切换到细节屏幕。毕竟，触摸操作很容易，不费吹灰之力就可以切换，查看你所感兴趣的特定信息画面。

·子标题单元格。这种单元格风格在标题下包含了较小的灰色文字，从而对每个条目给出额外的细节信息。当你需要用户比较不同条目的关键信息，而无需切换到各自的细节屏幕时，这种单元格很有用。例如，Settings的Notifications画面中有个应用软件清单，采用子标题来指示各应用软件的通知类型。用户对常见疑问可以一眼给出答案：“哪个应用软件已经使能了通知机制，且使能的是哪类通知？”这个例子清楚地表明，此类信息如果能显示在单元格这一层上，可以节省用户的时间和减少麻烦。

·值1单元格。没错，这的确是此单元格风格的正式称呼。在Xcode的Interface Builder组件中，它又称作“右侧细节”（right detail），这个名字更有描述性。此风格结合一个标签和一个值，通常允许用户编辑此值。标签文字为粗体，左对齐，值为灰蓝色文字，右对齐。这种布局强调了标签文字，因为（至少是在从左到右的语言里），人们更容易比较左对齐的文字，依次巡视各标签的开头很容易。你还可以在值的所在区域提供开关或其他控件，而不是文本字符串。Settings应用软件有些地方用到了值1单元格，以满足用户查看不同选项名字的需要，以及找寻他们感兴趣选项的需要。而巡视值并没有多大的意义。

·值2单元格。又称作“左侧细节”（left detail），该风格结合了一个标签和一个可编辑的值。文本标签没有强调，因为采用小号字体，颜色也是淡色，而值则是深色粗体。在此布局中，容易识别、比较值，因为它们在单元中央是左对齐的。在值的信息比标签更需要识别时，这种单元格类型表现很出色。这也正是在iPhone的Contacts应用软件里用到它的原因。姓名、电话号码、地址、邮件地址和其他联系信息都不必查看标签即可识别出来，所以你可以轻易在画面里巡视这些值，找出所需的那个。（请参看图3.8，比较各单元格风格的区别。）

图3.8　从左到右依次为：默认风格、子标题风格、值1单元格风格、值2单元格风格。每个风格在列出信息时都有微妙的不同

·定制单元格。你可以在里放置几乎任何东西。所以如果需要与标准选择有少许不同（或很大不同），而你的理由又充分，则可以创建自己的风格。例如，我们来看Mail应用软件里的消息清单。每一列都提供了发信人的名字，且用的是粗体；标题行则用的是小字，常规效果；有一段灰色的消息预览文字；还有一个蓝色的时间指示标记。当你搜寻电子邮件查找特定消息时，这些信息都可能会有用。它们中的哪个都不能贸然地去掉。要实现这样的信息清单，使用标准风格的单元格就不能在浏览邮件消息时有这么好的效果（请参看图3.9中的一些定制表格单元格风格）。

图3.9　从左到右依次为：Mail、Podcasts、Tweetbot和Instapaper。定制表格单元格风格能够支持你构想的任意布局

3.2.3　警告

警告很容易就能惹恼用户。在台式机和网页上，开发者通过警告向用户灌输他们想说的话，不论用户是否乐意。iOS为了减少用户必须处理的警告数目，做了大量的努力，以便节省有错误发生时需要通知用户或要求用户立即输入的次数。因此，当警告出现时，通常是个很关紧的时刻。若它只是说些空洞、无关痛痒、含糊的话语，就是弱化（或者毒害）警告的意图，降低用户对这些警告信息的关注度。

在若干情形下适合采用警告：

·除非用户输入其账户信息，否则应用软件就无法进行。

·当后台进程遇到一个问题，如同步冲突时，需要用户立即做出决定。

在下列情形下采用警告会让人厌烦：

·操作正常完成。界面应当让结果显而易见，而不打扰用户。

·用户想交互的某件事情有问题存在，还在屏幕上。这时，事情本身应显示状态而不是显示警告。

·你想影响用户的行为（参看第10章）。

当新的告警出现在屏幕上时，观察其动画。它从无到淡入，面向用户在画面上浮动出来，然后跳回原位置。iOS设备上的几乎所有东西都关联着屏幕上的某个组件，为其提供情境和含义。警告就是那些背后发生的事情，正常进行时不需要用户操心，突然要求用户干预的少见情况。

3.2.4　动作单

动作单是iOS里另一个谦卑而英雄的角色，让软件用起来更加安静，更加惹人喜爱。动作单即对用户动作做出反映的一系列按钮。其影响是深远的。

在iPhone上，动作单总是从屏幕底部滑上来，除了动作按钮还会提供一个取消按钮。iPad上的动作单，可以做虚拟iPhone界面下浮动框的同样事情，也可以出现在自己单独的浮动框中。如果他们出现在自己的浮动框里，就不会有取消按钮；相反，触摸屏幕其他地方来取消该动作。

下面是使用动作单显得很酷的地方：

·隐藏了单个按钮背后的若干类似动作，直到需要时才显示出来，从而简化了界面。

·无需提供解释性文字，由于用处不大，让人感觉无足轻重，又强化了它总能出现的事实（若你不能通过按钮文字表达情势，则可以添加解释性文字）。

·很容易供用户打开、检查有效的选项。如果没有用户需要的选项，可以取消。

有个考虑特别周到的例子，就是只有一个动作按钮的动作单。在老式的界面里，特别重要的动作会伴以对话框，里面有冗长的解释性文字和按钮，供用户选择继续还是取消；而iOS提供了一个清楚标为确认的按钮。如果你想继续，则可以移动手指一寸距离，点击动作按钮；不想继续，则点其他地方。这种办法很得体。

3.2.5　标准控件

大多数控件都相当直观，并在《iOS人机界面指导原则》里有详细说明。下面是一些使用这些控件的技巧。

·活动指示器。它也就是人们熟知的未定进度指示器或spinny。iOS用这些指示器比进度条更常见。如果有些事情只花几秒时间，可以在某个位置放个指示器，与要做的工作相关联，而不用打扰用户，让其猜想还得花多少时间。活动指示器应当设法通过相关文字标签或屏幕位置指示它的含义，也可以两者兼备。

·日期与时间拾取器。此即人们熟知的时间轮。从十个选项中剔除九个，这是从用户获取输入的正确办法。即使几十年前的某天，也可以迅速而容易地调整到此日期。若屏幕上能看到多个域，则该控件有助于强调或者标识正在编辑的时间轮值。

·细节揭示按钮。一般情况下，需要深入查看某个条目，以在另一个画面上查阅详细内容时，你要触击右侧带有箭头标记的表格单元格。细节揭示按钮在你不清楚某条目含义的时候，就如同一个后备的“深入了解”点触目标。在两种情形下可能需要用到它。

·进入的条目不是表格单元格，因此并非明显可点击以获取更多信息。例如，iPhone上的Maps应用软件内从一个点冒出的气泡，或者Messages应用软件里的照片。

·表格单元格本身还有其他功能。在iPhone上的Phone应用软件中，点击常用联系人的单元格，能够启动对此人的呼叫，而点击其细节揭示按钮则会进入关于此联系人的详细信息画面。

·在第二种情况下，添加一个细节揭示按钮是最有意义的，因为两种选项均有可能，且醒目的蓝色按钮并不能拖累视觉设计的清晰度。另一个办法则是，将正常模式与编辑模式的两个功能割裂开。

·信息按钮。这个古老标志在桌面计算机上主要用来编辑细节内容，而在iOS上则用于显示“配置细节”。iOS上的iWork应用软件曾用过这个图标，以弹出风格检查浮动框，但随后被替换成更有表达意义的画笔图标。那时，这些工具的浮动框很像是“配置细节”，是通过扳手按钮调出来的。许多第三方应用软件都采用齿轮图标的配置画面，因为信息图标的含义太笼统了。

·标签。这种普通的短小文字字符串可以用来标记东西。通常，在分组表格视图里，它最能匹配默认标签的风格和布局。

·要命名某样东西，在其上直接标记一个粗体标签（10~12个光学点），保持文字为一行。

·要对某样东西提供额外说明性文字，可以在其下面直接添加常规字形的标签（10~12个光学点）。

·要提供不特定于某组件的独立式说明文字，可以在其与最近控件之间放置一些空白（20~24个光学点）。

·无需对所有东西都加上标签。一组显然与颜色有关的控件不必冠以“颜色”。屏幕上只有一个标题为“地址”的表格，也没必要加上“地址”标签。请确保只是在其表明的内容不容易被理解时，才会加上标签。

·网络活动指示器。此活动指示器位于状态栏上，告知用户网络通信的状况。用户查看这里就可以知道是否正用到其网络连接，尤其是他们希望屏幕上有些信息及时得到更新。此活动指示器是个让用户愿意等待的微妙提示，因为其更新是即时的。

·页指示器。此为另一个平静而又重要的界面组件。它在主页面上出现，这个简单的点状系列很快被多数用户熟知，反映出还有其他内容可以通过往边上滑动来得到。它让你有机会展示许多屏幕大小的大块信息，而无法要求逐页地导航（请参看第12章关于分页的更多褒扬之辞）。

·拾取器。这是时间轮的通用化变形，在网页的弹出菜单上使用，但很少在本地应用软件上使用。大多数时候，你可以用它，但可以以表格视图取代，在表格视图里滚动与旋动轮子的交互几乎完全相同。拾取器的主要好处在于，它让你能留在情境里，这也正是它能在网页上工作良好的原因。（在网页上操作时，你需要留在情境里，从而看到弹出菜单周围的关联信息，所以不要导航到某表格视图的某个专门画面上。也不要将任意高度的表格视图插入网页里，而此网页并非为其设计。）另一个好处是，它比表格稍轻量些，因为用户只是滚动来更新此值，没必要触击某个条目来选中之。

·进度视图。它等价于桌面计算机上常用的老式进度条。在活动指示器的说明里曾提到过，多数时候你不需要用到进度视图。首先，大部分操作不会花费很长时间，所以没必要展示用户要用多长时间。其次，人们只是在别无选择，只能等待进度结束，完成某件事时，才去看进度条。下面是采用进度视图的适当情况：

·正等待文档从iCloud上下载下来，从而可以操作此文档。

·正等待导出iMovie项目，从而可以将其发送给别人。

·正等待发送有大附件的电子邮件，以确保其成功发送。

·如果这个过程只花费不到几秒，或者不会影响用户做完事情，进度视图最好用转动的活动指示器来代替。

·圆角按钮。这是一种通用、标准风格的按钮，可以放置到内容区。当在内容区用到按钮时，请确保其可以执行某些动作。不要把它们用到下列用途（像通常一样，除非你有充分理由）。

·要是为了导航，最好用带箭头的表格单元格，或者细节揭示按钮。

·从一组选项中选择时，最好用带检查标记或分段控件的表格视图来处理。

·将某项设置打开或关闭时，最好用开关来处理。

·搜索栏和范围栏。当屏幕显示一些条目，并且要花些时间才能滚动从而手工找到其中某个条目时，这两个控件会很方便。一个常用的诀窍就是把搜索栏放到内容区的顶部，再显示画面。这样它可以随着滚动离开用户视线。此设计会让人们在需要的时候滚动到搜索栏，在不需要的时候则离开视野范围。

·分段控件。分段控件是个提供若干互斥选项清单的简明办法。构思这些狭窄按钮上的文字往往是个令人头疼的事，可以用带检查标记的表格视图来代替。下面是分段控件适用的几个地方。

·从若干选项中选取，若你可以将要点通过可识别的图片或简短文字标签表达。你甚至能够通过更新分段控件上下的文字标签，让其内容说明当前选择项的含义。

·提供的选项用于基于其设置来显示或隐藏其他控件。分段控件的内容区风格的视觉分量（参看第4章）和体验分量（参看第13章）使其很适合这个用法。放置一个蓝色高亮显示的分段控件，会让人感觉能对一些控件的显示或隐藏进行恰当的控制。

·在画面上各视图中切换的方法与页签相同。请参看3.1.4节的内容。

·不管你做什么，都不要让分段控件的行为像是按钮。分段控件是用来在选项间选择的，而不是完成某些操作的。而且记住，对于简单的开关切换，你可以随手用开关，用“开”、“关”的分段控件并无太大意义。

·滑动条。当实际数目并不很重要时，滑动条是个对连续设置提供快速控制的极好方式。操作系统里突出的例子是亮度和音量滑动条。没有人会想，“若音量刚好是86%，我听着最舒服。”或者“屏幕有些暗，我需要将亮度调到39%。”相反，他们会想，“声音大了点”或者“屏幕有些暗”，这正是滑动条擅长的地方。人们事先并不确切知道需要什么程度的设置，而是通过滑动滑块时持续的反馈来确定的。所以要确保用户在移动滑块时，能看到或听到结果。若让用户到其他地方或做什么事情，才能得到需要的反馈，将是让人讨厌的事情。

·分档器。分档器适合数字设置，涉及数值，而且可以在小范围内调整。触摸加号或减号按钮直到你看到期望的数字，与输入数字相比，这个操作是相当简便的交互过程。例如，对于几乎总是设为1、2或3的设置项，用分档器是很恰当的。

·开关。你可以把开关放到一个表格单元格里，提供简单的开/关切换。开关的拨动让人感觉相当严肃，所以可容易地将其运用到关键设置中，或者用其显示或隐藏其他控件。请确保通过查看标签，能够方便地明了两个相反设置的含义。有些文字，如“自动下载新条目”，很适合与开关放到一起。而含糊的标题，如“水平布局”，其相反选项并不一目了然，就不够明了（可以改成分段控件，有个“布局”标签，带有两段文字：“水平”、“垂直”，这样就好多了）。

·文本域。文本域在台式机和网页上司空见惯，但在iOS上感觉有些不好使，特别是如果它位于内容区，缺乏占位文字时。有些时候，你可以提供输入信息的更好办法，例如，从表格视图中选择。在触摸屏上输入文本比从物理键盘输入更是痛苦，所以能避免时就避免这么做。在内容区，带有文字输入的表格单元格通常更有吸引力。但如果你需要文本输入，就不能使用表格单元格，文本域正能派上用场（文本域与表格单元格的比较可参看图3.10）。

图3.10　左边的文本域看上去迂腐不堪，有束缚感，很难平衡。带有文字输入的表格单元格会更好，且使用占位文字而不是值单元格风格，可以为打字留下更多的空间