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

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

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

介绍原型

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

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

  • 什么是原型 ?

  • 为啥用原型 ?

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

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

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

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

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

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

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

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

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

  • 主页面列出喜欢的餐厅

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

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

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

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

使用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。

第四章 :构建你的应用程序原型的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. 详解如何通过H5(浏览器/WebView/其他)唤起本地app

    这篇文章主要介绍了详解如何通过H5(浏览器/WebView/其他)唤起本地app的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

    这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  7. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. HTML5拍照和摄像机功能实战详解

    这篇文章主要介绍了HTML5拍照和摄像机功能实战详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. ios – 在没有iPhone6s或更新的情况下测试ARKit

    我在决定下载Xcode9之前.我想玩新的框架–ARKit.我知道要用ARKit运行app我需要一个带有A9芯片或更新版本的设备.不幸的是我有一个较旧的.我的问题是已经下载了新Xcode的人.在我的情况下有可能运行ARKit应用程序吗?那个或其他任何模拟器?任何想法或我将不得不购买新设备?解决方法任何iOS11设备都可以使用ARKit,但是具有高质量AR体验的全球跟踪功能需要使用A9或更高版本处理器的设备.使用iOS11测试版更新您的设备是必要的.

随机推荐

  1. Swift UITextField,UITextView,UISegmentedControl,UISwitch

    下面我们通过一个demo来简单的实现下这些控件的功能.首先,我们拖将这几个控件拖到storyboard,并关联上相应的属性和动作.如图:关联上属性和动作后,看看实现的代码:

  2. swift UISlider,UIStepper

    我们用两个label来显示slider和stepper的值.再用张图片来显示改变stepper值的效果.首先,这三个控件需要全局变量声明如下然后,我们对所有的控件做个简单的布局:最后,当slider的值改变时,我们用一个label来显示值的变化,同样,用另一个label来显示stepper值的变化,并改变图片的大小:实现效果如下:

  3. preferredFontForTextStyle字体设置之更改

    即:

  4. Swift没有异常处理,遇到功能性错误怎么办?

    本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请发送邮件至dio@foxmail.com举报,一经查实,本站将立刻删除。

  5. 字典实战和UIKit初探

    ios中数组和字典的应用Applicationschedule类别子项类别名称优先级数据包contactsentertainment接触UIKit学习用Swift调用CocoaTouchimportUIKitletcolors=[]varbackView=UIView(frame:CGRectMake(0.0,0.0,320.0,CGFloat(colors.count*50)))backView

  6. swift语言IOS8开发战记21 Core Data2

    上一话中我们简单地介绍了一些coredata的基本知识,这一话我们通过编程来实现coredata的使用。还记得我们在coredata中定义的那个Model么,上面这段代码会加载这个Model。定义完方法之后,我们对coredata的准备都已经完成了。最后强调一点,coredata并不是数据库,它只是一个框架,协助我们进行数据库操作,它并不关心我们把数据存到哪里。

  7. swift语言IOS8开发战记22 Core Data3

    上一话我们定义了与coredata有关的变量和方法,做足了准备工作,这一话我们来试试能不能成功。首先打开上一话中生成的Info类,在其中引用头文件的地方添加一个@objc,不然后面会报错,我也不知道为什么。

  8. swift实战小程序1天气预报

    在有一定swift基础的情况下,让我们来做一些小程序练练手,今天来试试做一个简单地天气预报。然后在btnpressed方法中依旧增加loadWeather方法.在loadWeather方法中加上信息的显示语句:运行一下看看效果,如图:虽然显示出来了,但是我们的text是可编辑状态的,在storyboard中勾选Editable,再次运行:大功告成,而且现在每次单击按钮,就会重新请求天气情况,大家也来试试吧。

  9. 【iOS学习01】swift ? and !  的学习

    如果不初始化就会报错。

  10. swift语言IOS8开发战记23 Core Data4

    接着我们需要把我们的Rest类变成一个被coredata管理的类,点开Rest类,作如下修改:关键字@NSManaged的作用是与实体中对应的属性通信,BinaryData对应的类型是NSData,CoreData没有布尔属性,只能用0和1来区分。进行如下操作,输入类名:建立好之后因为我们之前写的代码有些地方并不适用于coredata,所以编译器会报错,现在来一一解决。

返回
顶部