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

专题目录:

IOS 8 开发入门--序言(一)

IOS 8 开发入门--序言(二)

第一章:创建你的第一个App(一)

第一章:创建你的第一个App(二)

第二章:使用Storyboard设计用户界面(一)

第二章:使用Storyboard设计用户界面(二)

第三章 Hello World App 浅述(二)

第四章 自动布局(一)

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

第六章 创建一个基于Table的简单App(一)

什么是原型

现在你已经对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等其他原型工具创建原型,而不是直接开始编程。这可以让你创建没有返工的程序,节省你的时间和金钱。�

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,568评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,612评论 4 59
  • 如果图片值千字,原型设计值上千次会议. @IDEO 现在你有一些基本的iOS编程和界面编辑器的基本概念.像我一直说...
    运营老周阅读 853评论 0 1
  • 九、金玲毒气 他们俩看着也快到中午了,决定先吃个午饭,下午再去古玩街逛逛。 谭久带着见喜去了一家名叫仙逸楼的店家去...
    五行缺水也缺你阅读 314评论 0 0
  • 谢谢朋友的记挂和关心
    妮妮Gloria阅读 139评论 0 1