介绍原型设计,十九个能够帮您简化移动app开采
分类:计算机编程

专题目录:

图片 1QQ20151210-0@2x.png

移动端用户体验设计正日趋成熟。

原文地址:转载:iOS开发之工具篇-20个可以帮你简化移动app开发流程的工具(原型设计)作者:奶牛

IOS 8 开发入门--序言

如果图片值千字,原型设计值上千次会议.

衡量这一点的方法之一就是看工具。原型工具可以让我们创建线框图以及点击事件,比如Balsamiq、Axure以及Fireworks,帮助我们诠释目标用户体验。跨浏览器的框架工具如PhoneGap、Zurb Foundation以及jQuery Mobile可以帮助我们用互联网本地化语言来创建原型:HTML、CSS以及JavaScript。

转载:

IOS 8 开发入门--序言

  • @IDEO

为什么?举个草图的案例

如果想进入移动app开发这个领域,你总能从别的开发者或者网上或者书上找到各种各样的方法和工具,对于新手来说,还没有摸清门路就已经陷入迷茫了。这里推荐20个可以帮你简化app开发流程的工具。很多开发者都使用过这些工具,涉及原型和设计、编程、测试以及最后的营销,基本上涵盖了整个开发过程。

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

现在你有一些基本的iOS编程和界面编辑器的基本概念.像我一直说的,没有比真正创建一个app更好的方法来学习app开发.本书我们将一起创建一个真正的app.但是,我们不急于写代码.我们先构建一个原型设计.每次我跟新手提到原型设计,会出现两个问题:

与以往几乎没有时间来设计极致的体验来比,我们似乎处于一个相对更好的处境。然而,这些工具也伴随着隐藏成本:它们引导我们跳过了创造一个良好设计的产品必经的关键步骤——也就是花时间去理解我们所面对的问题。

 

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

  • 什么是原型设计?
  • 为什么要做原型设计?原型设计是一个产品的早期模型来测试概念或者图像化一个想法.原始性及曾经被用在许多行业.在建造建筑物之前,建筑师需要画一个建筑物的计划然后做建筑物的模型.航空公司在构建和装备飞机之前要先构建飞机的模型来测试设计缺陷.软件公司在创作真实的应用之前也要构建软件模型来探讨想法.在app开发环境中,原型设计是app的早期样本,没有完整的功能然后包含基本的UI甚至是草图.原型设计是开发一个原型的进程然后可以提供很多帮助.首先,它帮助你们形象化想法然后可以更好的跟你小组成员和用户沟通你的想法.如果你是个人开发者和唯一的用户,你可能不需要原型设计,因为你知道要求和app是怎样工作的.所有的东西都在你脑子里,你确切的知道你想要什么和你需要构建什么.但是,像那样的app开发很少发生.你可能在一个编程小组工作或者为客户构建app.即便你是个独立开发者,你也很可能开发一个app涉及特殊的用户群或者全球所有的用户.你不得不寻找一些方法来交流你想法或者测试你的想法.你可以用文字来解释你的想法,但是没有人像看另一个烦人的想法展示.没有什么方法比用一个工作demo来展示你的想法更好了.通过创建一个原型设计,你可以更早的接触你的用户,他们会更好的理解app是怎样工作的然后指出漏掉了什么在前期开发的阶段.原型设计同样允许你在没有构建真正的app的时候来测试你的想法.你可以展示原型设计给你的潜在客户然后在app构建之前获得反馈.这会为你节约时间和金钱.下图展示了原型设计的好处.

这也就是为什么我会建议在打开你钟爱的工具之前,先手绘着理解问题并想出概念。

原型和设计

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

图片 2QQ20151210-1@2x.png

现在,你可能想的是如下问题:

有了一个很好的创意后,你要做的不是立刻编程,而是设计UI和创建原型,这样你才能知道app如何运行,根据用户体验需要做哪些调整。

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

现在你有了一个app想法你怎样为你的app创作一个原型?原型可以采取很多形式.它可以是纸制的,也可以是数码的.它总是从手绘的概念开始,强烈建议用纸来勾勒出你的app设计.这是最简单的办法来创造app原型.纸仍然是最好的方法来快速记录你脑海里的所有想法.例如,我有个想法,构建一个食物app来保存我最喜欢的餐厅.我想为自己构建一个app来创造一个私人饮食指南.这个app有这些特征:

我们的截止时间很紧迫,根本没有时间再去涂鸦。我们必须马上开始。在XX工具里设计是目前为止比较快的方式,我必须很快能看到结果。我们必须把结果给我们的客户或合作伙伴或同事看。我们不能给他们看手绘的线稿。不好意思,我真的不会画画。

App Cooker

第三章 Hello World App 浅述

  • 在主屏上列出最喜欢的餐厅
  • 创建一个餐厅记录,从相册导入相片作为餐厅图片.
  • 本地保存餐厅然后把它分享给世界上其他的美食家.
  • 在地图上显示餐厅位置
  • 观看其他美食家分享的餐厅我觉得其他人也会喜欢这个想法.为了测试我的想法,我先把我的设计画在纸上.一些人说他们不擅长画图.你不需要编程一个艺术家来画你的app设计.下图展示的草图足够形象化你的想法和解释你的app给你的朋友们.

我不仅听别人几次这样反对,我对自己也这么说过。

图片 3

第四章 自动布局

图片 4QQ20151211-0@2x.png

定义问题和解决方案

AppCooker ($39.99)不仅是一个创建原型的优秀工具,它提供的许多功能还可以帮助你将程序发布到App store中。它集成了Dropbox,Box.net和photo roll,你可以直接将图标和其它UI资源导入到原型设计工具中。你可以利用渐变和填充等功能来创建简单的形状,并且可以访问几乎所有苹果默认提供的UI控件。

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

你可以在纸上图解你的app.但是如果你能创建一些屏幕交流不是更好吗,那样你的潜在用户能够互相交流app原型.这里有很多工具给开发者来做app的原型.POP软件,Proto.io,Flinto,Principle和InvisionApp都可以.我将用POP来创建app原型但是其他工具也可以做的同样的好.POP软件可以把你的手绘图编程一个工作原型.你可以用相机捕捉你的手绘图或者从你的相册里倒入它们.为了与图片进行交互,app为你提供了各种视图转换来连接你的屏幕.你一会会看到我说的意思.POP软件用起来很简单.当你登陆它,你会看到你的工程列表.点击 图标来创建一个新的工程.给你的工程命名(如Food Pin).创建好以后选择工程.默认情况下工程是空的.现在点击相机图标然后用相机选项来捕捉你的草图.或者,你可以从你的相册里导入草图.下图展示了POP工程案例.

手绘可以让我们一边探索问题一边定义解决方案。它可以结构化我们目前对问题的理解,同时帮助我们找到可能的解决方案。当我们手绘出自己的想法时,新的主意也会萌生。模糊和缺乏细节的草图会培育出新的思路。在这里,模糊是件好事,因为我们会自动尝试填补脑中的空白。这也正是草图富有创造性的原因:它捕捉到我们已经成型的想法,并迸发出新的火花。正如Bill Buxton在《Sketching User Experiences》中提到的:

 

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

图片 5QQ20151211-1@2x.png

从草图上学习到的内容很大程度上是基于其表现的模糊性。也就是说,他们并不指定所有事情,而是鼓励创造者们不自觉的融入各种不同的解释。

如果你不准备深入图形设计,可以使用App Cooker将图片资源合理的放在一起,以创建一个粗糙的、统一的原型。AppCooker还有一个很容易使用的动态链接功能,通过该功能,你可以把各种画面连接起来(在UX设计阶段中画面的各种连接方法)。

图片 6

从app主屏开始然后定义屏幕的转换.POP让你高亮图片特定的区域和按下的指定区域.然后定义过渡类型包括fade,next,back,rise和dismiss.对主屏来说,当按下任何记载时app应该可以导航到细节的屏幕.所以我们高亮记载,设置过渡为”Next”然后链接它到细节的屏幕.一旦你做出了改变,轻按Play按钮来与原型交互.当按下任何记载的时候,app将转到细节屏幕.

通过手绘不同的解决方案,我们不用立刻实现其中一种,就可以探索他们的可行性。这为我们提供了新的见解,也提出了新的问题。手绘本质上就是一个头脑风暴的锻炼。

Pop

什么是原型

图片 7QQ20151211-2@2x.png

草图的成本

图片 8

现在你已经对iOS开发有了基本了解了。正如我一直说的,没有比自己动手真正开发app更好的方法来学习app开发。在这本书里我们会开发一个真正的app。但是现在先不着急写代码,我们需要先设计一个程序原型。

你仅仅需要重复这些步骤来定义其他的屏幕转换.当原型设计完成的时候,你可以用分享选项分享它给你的小队成员和潜在用户.这是你怎样展示你的想法和今早的征求用户反馈.如果你的用户不喜欢这个想法或者屏幕设计,这不是一个伟大的想法.他们仅仅是草图.我们可以扔掉这些草图然后重新创建另一个.或者你可以微调一些做的不好的区域来让原型更好.你可以看到,这样可以节约你的时间和金钱.之前说过,app原型可以有多种形式.手绘是创造原型的方法之一.如果你是个设计师,你可以用PS或者Sketch来设计app原型.苹果的Keynote同样也能用来快速的制作原型.它内置的绘制工具允许你来设计一个简单的app UI.Keynutpia提供模拟模板来组织你的想法.下图展示了一个用Keynote制作的简单的屏幕.

把我们脑袋里的东西倒出来最快的方式就是拿起一只笔和一张纸迅速的画出来。在我们钟爱的原型工具里来做这件事情则需要花费太多的时间:我们需要先创 建一个项目,使用合适的库,将一些小矩形放在画布上,画一些小箭头来连接这些矩形,把所有的元件都调整一下让它们看上去更好看一些——30分钟过去了。如果我们不喜欢纸上画的东西,可以将它扔进垃圾桶然后重新开始。然而用原型工具的话,扔掉一些东西就比较困难了,因为我们花费了时间和努力去创建它——就算那个想法不是最好的,重新开始也更困难。反过来说,纸上手绘的内容则成本低廉,实现迅速。

Pop就是这样一款应用。有了它之后,做出一款产品原型只需要五个工具:Pop、iPhone、纸、笔和橡皮擦。让你轻松做出可在iPhone上演示的应用原型。

每次我向初学者提到原型,总是会遇到两个问题:

图片 9QQ20151211-3@2x.png

图片 10

画图:在纸上画出完整构架图,最常规的几个页面、按钮、主流程跑通就好。
拍照:用POP拍下这些草图,应用会自动调整亮度和对比度使其清晰可见,存到POP app内部,
编辑:将拍下的照片按你理想中的顺序放置,利用链接点描摹出各个板块之间的逻辑关系,点击Play就可以演示整个应用了。

1什么是原型?

参考:学习更多关于怎样用Keynote创作原型,你可以参考.

捕捉和评估设想最快的方式就是将它勾画出来。

Make app icon  

2为什么要使用原型?

把草图作为沟通工具

图片 11

原型是一个产品的早期模型,主要目的是为了测试某些概念或者程序外观。在许多工业领域都使用原型。在建房子之前,建筑师会为房子绘制设计图和创建模型。飞机制造商在正式生产飞机之前会制作飞机原型用于测试可能存在的缺陷。软件公司在正式开发产品之前会创建原型来验证设计思想。在app开发领域原型是产品早期的样品,它只包含部分功能和最基础的UI甚至仅仅是草图。

不过俗话说,一图胜千言。草图可以让我们与合作者以及项目关注人们一块探讨对项目当前的理解。我们可以使用很多不同的表现方式去诠释项目不同的方面(下一个章节中我们会介绍最常用的一种方式)。在《餐巾纸的背后》一书中,Dan Roam提到:图片可以表示很复杂的概念,概括大量信息,并以一种我们容易看容易理解的方式呈现,它们在澄清和解决各种问题上都是有用的。

Make app icon是一个可以帮你快速生成app图标的web工具。Make app icon可以帮你生成苹果指导方针所说的各种分辨率icon,包括retina设备和非retina设备在内。另外,还可以制作Android平台的多个icon。

原型设计是指创建原型的过程,原型设计有很多的优点。第一它将你的观点通过可视化的方式表现出来,让你更好的和你的团队或者用户之间沟通。如果你既是开发者又是用户的话,你可能不需要原型,因为需求由你自己提出实现也由你自己。所有的东西都在你脑子里,你明确知道你想要什么以及你要创建什么。

我们的小伙伴可以直接指出我们想法上的鸿沟,共同讨论可能的解决方案和替代方案。他们可以很好的理解我们的草图,并且在想法的细节上给出一些反馈。向其他人展示我们的想法也会让我们反思自己的想法。借此展示想法,我们会看到错误的地方以及找到更好的替代方案。

虽然看起来是个很简单的工具,但可以帮你节省不少时间,使用起来也比较方便。你在Make app icon网页添加你将要用来做icon的图片,然后留下你的邮箱地址,系统最终会以zip文件形式发送给你,支持PNG、JPG以及PSD等不同格式文件。(发送时间会有点长...)

但是这种开发情况很少见。大多数情况下你在一个团队里工作或者为客户开发软件。即使你是独立开发者,你也可能开发一款面向全球或者特别群体的应用。你必须找到一个方法来与人交流和测试你的想法。你可以用文字表达你的想法,但是没有人愿意看无聊的文字屏幕来理解你的想法。最好的方法你使用一个demo来向用户展示你的想法。

把草图作为合作工具

你也会意识到之前你在阅读各个icon大小说明和调整每个icon方面浪费了多少时间。

通过创建原型,你可以尽早的和用户进行交流,用户会更好的理解app是如何工作的,并且尽早的指出还缺什么。

草图作为一种有力的工具可以让项目关注人们在设计过程中尽早参与进来。在定义的过程中,以下鸡生蛋的问题非常典型:项目关注人们在看到一些可视化的 解决方案之前,是没法制定一套完整的需求的,但是我们设计师在没确定需求稳定完善之前,是不愿意开工去实施解决方案的——我们想要去避免不必要的反复修 订,因为这会导致额外的工作。摆脱这种困境的一种方法是在协作式工作坊里来手绘可能的解决方案,比如这一期设计工作室(参看Will Evans的文章Introduction to Design Studio Methodology)。我们可以带领项目关注人们一步步的理解我们的概念(和其他备案),向他们解释他们的需求对设计的影响。

Fluid UI

原型还可以在不创建真实App的情况下验证你的想法。你可以尽早的向你的潜在客户展示你的原型,从而在App开发之前的获得反馈。这样既节约时间又省钱。

草图的入门门槛也很低,非设计师也可以参与。(到底是否通过手绘的方式与项目关注人讨论,即取决于个人偏好,也存在许多争议。你需要自己做决定。)由于草稿是粗略不完整的,给出反馈也就更加容易。一些人会隐忍不发,直到看到一个看上去完成度很好的页面,因为他们认为所有的工作必须要有一定的深入才 行。高保真的视觉效果也会分散大家的注意力——大家会更倾向于讨论视觉效果或微妙细节,而不是聚焦在想法概念上。草图会让他们聚焦在核心概念上。你唯一需要克服的就是不愿意将未经打磨的作品展示给他人的心理障碍。

图片 12

图片 13

草图不是绘画

Fluid UI是一款用于移动开发的Web原型设计工具,可以帮助设计师高效地完成产品原型设计。优点:无设备限制,无平台限制(Windows、Mac以及Linux系统),支持Chrome和Safari浏览器(Chrome浏览器上的app也可离线使用)。采取拖拽的操作方式,不需要程序员来写代码。另外,Fluid UI资源库非常丰富,有针对iOS、Android以及Windows 8的资源。如果你觉得库存资源不能满足你的需求,你也可以自行添加。

在纸上绘制你的App草图

一个常见的误区就是你的草图必须要画的很漂亮。但交互设计可不是上艺术课。你的草图不需要看上去很漂亮;它们只需要表达出你的想法就可以。它们应该是引发讨论和催生想法的;它们并不是挂在墙上的艺术品。只要你会画方框,箭头,圆圈和简笔画,你就可以画草图。正如Joshua Brewer在Sketch, Sketch, Sketch一文中提到:草图不是最终目标。最终目标是在手绘过程中你学到了什么。所以即使你不会手绘也不用担心。

 

好了现在你有了一个点子,那如何创建你的原型呢?原型有很多形式,可以是纸制的也可以是电子的。我通常是从手绘开始的,所以我推荐你在纸上绘制你的App草图。这是创建原型最简单的方式。并且纸是最快把你的想法记录下来形式之一。

学习如何手绘不是本文的内容,但是可以从以下的宣讲、文章以及书目当中学习到一些基础:

对于喜欢快速开发的小团队来说,Fluid UI高保真模拟用户体验和操作非常适合。开发人员甚至在创建原型后还可以进行触摸测试,分享移动用户体验。另外,开发人员还可以在Fluid UI上进行迭代开发!Fluid UI提供免费版本和付费版本:免费版支持1个项目,其余根据支持项目数目不同进行收费,比如29美元/月支持3个项目,49美元/月支持10个项目,129美元/月支持10个以上项目。

例如我想创建一个美食类App用来记录我喜欢的餐馆。虽然Yelp非常好用,但是我还是想创建一个私人美食指南。这个App有以下特征:

  • The Art of Sketching Interfaces(PPT文档),作者Jason Mesut和Sam Smith
  • Sketching 101 (PPT文档),作者Jackson Fox
  • The Messy Art of UX Sketching,作者Peiter Buick
  • 《Sketching User Experiences: The Workbook》,作者Saul Greenberg,Sheelagh Carpendale,Nicolai Marquardt,Bill Buxton(Morgan Kaufman出版:2011)

Sketch

1在主界面上列出所有喜欢的餐馆。

如何手绘

图片 14

2创建一条餐馆的记录,并且从相簿中选一张照片作为餐馆的照片。

现在,但愿我已经说服你认同手绘应该是你工作流程中的一部分了。让我们聊一聊在移动项目中手绘什么吧。

Sketch是一款Mac上的app,是一款优秀的Vector/Pixel混合型开发工具,可以帮你创建retina图像。这款app可以当做是Photoshop和Fireworks的替代品,包含大量开发者友好型功能,比如“export to css”和“export for retinaoptions”。Get Sketch (售价$49,15天免费试用)。

3记录餐馆的地址,并且能够和世界上其他吃货分享

发散式手绘

4在地图上显示餐馆的地址

一开始,你需要为你的移动应用或网站收集不同的创意。开始绘制出针对一个关键页面或其中一部分的各种版本。目标有两个:获取大量不同的想法,同时加以探索和评价。想法越多,后期的选择就越多。这个阶段通常被称为发散式手绘。

5查看其他吃货分享的照片。

这个阶段的手绘有一种有效的多页模版的工具。它提供了一页以内绘制6个不同版本方案的空间,并且它留出了指引描述的空间。不同创意一起呈现,为后续的比较和讨论提供便捷。有很多在线模版(我最常使用Erik Loehfelm的模板)。选一个你喜欢的模板。

我认为大家会喜欢这个主意。为了测试我的点子,我一开始在纸上绘制我的设计。可能某些人会说我不擅长画画。绘制你的App,没必要成为画家。画到图中这种层次已经足够和你的朋友展示你的想法了。

图片 15

图片 16

各种全局导航的变化方案线框稿

使用POP创建你的App原型

上面的截图展示了关于一个App主菜单六个不同设计方案(顺带说一句,它生动地证明了我的草图并不漂亮)。我并不总能想出6个不同版本(我喜欢告诉自己我是一个追求结构的人),不过我会针对一个单页面努力创造至少3种变化方案。因为这是一场头脑风暴,并且你会在后续的讨论中需要多种选择的可能性。在这里数量即朋友。

你可以用纸说明的你App。但是如果你可以创建一个有屏幕变化能够和你的潜在用户交互的App原型是不是更好?有很多工具可以供开发者创建应用原型。Pop app,Proto.io,Flinto和InvisionApp都是这类原型工具。在这本书上我将会使用Pop创建App原型,不过其他工具的用法是类似的。

如果你碰巧才思枯竭,浏览一些手机UI图册去激发新思路(例如 Inspired UI, Pttrns, Lovely UI 和UI Parade)。它们演示了按主题或特性分组的解决方案(例如主菜单,聊天窗口)。汇集起你喜欢的草图,组合成你自己的创意。养成对每张草图命名的习惯。这样更容易标注出方案之间的差别,并便于后续引用。我会增加说明和标注去解释草图以及它们后面贯穿的思路(比如优点、缺点、与其他方案之间的抉择、问题、新特性,等等)。打标签和登记日期同样是不错的习惯。

Pop可以将你手绘的草图转换为原型。它使用相机获取你的草图或者直接从相册导入。为了喝图片交换,Pop提供了许多方式将你的屏幕联系起来。首先,在iPhone上下载Pop。同时从(下载地址)下载App原型。然后解压图片并且导入到你的iPhone中。

收敛式手绘

Pop很容易使用。当你第一次启动后,你可以看到你的工程列表。点击+图标来创建一个新工程。接下来为工程取一个名字。然后选择存放处。默认情况下工程是空的。现在我们点击相机图标并且使用相机选项来获取你的草图。另外你可以从相册倒入草图。下图展示了一个Pop的示例工程。

一旦你对一个界面绘制了多个版本的草稿时,就可以选择最佳解决方案了。不幸的是,单一的草图很难验证所有界面。大多数情况下,你需要糅合几个创意或创意中的不同方面形成优胜概念。为了达到这个目的,你需要通过绘制更详尽的草图来深入探究。利用空白区域做标注。草草记下全部问题、新想法、要点或不明之处,以及留待讨论的事项。这些都将帮助他人更好的理解你的思路。这项工作通常被称为收敛式手绘。

图片 17

更多关于发散式手绘和收敛式手绘的信息,请查看 Leah Buley在2010年失败者大会(FailCon大会)的演说:Good Design Faster,和Brandon Shauer的文章Sketchboards: Discover Better Faster UX Solutions。

从主屏幕开始,定义屏幕切换。POP允许你强调图片的某个指定区域或者某个被点击的指定区域。可以定义的屏幕切换类型有消失,前进,后退,升起,离开。从主屏幕开始,当点击任何一条记录App都应该导航至相应的细节屏幕。所以我们高亮被点击的记录,同时屏幕切换到“下一步”并且链接到细节屏幕。一旦你做出了改变,点击Play按钮和原型进行交互。随后当记录被点击后,App将会跳转到细节屏幕。

创建UI流程

图片 18

在归结几个关键页面的创意后,下一步就要探索它们如何配合使用了。为此,创建一些UI流程(也就是一系列的关键页面)展示一个用户将如何通过你的解 决方案完成一则任务。UI流程强调了使用什么界面元素(例如点击哪个按钮或使用何种手势),系统如何反馈(例如系统通过一个动画、转场、弹出框或新页面做 出反馈)。它们同样展示关键界面的不同状态(例如,最初的空白然后填入内容)。你可以视觉化呈现一个UI流程中的不同结果(例如搜索有结果页和搜索无结果页)。你的流程最好不再仅仅是单线。不同的分支流程将展示不同的结果。不过要尽量限制单个UI流程中分支的数量。每增加一个分支都会提升复杂度,让你的流程难以理解,也令它们很难被解释清楚。

接下来你要做的就是重复以上的过程定义剩下的屏幕切换。当原型创建完毕,你就可以使用共享Share option和你的团队成员以及潜在拥有分享你的原型。

图片 19

这样你就可以展示你的想法并且允许你尽量早的获取你的用户的反馈。如果你的用户不喜欢你的想法活着界面设计,这不是什么大事,这些只是草图而已。我们可以扔掉草图然后再做一套,或者修改某些令人不满意的地方让原型变的更好。你可以看到,这种方法可以节约你的时间和金钱。

UI流程视觉化呈现了用户如何从A到B的过程。

前面说过,App原型可以有很多形式。手绘草图时很多种创建原型的方法之一。如果你是一个设计师,你可以使用photoshop或者sketch设计App原型。苹果的Keynote同样可以用来快速设计原型。Keynote是一个系统自带的设计简单App UI的工具。Keynotpia提供mock template让你的草图无缝转换到Keynote。下图展示了一个keynote创建的简单的屏幕示例。

你不需要绘出所有的用例,选择重要且被使用最多的用例。帕累托原则是个很好的标准:20%的功能会在80%的时间里被使用到。我通常从一则重要用例开始绘制并最终解决它。我会强调出各个界面之间的交互,通常用箭头连接彼此。我会解释每一步骤并标记重要页面。同样,我会宽泛地做上注释。关于如何激发手机界面和UI流程绘制创意,请查看Gisele Muller的文章Inspiring UI Wireframe Sketches; MOObileFrames 一个提供手机界面线框图的博客;Wireframes,Jakub Linowski的个人站点。你也可以将Jakub的Interactive Sketching Notation(PDF文档)运用到你的UI流程中。

图片 20

操作步骤

同样的你可以将App屏幕导入到Pop并且定义屏幕切换。

为了给你更多的上下文环境,并演示上文提及的三种方式之间的关系,现在提供一个典型手绘的步骤分解:

小结

  • 列出已有的信息和确立的目标
  • 绘制第一组草图(例如一个关键界面的各种方案或一个初始UI流程)
  • 自我复查草图每个方案的优点和缺点是什么?UI组件和数据是否保持一致?(就是说同一任务中是否使用了相同的组件)数据展示方式是否相同?交互选项是否明确?
  • 征询他人的意见。从同事开始再到潜在用户。他们的第一印象是什么?他们最喜欢哪个?为什么?最不喜欢哪个?为什么?草图中哪些信息他们不清楚?他们提了什么改进意见?为什么?
  • 重审各个概念方案是否可以合并各个概念方案的优点于一体?草图能进一步清理吗?步骤能进一步缩减吗?
  • 依据最初的反馈再次复查是否引入新的问题?你可以从中得到什么启发?

原型是App开发过程中一个非常普遍的过程。它可以让你快速构建一些可以工作的模型并且给用户展示。原型可以用来验证想法并且尽量早的获取反馈。如果你正在为客户创建App,使用原型可以让你的客户尽可能早的理解App的设计。

你是否发现,这里有很多的为什么。这是因为手绘是为了在提出解决方案的同时增进对问题的理解。在手绘后写下绘制过程中产生的的问题。它们会指引你走向正确的方向。

所以,无论你是一个独立开发者还是一个开发团队的成员,我希望你从今天开始使用原型。先在纸上或者使用Pop等其他原型工具创建原型,而不是直接开始编程。这可以让你创建没有返工的程序,节省你的时间和金钱。�

超越手绘

在创建关键页面和核心用例的草图后,你会希望在真实的手机上试验你的概念了。像Pop和Protosketch实现了导入草图的照片,将它们转变成原型。这种超快的低保真方法可以对交互方案找到一些感觉。这两款应用都允许你定义可点击热区和页面的切换,这令得交互原型更真实。此外,可以选择导入页面到像Axure这类更高级的软件中生成原型。

无论你选择什么工具,你的目标是在真实的手机上用很小的代价快速测试原型。

便携小贴士

手绘可以帮助你更好的理解问题并可视化潜在的解决方案。这是一种快速且省钱的头脑风暴方式,同时它也在锁定方案前测试很多的概念。手绘加速了概念创想和反复阶段,在方案变更较容易的阶段实现了早期问题反馈。在你下次手绘环节中,请牢记以下原则。它们能帮助你保持正确:

  • 偷懒 别尝试去再造一个轮子。手绘时利用现成的模版。
  • 激发灵感 浏览设计范式库和手机UI图库,查看线框图示例。挑选你喜欢的,糅合你自己的想法,创造一些新方案。
  • 适可而止 你的手绘要能传达你的想法。不要迷失在(不重要的)细节中。
  • 帕累托怎么用? 你解决方案中只有小部分特性将被最频繁地使用。聚焦在它们上面。想清楚哪20%的方案会在80%的时间里被用到?
  • 保持统一性 用已有的手绘标记或创建一种你自己的方式。这样是的你的手绘更可靠。同事能较好地理解你的风格,花更少的时间浏览完手绘并给予反馈。
  • 详尽注释 手绘过程中,会涌现各种新命题、想法、问题。记下它们,否则,你就忘了。
  • 开放心态 将你的手绘公之于众。把它们钉在墙上,并勤于向他人演示方案并获取反馈。
  • 陷入怀疑时,继续手绘 当你不能确信某个方案时,重新开始衍化方案。列举出它们的利弊并从反馈中想清楚什么是最佳方案。

本文由pc28.am发布于计算机编程,转载请注明出处:介绍原型设计,十九个能够帮您简化移动app开采

上一篇:开创叁个简练的依靠表格的选取,成立多个基于 下一篇:没有了
猜你喜欢
热门排行
精彩图文