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

前端之家收集整理的这篇文章主要介绍了第四章 :构建你的应用程序原型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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


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


介绍原型

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

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

    @H_301_20@

    什么是原型 ?

    @H_301_20@

    为啥用原型 ?

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

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

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

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

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


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

现在你有一个idea , 怎么构建原型(后面用prototype)呢?

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

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

    @H_301_20@

    页面列出喜欢的餐厅

    @H_301_20@

    创建一个餐馆记录列表,从相册导入一个图片当做餐厅的形象

    @H_301_20@

    把餐厅信息存到本地 或者 分享给世界各地的吃货

    @H_301_20@

    可以看到其他人分享的餐厅

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


使用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 下载app prototype 。(这个地址好像被墙了。)

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

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

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

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

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

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


总结

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

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

猜你在找的Swift相关文章