4.5　布局原则

在了解iOS画面布局的特性之前，有必要学习（或审视）一些基本原则。在布局每个画面时，你要考虑组件的放置及其之间的关系，会传递给用户怎样的信息。将一组需求转换为“正确的”布局并没有一定之规。但这里谈到的原则在尝试各种布局可能性时将有所指引，并尝试在需求与设计约束之间找出平衡点。

本节的大部分内容基于格式塔心理学（Gestalt psychology） ^[1]的基本原理，即大量阐述人类怎样感知事物的理论框架。格式塔心理学对视觉设计有着深远影响。它经常出现在艺术学校的课程里。在其被创立一个世纪后，格式塔心理学仍然对布局iOS应用软件的画面有益。你可以花大量时间来钻研格式塔理论。如果你对这类东西感兴趣，可以查看本书“前言”的阅读清单。

4.5.1　整体协调是目标

下面的原则都旨在为布局创造整体上的协调。在协调的设计中，每个元件都看似各就其位，没有多余的显示内容。也没有什么让人感觉不舒服或者随意的。每个组件都有意义，让整体内容有条有理。如果整体都显示很好，用户就不会注意其协调性了。除非他们熟悉设计，并抱着挑剔的眼光审视画面，大多数人不会注意到布局的愉悦之处。他们只是快乐地去用它。如果有人问起，他们也许会说界面看起来是“整洁的”或者“专业的”；但如果应用软件缺乏协调性，人们“就会”注意到。顾客在一公里之外就能督见杂乱的布局，他们会感觉这是个警示信号，即开发人员没有操心，没有花时间把产品做得像模像样。

应用软件布局的好坏程度与其画面渲染的好坏程度有关，但并不等同。画面渲染是布局时要通过的另一种测试。你会在第5章接触这个内容。而现在，要关注于构造好的骨架，从而将来分层于这种吸引人的风格。

请认真阅读这些原则。当你小心翼翼地考虑所有原则，并让它们和谐工作时，就达到了协调性。大多数原则可能单独看来都是显而易见的，但假如它们不在你的意识表层，其实是很容易忽略的，这让人有些吃惊。正是它们的组合才创作了优秀设计的那种神奇、妙不可言的感觉。如果某个设计有些令人“感觉别扭”，也许该花些时间梳理这个清单，看看违背哪个原则。

4.5.2　视觉分量

布局里的每个组件都有某个数量的“视觉分量”，这个数量是相对于其他组件和整体布局的。该分量影响着人眼关注它的难易程度、它看起来的重要程度，以及它如何影响布局的平衡。视觉分量主要取决于下列两种属性的乘积：

·尺寸：组件越大，其呈现的视觉分量就越大。

·与背景的对比度：组件在背景中越突出，其呈现的视觉分量就越大。

设计新手很容易认为尺寸是对视觉分量有贡献的唯一属性，而忽略对比度的角色。但尺寸与对比度的关系意味着你可以让组件有不同的尺寸，却给人以同样分量的感觉；或者组件的尺寸相同，却呈现出不同分量。（请参看图4.6的说明。）

图4.6　不同尺寸的物件可以有相同的视觉分量，正如上面的抽象线框图物件所示；下面的视觉处理也印证了这一点

最终的对比度很大程度上依赖你在实体模型阶段对组件的最终视觉处理。但你现在可以考虑有意赋予组件的对比度，从而按尺寸算出其分量。在目前画线框图的阶段，你可以通过将物件填充三种灰度级的灰色，即亮、中等和暗的组件与区域，来粗略指示其对比度。

例如，假设你的应用软件中有个关键按钮，你想做得特别大，以便容易点击。假如赋予它以其他所有按钮一样的风格，并把它做得很大，那么会导致一个感觉不舒服的沉重按钮。它会远远超过屏幕上其他按钮的分量。但假如在线框图阶段，你将其指示为应作低对比度处理，那么就会在实体模型阶段规划其风格。

或者你有个按钮需要做得很小——出于空间原因或避免不小心的触击。为使其不至于在屏幕的其他组件之间让人看不见，可以增加其与背景之间的对比度。这方面的一个好例子就是App Store中的购买按钮。它其实比建议的最小触击目标尺寸还小，因为要防止不小心的触击是很重要的。但它的分量很大，高对比度的处理让其重要性一目了然。

4.5.3　相似性与差异性

相似的物件看上去相关，不相似的物件则看似无关。这个道理甚至不用写出来。但这里指出来是因为要在设计中记住，它实在是太重要了。当你在权衡要用哪种物件、放到哪里、怎样确定大小和位置等选项时，将该组件拿来与同一屏幕上已有的组件进行比对。该组件与其他组件的相似性与差异性将起到决定性作用。按屏幕上组件的相似程度考虑这些组件。

举个例子，如果你提供五个相似风格的工具栏按钮，用户会期望它们大致等同。应能安全地假定它们都是些对内容区可见内容执行的一些动作，它们很可能用起来类似。表格视图里同样风格的条目应看作对等的，没有哪个按钮比其他按钮更重要。

你引入的任何差异性都应当有含义。人们倾向于在某物体与周围不同时，找个解释的理由。结束模态视图的Done或Save按钮，往往是蓝色的。有些应用软件对某个工具栏按钮或表格采用不同的尺寸或风格，以示其比其他部分更重要。Contact应用软件中的Delete Contact按钮位于平白的表格视图之间，但它表达出独特的明亮红色风格，以示其与众不同的（破坏性）目的。

4.5.4　接近与远离

凑在一起的物件看上去是相关的，而远离的物件则看似无关。这个事实，还有相似性与差异性一起决定了人眼如何分类物品。两样东西空间上越近，它们的相似性关联就越强烈；反之亦然。

当组件有着相似目的或含义时，就把它们放到一起。在许多情况下，例如，分组的表格视图，可以实际把它们贴在一起，共用一个边界，之间没有空白或分割区。或者，如果你有两个组件想在概念上分开，可以在其间放置空白，或运用某个视觉分割图形。

在Settings应用软件中，各画面都有着分组的表格视图。这就是个采用分组和分割来组织相关、不相关组件的典型例子。注意，它们只在必要时才带有组标签；而且每组的成员都能很好地解释这个组是干什么的。的确，整个Settings应用软件就是一个解决布局问题的智慧宝库。

4.5.5　对齐

屏幕上的大多数物件都要与其他某个物件对齐。假如你沿某个物件的边沿或中心画条虚构的直线，让它穿过屏幕，这条线应该与其他物件的边沿或中心重合而不是错开（参看图4.7）。观察任何清新的设计，你都会发现，物件很少会偏离对齐。它们要么完美地对齐，要么远未对齐，让人一看就知道这种错开是有意的。

图4.7　边沿对齐和中心对齐。紫线显示对齐，橙色区域显示的是文本组件的视觉边界

对齐和界面层

这个规则有个关键的例外，就是物件应该对齐，它要和界面层（并非与图形软件里的层功能相同）有关联。4.7.2节解释了如何用界面层概念性地分开界面的各部分。为强化这种差异性，不同界面层上的物件也各自错开。请注意苹果公司的应用软件里，导航栏里的边界空白并没有与内容区的边界对齐空白。导航栏层里的窄边界稍窄，微妙地指示出它与内容区所在的层不是同一个界面层。

下面是一些保持组件对齐的技巧。

·边沿对齐：你设计里的矩形（类似方块的）物件，如按钮、表格、方形图标等都尽可能多地采用边沿对齐。由于类似物件要放得比较近，边沿对齐可强化其之间的联系。如果物件离得较远，或不太相似，那么其边沿对齐只是看着好看，并不暗示有强烈的联系。

·中心对齐：对于矩形物件，这种设计比起边沿对齐有些弱化，较易导致混乱。但它特别适用于不规则图形，如文本块或线框图形。例如，没有边界的工具栏按钮通常按垂直中心对齐，而不是边沿对齐，因为每个按钮都是个独特的图形。类似地，没有放在框里的文字也通常为中心对齐。导航栏里的标题通常在屏幕上水平对齐，而在栏中垂直对齐。

·对齐文字：一般来说，文字需要与其他文字对齐，而不是与方块对齐。你可能首先会想到，表格视图标签应当与表格边界左对齐。但若与表格内的文字左对齐，它会显得更和谐。要垂直对齐不同尺寸的文本块，传统的办法是把它们都放到一个层面，使其采用同样的基线；否则，两块文本就会显得在空间上悬浮着，让人感觉不舒服。但如果两块文本的尺寸太不一样，那么在垂直方向中心对齐，其分量会更好些。

·辅助线检验：这是最快、最直接的检查布局的对齐并修正之的方法。将布局图置于图形软件的画布上。该图形软件需要支持手工辅助线，即能够跨越整个画布的直线。对每一条可见的边沿，都加一条辅助线。已对齐物件的边沿可以共用一条辅助线，但未对齐的物件只用自己的辅助线。作完以后，辅助线就能指示出布局图的视觉逻辑，它是井井有条的、明智的，还是混乱不堪的。在这里你可以调整组件、删除辅助线，直至达到最优雅的布局，而且仍能满足设计需要。（请参看图4.8中调整前后的例子。）

图4.8　上图中采用辅助线检验特别难看的布局图，下图则是对其修饰后的版本。图中只给出了水平对齐用到的辅助线

4.5.6　节奏

视觉节奏的一个好感觉，通常是空间、对齐、均衡的累积效果。但你可以采取其他措施，确保你选择的尺寸和距离是协调的，那就是运用标度尺。标度尺就是一个预置的测量值清单，可以信手拈来，而不必每次需要定位或确定物件尺寸时，随意地选取某值。当同样的协调值反复出现在设计的各处时，就能带来协调和有序的感觉。（请参看图4.9中用到的标度尺。）

图4.9　单个设计的基本标度尺（上图）和模块化标度尺（上图）

iOS设计有两种标度尺，都工作得很好，你可以选择其中任意一个，或者创立自己的标度尺。

·基本标度尺：10，20，44。对几乎所有设计，你都可以采用这种简化的标度尺。以10点作为“常规”距离，用于分开控件、标签和距屏幕边沿的距离，或者包含其的视图边沿的距离；需要额外分割，当分开不相关的控件组时，采用20点；许多标准的iOS控件（如表格单元、工具栏）尺寸都是44点；如果需要更大的空间，那么可能就采用44的倍数点数，这样会赏心悦目。由于特定的原因，你可能需要用到其他尺寸，例如，52点高的表格单元来存在大量文字。那是很好，但不要创建50或54点高的表格单元，这样会显得不调和。

·模块化标度尺：7，10，14，20，28，40，56，80…。模块化标度尺是依据反复乘以某数的结果得到的。本例中它就是2的平方根（1.414），每乘两次值就会翻倍。你可以选取一个比例，发明一种每步在此标度尺如何用的方案。这种冒险也是无休止地追求完美设计的一部分。如果你乐此不疲，想了解更多知识，那么可以阅读Robert Bringhurst写的《The Elements of Typographic Style》一书。如果没有兴趣，那么就用基本标度尺吧。

前面谈到的辅助线检验也很便于找出糟糕的节奏的位置。假如辅助线间的距离看上去乱糟糟的，而不是顺眼的图案，那就需要你做些调整了。

4.5.7　边距与补白

布局图运用适量的空白区域后，会显得更现代、更令人愉悦、更让人愿意亲近。边距就是某物件周围留出的空白。对于方块形带有边沿和内容的物件，如表格单元，或者有文字标签的按钮，补白就是从边缘到外面的空白数量。

在iOS上，用户期望组件之间有一定的冗余空白，这样应用软件才不会给人以狭窄、廉价、粗俗的感觉。从认知学和人体工程学上讲，滚动几乎没有代价，所以不必给内容留下太多空白。

不要相信Xcode的辅助线

Xcode的自动定位辅助线确实对布局有帮助，但不要完全指望它们。对于布局应该怎样，它们只会盲目地建议不合理的位置和间距。请记住，视觉测量结果才是重要的，而非物件的边界。经过一段时间的使用，你也许会摸索出个办法，让Xcode将物件放到希望的地方，然后加减你所知的某个数量值，以修正你的设计。

对于边距，你可以依靠前面所述的标度尺：每种东西周围都有10点边距，这样就会有相当漂亮的效果。但为确保有足量的补白，你得保持警惕。对于给定量的内容，并没有严格的算法来算出该用多大补白。但一些辅助线可以让你事半功倍。这些辅助线大部分基于大写字母高度，也就是普通大写字母如E的高度。

·对于框内的单行文字，要给出100%的大写字母高度，作为垂直补白。（参看图4.10对文字和图片补白的说明。）

·对于框内的多行文字，要给出最大号文字的50%~100%的大写字母高度，作为垂直补白。

·一般来说，水平补白也应是最大号文字的50%~100%的大写字母高度。只要你用了前面建议的垂直补白，则对水平补白也可以运用类似的办法。

·边沿相互对齐的物件，特别是水平边沿对齐的物件，也应将其文本按边沿对齐，这是通过拥有相同的水平补白做到的。（即使图4.10的单元里有着不同的顶部和底部补白，它们仍有着同样的侧边补白。）

·方框内的图片（如工具栏按钮）通常可比文本少些补白，一般在图片高度或宽度的25%~50%之间即可。

图4.10　文本的补白示例，以大写字母高度的百分比给出；图片的补白示例，以图片高度的百分比给出。橙色区域指示光学边界，请注意五角星的光学边界并未位于这些点的路径上，因为这些点对整体图形的视觉分量几乎没有贡献

4.5.8　均衡

即使布局图里的所有个体细节都适当地确定了尺寸、对齐并留有间距，你仍然需要关注如何让整体图片协调。在考虑比例时要注重的主要问题就是均衡：组件的视觉分量如何分布于整个屏幕上。

要达到均衡的简易方法就是，让你的布局图对称。这个办法在大多情况下都适用，但不是唯一的办法。要注意的倾向是相互均衡的组件看似要么等同，要么相反。

另一个达到均衡的办法就是小心调整组件的视觉分量。按先前谈的方法来调整尺寸或与背景的对比度，从而增加或减小屏幕某个区域的分量。你也可以巧妙地移动组件，使之不再严格对齐，或者占用某些保留给边距的空间，从而达到更好的均衡。这个办法需要大量的经验和智慧。

谢天谢地，iOS应用软件通常可以忍受相当程度的不均衡，而不显得难看。垂直方向上的不均衡往往问题不大，但要尽力避免屏幕一侧空白，而另一侧拥挤不堪。

4.5.9　润饰

要使用最少的组件来满足设计需求。换句话说，永远不要把你不需要的东西包含进去。这是唯一最重要的原则，也许还是最显而易见的。但它比看上去的更微妙，也很容易在没有察觉的情况下违反。

为了分开控件，你通常只需要在距离标尺上采取一个步骤。一般用不到分界线。在你有两块文字，之间用空白或不同风格区分时，也不需要使用标点符号或边界把它们隔开。如果你的按钮按栅格组织，不需要再为各按钮画个边界，而让它们共用如表格等边界，或利用屏幕边沿或视图作为边界。或者如果按钮看上去是可点击的，可以消除边界。（请参看图4.11中对应用软件的润饰。）

图4.11　上图是烦琐的布局图，上图是对其润饰后的画面

[1] 人们的先天视觉感知规则。——译者注