4.4　画线框图的工具

谈到画草图的工具，你想要的是任何把你想法尽可能快而粗略表达出来的工具。但对于线框图，精准就极为重要了。理论上，你可以在图形纸上作出线框图，假如你有一只异常稳定的手、一个数学的头脑和超级好的橡皮擦。然而，用桌面软件工具会让你理所当然做得最好。你可以选择某工具，让其逐像素地轻移上面的对象，测量精确距离，迅速调整以使位置和尺寸正确。本书不依赖某个特定的软件，但你的选项应是OmniGraffle、Fireworks、Illustrator、Photoshop、Axure和Balsamiq中的某个。

Xcode中的设计

有的设计人员使用Xcode本身进行界面设计，其好处就是在实际应用软件中就可使用你产出的结果。但这个方式只适用于你严格按实物、标准控件与组件来画的情况。你会错失适当图形设计软件提供的好处，包括定制组件、注释、层，以及其他图形与逻辑方面的好处。一旦你在设计软件里展开设计，就能节省比在Xcode中设计得多的时间和辛劳。

在画线框图的工具中，可以寻找一些关键的功能。

·层：绘制漂亮线框图的最好技巧之一，就是层管理。请注意将相关的组件组织到一层上，给各层命名以有意义的名字；有序的层结构将让你得心应手。你可以利用层可见性来比较解决同一问题的不同方法。还可以描述一张画布上画面的不同状态。浮动框、栏目、告警等，都可以在各自层上显示和隐藏。有些应用软件（如Photoshop）让你保存层的构成，即各层的可见性设置；或者像OmniGraffle那样，在画面间分享层信息。

·栅格：要习惯使用栅格来精确定位物件至你期望的位置。对于初始布局，好的栅格设置是44像素，即11个细分，也就是每个分块4像素。主栅格线让你看到最小44点边长的方块为触摸目标，小栅格线让你有细致的移动距离，每次4像素，而操作起来不至于太烦琐。你也许需要偶尔临时把细分改为44或22，以便一次只移动一两个像素。即使想达到最高精确度，将细分设为1，也会阻止你不小心把物件放置到像素边界间。倘若设计文档展示的物件偏离了像素栅格，就会看着低劣而混乱。

·风格：经过岁月的磨炼，你肯定会发展自己创作线框图的品味和实践。但最好记住你有若干选项可实现。当然，“线框图”来自于绘制界面组件的典型“只有提纲”风格，这种风格很像蓝图，很少考虑每种组件的最终外观。如果你想描述再详细些，那么可以采用阴影——最好是单色或非常有限的调色板——来指示相对的视觉分量，或者组件按语义的分组。如果是往另一个方向，描述粗略些，你可以故意将自己的线框图看起来有些潦草，以清楚地表明它们并非最终结果。（参看图4.5所示的一些线框图风格。）

图4.5　一些线框图风格。从左到右依次为：稍为潦草，有着精确尺寸但还没最终确定；纯粹线条，避免给出任何视觉处理的建议；带阴影填充，建议相对的视觉分量；有彩色效果，容易识别各组件的分组

·尺度线：如果你要将设计付诸实现，特别是如果你不想在线框图和实现之间有实体模型的步骤，那么在组件中包含尺度线，以明确尺寸和距离就会很有用。有些工具（如OmniGraffle）甚至能自动计算并显示线的长度。将尺度线专门放到一层，以便在需要时显示，或者在不需要时隐藏。

·模板与模具图案：不管你用什么图形应用软件，你都会找到为常见iOS画面和控件预留的一些模板与模具图案。倘若你用的这些资源得当，就能节省大量的时间和精力来创作那些有准确尺寸的组件。否则你得自己创作自己的模具图案，来迎合你的设计，从而不必每次都重新创建每个物件。