第五章 写代码之前先进行原型设计

什么是原型

现在你已经对iOS开发有了基本了解了。正如我一直说的，没有比自己动手真正开发app更好的方法来学习app开发。在这本书里我们会开发一个真正的app。但是现在先不着急写代码，我们需要先设计一个程序原型。

每次我向初学者提到原型，总是会遇到两个问题：

1什么是原型？

2为什么要使用原型？

原型是一个产品的早期模型，主要目的是为了测试某些概念或者程序外观。在许多工业领域都使用原型。在建房子之前，建筑师会为房子绘制设计图和创建模型。飞机制造商在正式生产飞机之前会制作飞机原型用于测试可能存在的缺陷。软件公司在正式开发产品之前会创建原型来验证设计思想。在app开发领域原型是产品早期的样品，它只包含部分功能和最基础的UI甚至仅仅是草图。

原型设计是指创建原型的过程，原型设计有很多的优点。第一它将你的观点通过可视化的方式表现出来，让你更好的和你的团队或者用户之间沟通。如果你既是开发者又是用户的话，你可能不需要原型，因为需求由你自己提出实现也由你自己。所有的东西都在你脑子里，你明确知道你想要什么以及你要创建什么。

但是这种开发情况很少见。大多数情况下你在一个团队里工作或者为客户开发软件。即使你是独立开发者，你也可能开发一款面向全球或者特别群体的应用。你必须找到一个方法来与人交流和测试你的想法。你可以用文字表达你的想法，但是没有人愿意看无聊的文字屏幕来理解你的想法。最好的方法你使用一个demo来向用户展示你的想法。

通过创建原型，你可以尽早的和用户进行交流，用户会更好的理解app是如何工作的，并且尽早的指出还缺什么。

原型还可以在不创建真实App的情况下验证你的想法。你可以尽早的向你的潜在客户展示你的原型，从而在App开发之前的获得反馈。这样既节约时间又省钱。

在纸上绘制你的App草图

好了现在你有了一个点子，那如何创建你的原型呢？原型有很多形式，可以是纸制的也可以是电子的。我通常是从手绘开始的，所以我推荐你在纸上绘制你的App草图。这是创建原型最简单的方式。并且纸是最快把你的想法记录下来形式之一。

例如我想创建一个美食类App用来记录我喜欢的餐馆。虽然Yelp非常好用，但是我还是想创建一个私人美食指南。这个App有以下特征：

1在主界面上列出所有喜欢的餐馆。

2创建一条餐馆的记录，并且从相簿中选一张照片作为餐馆的照片。

3记录餐馆的地址，并且能够和世界上其他吃货分享

4在地图上显示餐馆的地址

5查看其他吃货分享的照片。

我认为大家会喜欢这个主意。为了测试我的点子，我一开始在纸上绘制我的设计。可能某些人会说我不擅长画画。绘制你的App，没必要成为画家。画到图中这种层次已经足够和你的朋友展示你的想法了。

使用POP创建你的App原型

你可以用纸说明的你App。但是如果你可以创建一个有屏幕变化能够和你的潜在用户交互的App原型是不是更好？有很多工具可以供开发者创建应用原型。Pop app，Proto.io,Flinto和InvisionApp都是这类原型工具。在这本书上我将会使用Pop创建App原型，不过其他工具的用法是类似的。

Pop可以将你手绘的草图转换为原型。它使用相机获取你的草图或者直接从相册导入。为了喝图片交换，Pop提供了许多方式将你的屏幕联系起来。首先，在iPhone上下载Pop。同时从（下载地址）下载App原型。然后解压图片并且导入到你的iPhone中。

Pop很容易使用。当你第一次启动后，你可以看到你的工程列表。点击＋图标来创建一个新工程。接下来为工程取一个名字。然后选择存放处。默认情况下工程是空的。现在我们点击相机图标并且使用相机选项来获取你的草图。另外你可以从相册倒入草图。下图展示了一个Pop的示例工程。

从主屏幕开始，定义屏幕切换。POP允许你强调图片的某个指定区域或者某个被点击的指定区域。可以定义的屏幕切换类型有消失，前进，后退，升起，离开。从主屏幕开始，当点击任何一条记录App都应该导航至相应的细节屏幕。所以我们高亮被点击的记录，同时屏幕切换到“下一步”并且链接到细节屏幕。一旦你做出了改变，点击Play按钮和原型进行交互。随后当记录被点击后，App将会跳转到细节屏幕。

接下来你要做的就是重复以上的过程定义剩下的屏幕切换。当原型创建完毕，你就可以使用共享Share option和你的团队成员以及潜在拥有分享你的原型。

这样你就可以展示你的想法并且允许你尽量早的获取你的用户的反馈。如果你的用户不喜欢你的想法活着界面设计，这不是什么大事，这些只是草图而已。我们可以扔掉草图然后再做一套，或者修改某些令人不满意的地方让原型变的更好。你可以看到，这种方法可以节约你的时间和金钱。

前面说过，App原型可以有很多形式。手绘草图时很多种创建原型的方法之一。如果你是一个设计师，你可以使用photoshop或者sketch设计App原型。苹果的Keynote同样可以用来快速设计原型。Keynote是一个系统自带的设计简单App UI的工具。Keynotpia提供mock template让你的草图无缝转换到Keynote。下图展示了一个keynote创建的简单的屏幕示例。

同样的你可以将App屏幕导入到Pop并且定义屏幕切换。

小结

原型是App开发过程中一个非常普遍的过程。它可以让你快速构建一些可以工作的模型并且给用户展示。原型可以用来验证想法并且尽量早的获取反馈。如果你正在为客户创建App，使用原型可以让你的客户尽可能早的理解App的设计。

所以，无论你是一个独立开发者还是一个开发团队的成员，我希望你从今天开始使用原型。先在纸上或者使用Pop等其他原型工具创建原型，而不是直接开始编程。这可以让你创建没有返工的程序，节省你的时间和金钱。