4.7　布局图：放置所有东西的地方

既然你已经熟悉了在屏幕上放置组件的机制，现在就来考虑把这些组件放在哪里。本节将探讨如何安排组件体现语义意味（基于含义），以及iOS如何帮你通过布局来表达含义。

4.7.1　内容与控件

要认识到内容与控件之间的区别、联系。内容即用户进入应用软件时，看到和操作的实际材料：文档、图片、网站、媒体、文本等。控件则是所有必要的管理用具（如按钮、开关），用户使用管理工具告诉应用软件要做何种操作。屏幕上显示内容，是因为用户需要看到，并操作它；屏幕上显示控件，则是因为应用软件需要从用户那里获得如何行动的输入。

这种联系很清楚地表明，任何时候只要可能，都是内容优先的。你越能把控件远离内容，就越好。这意味着要么把控件放到一个可视的单独层，要么将其以临时的形式展现，如浮动框或情境菜单。

4.7.2　以层考虑

大多数iOS应用软件都涉及某种分层方式。有个可视化建议就是屏幕的不同内容其实位于不同的毗邻面上。各面都有其独立的位置，经常会在与屏幕垂直的假想维度（通常称为Z方向）上重叠。本书将这些面称为“界面层”（interface layer），以将其与图形软件里的“层”区分开。这个概念的最简单例子就是iPhone应用软件中内容的滚动方式，滚动时导航栏、工具栏还保持原样。内容像是在这些栏下面的层上滑动。类似地，iPad应用软件的侧边栏明显也有自己的层，从其独立于主内容区滚动内容（或在竖向放置模式下从边上滑入）的方式就能看出。

但是，独立滚动并不是辨别界面层的唯一办法。可视化处理的显著修改也会表明从一个层切换到另一个层。例如，状态栏的风格迥异于应用软件界面，这样，它就像是硬件设计的一部分而不是应用软件的构成部分。同样还有键盘，用户将其理解为另外的部分，而不认为是与他们输入文字的内容区一体的。

界面层的价值既是实务又是概念。从实务角度看，它当然能让屏幕上的有些东西（如工具栏按钮）固定，而另一些东西（如内容）来回滚动。从概念上说，层可以表达组件与内容的意图。不管是什么内容在占据屏幕的中央，引起用户注意，屏幕外围的工具栏、侧边栏和导航栏按钮似乎更实用，只是起到对主内容区的辅助作用。层可以帮助你避免让控件破坏内容区，帮助用户在只关心查看内容时，意识到忽略哪些东西是安全的。

应用软件偶尔会添加多个界面层。一个例子就是Pages应用软件的滑出标尺。这个标尺提供了更深入的花样可视化控制。当布局屏幕时，请考虑如何让界面组件给人以分立、模块化的感觉，在主内容区周围有意义地分组和排布。

4.7.3　内容区中的控件

每个规则都有例外。即便你已经知道，控件应当围绕内容区分块放置，有些时候将控件显示到内容区也是合理的。如果控件与内容区紧密联系，尤其是如果控件所在区域的空间太紧张，那么将控件放到内容区也许说得过去。

这种情况的典型例子就是表格里最后一个条目里的“新建条目”占位控件。如果用户点击它，就会在所点击单元格的右边出现一个新条目。请注意，这种方法并不能保证此“新建条目”按钮总是显示在屏幕上。如果你的列表很长，那么也许列表滚动到最后才能显示出来。（将其一直显示到最上面有些莫名其妙，因为新条目总是添加到列表结尾，而不是开头位置。）

在内容区呈现控件的主要困难在于，要让它们看上去明显不同于内容，一眼认出就是控件，又不能压制内容的优先权。一点细微的不同，如让控件文字是蓝灰色而不是黑色，通常就足够了。

4.7.4　信息的密集度

iOS中滚动的开销很小。大面积的触击目标、简单的手势、微风般的惯性特效，还有感官上令人震撼的动画，在iOS设备上都是非常容易做到的。所以把内容“放到折页下”，即超出第一页屏幕的内容（类似于纸质报纸的折页），并不会像以前放到台面上的报纸那样受冷落。

所以不要慌着把尽可能多的东西塞进第一页屏幕。在有些场合，密集的信息、仪表板风格、一目了然的视图确实有用。但这不是iOS应用软件的特点。即使在小的屏幕上，也要从容地把信息按先前讲述的布局原则来放置。第12章还会谈及信息密集度的更多内容。

4.7.5　幅度

假如给你一些控件让你布局，还有屏幕或视图尺寸要你按此工作，似乎很有必要使用二维编排方式：栅格、多列表格等。特别是在iPad上，屏幕空间比iPhone大得多时，你可能更想横着拿。小心！一般来说，iOS只是个一维平台，因为很难让用户辨读二维的布局。

·最基本地，一维布局让人眼扫描、解读要容易得多。你可以只沿着有效条目看下去，直到眼光找到正确的那个条目。二维布局则要求眼睛随意在屏幕上扫视，不能确定接下来要看的位置。

·二维布局指示的意义就没那么一看便知了。每列看似都有目的，所以眼睛要找到办法将其分组。对于各行也是一样，所有相邻的东西应当有理由相邻，这就是你大脑要找寻的东西。

·尽管传统的数据表格在桌面计算机上司空见惯，如Finder窗口或经典的Mail消息列表，但是它们在iOS中都很少见到。iOS并没有把单元格数据并排放置，而更通常是提供若干重要的信息块，采用追加文字的方式，将内容组织到一个单元格，作为主标题。这就形成了某种1.5维的布局，即条目都组织在一个线性列表中，但每个条目都包含可水平、垂直展开的信息（iOS上Mail应用软件里的1.5维消息列表也在OSX上的Mail采用）。

宽度要合理

在采用一维方式组织时，你尤其会想知道在iPad显示器上，如何防止你的组件宽得不靠谱，因为它们试图填满这个显示器的宽度。在这种情况下，通常不要让整个显示器宽度塞得满满的。组件往往出现在浮动框、栏目、侧边栏或邻近侧边栏的内容区。但如果你发现内容区占据整个屏幕，那么就采用足量的边界（两侧要均衡）来将控件往里面挤。这比让组件为了填充空间就难看地改变尺寸要好得多。（第3章中提到了模态视图的页栏目风格，能够出色地防止组件变得太宽。）

但有些时候，采用二维方式是良好的解决办法。毕竟，即使iOS的主屏幕，也是栅格的。

·二维布局特别适用于即时可认的实体中。一组大而简单的彩色图标能够极好地工作，但一组小的带文字标签的按钮则需要脑袋花时间分辨后才能处理。

·你要布局的条目越少，越适合用二维模式工作。120点的2×3栅格方形图标容易理解，交互起来也很顺手。但48点的5×5栅格方形图标却让人难以应付。

·如果你对表格列有充分的理由，能够帮助用户识别选项，那么二维模式会很好。假如在某个博客应用软件中，你有三个文字形式的选项和三个媒体形式的选项，把它们分成两列会很有意义。

·二维模式更适合内容而不是控件。如果二维模式能更清晰地表达信息，就不要惧于采用二维布局。有时它能把信息在空间上完美地表现出来。如果手上的材料已经按二维模式表示了，像在日历中那样组织了，那就更好了。

4.7.6　iPhone的放置模式

iPhone应用软件可以锁定到某种放置模式（横向或竖向），也可以适应两种放置模式。在处理设备旋转时有以下4个基本选项。

·将设备固定到竖向放置模式是可理解的，但对于典型应用软件并不理想。如果你必须锁定为某种放置模式，那么竖向是个办法。这正是iPhone主页面的放置模式，也是大多数应用软件最常见的放置模式。iOS倾向于竖向放置用户界面组件：导航栏、工具栏、键盘等。有些应用软件只是在横向iPhone的竖向空间里太难布放组件，因此才固定为竖向显示。

·将设备固定到横向放置模式比较少见。个别应用软件之所以这么做，是因为其界面依赖独特又不可变的组件搭配。

·最理想的是随着放置模式的不同而匹配不同界面。如果为此而无需对整个界面进行颠覆性的重新设计，那就应该这么做。如果能旋转设备来在一次性看到更多内容或更多细节之间切换，那么用户会赞赏这样的应用软件。在输入量大的任务中，许多人喜欢横向放置模式下的键盘，因为按键较大。如果必须，那么你还可以有少数几张仅为竖向的画面。

·偶尔有些情况，依据放置模式不同而提供不同界面是合理的。如果你给出的两种界面显著不同，但对看到同样信息有相近价值的办法，通常改变放置模式就是唯一的方式，在这些办法之间切换。当正常视图不能从横向放置模式受益较大时，更是如此。但这种方法要小心慎用。许多用户并不知道旋转其手机，以便看看有何不同。有些人甚至一直锁定其放置模式，以免不经意的旋转，因为他们从来不会故意切换到横向放置模式。

下面是苹果公司内置应用软件，以及在App Store里那些应用软件对放置模式的一些处理办法，供你考虑。

·Clock应用软件锁定到竖向放置模式，因为切换到横向放置模式并没什么好处。每个条目的信息都足够窄，无需再多水平空间就足以可见。切换到横向放置模式只会马上减少可以看到的条目数量，让本来就稀疏的条目看起来更空旷。

·GarageBand锁定到横向放置模式，这样做比较异类。当然，GarageBand整体上对其界面就有异类的处理。它更让人感觉是个虚拟的硬件设备，就像实际的录音设备，而不是能重新配置其布局的神奇软件。它已经按人们对电话机期望的那样设计了，如果为了适应不同的放置模式，而要对其费尽心思的细致而惊人的界面进行修改，这会出奇地困难，而且也没什么好处。假如你的应用软件与GarageBand一样了不起和复杂，出奇地有用，那不妨就把它锁定到横向放置模式吧。

·Mail应用软件适应两种放置模式，由于其结构原因，这是个容易的做法。对于大部分组件，Mail应用软件有着灵活的内容区，上面是导航栏，下面是工具栏。旋转设备时，内容区适当地改变尺寸，导航栏和工具栏变得高些或矮些。考虑到人们在此应用软件里阅读和键入量的大小，随放置模式而变换横向或竖向显示是个四两拨千斤的做法。

·Calendar应用软件在横向放置模式下有着不同的呈现内容：除了对按小时的每日安排，还可以跨几天计划、两维规划。在此应用软件中，旋转设备更像是切换视图设置，而不只是调整一下“窗口”的尺寸。

4.7.7　iPad的放置模式

iPad上处理放置模式的问题处理起来相当简单。iPad很容易旋转，但iPhone旋转起来没那么容易和频繁。人们都喜欢按一种放置模式拿着它很长时间，来操作各种应用软件。只要你小心设计，屏幕上的空间已经足够大。不管哪种放置模式都能有足够空间把事情做好。所以要是不对两种放置模式提供一样的界面，会更困难。对于几乎所有应用软件，用户都期望应用软件能按他们要求调节，而不是旋转iPad来适应应用软件。

要锁定到任一种放置模式，都得有个令人信服的理由。GarageBand和Keynote都锁定到横向放置模式，因为其界面对这种屏幕维度是专门设计的，在竖向放置模式里重新定义其界面并无多大意义。

4.7.8　最坏情况的高度压缩场景

在两种设备、两种放置模式上，似乎你都有充足的竖向空间来工作。但有一大堆界面元素要堆放，占据这个空间。不管你有意在设计中放置哪些组件，都要确保它与其他组件的协调性。

·除非你的应用软件要求特别投入的氛围而隐藏状态栏，否则状态栏就一直显示，占据20点高度。

·当iPhone位于竖向放置模式下时，如果正在通电话、录音或者共享会话，状态栏就会变成40点高度。

·在任何允许输入文字的画面中，当然要负责显示键盘（iPhone横向模式下高162点，竖向模式下高216点；iPad横向模式下高352点，竖向模式下高264点）。当键盘可见时，平时不用滚动的屏幕可能需要滚动。

·有些语言，如日文，还需要个完成栏来支持文字输入，所以键盘空间要比你预想的高（iPhone上是36点，iPad上是54点）。

·即使你意在为更高些的iPhone 5设计，即568点的高度，大多数人还在用更老的iPhone，其高度为480点。你所做的每个画面应当适应较矮的显示器，而在新式更高的显示器上表现更好。这也许意味着要少些滚动，或者填充显示器的画面要为各组件提供更大空间。要为两种高度都画出线框图。

对于绘制线框图的每个画面，要规划其如何让所有可能的界面组件都即时可见。若能够容纳所有这些组件，而仍有合理的空间留给内容显示，你就知道这时的状况不错。