Your SlideShare is downloading. ×
原型构建
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

原型构建

2,159

Published on

浙江科技学院 交互设计与用户研究实验室

浙江科技学院 交互设计与用户研究实验室

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,159
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 交互原型 ——原型构建 Prototyping 研究小组 F 组员:周芸 赵贵华 张罕 日期: 2010 年 10 月 11 日
  • 2. 目录
    • 什么是原型及原型构建
    • 原型与模型的区别
    • 为什么要制作原型
    • 原型构建的类别 ( 低保真原型设计和高保真原型设计 )
  • 3. 以原型构建为核心的交互设计
  • 4. 什么是原型及原型构建 在交互设计中,一般把这样的帮助我们与未来产品进行交互,从而获得第一手体验,并发掘新思路的装置,称之为“原型”,这个构建与完善的过程,称之为“原型构建”。 实际上原型可以是任何东西,从纸张式的情节串联图到复杂的软件,从粘合的纸模型到锻压的金属模型。总之, 原型 是设计的一种受限表示, 用户 可尝试与它交互并探索它的适用性。
  • 5. 原型与模型的区别 c. 构建原型 往往是为了“推销”设计团队的想法与创意 . 而 制作模型 则更侧重于实际生产与制造 ; 原型 要求快速构建 , 且是相对廉价的装置 , 它容许为解决关键问题而不用于拘泥于细节的推敲 , 而模型的制作颇费周章 , 要求面面俱到 , 重视细节的品质因而需要耗费大量的时间与金钱。 b. 原型 聚焦于创意概念的各方面评估 , 是各种想法与研究结果的整合 , 而 模型 涉及到了整个产品 , 特别是有关与实际生产﹑制造及装配衔接的方案 ; a. 在交互设计里 , 原型 被认为是一个多方面研究创意概念的工具 , 而在工业设计的模型则被认为是为了测试与评估的第一个产品版本 ; 原型是创意概念的具体化 , 但并不是任何一件产品 , 而 模型 则与最终产品非常接近 ;
  • 6. 原型构建
  • 7. 快速机器人原型开发 发泡材料草模
  • 8.  
  • 9. 模型
  • 10. 原型 能够回答许多问题(测试方案的可行性,澄清含糊的需求,让用户测试﹑评估设计,检查设计方向是否正确)-— - “ 会说话的原型” 制作原型的主要目的是“快速制作每个东西以测试产品的某些方面”。 为什么要制作原型 原型 就是设计的一种受限表示,用户可尝试与它交互并探索它的适用性。
  • 11. 在世界闻名的 IDEO 设计公司,设计团队对于 原型构建 有着相当宽容的态度,即便知道结果不是预想的,但他们还是会完成 原型 ,因为这样便能更快修改,并发现不合理的地方。 “ 说不定还会有些额外的新发现!” IDEO 的设计师如是说。
  • 12. 一切设计都是从低保真开始的。在分析和评估没有开展前,我们应该保留所有设计过程的低保真原型,在后期 迭代 后,我们将把它逐渐转变为高保真原型。 原型构建的类别 1. 低保真原型设计( High-Fidelity ) : 2. 高保真原型设计( Low-Fidelity ) : 对产品简单的模拟 , 基本停留在产品的外部特征和功能构架上 . 与最终产品在外观和功能上差别较大。 高功能性 , 高互动性 , 忠实地展现产品 / 界面主要或全部的功能和工作流程 , 具有完全的互动性 . 虽尽可能地达到了实际产品的“样子” , 但它未必是可产品化的设计。
  • 13. 低保真原型与高保真原型比较:
  • 14. 基本原则 快速原则,迭代原则,焦点原则,有限性原则 焦点原则 :每个原型都必须切实解决一个被设计团队锁关注的焦点。 为人物角色构建出原型,以解决这个目标人群定位的关键问题。 有限性原则 :在原型构建过程中,我们基于不同的原因,需要构建不同的原型,不能指望在一个原型构建过程中解决所有的问题,认识到这种局限性,有利于设计团队的轻松工作,从而激发创意。 快速原则 :快速构建原型可以尽可能多地找出问题,同时为后期的深入发掘赢得更多的可能性。我们需要学会快速地联想,并快速地视觉化,实物化。 迭代原则 :迭代指的是,“重复操作直至获得明确而详细的结果的过程。”没有迭代就不会产生有序的复杂性。实际上,迭代允许通过简单结构的逐步积累形成复杂结构。在交互设计的原型构建中,我们允许通过的不断的调查﹑测试和调整设计来创造复杂的结构。 交互设计,乃至设计的过程都是一个迭代的过程,设计师们一点点推敲,一点点深入直到把设计推到一个完善的过程 。
  • 15. 设计流程
  • 16.
    • 基本原则
    • 设计流程 < 资料 > IDEO : 如何帮你设计最好卖的产品?
    • 原型制作和工具 < 案例 > iPhone 手机原型设计工具介绍
  • 17. IDEO :如何帮你设计最好卖的产品? < 资料 > 让客户扮演消费者
  • 18. 为了研究消费者的习惯,宝洁公司 CEO 被派去购物;为了改善供应链管理,卡夫食品的高管,被带到某大城市的交通控制中心,观看上百万辆汽车每天停下和发动的过程;沃纳科内衣公司的女性主管们,也曾穿梭于各大百货商场的内衣专柜里,亲自试穿,体会自家牌子的内衣销售为何落后于竞争对手。 由于客户公司全程参与,当设计完成时,客户已经清楚方案设计的原因以及应当怎样快速地完成改造,而不用再花费时间,来消化咨询顾问给出的解决方案,进一步提高了工作效率。
  • 19. IDEO 创意流程    IDEO 所依靠的绝对不只是创意和灵感,还包含更多科学的流程和纪律。 IDEO 认为,创意也是可以被管理、被流程化的。    CEO 布朗认为, IDEO 的创意流程主要有五个步骤:“ 观察 ”、“ 脑力激荡 ”、“ 快速制作原型 ”、“ 重复评估 ”、“ 改良原型和实际执行 ”。   除了前面提到的“观察”以外,“脑力激荡”是一个紧凑密集、搜集灵感和创意的过程,将观察人们所得的数据进行分析,多多益善。   在此期间,不要动辄驳斥任何构想,而是以别人的构想为基础,再提出自己的意见:不要说“但是”,要说“还有”。   
  • 20. 如果一张照片胜过千言万语,那么在 IDEO ,一个原型胜过千张照片。因此“快速制作原型”不但是一种创新的语言,更是沟通与说服的工具。    IDEO 使用的是一些价格便宜的模型制造工具。例如,用苹果计算机的 iMovies 来模仿消费者的经历,用廉价的纸板搭建检查室或试衣间。重要的是,原型越早失败,就会越早找出问题所在,成功的速度就越快。    随后,经过“重复评估”、“改良原型和实际执行”两个步骤, IDEO 设计的新产品或新服务最终上市。
  • 21. 原型制作和工具 原型制作 交互设计分为两部分,一部分是形成思路或理念,第二部分就是将思路或理念体现到设计中。而设计其实就是制作各种不同的原型来体现在设计师脑中的理念。 原型法在交互设计中起到非常大的作用
  • 22. 想要达到以上作用,需要在设计的不同阶段运用不同的工具 1 ) 沟通设计思想:使用手绘, PPT ,  Visio ,并用 Photoshop 或 Freehand 来改进局部来表达思想 2 ) 多个方案的选取:使用 Visio 或 Flash ,配合 Photoshop 3 ) 树立专业形象: Flash 及其 ActionScript 或者编程工具 工具 1 )  快速和各方人员沟通设计思想 2 )  在多个方案中进行有效的比较和改进意见的获取 3 )  提高项目质量,并且树立专业形象
  • 23. 产品原型设计最基础的工作 ,就是结合批注、大量的说明以及流程图画框架图 wireframe ,将自己的产品原型完整而准确的表述给 UI 、 UE 、程序工程师,市场人员,并通过沟通会议,反复修改 prototype 直至最终确认,开始投入执行。 我们先来看看做产品原型设计,现在大致有哪些工具可以使用,而他们的利弊何在。
  • 24. Visio :功能相对比较复杂。善于画流程图,框架图。不利于批注与大篇幅的文字 说明。同样不利于交互的表达与演示。 纸笔 :简单易得,上手难度为零。有力于瞬间创意的产生与记录,有力于对文档即时的讨论与修改。但是保真度不高,难以表述页面流程,更难以表述交互信息与程序需求细节。 Word :上手难度普通。可以画 wireframe ,能够画页面流程,能够使用批注与文字说明。但是对交互表达不好,也不利于演示。 PPT :上手难度普通。易于画框架图,易于做批注,也可以表达交互流程,也擅长演示。但是不利于大篇幅的文档表达 Dreamweaver :操作难度大,需要基础的 html 知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注
  • 25. Axure 原型设计软件 Axure RP 能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图、 操作流程图、以及交互设计,并可自动生成用于演示的网页文件和规格文件,以提供演示与开发。    Axure 的正确发音是“ Ack-Sure” , RP 则是” RapidPrototyping” 快速原型的缩写。
  • 26.  
  • 27. 用编程工具可以展示更为复杂和更为保真的原型,但是会牵涉到很多精力用来编码和调试 Bug 。没有较多开发经验的设计人员需要学习掌握其使用,否则关注软件的实现会多于交互设计本身,且一旦花了很多精力做好,就很难愿意因需求的变化,进行修改和调整。所以一定要方案基本上通过中保真原型定好后,再做高保真的原型。 最理想的状态是软件是用什么工具开发的,就用什么工具来做交互的 高保真原型 。
  • 28. < 案例 > iPhone 手机原型设计工具介绍 手绘 iphone 苹果手机 UI 图标
  • 29. 可绘制简单线框图( Illustration )和手绘风格线框图( Pencil )两种风格的原型。组件都可以任意拖动,放到合适的位置。但是由于是在线软件,可能在安全保障上会有些欠缺,而且有些类似于沙盘的形式,不知道什么时候还会消失。优点是可以协同创作。 http://iphonemockup.lkmc.ch/ 一、 iPhone Mockup
  • 30. 二、 Balsamiq Mockup http://www.balsamiq.com/ Balsamiq Mockups 提供了 9 大类共 50 多个控件,涵盖了几乎所有常用的 UI 控件。不管是桌面软件、手机软件还是 Web 站点,都能搞定,且软件极易上手。 Balsamiq Mockups 有许多不足之处,如不能制作交互效果、不能将重复区域做成模块多次使用。不过 Balsamiq Mockups 的免费版本有诸多限制,如无法保存、导出原型图就极为不便。而收费版本需要 $79 ,实在太高。但是也有 5 种方法可以免费获取 license key ,可以去它的网站上研究一下。
  • 31. 三、 iPhone Sketch Pad http://www.uistencils.com/ 这是一个做纸面原型的模板,像我们小时候用的那种复杂的绘图板,不同的是它集成了 iPhone 的一些常见的按钮、输入框、组件样式,而且可以方便的绘制 iPhone 的轮廓。有网格线,还送白纸板,当然,这个东西是需要购买的, 9.95 美金。
  • 32. 四、 Axure http://www.axure.com/ Axure RP 已经成为成功设计 Web 原型的重要工具,也是产品经理使用的最多的原型工具,虽然 Axure 的优势在 Web 原型,但是用过导入一些组件也可以方便的设计手机原型和交互效果,这对于使用 Axure 已经娴熟的人来说,基本不需要任何学习成本,所以也是一种比较推荐的工具。
  • 33. The end

×