关于原型设计的一些事

  原型设计,是每个交互设计师和产品经理最最最基本的技能。这也是一个梳理思路很好的方式。

  关于什么是原型

  为了讨论方便,有必要先做一个简单的定义。

  这里的原型指的是对最终产品各页面上内容的简单呈现,通常不会设置颜色和字体,也不含图片。这里的原型,也通常被称作线框图、示意图、蓝图。在一些极端的情况下,原型图往往可以先被抽象成一个个的模块组合,然后再去细化每个模块中的内容极其展示形式。

  原型的主要作用是为了沟通最初的产品设想。原型图展示的是内容和结构及粗线条的布局,而不是视觉设计。

  一定程度上,原型图是为了说明用户将如何与产品进行交互,其主要受众是团队里的工程师与设计师。原型图一定要体现出用户在每个页面上期望看到的内容,以及这些内容在页面上的相对优先级。通常情况下,原型图在纸上呈现,也可以使用一些特定的软件进行制作,常见的包括axure、viso等。

  所以,根据这个定义和解释。我们接下来讨论的问题,主要是围绕着Web网站和APP的原型设计进行的。

  关于原型的精细程度

  业界普遍的认知是,原型做相对中保真即可。中保真的原则是,对照原型,团队的设计师和工程师能够明白我们要做的是一件什么事情及这件事的重点就可以了。

  当然,还存在另外一个观点,原型,必须是要高保真的。对于这个观点,个人持保留意见。高保真的原型需要花费更多的精力,同时,不够敏捷。

  关于原型绘制工具

  在程序员的世界里,终极问题是,什么是最好的语言?在前端工程师的世界里,终极问题是,什么是最好的浏览器?在产品经理和交互设计师的世界里,终极问题是,什么是最好的原型工具?….

  基本上,不存在绝对好用的工具,完全取决与自己的爱好与使用是否顺手。关于原型绘制工具,网络上有很多人总结了很多不同的工具,你可自行选择。我个人使用的比较顺手的是axure。

  哦,对了,实际上最好用的原型设计工具,最后,我发现,是纸和笔。在快捷酒店管家的实际项目运作中,我们更多的是运用白板来绘制原型,然后将经过讨论通过的原型用手机拍下来做记录存档。

  关于axure的使用

  (不使用该工具的同学,读到这里可以关掉页面了,谢谢。)

  1、千万不要去学习复杂的交互动作!

  首先,在axure里使用复杂的交互会上瘾,这将大大的浪费你的时间;其次,设计师和工程师都不会看你的复杂交互动作的,他们只觉得这是个图形而已;第三,如果你真想学,为什么不去学div+css呢?

  2、如果你确实需要表达一个复杂的交互,可以考虑将这个交互拆解了表述

  典型的比如一个输入框的不同状态。可以拆解为,获得焦点激活输入框 – 正在输入中 – 输入完成激活提交按钮 – 点击提交按钮完成提交。

  这种拆解的方式,虽然看上去会占篇幅,但是却实在是最容易被理解的,连流程图都能省略了。

  3、可以考虑将需求文档与axure原型结合起来

  只是说可以,没说一定要这么做。这是我一直在使用的一种方式,我自己觉得效果还不错,详细的可以参考“基于axure的PRD协作”,不再赘述。

  4、一定要有一套属于自己的控件库

  控件库,简单理解就是将产品拆解成很多的小零件,当你需要的时候,将这些零件进行组装即可。这可以大大的提高你的原型制作效率。

  关于原型控件,每个原型工具都有,你可以自己网上搜索。在实际运用的过程中,你可以根据自己的需要对这些控件做修改,之后可以再次使用。

  5、原型的版本存档同样重要

  原型,跟实际产品一样,是会迭代和不断被修改的,所以,一定要记得存档。即使是在同一个原型上做修改,也一定要做记录,这对后续回顾很重要。


  (快捷酒店管家首页的早期原型)

  最后,

  原型设计,是每个交互设计师和产品经理最最最基本的技能。这也是一个梳理思路很好的方式。

时间: 2024-09-10 17:44:40

关于原型设计的一些事的相关文章

Web应用的成功之路 – 产品早期的原型设计与用户测试

最近一阵有些难以抑制的脑痒手痒,阅读和码字的欲望也渐增:却受时间精力等绝对客观因素所限,不得不维系一周一篇译文的频率,感觉多少有那么点沮丧和无奈. 关于本文,其实在标题上犹豫了蛮久.这篇内容是新书A Practical Guide to Web App Success的第15章:主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品.whatever,不矛盾.作者Dan Zambonini在本文中将向我们阐述Web应用在原型阶段的设计与测试工作的重要性,并从实

产品经理小技术:图片素材随手找,原型设计快又好

产品经理小技术:图片素材随手找,原型设计快又好 时间:2014-11-30 21:04 来源:牛冰峰 作者:牛冰峰 画图--这项古老而精细的做法,是一代代产品狗们得以传承的立足之本.草图.线框图.思维导图.PPT插图.数据汇报图表.低/高保真原型图,甚至UI视觉图--真是一图未完一图又起.而工作时间越久,就越发现其中的奥妙:好的东西,总是最后几乎一样,那么我又何必每次造车轮子呢?将各种最好用的图片资源,以及 获取这些图片资源的方法掌握以后,我们就可以将精力放在更深一层的设计上,而不会因为某个返回

Web应用的成功之路 产品早期的原型设计与用户测试

中介交易 SEO诊断 淘宝客 云主机 技术大厅 最近一阵有些难以抑制的脑痒手痒,阅读和码字的欲望也渐增;却受时间精力等绝对客观因素所限,不得不维系一周一篇译文的频率,感觉多少有那么点沮丧和无奈. 关于本文,其实在标题上犹豫了蛮久.这篇内容是新书A Practical Guide to Web App Success的第15章;主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品.whatever,不矛盾.作者Dan Zambonini在本文中将向我们阐述We

Web应用成功之路 产品早期的原型设计与用户测试

中介交易 SEO诊断 淘宝客 云主机 技术大厅 最近一阵有些难以抑制的脑痒手痒,阅读和码字的欲望也渐增;却受时间精力等绝对客观因素所限,不得不维系一周一篇译文的频率,感觉多少有那么点沮丧和无奈. 关于本文,其实在标题上犹豫了蛮久.这篇内容是新书A Practical Guide to Web App Success的第15章;主题显然应该在Web应用方面,但是本章单独拎出来看的话,却又适用于各种常见类型的Web产品.whatever,不矛盾.作者Dan Zambonini在本文中将向我们阐述We

用AxureRP做实例原型设计的步骤

一般来说都是先有实例再组合成整体,但是我们的设计过程都需要先从整体的布局考虑,再来细化每个功能点.因此实例的原型设计在一些中高保真度要求的原型里面就尤为重要,再者一般学习AxureRP都是从模仿别人的做的实例开始的,因而学会实例原型设计,对自己使用AxureRP的技能的提高也是很有帮助的. 这里对实例原型的定义主要是指两个方面,一是单独的功能点或功能页面,如输入框的鼠标单击可修改功能点,注册登录功能页等;二是独立的交互效果,可单独部署的,如幻灯片效果,微博效果等.前者侧重于功能的实现,后者侧重于

iPhone手机原型设计工具介绍

一.iPhone Mockup http://iphonemockup.lkmc.ch/ 可绘制简单线框图(Illustration)和手绘风格线框图(Pencil)两种风格的原型.组件都可以任意拖动,放到合适的位置.但是由于是在线软件,可能在安全保障上会有些欠缺,而且有些类似于沙盘的形式,不知道什么时候还会消失.优点是可以协同创作. 二.Balsamiq Mockups http://www.balsamiq.com/ Balsamiq Mockups 提供了 9 大类共 50 多个控件,涵盖

交互设计总结:原型设计方法

根据Standish Group的"Chaos Chronicles Report ",大约 66% 的软件开发项目不是失败,就是超出预算.超出项目时间,或是交付缩水的功能. 项目失败或亏损的前三大原因为: 缺乏使用者的参与 需求或规格不完整 需求或规格变更 白大哥在上一回的<我们的UED设计流程及方法>中也提到,一些需求管理工具或者上百页的文档已经不合时宜,不能作为我们跟客户讨论交流的介质和核心.所以我们需要制作原型,用来提高与客户沟通的效率.让客户参与到设计中来并且帮助

分享比较热门的原型设计工具

交互设计师的一项重要工作就是进行产品原型设计(Prototype Design).而产品原型设计最基础的工作,就是画出站点的大体wireframe(框架图)并结合批注.大量的说明以及流程图等,将自己的产品原型完整而准确的表述给产品.UI.重构/开发工程师等等,并通过沟通反复修改prototype 直至最终确认,然后进入后续的设计开发流程. 要完成以上复杂的设计和沟通工作,需要一个好的原型设计工具.这里就目前常用的和比较热门的工具来分享一下:Word(产品经理比较常用)Fireworks(交互组内

以原型设计为基础分析可视化内容设计

在风起云涌的互联网浪潮中,产品迭代的速度越来越快.随着用户需求的激增,也不断带来了对设计师能力要求的提高.初入交互设计领域几年来,明显发现可视化的内容远比文档的更易于被用户(以至我们的客户)所接受,就像用户研究项目中常说的一句话:"用户怎么说的,并不代表他们怎么想."今天以"原型设计"为基点,与大家展开几点做简要的分析. 一.什么是原型设计? 首先,让我们看看在体验设计的过程中的"原型设计". 以下结合个人对UCD理解和项目经验,梳理和简化的传统