第七章 介绍原型设计
QQ20151210-0@2x.png
如果图片值千字,原型设计值上千次会议.
- @IDEO
现在你有一些基本的iOS编程和界面编辑器的基本概念.像我一直说的,没有比真正创建一个app更好的方法来学习app开发.本书我们将一起创建一个真正的app.但是,我们不急于写代码.我们先构建一个原型设计.
每次我跟新手提到原型设计,会出现两个问题:
- 什么是原型设计?
- 为什么要做原型设计?
原型设计是一个产品的早期模型来测试概念或者图像化一个想法.原始性及曾经被用在许多行业.在建造建筑物之前,建筑师需要画一个建筑物的计划然后做建筑物的模型.航空公司在构建和装备飞机之前要先构建飞机的模型来测试设计缺陷.软件公司在创作真实的应用之前也要构建软件模型来探讨想法.在app开发环境中,原型设计是app的早期样本,没有完整的功能然后包含基本的UI甚至是草图.
原型设计是开发一个原型的进程然后可以提供很多帮助.首先,它帮助你们形象化想法然后可以更好的跟你小组成员和用户沟通你的想法.如果你是个人开发者和唯一的用户,你可能不需要原型设计,因为你知道要求和app是怎样工作的.所有的东西都在你脑子里,你确切的知道你想要什么和你需要构建什么.
但是,像那样的app开发很少发生.你可能在一个编程小组工作或者为客户构建app.即便你是个独立开发者,你也很可能开发一个app涉及特殊的用户群或者全球所有的用户.你不得不寻找一些方法来交流你想法或者测试你的想法.你可以用文字来解释你的想法,但是没有人像看另一个烦人的想法展示.没有什么方法比用一个工作demo来展示你的想法更好了.
通过创建一个原型设计,你可以更早的接触你的用户,他们会更好的理解app是怎样工作的然后指出漏掉了什么在前期开发的阶段.
原型设计同样允许你在没有构建真正的app的时候来测试你的想法.你可以展示原型设计给你的潜在客户然后在app构建之前获得反馈.这会为你节约时间和金钱.下图展示了原型设计的好处.
QQ20151210-1@2x.png
在纸上描述你的想法
现在你有了一个app想法你怎样为你的app创作一个原型?
原型可以采取很多形式.它可以是纸制的,也可以是数码的.它总是从手绘的概念开始,强烈建议用纸来勾勒出你的app设计.这是最简单的办法来创造app原型.纸仍然是最好的方法来快速记录你脑海里的所有想法.例如,我有个想法,构建一个食物app来保存我最喜欢的餐厅.我想为自己构建一个app来创造一个私人饮食指南.这个app有这些特征:
- 在主屏上列出最喜欢的餐厅
- 创建一个餐厅记录,从相册导入相片作为餐厅图片.
- 本地保存餐厅然后把它分享给世界上其他的美食家.
- 在地图上显示餐厅位置
- 观看其他美食家分享的餐厅
我觉得其他人也会喜欢这个想法.为了测试我的想法,我先把我的设计画在纸上.一些人说他们不擅长画图.你不需要编程一个艺术家来画你的app设计.下图展示的草图足够形象化你的想法和解释你的app给你的朋友们.
QQ20151211-0@2x.png
用POP来给你的app做原型设计
你可以在纸上图解你的app.但是如果你能创建一些屏幕交流不是更好吗,那样你的潜在用户能够互相交流app原型.这里有很多工具给开发者来做app的原型.POP软件,Proto.io,Flinto,Principle和InvisionApp都可以.我将用POP来创建app原型但是其他工具也可以做的同样的好.
POP软件可以把你的手绘图编程一个工作原型.你可以用相机捕捉你的手绘图或者从你的相册里倒入它们.为了与图片进行交互,app为你提供了各种视图转换来连接你的屏幕.你一会会看到我说的意思.
POP软件用起来很简单.当你登陆它,你会看到你的工程列表.点击+图标来创建一个新的工程.给你的工程命名(如Food Pin).创建好以后选择工程.默认情况下工程是空的.现在点击相机图标然后用相机选项来捕捉你的草图.或者,你可以从你的相册里导入草图.下图展示了POP工程案例.
QQ20151211-1@2x.png
从app主屏开始然后定义屏幕的转换.POP让你高亮图片特定的区域和按下的指定区域.然后定义过渡类型包括fade,next,back,rise和dismiss.对主屏来说,当按下任何记载时app应该可以导航到细节的屏幕.所以我们高亮记载,设置过渡为”Next”然后链接它到细节的屏幕.一旦你做出了改变,轻按Play按钮来与原型交互.当按下任何记载的时候,app将转到细节屏幕.
QQ20151211-2@2x.png
你仅仅需要重复这些步骤来定义其他的屏幕转换.当原型设计完成的时候,你可以用分享选项分享它给你的小队成员和潜在用户.
这是你怎样展示你的想法和今早的征求用户反馈.如果你的用户不喜欢这个想法或者屏幕设计,这不是一个伟大的想法.他们仅仅是草图.我们可以扔掉这些草图然后重新创建另一个.或者你可以微调一些做的不好的区域来让原型更好.你可以看到,这样可以节约你的时间和金钱.
之前说过,app原型可以有多种形式.手绘是创造原型的方法之一.如果你是个设计师,你可以用PS或者Sketch来设计app原型.苹果的Keynote同样也能用来快速的制作原型.它内置的绘制工具允许你来设计一个简单的app UI.Keynutpia提供模拟模板来组织你的想法.下图展示了一个用Keynote制作的简单的屏幕.
QQ20151211-3@2x.png
参考:学习更多关于怎样用Keynote创作原型,你可以参考
http://webdesign.tutsplus.com/tutorials/how-to-demo-an-ios-prototype-in-keynote--cms-22279.
