学习如何借助图画进行沟通

有很多方法可以制作原型。其中一个最简单有效的方法便是在白板上涂涂画画。

当你发现设计师好像在听你讲天书般茫然盯着你时，请转向白板画出你在讲的东西。

你还可以进一步整理下你画出的东西，然后用手机拍下来。这些手机拍下的白板图画

是非常强大的沟通工具，而且易于制作。我见过一些团队非常喜欢这些图画的风格，

案还是煤矿坑中的金丝雀^a：如果发现需要写一大段文字来解释某个特性该如何使用，

你就应该重新设计这个特性，因为用户可不会读大段的说明。

控制花在视觉设计上的时间。视觉设计、品牌、命名等元素都是主观的，与用户 能否完成任务的关系也不大。不像文案，这些花哨的元素不会帮助你理解用户体验，

要是你把它们添加到原型中反而可能产生关于样式的争论，而这种争论与你想要解决 的问题一点关系都没有。你应该使用标签明确的占位符框来替代这些视觉元素，然后 继续下一步。

使用灰度色，不要使用其他颜色。一般来说色彩会加大线框图的复杂度，并催生 与视觉设计和品牌相关的各种质疑。参见之前关于线框图的提示。

预期你的线框图会发生很大改动。线框图非常适合快速沟通想法并可以促进讨 论。当就线框图取得一致后，你的设计团队将开始构建高保真原型，但此时的线框图 与你最初设想的会有很大不同。因此在制作线框图时，你需要考虑如何搭建才能确保 后续能快速修改。当别人把你的线框图改得面目全非的时候你无需担心，这只不过意 味着你正有力地推动着对话向前发展。

当心视觉花招。设计与编码不同，它可以轻易地耍些花招来争取人们的认可。例 如，使边角变圆或增加透明度会使事物更加美观。法务要求必须展示的退出框和法律 文案会被轻易抛之脑后。为了网页或界面丰满用户会被顺手加上各种个人信息。当心 这些花招。构建原型时需要同时考虑新、老用户分别会看到什么内容，同时确保设计 出来的效果能够真正实现。

如果幸好有一位设计师帮助你制作原型，也许就不需要知道这方面的知识了。若 你还能为了拥有同理心而去了解一些线框图的基础知识的话，那真是再好不过了。但 软件行业大部分的主管总会在某些时候需要亲自绘图，这时候，设计师们发明的一 些不错的快捷制作简单原型的方法就可能对你有帮助了。其中有两个大部分设计师 都在使用的简单方法。第一个是使用如只能在Windows 中运行的 Visio 或只能在 OS X 系统中运行的 Omnigraffle 那样的流程图绘制程序来绘制线框图，第二个则是使用 Fireworks、PhotoShop 或者画图工具来绘制较小的、高保真的、基于现有用户界面的

a 金丝雀对一氧化碳、甲烷这类气体敏感，煤矿坑若是发生灾变，金丝雀会比人提早中毒死亡，相当于

“生物报警器”。——译者注

改动。两个方法都值得了解，我们会在后面一一介绍。

3.4.1  使用 Omnigraffle 制作简单的线框图

我使用Omnigraffle 制作线框图。它是一个非常出色的程序，在使用它工作的过 程中你就能学到很多设计知识，它的创造者在塑造软件出色的使用体验上下了很大 功夫，有不少亮点。Visio 也能完成类似的操作，但它缺少 Omnigraffle 一些好用的 功能。

如果打算为用户体验的线性走查制作一系列幻灯片，你可能需要用到图层。图层 就像描图纸，你可以让其可见、不可见或按任意方式叠加。你可以利用图层来创造通 用元素，如将一张空白浏览器的截图作为单独的图层移到堆叠的底部，这样该截图就 会显示在所有其他图层中，你的线框图也就看起来像是显示在浏览器中。为了避免在 制作其他图层时不小心编辑到这个图层，你可以将该图层“锁定”。图3-1 中我创建了 一个带标题的浏览器模板并将其锁定。

图3-1 在 Omnigraffle 中创建图层

下一次，为你将要演示的每一张幻灯片创建一个图层。换句话说，为每次点击或 者用户体验中每个步骤创建一个图层。

一个便于改动的基本线框图模板已经具备了，你需要扩展这个模板以继续增加它 改动的便利性，比如可以增加一个通用头：创建一个新的图层，把它移到其他图层的 最上面，这样它便能覆盖其他步骤（图3-2）。然后将其锁定以便于后面的操作。

图3-2 在 Omnigraffle 中制作通用头

现在你可以准备制作单个页面了。Omnigraffle 之所以在制作线框图上如此出色，

有一个很重要的原因便是因为它的模板特性（Visio 也有类似特性）。模板是指一组可 编辑模具（图3-3），你可将用户界面元素拖入线框图中进行编辑。我使用了一个由 Konigi 出品的非常出色的线框图模板库，这个库中包含你可能会用到的任何元素。你 可在这里下载它：http:// konigi.com/tools/omnigraffle-wireframe-stencils。

图3-3 Omnigraffle 模板 , 陈列着各类按钮

将所有未锁定的图层隐藏，然后点击你想要编辑的步骤所在图层。将模板中的按 钮、文本框、标签以及其他元素拖入到线框图中。

如果需要增加注释，你可以给需要注释的元素添加红色引线标注或者先前提到过 的红线标注。该功能效果很好，对吗？

到现在为止我们关注的还是线性工作流，你也已经具备了制作演示幻灯片的能力 了。但对于既定的任务，用户常常会有不同的处理方式，你需要说明这些异常情况。

在这类例子中，你可以构建多个线框图并组合成流程图的样子。

要制作一个基于线框图的流程图，你需要像之前一样先绘制线框图，但不用考虑 图层。图3-4 是一个 Hello World 应用的简单示例。

然后添加第二步的线框图，用线把它与第一步连接起来，并各自标明是第几步

（图3-5）。你可能需要再增加一些说明文字来解释发生了什么。

图3-4 流程式线框图，步骤 1 ：绘制第一张线框图

图3-5 流程式线框图，步骤 2 ：连接线框图

这里有一个值得优化的地方：第三步你可以只绘制一个对话框，而不是绘制完整 的用户界面（见图3-6）。

Omnigraffle 是一个强大的工具，使用线框和简单文字元素构成的设计不但有趣而 且易于改动。如果想构建更加复杂精致的原型，你可以创建可引用的组件作为对象，

使改动应用起来更为迅捷。为对象设置属性和脚本可以创建用于测试的可点击原型。

使用Visio 或 Fireworks 可以实现许多相同的操作，并且 Fireworks 还能导出已构建成 型的原型。不过你的目的是清晰快速地传达需求，这些高级的工具还是留给设计师们 为好，你的原型应该保持简洁。

图3-6 流程式线框图，步骤 3 ：绘制对话框，完成流程图

3.4.2  快速制作高保真原型

然而在某些时候线框图也没那么好用。或许产品改动很小以至于用线框图来表示

显得麻烦。或许你真的需要彻底弄明白某些特性的重要改动点。像这类改动我倾向于 使用Photoshop、Fireworks 或者其他图片编辑器，因为比起使用 Omnigraffle，我可以 花费更少功夫做出一个高保真原型来。而且幸运的是，快速制作简单的高保真的原型 并不需要你是一个Photoshop 或 Fireworks 专家。

比方说我们想要将我们的Hello World 程序放在亚马逊首页顶部 Kindle 的下方。

首先你要将需要改动的用户界面截图截下来，用你的软件（在这些例子中使用的是 Fireworks）打开并调整画布大小以留出操作的空间。

使用矩形选框工具将需要改动或者需要腾出空间添加内容的部分删除。为了插入 一个新的选项，我把需要改动的部分切出来并向下移（指针停留在矩形选框上，按住 Option 和 Shift 键并拖动鼠标^a）。见图3-7。

图3-7 切开页面

若要复制基本元素，需要先用矩形选框选中它，然后按住Command 和 Option 键

a OSX 中 Fireworks CS6 的快捷键为 Command+Shift+ 拖动。——译者注

邮 电

并拖动到目标区域。在这个例子中我打算复制Kindle 这个条目。复制好了之后，再把 Kindle 文字所在区域删除并用合适的背景填充该区域和其他区域（见图 3-8）。这里有 一个小技巧，你可以继续使用矩形选框工具选中其他区域的背景色然后复制并粘贴到 Kindle 文字所在区域，而不是尝试使用油漆桶工具和橡皮擦。

图3-8 复制和粘贴基本元素

添加元素。如图3-9 所示，我添加了 Hello World 元素和一个绿色的“NEW ！”

提示符。你肯定不会做这么愚蠢的事情。（杰夫也绝不会允许。）我估摸着使用了一个 相近的字体，但你也许知道你的产品使用的是什么字体。或者你还可以审查元素的 CSS ！

清除下方空白并将图片缩放回正常尺寸。大功告成！（见图3-10。）

这个例子本身微不足道，但你可以从中发现使用这个方法能让你在短期内制作可 观数量的高质量原型。

图3-9 添加你的具体内容

图3-10 Fireworks 中制作完成的原型

第 4 章

赢在项目管理 4

SHIPPING

GREATNESS

随着产品开发工作的进行，你需要总揽项目全局以便协调其他团队、安排发布计 划以及确保各依赖满足要求。你需要肩负起这种程度的项目管理，同时还不能落下其 他任何需要完成的事情。时间变成了稀缺资源，这让你的团队忧心忡忡，但你的薪水 却有机会蹭蹭上涨。作为团队主管，你无法依靠Microsoft Project 这类工具使一个复 杂的项目模型变得易于构建和维持，也无法通过增加兼职人手夜以继日地工作来使项 目在更短时间内完成。要想在交付上取得突破，你需要低成本的项目管理。

随着产品开发工作的进行，你需要总揽项目全局以便协调其他团队、安排发布计 划以及确保各依赖满足要求。你需要肩负起这种程度的项目管理，同时还不能落下其 他任何需要完成的事情。时间变成了稀缺资源，这让你的团队忧心忡忡，但你的薪水 却有机会蹭蹭上涨。作为团队主管，你无法依靠Microsoft Project 这类工具使一个复 杂的项目模型变得易于构建和维持，也无法通过增加兼职人手夜以继日地工作来使项 目在更短时间内完成。要想在交付上取得突破，你需要低成本的项目管理。