第四章：构建你的应用程序原型

超、凢脫俗 2022-08-05 09:00 142阅读 0赞

## 第四章 ：构建你的应用程序原型 ##

`译者注：由于本人英语水平有限，尽可能描述出作者的本意。如有错误，及时指出。文中会省略部分技术无关的赘述`

--------------------

“It’s not about ideas. It's about making ideas happen.”
                                                        – Scott Belsky

![这里写图片描述][20150912210549550]

--------------------

### 介绍原型 ###

现在你已经对IOS编程有一个基本的概念。像我一直说的 ，学习APP开发最好的方式就是去开发一款app 。我们在本书中将会创建一个真正的app 。然而，我们并不着急着去编写代码 。我们先建立一个原型 (prototype)。

每次我对新手说起原型，都会被问及两个问题 ：

*  什么是原型 ？
 *  为啥用原型 ？

原型是产品的用于测试一个概念或一个可视化的早期模型主意。原型被用在许多产业 。在建造一个建筑之前 ， 建筑师需要画一个图纸 和做一个建筑模型 。航空公司在创造和组装一个飞机之前会创造一些原型测试各种缺陷。在应用程序开发的环境下 ，原型可以是一个app的早期样品，这个样品没有什么功能只有一些用户界面甚至只有草图 。

创建和开发原型可以为我们app提供很多优势 。首先 ， 它把你的idea可视化，并方便与其他成员或者客户交流。如果你是唯一的开发者和唯一的用户 ，你也许不需要编写原型帮你去定义需求和展示app的工作原理 。所有的事情都在你的脑子里而且你知道该怎么去做。

然而 ， app开发很少像这样。你会在一个team中工作或者给客户做一个app 。即使你是一个独立开发者 ，你开发一款app针对一些特定用户或者所有用户 。我必须找到一些方式去与你的idea沟通，测试你的idea 。 你也可以用语言去解释你的想法 ， 但是没有人会想听你无聊的讲解。没有比展示一个demo更好的方式了！！

通过创建一个原型 ， 你可以更早的和你的用户沟通而且他们可以更早的指出app缺失的地方 。

原型可以允许你在不构建应用程序的情况下测试你的idea 。你可以想你的潜力用户展示你的原型，在应用程序构建之前得到反馈 。这样可以节省时间和金钱。下图展示原型的好处

![这里写图片描述][20150912214000183]

--------------------

### 将应用程序的草图画在纸上 ###

现在你有一个idea ， 怎么构建原型（后面用prototype）呢？

prototype有很多形式，可以在纸上画也可以在电脑上画。我一般都是在纸上去画一个概念图 ，我也强烈建议你纸上画出你的app设计 。这是构建prototype最简单的方式 。而且纸是快速记录你脑子想法的最好方式 。

例如 ， 我想创建一个food app 允许我保存我喜欢的饭店 。想法很好 ， 我想给我自己创建一个food 引导的app 。这个app将会有这写特点：

*  主页面列出喜欢的餐厅
 *  创建一个餐馆记录列表，从相册导入一个图片当做餐厅的形象
 *  把餐厅信息存到本地 或者 分享给世界各地的吃货
 *  可以看到其他人分享的餐厅

我觉得会有很多人喜欢这个想法 ，为了测试我的想法，我把设计想法画在纸上。有人会说他不太擅长绘图 。你没必要把它画得非常有艺术 。下图展示了我画得一个草图 。

![这里写图片描述][20150912220821725]

--------------------

### 使用POP构建你的应用程序prototype ###

你可以把你的app话在纸上 。 但是这并不是很完美 ，如果你可以把它放你屏幕上去交互 ，然后展示给你的潜力用户让它可以跟你的prototype 进行交互 。 有很这方面工具供开发者使用 。 比如POP app ,Proto.io,Flinto 和 InvisionApp 等。我将会使用POP app，其他的工具跟的他功能差不多。

POP app 将你手工绘制出来的prototype变成一个运行的prototype 。 它允许你使用相机捕获你的图纸从相册导入app。为了使图按可交互 ，app 提供各种过渡方式帮助你连接你的屏幕 。  
首先为你的iPhone下载一个POP app 。然后从[https://www.dropbox.com/s/x6v8xlnbr7zusid/sketches.zip?dl=0][https_www.dropbox.com_s_x6v8xlnbr7zusid_sketches.zip_dl_0] 下载app prototype 。（这个地址好像被墙了。）

POP app 很容易使用 ， 当你第一次加载这个app，你将看到一个project 列表 。点击+按钮创建一个新的项目 ，然后给他起一个名字 ，选择这个项目。默认是一个空项目 ，现在点击相机按钮使用相机选项捕捉你的图像。后者直接从相册导入，下图展示一个简单的POP 项目 。

![这里写图片描述][20150912231333639]

从app的主页面开始构建屏幕过渡 。POP允许你高亮一个特殊区域然后指定目标页面，当你点击高亮区域的时候进入目标页面 。然后定义一个过渡类型 包括(fade, next, back, rise and dismiss)。针对home页面 ， app应该可以点击任何一个记录后导航到明细页面 。你改好后 。点击Play 按钮去和app prototype 交互 。你点击任何记录 app将会跳转到详情页面。

![这里写图片描述][20150912232341286]

你只需要重复上面的过程去定义其他的页面的过渡。当你完成你的prototype的时候，你可以使用分享选项你可以将它分享给你的team或者用户 。你的用户可以通过这个链接试用你的prototype：  
[https://popapp.in/projects/542b9b22fdaf026132c03b74/preview][https_popapp.in_projects_542b9b22fdaf026132c03b74_preview]

这样可以让你展示你的idea ，并且可以及早听取用户的反馈意见 。如果你的用户不喜欢你的idea 或者页面设计 ，这并不算一个大问题 。这仅仅是一个草图 。我们可以把它扔掉重新创建一个 。也可以调整一个不太好的部分使app变的更好 。这样可以节省时间和金钱 。

如前所述 ，应用程序原型有很多形式 。 手绘只是其中一种 。如果你是一个设计师 ， 你也许会使用Photoshop 或者 Sketch 去设计你的app prototype 。苹果的Keynote也可以快速构建prototype 。它内置的绘图工具可以允许你设计简单的UI 。下图展示了使用Keynote构建的一个简单的UI 。这里提供了很多[模板][Link 1]

![这里写图片描述][20150912234148485]

你可以把这些app UI导入POP app 然后定义过渡方式 。你可以点击这个[连接][Link 2] 把玩下这个app prototype 。

--------------------

### 总结 ###

构建原型是一个应用开发都会有的过程 ， 它允许你快速构建一个可用的东西给你的用户看 。prototype用来测试一个idea 或者快速得到用户反馈 。如果你为用户构建一个app ， 创建一个一个prototype让你用户了解你app设计理念 。

所以不管你是一个独立开发者还是一个团队的成员 ，我希望你从今天开始要构建应用程序prototype 。而不是直接去构建你的app ，先把你的想法展示在纸上然后用POP或者其他工具连接起来 。这将节省你大量时间和金枪避免创建一个没有吸引力的app。

> 学习iOS，有他就够了，[小码哥视频，传智、黑马、各种swift书籍][swift]

[20150912210549550]: /images/20220731/c362aa9c9a78425bb2173c54430451c3.png
[20150912214000183]: /images/20220731/f098e446e2f145ad9e86e214e9c8e58a.png
[20150912220821725]: /images/20220731/90ca04bb36ab4e4395f0527d30166248.png
[https_www.dropbox.com_s_x6v8xlnbr7zusid_sketches.zip_dl_0]: https://www.dropbox.com/s/x6v8xlnbr7zusid/sketches.zip?dl=0
[20150912231333639]: /images/20220731/f062a777395746ca8f145c756504959a.png
[20150912232341286]: /images/20220731/8c0826a8e99b4916b7d7afc19937b4e1.png
[https_popapp.in_projects_542b9b22fdaf026132c03b74_preview]: https://popapp.in/projects/542b9b22fdaf026132c03b74/preview
[Link 1]: http://keynotopia.com/keynote-mockups-templates/
[20150912234148485]: /images/20220731/f5bb0bc06c574967b2acf5e985dac743.png
[Link 2]: https://popapp.in/w/projects/54326ed78dcd38076e692f34/preview/54326ef58dcd38076e692f3b
[swift]: https://item.taobao.com/item.htm?spm=a230r.1.14.85.JFN9U2&id=529819836478&ns=1&abbucket=7#detail