Tencent CDC Blog » 非原型 不设计

日志 > 交互设计 > 非原型 不设计 非原型 不设计 牧童 [ 交互设计 ] 2010.01.20 　　在风起云涌的互联网浪潮中，产品迭代的速度越来越快。随着用户需求的激增，也不断带 来了对设计师能力要求的提高。初入交互设计领域几年来，明显发现可视化的内容远比文档的 更易于被用户（以至我们的客户）所接受，就像用户研究项目中常说的一句话：“用户怎么说 的，并不代 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 他们怎么想。”今天以“原型设计”为基点，与大家展开几点做简要的分析。 一、什么是原型设计？ 　　首先，让我们看看在体验设计的过程中的“原型设计”。 　　以下结合个人对UCD理解和项目经验，梳理和简化的传统体验设计的流程。（流程是每 个群体的工作方式，好像我们的长相，很难完全一样，并且时常改变，不能盖棺定论。） 　　简而言之，传统的原型设计往往是定位于概念设计或整个设计流程初期的一个过程。随着 项目大小、时间周期等，UED人员往往会根据需求确定纸原型、低保真原型、高保真原型等不 同质量的内容作为输出。具体来讲可以将原型划分为3类： 　　● 纸原型：顾名思义，就是画在文档纸、白板上的设计原型、示意图。便于修改和绘 制，不便于保存和展示。因此想有效的利用纸原型，我们就需要注意纸原型的承载。 　　● 低保真原型：通常是基于现有的界面或系统，通过电脑进行一定的加工后的设计稿， 示意更加明确，能够包含设计的交互和反馈，美观、效果等欠佳。可以理解为介于纸面原型和 高保真原型之间的输出的统称，往往也可以作为需求设计稿输出。 　　● 高保真原型：属于原型设计的终极武器。包括产品演示Demo或概念设计展示。视觉 上与实际产品等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交 互设计师对视觉审美的能力。只有从视觉、体验两方面同时打动客户，在能最终赢得客户的信 赖。 　　在我们不断按图索骥的去设计原型时，会不会发现有时原型并没有起到它的作用呢？又或 者会不会发现抽不出时间做原型？做出的原型只用于展示特性和效果，没能物尽其用？下面， 让我们进一步看看，如何将原型设计结合在体验设计过程中。 　 二、Why & How？ 　　我们热爱动手、创新，也喜欢评论、思考。而在实践中往往是如下情况： 　　回头看看，我们多数时候输出的低保真设计稿，传递的信息是完全可以通过上图的纸面原 型去表达的，而纸面原型所花费的时间和成本可能只有一半或更少。放眼整个产品设计过程， 一个导航、对话框、窗口，也依然可行。试着在“需求讨论”的时候，去用手讨论，动上几笔 可能就能帮我们在很短的时间内梳理清楚交互设计所需的“流程、布局、控件”等等。而且在 画图过程中，还能以较低的门槛（可能需要另一只笔）就能让所有人参与其中，创造很多附加 信息和价值。而或许更好的是，通过绘制白板的过程，你可以更清晰的传递出窗口的布局和逻 辑；而通过在真实介质是低成本的交流，将会更容易打动你的产品经理和客户。在创建纸原型 时，仅需要注意几点： 　　● 试着同时准备2支笔，让更多人参与设计 　　● 试着准备一支红笔，在讨论结束时，把所有内容进行梳理和 总结 初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf 　　● 记得给白板拍照，或在输出之前保留好绘图纸 　　如果你有丰富大胆的想象力和一定的手绘基础，甚至可以将整个设计过程通过手绘的形式 记录和展示，现在类似的产品宣传也随处可见，比如著名的宝马轿车。再顺便推荐一本关于视 觉化思考的书《The Back Of The Napkin》与各位共勉。 　　上面我们只看到了天平的一端，我称之为“敏捷化原型”，就是鼓励大家在最初的设计 时，动嘴的同时勤动手。大胆的把笔交给产品经理和团队的其他人，来帮助设计师完善和丰富 你的稿件，这样才能激发和节省更多的时间去产生Idea。 更进一步说，甚至在专业能力和环 境允许的情况下，完全可以采用在需求开始时由设计师与团队一起进行纸面原型的绘制，之后 由产品经理给出相关的设计稿或低保真原型。 　　在天平的另一端，是应当走向“精细化原型”时代。尽可能的将设计创意完善并融入到真 实的场景中，不论是软件界面还是Web体验，都可以真实点击和拖拽。通过高保真原型的输 出，用户更容易被整个产品而不是某个图案或体验特性所吸引。这不仅有助于单一 方案 气瓶 现场处置方案 .pdf气瓶 现场处置方案 .doc见习基地管理方案.doc关于群访事件的化解方案建筑工地扬尘治理专项方案下载 的认可 机会，还可以从侧面树立起设计师的专业形象，提升客户的认可，甚至可以大胆的提出流程的 假设：“以原型为中心的设计”。 　 三、动手做原型设计 　　以下推荐并简单分析几个原型设计的途径。 　　前面说的纸面原型，最基础的就是需要纸和笔，我们可以简单快捷的描绘出一个窗口面 板，从中点击弹出一个对话框，进行设置并保存，在旁边补充出对应的出错和分之流程。另 外，为了解决不易保存的缺陷，除了自己亲自动笔，再推荐几款软件作为纸原型的输出。 1.　Balsamiq Mockups 演示地址 　　这是一款帮助你最快速、直观的绘制用户界面原型的软件。其中包括了75个现成的控件， 并且可以轻松的以颇具亲和力的手绘风格完成界面框架的设计。上手非常容易，可以进行反复 编辑并支持调整图层和控件状态，是不可多得的纸面原型绘制软件。不过真的只能取代纸面原 型，不易表现交互过程和效果，对中文的支持也比较差。 2. Microsoft Expression Blend + SketchFlow 　　Microsoft Expression Blend 包含一组新功能，它们专门设计为让用户更轻松快速地创 建、传达和审阅交互式应用程序及交互式内容的原型。这组功能称为 SketchFlow。它是实际 的 Windows Presentation Foundation (WPF) 或 Microsoft Silverlight 应用程序。您可以生成 原型项目，运行它，然后在原型中进行浏览（即使您只有原型的初始草图）。 　　SketchFlow和Balsamiq Mockups相比，不仅可以绘制出具有亲和力的手绘原型，更可 以实现交互所需的响应和效果，使得低保真原型赋予了高保真的内涵，算是给人意外的惊喜。 不过由于短期内MS Silverlight技术的普及率较低，可能大家上手成本较高，可以作为长期关注 和研究的方法。 　　同时，为了便于在低保真模型上梳理产品逻辑和流程，Visio和Mind Manger也是不错的 选择。对于原型设计（主要适用于低保真原型），大家都很熟悉的Axure，最新官方版本 5.6，访问官网>> 　　能够很快实现页面的跳转和变化，完成流程性的演示。并推荐大家与产品经理一起来使 用。然而，身为设计师，怎能满足于只输出低保真原型作为讨论素材呢？ 　　当大家深谙如何基于纸面原型的讨论，又可以放心大胆的将手中的枪交给热心的产品经理 去进行低保真原型的设计，在这种如此理想的情况下，我们不得不花费心思在如何实现我们 的“大绝”—高保真原型上。谈到高保真原型，其实还是非常需要实力和锻炼的。此时，不得 不祭出设计师的最爱，Adobe 公司的Flash Platform：Flash CS4，Flex/Flash Builder，Flash Player和Adobe AIR。 　　关于Flash的学习，结合Action Script 3.0、XML和Adobe的AIR技术，可以很完整、逼真 的实现我们想要的任何界面效果，学习过程不再赘述。从Adobe的产品线发展不难看出，最 终原型制作的最高境界就是可以和实际产品相结合，让设计师的输出和开发人员能够直接结 合，使原型得以100%保真。对于客户端的原型，大可通过VC去动手写写程序代码，或者在 Win7下用Blend接口，便能大大降低“这个效果做不了”的尴尬。 3.UIDesigner 　　说到高保真原型，不能不提的是CDC出品的原型制作秘密武器UIDesigner，这本是CDC 专用武器，现在已经分享给大家了。UIDesigner能让你轻松实现丰富的各种交互效果，基本可 以控制到Windows标准空间所包含的所有属性，但这一切不需要你有任何编程能力基础。感 兴趣的朋友可以到 http://cdc.tencent.com/?p=424 了解一下。 　　而对于网页产品，只要设计师能主动提高动手能力，通过使用HTML甚至Ajax、jquery等 也能很快实现网页产品的高保真模型，也需要随着互联网技术的发展不断学习，与时俱进。 　　总而言之，平时多动手，战时少流汗（客户不满意、老板不满意，换谁都要浑身冒冷 汗⋯⋯）。在设计过程中，还可以通过设计公用组件不断提高效率，不断发掘新的、好的原型 设计方法。将整个设计过程与原型设计相结合，总结起来有以下几点好处： 　　● 最真实进行设计传达，并影响整个团队（开发、产品经理、用户） 　　● 树立设计师的专业影响力（用实力说话，用产品说服别人） 　　● 技不压身，扩宽专业知识领域有助于向更高层次的发展:-) 　　与大家共勉，希望对各位平时的工作有所帮助，Thx。 (本文出自Tencent CDC Blog，转载时请注明出处) << 《电光人》 视觉注意力—解剖设计的根源 >> 相关标签 互联网　原型　理论 相关文章 用户是如何浏览你的网站的 惊现！表面下的隐藏信息——浅谈信息可视化 The Story of Mr.Gray — Web 交互设计“灰色”的8类应用 浅析网页色彩应用 轻设计，让网站灵敏轻便的6个技巧 1. 共有38篇评论 2. ssvv 说2010/01/20 学习了，推荐的那几个软件不错哦. 3. 施瓦辛格 说2010/01/20 Balsamiq Mockups确实不错 不过基于air内存占用比较大，当然界面很炫丽实用。 至于腾讯自己的UIDesigner 所给出的链接确实介绍了 不过那片链接文章里提到的地址已经不能用了 UIDesigner官方吧 这个网址已经不能打开 麻烦更新一下，谢谢 4. 亨利 说2010/01/20 Q吧服务器近期进行升级维护，维护期间相关功能暂时无法使用，给您对带来的不便； 如果有使用上的问 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 咨询，可以先在博客的帖子里提问，谢谢关注 5. mirror 说2010/01/20 求UIDesigner试用， 这个软件看上去十分诱人哦。 如果方便的话，可以发给我一份吗？ 邮箱maicainv@gmail.com 麻烦你了哦。呵呵 6. elya妞 说2010/01/20 UIDesigner貌似不错哦～ 7. 亨利 说2010/01/20 to mirror 已经发送，请查收 8. 山贼 说2010/01/20 我也想要一个UIDesigner，麻烦发一份给我，谢谢了~~ 9. 山贼 说2010/01/20 我的邮箱忘了说了 taojing8@163.com 谢谢 10. 10. 乌石山农 说2010/01/21 您好，软件能否发我一份 dhl0703@gmail.com 谢谢！ 11. 亨利 说2010/01/21 请大家注意，申请UIDesigner请不要再在回帖里留下邮箱地址，按如下方式申请。 填写下面的信息，然后发送到cdc@vip.qq.com邮箱，我们会定期给申请者发送安装 包。 所在单位： 工作岗位： 邮箱地址： Q Q 号码： 因为QBar暂时升级维护，给大家带来不便之处敬请谅解 12. Alite 说2010/01/21 有个问题CDC的UIDesigner工具的内核是不是AXURE的?如果不是那功能上和AXURE比 有什么不同? 13. Eversiming 说2010/01/21 额，不错哦！ 14. 小鱼 说2010/01/21 文章写得很棒啊！继续关注CDC~~ 15. jsz 说2010/01/21 这个流程啊 alan参考你的 16. 亨利 说2010/01/21 To Alite： UIDesigner的内核和AXURE没什么关系。不同之处就太多了，例如在控件库、事件响应 以及原型搭建等，你若想更深入了解，可以申请试用。谢谢关注。 17. verloth 说2010/01/21 获益良多~ 拜谢楼主~ 18. 小鱼 说2010/01/22 楼主！我昨天申请试用了，但是现在还没收到邮件~~~烦请楼主百忙之中给我发一份！ 3Q 19. 牧童 说2010/01/22 哈哈⋯⋯原来大家都在聊UIDesigner啊⋯⋯ 一不小心成了广告帖，出租广告位~ 20. 杰西 说2010/01/25 俨然是广告帖啊。 UIDesigner的确是个好东西- -+ 21. 小鸟 说2010/01/26 还是比较喜欢axure 22. 烟火 说2010/01/27 之前试用过UIDesigner，还是挺不错的。不知道现在有没有更新 23. 张鑫旭 说2010/01/30 确实不错，受益良多。“视觉化思考”，这个很有启发，我就记住这个，足矣！ 24. 雁梓 说2010/02/04 申请试用uidesigner,非常感谢。 25. Hotman 说2010/02/07 我也要一份呀 26. QDD 说2010/02/22 hello 希望申请试用uidesigner,非常感谢。 27. rdsnn 说2010/03/09 强烈要求更新 现在常常遇到的问题的 表格貌似不能左右移动 多个TAB 里放满东西 基本软件就假死 28. 亨利 说2010/03/10 to sdsnn：目前alpha版本的表格、下拉列表、多页面容器等控件的属性和响应功能未 完善，敬请原谅。有最新版本推出时，我们会在博客和官方Q吧第一时间公布的，谢谢 你的关注。 29. Y.Jiajia 说2010/03/11 原型的不仅是给开发设计人员用的，更重要的是给业务与测试人员用的。目的是只用 图，不需要讲解，直接上手操作然后反馈。 30. 马平凡 说2010/03/22 文章提到 Balsamiq Mockups 对中文的支持也比较差的观点，我不这么认为，或许把 Balsamiq菜单栏 “View “下的”Use system Fonts“勾选上，就不会存在这个观点 了。呵呵。 Balsamiq软件设计者可能是为了保持原型更具手写风格，默认使用了内置的一种英文手 写字体。所以你需要勾选”Use system Fonts“。这样就可以随意使用系统字体了，包 括对中文的支持哈。 :) 31. 懒猫 说2010/04/01 学习，只是感觉高保真原型制作相当麻烦呢，是否有必要花时间这样做呢？主要目的又 是为了什么呢？ 1. 该文章共有8条引用通告 发表您的评论 名字*必填 邮箱*不会被公布,必填 网站 rss 登录 还没有帐号，欢迎注册 文章分类 用户研究21 交互设计46 视觉设计58 新人Show10 最近折腾24 摄影印象11 虾饺烧卖7 标签 互联网 体验 作品 创意 原型 奥运 工业设计 工作效率 心理学 手机 招聘 推荐资源 摄影 旅游 时 间管理 案例 活动 爱好 理论 用户习惯 用户研究 用户访谈 电影 相册 眼动仪 腾讯官网 腾讯网 致辞 花絮 视频 轻设计 Android Banner GTD GUIChamps IM IPhone PenGUIn QQ QQ医 生 QQ影音 QQ旋风 SNS Soso yy 最新文章 CDC博客有惊喜！敬请期待 FIXED GEAR in china 设计模式-自动完成 创意与公益 The sky belongs to CDC 秋风萧瑟，洪波涌起，QQ电脑管家冷漫秋袭 用研无用？——对用户研究实践的思考 CDC换装记 You’re wanted！腾讯CDC2011年校园招聘火热启动！ 亲爱的用户，您真的满意吗？ 最新回复 换皮? 其实我也希望有W 严重期待 不错，镜头加个遮光罩更好 搬凳子等着看戏。。。 赞，wong同学都成形象大 积极参与，惊喜不断。。。。 金属焊接溶深测量检测显微镜 求曝光 拍摄的很有感觉⋯ 相当有创 有活动参与，我要惊喜。 链接 Tencent Webteam Tencent TG ideas Tencent WSD Tencent ISD Flash Team 蓝色理想 UCD大社区 优艾网 支付宝官方Blog 阿里旺旺产品运营团队 设计进行时 网站设计师jason 盒子UI设计 Icecream冰淇淋 Baidu UX 视觉共享 配色网 中国设计资讯 Copyright © 1998 - 2010 Tencent. All Rights Reserved. Powered By WordPress. [Sitemap]