4.3　视觉度量

对于线框图的绘制，你需要用到可以在画布上布放物件的应用软件，需要能非常精确地度量其位置和相互间的关系。但对于同一个物件，Xcode报告的测量结果与一些图形应用软件有时会有些许出入，而且与你眼睛实际看到的往往有些出入。这是因为给定物件的实际可视边界并没有和应用软件显示时理解的边界相符。物件内部会有白色的间隙；或者有偏离它们的阴影效果；或者高于、低于四线三格里中格的字母；或者其他设置，让软件很难知道人所看到的内容的起止位置。

边沿与视觉边界有些时候是等价的

当然，有时一些物件的视觉边界确实与软件绘制它的边缘相同。矩形就是个例子，它没有任何如空隙或阴影等的配置。对于这些物件，你可以指望软件报告的测量结果。

为了规划整洁、专业的布局，你需要从视觉方面考虑，从视觉方面测量尺寸与距离。这通常意味着忽略OmniGraffle、Photoshop、Fireworks和Xcode关于器件的位置及其尺寸的说法。而是采用下列技术——你的眼睛。

首先，你需要知道测量的位置。这有点涉及原型应用阶段，因为你将看到最终效果的示例。这时你不用操心产品图形显示的具体内容，但你需要知道在画线框图时的技巧。

4.3.1　视觉测量文字

水平方向上测量文字很容易：只要观察最左、最右端的点即可。如果存在因为防锯齿效果而是颜色暗淡的像素列，或者对圆形字符边（如O）会有一些像素伸出，可以忽略它们，以颜色重的像素为准。

事实上，每种字体都在垂直方向上有其基线勾勒的分量，以及其字母高度。这一点当然也适用于iOS上的标准字体——Helvetica Neue。

·基线即多数字母位于其上的水平线（圆形字母的曲线会稍在其下，若干字母的下部也位于此线之下）。

·字母高度是大写字母向上达到的线（有些小写字母也会达到此线）。

这两种线界定了文字的垂直边界，用来在视觉上对齐，测量组件间的距离（参看图4.3）。是的，这意味着y、p等字母的下部以及 等字母的上部，可以伸出到文字可视分量之外，到达其周围的边缘。有裕量的边界应当不只是容纳这些文字。大量的应用软件搞错了这一点，要么包含了字母下部，要么文字元素的分量没有包含字母高度。你可以对此做得更好。

图4.3　视觉测量文字。阴影区代表文字的边界，用于定位和平衡。圆形图形和黯淡的去锯齿效果会稍微伸出这个区域

4.3.2　视觉测量图片与控件

任何控件或图片都应有某种可分辨的边界或边缘，以定义其视觉边沿。（如果边界与组件表面融合得模糊不清，就会有对比度问题，参看第5章对对比度的说明。）暗物体过渡到亮背景的边界，或者反之，正是此物件的视觉边界（参看图4.4）。

图4.4　视觉测量控件。在此例中，将描边的外侧看成定义按钮的边缘。请注意蚀刻效果的暗色部分并非边缘

从哪儿测量

有些设计者从边缘的内侧测量；另一些设计者则在外侧测量。表格单元的边沿是定义在内侧的白色像素，还是边界上的灰色像素？你选择哪个无关紧要，只要你一贯采取同样的选择方法即可。

4.3.3　测量技巧

当需要实际像素测量时，下面有些办法可以达到目的。

·放大：在Mac计算机上，进入System Preferences的Accessibility窗格，打开系统宽度级缩放。关闭图像平滑，因为你要精准地观察这些像素。现在可以使用键盘命令或修改后的滚动手势，来把你的设计放大到底，亲自记录像素数。许多时候这是检查极小距离的最快办法，但在16个像素时，这个办法变得单调乏味且易出错。在iOS上，此缩放总会运用平滑特性——你不能把它关闭。你可以在Screenshot Journal应用软件里消除这个限制。Screenshot Journal是供设计人员和开发人员用的，所以它有着漂亮、厚实的缩放效果。

·辅助线和栅格：任何合适的图表、图片绘制应用软件都会提供人工辅助线和可定制的栅格，供你在画布上绘制笔直的线。它们是确保各物件对齐、空间上分布均匀的绝佳方法。

·独立的测量工具：假如你想得到在iOS仿真器或线框图里的组件的确切尺寸，远远地对齐两个物件，或者实现其他精确的复杂操作，独立的屏幕测量工具（与你的图形化应用软件无关）将是无价之宝。你不大可能做得比Iconfactory出品的xScope好。xScope是个测量工具，可以细致入微地预览像素。它像先前提到的辅助线和栅格那样工作，但是是对整个屏幕而不是在某个应用软件中这么做。

·标尺对象：另一个办法就是在你选择的应用软件中，准备些精确的标尺对象。将它们置于一层，从而可以在需要检查尺寸或距离时，让它们显现出来。这些对象应该是你知道的视觉上同一尺寸的，并显示在应用软件逻辑中的对象。例如，一个平白的填充矩形，没有外部描边。这样你可以依赖应用软件报告的尺寸值。