原型(Prototype) - UCD大社区

十个方法，让你的线框原型更具沟通能力

c7210 — 2012-08-06 22:18:16

虽说是每周一篇译文，不过这事儿确实不能算是非常容易。从阅读，到筛选，到试译，到最终确定本周的文章并完成译文，主要还是依靠每天抽些时间来做。还好，毕竟是自主行为，爱过，也仍在爱着，这就是UX从业者兼翻译票友的节操有木有。默，我们进入今次的正文。

我(英文原文作者)参与过很多产品的线框原型设计，包括我自己独立完成的，还有与其他设计师、产品经理甚至是业务分析人员一起合作的。这很棒，因为在这个过程中我见识到了很多优秀的项目。不过慢慢的我也发现了一些问题，一些大家时常会在原型制作过程当中忽略掉的要素；如果能注意并解决掉这些问题，我们的交互设计产出物就可以发挥更大的实战价值。

下图所展示的是一个很典型的例子，我们通常会将这种风格的线框稿交付给相关同事来跟进视觉设计或原型测试的工作。

这种线框稿确实能比较清晰的描述出页面元素的布局方式，但也仅此而已。它所缺少的是与其他设计师、开发人员以及被测用户之间的沟通能力。接下来，我们将一起看一看有哪些方法可以帮助我们提升线框原型在这方面的表现。

1.通过明暗对比来描述模块之间的视觉优先级

哪些内容是需要用户在页面上最先注意到的？他们的视线应该聚焦到什么位置？我们希望用户执行什么操作？这些问题不能简单的丢给视觉设计师来考虑，而上图所示的线框原型显然无法帮助交互设计师传达这方面的信息。

首先，根据产品需求及用研方面的实际情况，作为产品人员或交互设计师，我们自身应该对以上这些方面的信息了如指掌；在此基础上，为最原始的线框稿添加视觉优先级。具体实施起来其实很简单，将所有的深色“线框”移除掉，使用不同明度的灰色作为背景色来界定页面和模块的边缘，并籍此表达不同元素之间的视觉优先级。相比于之前纯粹线框风格的设计稿，我们可以在下图中明显的感受到元素与模块之间的优先级关系，例如酒店信息推荐及右侧预定表单当中的操作按钮都可以在很短的时间内抓住我们的目光。

这种方式并不意味着交互设计师正在扮演着视觉设计师的角色，我们并不是在表达“这个元素的背景色要比另外一个元素的更深一些”，这些明暗关系所要体现的只是哪些元素需要突出，哪些元素要相对弱化；而最终的视觉表现形式仍然应该由视觉设计师来掌控。

2.使用真实的数据内容

对于线框原型当中的范例内容，包括导航元素的标题、表单标签、介绍文案、图标等等，我们都应该尽量使用最贴近生产环境的真实数据。这种方式可以更有效的帮助我们规划界面元素的布局，并针对实际环境中有可能产生的极端数据情况制定预防性的方案，确保页面结构的坚固性。

更重要的是，使用真实数据作为范例内容的线框原型可以在接下来的可用性测试当中更具表现力和说服力，被测用户不需要依靠主持人的描述或自己的猜测就可以在原型当中获取到比较准确的信息。另外，真实数据也可以创造出一种更贴近实际产品的使用氛围，这可以使被测用户更加投入。对于测试人员来说(主持人、观察员)，我们可以设计出更具有针对性的任务或问题，可以在测试过程中对被测用户进行更加深入的观察；相应的，最终收集到的反馈信息也会更加真实有效。

仍以酒店的范例原型为例，诸如“你能找到这个酒店的特色服务信息吗？”这样的问题是欠妥的，因为这就相当于告诉被测用户，在页面当中的某个地方存在着这样的信息，他们接下来就只会根据这条线索去寻找。多数情况下必然能够找到，但这样的反馈对于我们是没有意义的。

如果在测试当中使用由真实数据构建起来的原型，那么情况就会好很多，我们可以问被测用户“你对这家酒店的感觉如何？”，这会使我们获取有效反馈的机会大大的增加。用户会根据这样的问题进行更加自主的信息浏览行为，他们有可能会回答“这个酒店看上去不错，不过他们提供家庭泳池，我真的不大喜欢小孩在酒店当中跑来跑去。”

通过这类反馈，我们可以了解到用户不仅注意到了页面当中的重要元素，而且他们对其中的具体内容也做出了真实的思考。可以说，通过一套无真实数据内容的线框原型，我们能够测试产品的可用性，而使用了真实数据作为范例内容线框原型则可以更加全面的帮助我们测验产品的用户体验。要了解更多原型测试方面的实战方法，可以参考我们之前的文章“产品早期的原型设计与用户测试”。

3.确保细节的准确无误

将真实数据作为范例内容填充到原型当中后，我们要确保交互流程所涉及的信息的准确性。举个简单的例子，如果购物车的页面原型当中展示了两个单价为50元的商品，那么在结算环节中，总价应该是100元，而不是随便其他什么数字。错误的信息会阻碍沟通的有效进行，开发人员有可能在这里产生质疑，被测用户也会感到莫名其妙。

作为设计人员，长时间的将注意力放在原型的制作上面，很容易忽视掉这类问题的存在。如果有条件的话，可以在适当的时候请其他人来帮忙检查一下你的原型当中是否存在这类细节当中的错误。

4.增加范例图片的自我描述能力

图片对于用户体验的提升起着重要的作用，当人们在网站中寻找商品或服务时，图片是引导他们制定决策的关键要素(怎样通过设计帮助用户制定决策)。另外，图片也能帮助用户对网站自身的形象和定位产生认知。不过在线框原型中，我们通常只会使用一些灰色的容器和线条来表现图片。

当然，我并不是要建议在线框原型中使用真正的图片或照片；我们需要做的是让代表图片的线框元素能够体现出在实际页面当中，这个位置应该放置怎样类型的图片。在制作线框原型之前，最好与相关的产品或业务人员就这方面的问题进行沟通，根据产品自身的特质及最终面向的用户群体，来判断图片一类的视觉元素应该具有怎样的整体风格。

举个例子，我曾经帮一家衬衣零售商做网站改版。在着手设计工作之前，我们首先使用旧版网站进行了一次用户测试，结果发现商品详情页当中的演示照片总会使用户产生迷惑。为了使衬衣更好看，他们在拍照的时候刻意搭配上了领带与袖扣，这使得用户认为每件衬衫都是包含领带与袖扣的套装。所以当我进行线框原型设计的时候，特意在商品照片的位置画了一张不包含领带与袖扣的衬衣草图，以确保视觉设计师及后续环节的人员能够理解，并避免在新版网站中重复错误。

我们不必通过非常精细的绘画来为线框原型中的图片元素增加描述性，通过简单的草图来陈述出用户希望在这里看到的图片类型即可。例如，在提供酒店预定服务的网站中，用户通常希望在详情页里看到怎样的图片？房间？卫生间？景观？这些问题都是值得花时间了解清楚并在线框原型中加以体现的。

5.使用色彩时保持谨慎

在线框原型中，彩色通常被用于注释。在必要的时候，我们也可以用特殊的颜色对那些特别需要用户注意的界面元素进行标注，或是用来表达出错信息一类的状态类内容。不过要记得，在进行原型测试的时候不要使用带有色彩注释的版本，原因是显而易见的，我们不希望被测用户被这些“突出”的元素引导或干扰。

6.确保交互元素明确易懂

交互元素的呈现方式应该符合它的用途，例如按钮看上去应该可以被点击。这些细节当中的视觉表现形式的正确与否，会直接影响视觉设计师及开发人员对原型的理解；不具备自解释性的交互元素所带来的潜在体验问题也会暴露在可用性测试当中。

7.以实际像素为单位

如果你使用HTML配合样式代码来制作原型(使用前端开发框架快速创建页面原型)，那么这个问题基本不存在，因为你通常需要以像素为单位为容器设置宽度或高度属性。不过在多数时候，我们创建的是纯粹的线框图。以实际像素为单位对页面布局及元素尺寸进行一定程度的规划和说明，这将帮助我们自己以及视觉设计师在接下来的工作当中省掉很多“猜测”与“估算”的过程。我曾经习惯于使用Powerpoint来制作线框原型，这种方式只能展示元素之间大致的尺寸和位置关系；当项目进入视觉设计流程，它无法有效的帮助我与设计师进行沟通，造成了不少的麻烦。

8.创建变更日志

随着迭代的不断进行，每一版线框原型当中的变更通常会越来越细化，从页面结构到模块、控件，这会使跟进后续工作的设计师或开发人员越来越难以发现所有的变化。作为交互设计师，我们有责任创建一份变更日志，并随着项目的发展对其进行持续的更新。日志中的每一条记录都要包含日期、版本号、执行者以及变更说明。这种信息交流的方式不需要花费太多的时间，但结果却是事半功倍的，无论产品人员还是设计师、开发者，大家都可以籍此来一目了然的跟踪原型的版本变化。

9.避免深色线框

满页面的深色线框会使你的原型看上去缺乏层次、粗糙凌乱。正像我们在第一点当中所说的，试着使用不同明度的灰色作为背景色来界定页面和模块的边缘。这样不仅能表现出界面元素的视觉优先级，而且可以使整个原型看上去更加整洁。如果必须在某些地方使用线条，那么尽量使用纤细的灰色实线或点状线。我们固然不需要让线框原型看上去像视觉稿一样完美，但对这些细节的把握确实可以让它更加简洁精美；在实际工作中，这往往可以提升原型被接纳的程度。

10.保持跟进

这一点更加偏向于交付流程，而非设计技巧。完成线框原型后，我们不能只是简单的把它扔给跟进后续工作的同事。花些时间去支援视觉设计师或开发人员的工作，只有他们才能将你的设计概念最终落实到实际当中。通常，交互原型当中所包含的想法、操作逻辑等方面的信息难以即全面又准确的被大家理解，而且其中隐含的问题有可能在后续阶段才能体现出来。我们有必要在交付原型之后保持跟进，与大家协同作战。

以上就是关于提升线框原型沟通能力的十点建议。可以参考我们之前的文章“线框原型的本质及实践应用概述”，了解更多关于线框原型的基本理念及运用方法。

相关话题：原型(Prototype) 源地址：http://beforweb.com/node/100

浅谈草图设计（一）——自由

CDCer — 2012-02-08 15:28:37

“转眼间已经在CDC生活了快两年的时间。从一名电子商务毕业生到一位职业的交互设计师，经历了许多的坎坷。常常会面对各种困难和压力，当发现有太多未知的领域，只有在学习、思考、实践中能够找到答案与自信。”

草图设计是这一年来学习、思考、实践、总结的一项设计方法，尝试于产品设计的各个环节。草图设计对于设计师来说并不陌生，在日常工作中都有用到，相信很多设计师跟我都有同样想法，并且希望推广草图设计给同行以及产品经理，作为灵感与实现，需求与设计之间的桥梁。也非常希望感兴趣的同学回复转播此文，留下观点参与评论。

“WHY｜为什么要使用草图？”

首先为什么要关注草图，草图不是很普通很简单的东西吗，大家平时都是在纸上画画，值得小题大做吗？事情源于我曾经看过的两本书——《用户体验草图设计》、《关键设计报告》。里面记录了大量的设计案例以及作品的解读。当时看完之后，我并不太明白这些与草图设计有什么关系，由于设计案例纬度跨度很大，我甚至不知道作者到底要说什么。感觉就像记者采访了一批有名气的设计师，做个笔录而已。

但是看到了大量讲解设计师在产品设计中一些初期的、真实的、原始的设计稿让我非常兴奋。惊叹他们的天分，设计的巧妙。不仅如此，他们的设计稿都非常的个性，并没有统一形式，但都贴近自身想法和真实体验。

直到最近，我又回想起这本书，突然明白为什么作者会写这些。草图设计不仅仅是在纸上写写画画，书中记录的每一个案例都是草图设计。让人兴奋的也正是这些，使用不同材料不同形式表达不同创意的案例。为什么要使用草图？因为:

草图是最自由的设计。

自由媒介
任何可以传达信息的介质都可以用来做草图设计。纸、白板、图片、便签、视频、语言、电脑甚至“无事物”的表演等都可以作为媒介，只要它可以表达你的灵感。

自由空间
不再仅仅坐在椅子上，面对着1440*900的电脑屏幕（即使是双屏又能怎样呢？），在这个狭小的窗口里做高保真界面的设计。

草图设计允许我们利用更广阔的空间，即使是一张A3的白纸也要比电脑屏幕大，更不用说真实的桌面、会议室、白板，甚至我们可以走到大街上。

当你微微感觉到江郎才尽的时候，第一要做的就是站起来，离开你的电脑屏幕，找到更广阔的设计空间，不仅仅是物理空间，更重要的是思维的空间。

自由成本
只要有价值，成本应该是自由的。成本不仅仅指材料的价值，还有时间。对于纸的使用往往招来环保主义者的批斗，浪费纸的评价和意识不能太随意太极端。当然纸材料只是其中一种，如果需要大量的白板、甚至昂贵的摄影器材，为了达到目的，材料与时间的成本是要综合考虑的。

以QQ多人视频为例，在设计的初期需要做几场用户访谈。但当时的情况是没有时间做demo及高保真的原型。为了不浪费这些与用户亲密接触的机会，就绘制、打印了大量场景草图，来验证我们对各种场景下用户如何使用多人视频的预期。

由于草图绘制对精度要求不高，使用mockup软件在很短的时间内就完成了十几个场景的草图。在每场用户访谈的最后将打印的草图展示给用户，并让用户讲解如何使用多人视频。这种方式大大提高了用户访谈的价值，为后期方案的细化奠定了坚实的基础。

自由成本强调的是自由、灵活。当然低成本是我们要追求的，但是为了达到目的适当的忽略也是非常必要的。如果你需要一间会议室、几块白板或者其他材料，为了能够很好的实现目标，应该大胆的向leader提出需求。

自由感知
不要怀疑草图设计的表达能力，无论是产品经理还是用户还是leader，都能够通过草图理解你的设计意图。不仅如此，手绘风格与手工制作的质感能够天然的拉近沟通双方的距离。相比较线框图，对方并不会有太大的排斥感。举几个例子：

案例一：

上图是windows phone 7 QQ LBS好友列表概念的一个草图设计。当时是因为突然有了灵感，想针对对wp7 QQ的联系人列表做一些创新，于是就动手做了上面的视频。来表达联系人、地理位置、距离感等概念。材料就是用纸打印一下，剪切后用胶水加工一下，然后用iphone 4拍了下来。虽然材质视频制作都很简陋，但是跟老大汇报想法，跟同事和产品讨论设计的时候，他们都没有排斥感相反会很愿意参与讨论。

案例二：

　　上图是QQ硬盘概念版。当时是希望表达一个与操作系统体验一致的概念。仔细观察你可以发现，这其实是一个局部修改了的XP系统文件夹。其实在出这一个稿之前，有过类似的交互稿（用XP系统文件夹截图后修改）已经提交给产品，但并未引起重视。

当再一次开会讨论这个需求时，我拿出打印的草图，产品却表现出很大的兴趣并带走，表示要与开发沟通实现的问题。

案例三：

上图是QQ多人视频会话方案演示的ppt。当时由于急于给老大们汇报，但是无论产品功能模块，还是交互逻辑都是非常的复杂，传统的交互设计说明书邮件，需求文档都很难短时间把方案说清楚，所以制作了一个类似demo的ppt。一定觉得不可思议，本身用ppt做demo就是很不常规的做法，在加上草图就更难想象会是什么效果。

但老大们并没有因为ppt demo或者草图风格对汇报表现出负面情绪，相反他们能够主动理解探讨方案，灵活的针对每一个细节进行推敲。

相对于高保真设计稿，自由感知，使得方案本身及容易被理解，又存在较大的探讨发觉的空间，符合设计前期夸张发散要求。

讲了这么多你是否也认同草图设计呢？经过长时间的实践，我相信每个人都会有不同的心得和体会。本篇就先讨论到这里。欢迎各位留言探讨。如果大家对这个话题感兴趣，下一篇将继续针对界面设计，讨论草图设计的一些工具方法。THX~~~

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5166)

相关话题：原型(Prototype) 源地址：http://cdc.tencent.com/?p=5166

线框原型(线框图)的本质及实践应用概述

C7210 — 2011-11-21 19:53:04

家里小猫生病，从周二开始一直折腾到现在，仍在治疗与观察中。几年来经历过几次这样的状况，虽然每次都会恢复健康平安，但一旦再次置身这样的过程里，怎样也无法停止焦虑与担心。除了尽心尽力以外，能做的只有不断祈祷，期盼着一切安好平安的状态早日回来。

篇幅不长的一篇文章，也因为这样的状况而拖沓了多日；一方面没时间，一方面没有任何心力的感觉。不多说了，我们来看今次的译文。

如今的设计圈子里，线框原型(线框图)这个词正在越来越多的被提起。过去几年中，在软件和Web设计等相关行业里，线框原型得到了迅速的普及，同时也带来了很多的误解。它的概念甚至在慢慢的被扭曲，使新手在入行时往往不能正确的理解它的用途。

问题出在哪里呢？最近，我(原文作者)与一些设计专业的学生进行了交流，他们问到不少关于线框原型的问题。通过这些问题，我发现他们对于“线框原型”这个概念的心智模型与其本质相去甚远——在他们的理解中，这个概念包括很多涉及视觉设计方面的因素。更糟的是，他们甚至不愿意去做线框原型方面的事情，他们只知道这是流程中的一个需要执行环节，却不明白它的重要性。这事弄的我相当郁闷，最初，我觉得这搞不好只是个例而已，但通过对行业内的现状进行观察，我逐渐发现，线框原型在很多项目流程中的执行情况真是够惨不忍睹的；原因来自很多方面，包括客户、设计新手、产品决策者等等。

实际上，线框原型的规划是Web设计中必不可少的重要步骤，设计师们应该真正了解它，并学会正确的运用它。

线框原型就是蓝图(blueprints)

设计师们通常都会明白，对于那些结构复杂的东西——比如建筑或是汽车——计划与架构设计工作是必不可少的；而涉及到互联网工业时，这些工作的重要性仿佛降低了。网站虽然不是汽车，但它本质上仍是一种复杂的综合项目。如果忽视了良好的蓝图规划，那么整个项目将会对时间、人力和金钱造成巨大的浪费。

在进一步了解线框原型的正确的实际应用方式之前，我们有必要首先了解一下它本质上究竟是什么，它的存在有哪些目的。

我个人认为，蓝图是对线框原型最恰当的比喻。人们不会将蓝图看作建筑物实际效果的渲染图，也不会通过它来制定视觉风格方面的决策。线框原型是纯粹的功能与信息的示意图。

对线框原型概念的误解

在实际应用中，我们还需要明白线框原型在概念上不是什么，并且最好可以对需求方、团队成员及相关合作部门进行解释说明。

线框原型不是设计

线框图应该彻底与字体字号、配色、图片等无关。多数人习惯进行形象思维，他们很容易将线框原型理解为在一定程度上表达了设计方案的设计稿。在线框图中过多的使用视觉化的元素，会干扰其对功能的呈现。始终要记住，线框图的作用是组织并呈现信息，要避免在视觉上过度的保真。

线框原型不代表最终布局结构

另外一个误解，就是人们时常觉得，视觉设计师要做的只是在线框图提供的布局结构的基础上进行美化工作；甚至在多数视觉设计师的观念中也是这样。从语义上讲，线框图所展示的布局，最主要的作用应该是描述功能与内容的逻辑关系，视觉设计师并不需要在所有的细节中受其制约。

线框原型不是交互原型

这两个概念之间的区别和联系确实容易让人混淆，从项目流程角度说，它们甚至是完全不同的两种工具。简单的说，线框图用来组织及呈现信息，而交互原型，顾名思义，用来展示及评估交互方式。多数时候，它们在形式上很相似，并且都应该避免使用那些容易造成干扰的高保真视觉元素。

线框原型的实际应用

正如在前文中提到的，很多设计师并不了解制作线框原型这个步骤在项目流程中的重要性，因为他们不清楚线框原型的本质和制作它的目的是什么。实际上，线框原型在项目流程中的目的性是很强的。下面，我们来看看线框原型在实际中的几个重要应用方面。

可用性测试

线框原型是进行早期可用性测试的最有效的方法之一。注意，我们在说的是可用性，而非用户体验；这两者之间是有区别的。可用性确实可以反映产品对于用户的友好程度，但它侧重于功能的使用方面，而不是指设计的角度。相应的，在进行可用性测试的过程中，应该尽量将注意力放在功能方面，不要被其他方面的因素干扰。

实践技巧

用户目标：使用线框原型模拟用户在完成使用目标的过程中可能执行的所有步骤。这种方式可以尽早发现网站功能架构方面的设计缺陷。
出错情景：线框原型可以帮助设计和开发人员更全面的预计到潜在的出错情景，并准备好相应的出错提示页面。

展示细节

对于设计和开发人员来说，有一个比较常见的困扰——很多时候，客户或需求决策者对产品的关注角度过于宏观，他们会对产品的功能进行非常空泛的描述，而对细节方面并没有明确的概念。这种情况下，线框原型能帮助我们有效的解决沟通方面的问题；大家可以通过这种可以看的到的方式，对产品的功能细节进行快速的勾勒，有效的传达信息。

实践技巧

对功能细节进行详细的描绘：不要只使用一个方框来表示某个组件，比如相册或地图等；要描绘出所有相关的元素，并且在必要的时候对功能逻辑进行文字注释。细节做的越到位，沟通效果越好。
预估相关内容的数量限制：很多设计师会忽略页面中的极端内容情况。诚然，在项目初期，我们很难对页面内容做确切的预估，但是在线框原型中做一些必要的范围限制还是可行的。与项目相关人员进行交流，讨论的要点包括某些标题的大致长度范围、内容中图片的数量、内容文字区域是否需要根据文字数量进行适应调整等。通过线框原型将这些细节问题确定下来，可以有效降低视觉设计及开发过程中返工的可能性。

将网站架构形象化

通常，除了架构师之外，团队中的多数成员会被网站架构方面的文档搞迷糊，尤其对于企业级的、或是信息结构逐步复杂化的大项目来说。架构方面的信息过于概念化，而线框原型正是将这些概念与有形的产品进行连接的第一步。

实践技巧

描绘导航元素：将架构信息形象化的起点，是将能够反映出架构的导航结构形象化。在线框原型中展示全局导航、次级导航及局部导航的结构，并描述他们之间的联系。
将操作步骤及出口形象化：要确保网站在结构上不会对用户造成死路或陷阱。我们可以使用线框原型与网站地图架构做对比，保证用户在执行操作的过程中的每一步都有前进、后退和退出的方式。我个人推荐使用Freemind一类的脑图工具。

总结

实际上，本文只是一篇概述；我们大致了解了线框原型的概念和本质、以及它在实际项目中的重要作用。文中提到的实践技巧只是在项目中创建有效的线框原型的一些基本要点。很多设计师在项目流程中都倾向于直接进入视觉设计的环节；出于对网站或软件项目的综合性与复杂性的考虑，不妨将这一步推后，首先通过线框原型做好计划与沟通的工作；实践成果会证明这是一种事半功倍的有效方式。

相关话题：原型(Prototype) 源地址：http://beforweb.com/node/20

关于快速原型的一点纠结

CDCer — 2010-11-30 21:40:11

作为一个交互设计师和工具控，我对原型设计应该用什么工具这个话题一直很感兴趣。工作至今，陆续使用过很多不同类型的原型工具，从最基本的纸笔，到Axure RP/Omni graffle，在不断地尝试和比较中，也一直在思考到底什么原型工具最适合做交互设计。后来发现其实这个问题无解。脱离了目的，单纯地讨论工具是没有价值的。所以想到写一下快速原型的目的和工具选择。

先来对原型（prototype）做个定义，这里的关键点是要区分wireframe，prototype和mockup三个概念。

Wireframe，直译的话是线框图。由线条构成的草图或示意图，都属于wireframe。当然如果有简单的阴影表现或者上色的话，一般也归到wireframe。

Mockup，模型，工业设计中用mockup会比较多，比如1：1的汽车油泥模型。但在ui设计中，mockup的概念和wireframe有时分得不是很清楚。如balsamiq mockups这款软件，它的实现的效果其实应该是属于wireframe的级别。下图是balsamiq mockups的实现效果。

最后说prototype，原型。原型更强调功能性，和以上两者很容易区分，一般可以交互的就是原型了。所以ps的输出稿一般不会是原型，而用dw实现的网页就叫原型了，如下图是苹果的一个原型机。

在flicrk上搜了很久，发现原型很难用图片表现，所以找了个youtube上的纸面原型的视频。我一直对纸面原型不感冒，看了之后就更觉得如此了。视频地址

原型一般又有低保真原型（low-fidelity prototype）和高保真原型（high-fidelity prototype）之说，像上面这个纸面原型就属于低保真原型。不过纠结一下的话，这个分法又是有问题的。因为保真度至少有两个维度。视觉的保真度和交互的保真度（功能实现的完善程度）。另一个维度是内容的保真度，在内容性产品上，这也是一个很重要的维度。

在上面这张坐标图中，有个重要的因素是技术或者说代码是否可以复用。这里先做个撇清，这不是本文所关注的主要内容，在快速原型中考虑代码复用，会无端带来很多限制。就我见到的，一般说来web或者blend以外的项目，原型代码的复用比较少见。而且追求代码复用的原型，一定已经处于保真度比较高的阶段了，本身已经不符合快速原型要追求数量和迭代的目的了，下面会提到。

在面对外部客户的时候，原型的视觉保真度会比较重要，它能够更好地帮助客户理解设计，而且一个视觉保真度高的原型，在提案的时候也会更具说服力。缺点也同样明显，同样一个原型需要投入更多的时间，一旦设计变更投入的时间就更多；而且在项目前期，一般很难做一个视觉保真度很高的原型，所以在整个设计流程中的应用也有局限。

所以如果不是需要向外部客户提案，只是用于内部沟通、检验交互问题的话，视觉的保真度可以退而求其次，以交互的保真度作为主要维度。应该追求速度和数量，尽可能在产品早期多尝试，多迭代，以求发现新想法并降低项目后期风险。

于是我对快速原型是这么定义的：项目前期，以发现新想法和检验设计为主要目的的原型设计行为。

关于追求数量，插播一个小故事，从Bill buxton的sketching user experience书里看到的：

陶艺老师在第一天说要将学生分成两组，工作室里坐在左边的学生将只以他们制作的陶器数量进行评分，而右边的学生只以他们制作的陶器的质量对其进行考核。进程很简单，最后上课那天，老师把家中盥洗室里的体重秤带来称数量评定组学生的作业，瓦罐总重量达到五十磅给“A”，四十磅的评“B”，以此类推。质量评定组学生只要做一个罐子，但只要很完美就能得“A”。到了最终评判的时候出现了一个奇怪的现象：最好的作品都出自于数量评定组的学生。看来在数量评定组学生辛苦地尽力做出更多陶艺作品时，他们从错误中不断地学到新的东西，而质量评定组的学生坐在那里思考如何运用理论做出“完美”作品，最终看不到他们努力的成果，只留下一大堆空泛的理论和死气沉沉的黏土。

追求质量的那组，结果却在质量上败给了追求数量的那组，诧异之余，仔细一想，确实是那么回事儿。回顾过往的设计经历很容易发现，当我们反复打磨一个设计的时候，思路已经落入了窠臼，跳出来的最好办法就是打破重来。但是抛弃一个已经花了很多时间在上面的设计对于设计师来说一般很艰难；设计的完成度越高，设计师就越倾向于去完善或者改进这个设计，而不是从零开始重新做另一个设计。

所以快速原型中的“快”字很重要，快了才能追求数量。俗话说得好：天下武功，无坚不破，唯快不破^_^

设计前期最常采用的工具就是纸和笔，输出稿就是草图（纸面线框图）。草图的好处在于快速，廉价，不受拘束（相对于软件来说，纸笔的获得成本比计算机低很多，而且设计师想表达的东西往往受到软件本身的功能或者设计师对软件技能的掌握所限制），容易抛弃。纸笔作为工具来说，确实是概念设计阶段首选。

那快速原型的首选工具是什么呢？我想了下，应该有这么几点要求：

1. 很低的学习和上手成本

2. 快速而高效的绘图功能

3. 可以实现交互动作

可以实现以上几个目的的工具不在少数。Axure RP或者omni graffle虽然学习曲线有点陡，但对于用惯了的人来说，完全可以胜任快速原型的工作。尤其是基于omni graffle大量的stencil，可以非常快速地出原型。不过我还是想推一下ppt/keynote作为快速原型工具，虽然相比之下，它们看起来业余很多。（原谅我，作为一个工具控，我太纠结了T T）

首先，ppt/keynote是绝大多数win/mac机器上的标配，从可达到程度上来说，他们是最高的，可以不用单独安装一个巨大的软件了。好吧，这点大多数人不care。

以输出稿来看，为了确保最终的结果在客户或别的同事的机器上可以完美的运行，大多数设计师会选择会以pdf/swf等作为最终的输出格式。但这带来一个弊端就是，源文件和最终输出是两个东西（其实ps/ai什么的也有同样的问题）。再换句话来说，修改设计，一定要打开做源文件的那个程序才可以！然后还要重新再导出一次设计稿才能用来展示。可能大多数设计师已经习惯如此了，所以没有觉得这是个问题（但这却是我喜欢用fw的一大原因，fw源文件即设计稿，不用再次导出；fw的另一个优点是源文件巨小）。可是ppt/keynote的好处就是，你可以选择不导出pdf，而是直接给对方展示源文件，按播放就可以了。然后退出播放模式就可以立马修改，试问哪个同类软件可以做到。

也许有人要挑战一下，就算它们可以即时修改，但是ppt/keynote可以完成的事情有限，很多事情我还是要在ps里完成的啊。于是我推荐以下这两个网站，都是基于keynote的模版，注意咯，所有模版都是在keynote里绘制的。

Keynotopia Keynote kungfu

所以，以keynote来举例的话，它拥有了超过大多数只是把它用来做presention的设计师的预期的强大的绘图能力（好长= =！）。此外，它还具有像母板这样的特性，能够为我们节省很多时间，这也符合“快”的奥义。

最后，ppt/keynote还有动画效果，包括场景切换动画和物体动画。能用来干吗？一个控件的放大缩小，完全可以用keynote中的magic move来模拟！包括iphone上的设置界面一般是翻转到背面，这个效果也可以完全地用flip来实现。对于一个以追求快速为目的的原型工具来说，这可以算是意外的惊喜了。

说完了优点，再来说缺点。最大的缺点就是免费的模版太少，上面那两个链接里的keynote模版都是要钱的，而免费的在效果上就差强人意了。另外免费模版的适用范围也有限，所以在这块上还需要设计师自己花很多精力。不过国外用keynote做原型的设计师正越来越多，前两天正好看pixelmator的一个专访，他们的设计师也是用keynote做原型的。

连一个绘图软件的原型都可以用keynote实现，那还有什么是不可以的呢？

相关话题：原型(Prototype) 源地址：http://cdc.tencent.com/?p=3223

聊聊线框图：UED和PD对于线框图不同的定位

Heidi格物志 — 2010-09-17 09:42:08

本周和PD们进行了一次《线框图以及Axure入门》培训。这是应几位PD的需求，他们也要学习如何设计线框图，所以想更加高效进行入门。

在场的有UED，有PD，我发现，对于两者都要画线框图，引发了一些讨论，这也是我事先预想到可能会引发争议的部分。

其中有个PD讲，有一次，老板是要求她来画线框图给他看的，她花了很多心思在线框图上，结果交付给交互设计师的时候，交互设计师不知道如何进行发挥了，交互设计师说：你都画这么好了，我不知道画什么了。之后，交互设计师进行了“润色”后，交付给视觉设计师，结果视觉设计师发现自己也无从发挥了，因为视觉稿已经出来了，都上了色了。

如果能够提升项目效率，这样倒真的也是好事。PD直接画出确认版的线框图，然后直接给视觉设计师，交互就不需要了。在很多小公司，也确实如此运作，也蛮好的嘛。

交互设计师说：交互设计师承担了一种需求翻译的工作，将PD的商业需求，进行具象化，并加入一些用户的视角，帮助优化产品，之后翻译成视觉设计师能够理解的语言，最后产生视觉稿。这也只讲到了一部分，如果PD也能够具象化，并传达得很好，为何还需要交互呢？

但是，在实际的工作环境里，我们必须得承认一个前提：术业有专攻，每个人的精力是有限的。

所以，PD，交互，以及视觉，虽然都在画图，究竟画得有什么不同呢?

这是在这个PPT里其中的一页，也得到了在场的PD以及UED的认可。

PD画线框图有时是不可以避免的，他们需要：

1. 细化思路，帮助自己写需求文档

2. 更好传达自己的需求给其他人，比如交互

3. 一些预研型的项目，需要据此让老板认可并拍板

但是做为PD，同样也担心之后交付给交互，会影响交互的发挥。而且，人人都有追求完美的倾向，在做了一个简陋版的线框图后，总是觉得太简陋，总是不由自主增加很多细节，以使之先得更加专业。但是，PD需要将重点放到“辅助表达想法”上，对“有用”负责，比如，功能点、内容块、业务流程，而那些打着叉叉的方面，不是说绝对不关注，绝对不表达，而是需要加上“仅供参考”。

做为PD，你认为版块A非常重要，比版块B重要得多，你可以在线框图上把版块A放大，放到首要位置，但是“位置”和“结构”不是你主要要控制的，你要传达给交互的是：版块A非常重要，以及为什么，而你所做的处理，仅供参考。聪明的交互会理解你的需求，且不会因为你妨碍了他的表达。

同样，交互和视觉，虽然是一个团队的，也经常发生因为边界问题，比如：交互不由自主加了很多颜色和质感，视觉不知道如何处理。视觉更改了线框图的结构，导致交互认为和自己传达的逻辑不相符。

所以，作为交互，请注意那些必须要关注的东西：

1. 任务流——根据用户需求、行为，分析用户的任务，以及任务流程，简化任务。

2. 布局/结构——信息分几类，什么样的布局更加易用

3. 位置/顺序——各个版块之间按照什么样的位置进行排列，引导用户的顺序是怎么样的

4. 层次/轻重——版块之间、文本之间的层次如何

请注意，在表达位置/顺序以及层次时，交互会忍不住为线框图加注颜色，进行字体的设计，但是在交付时，这些也是“仅供参考”的。要传达给视觉设计师的，仍然是“这些比哪些更重要，更应该被强化，以及为什么”。聪明的视觉设计师自然知道如何去表达而不是会觉得受到束缚。

到了视觉阶段，视觉设计师不管接到多么像视觉的稿子，也需要重新进行思考定位，需要输入目标用户特征，需求，进行产品的风格定位。

我建议，在改变线框图结构的时候，要和交互设计师保持沟通。上次，我在做线框图的时候，和几个PD，以及我们的几个UED争论了很久，确认的面包屑和搜索筛选的位置，结果到了视觉设计的时候，视觉设计师将我的面包屑调整到了不同的位置，为此还起了纠纷。因为这些位置的调整，是会影响之前确认的功能逻辑的。

大家如果有什么疑问，也欢迎继续讨论，那就先这样吧～

相关话题：原型(Prototype) 源地址：http://heidixie.blog.sohu.com/159785390.html

聊聊线框图：那些必要的理论和前提

Heidi格物志 — 2010-09-17 09:40:39

这是一篇老生常谈的问题，所以若有人已经了解，请自动忽略好了。这也是在一次和PD的交流培训会上再次提出的老问题：究竟线框图为什么要画，以及如何画。

至于线框图为什么要画，就不在这里聱述了。相信已经有很多人写过类似的文章，当然，如果你还有疑问，可以给我写邮件。

现在就是如何画的问题。

这不是很简单吗？一个简单的线框图，断不得比一个精美的视觉图更花费时间吧？也不需要美学的基础，也不需要精细的加工，加上已经有一个号称10分钟上手的工具作为辅助，恐怕没有必要单独开这个话题来研究。

但是，之所以又抛出来，正是在一个“画”字。

线框图不是“画”出来的，而是想出来的，是确认出来的。

线框图，只是提供了一个供讨论、供评审、供确认的承载物，然后并将确认后的需求（商业需求以及设计需求），以具象的方式再传递出去。

所以，线框图本身看起来美观不美观，专业不专业，画得好不好，都不是重要的问题。

一个画在白板上的简陋的线框图，和一个无比精美专业的线框图，是很难说哪个更“好”的。

说这个，是提醒我们自己，不要忽视线框图的本质问题。所以大多关于线框图怎么画的问题，可能不是出在不知道怎么画，而是不知道为何要画，具体画什么，画了怎么用的问题。

线框图究竟如何画呢？

一。必须的几个理念和前提：

1. 并不是精美细致的就是好的线框图

表面上，你似乎是没有经历前面的阶段，直接跳转到详细线框图的，但是实际上，你脑子里也一定是有前面的阶段的，而且在现实项目里，中间的这些环节是伴随着不断的评审、确认，确认一个问题，得到一个决定，排除一些可能性，得到一些idea，从而让可能性变得更靠谱更聚焦，最后剩下一个选择，产出了确定好的线框图。

2. 从最简单的开始，逐渐补充细节

输入资料，信息，问问题，回答问题，画图，这是一脉相承的。

从最简单的开始，若你先跳转了到了最后一步，或许会出现很悲剧的情况，你已经费劲了心思设计的交互，并不是需要的，如果把握不好确认的程度，会造成不只你一个人的资源浪费。

3. 最大的价值在于讨论和确认

线框图是用来吵架用的。所以，不能像视觉设计师一样抗拒对视觉稿的修改。

也许正是因为如此，我们才不断强调不要把线框图画得太美吧：）哈哈，因为看起来很美的东西，都不忍心去破坏它了。这是天性。

我们要庆幸，有了这么多次评审会，虽然限制更多了，但是方向也更清楚了。当方向越来越清楚时，我们就可以真正聚焦于一些交互细节的设计上了。

有一个经典的图，经常被用到，那就是：

谨记：再不跟我确认这是一个人之前，不要给我谈他的头发的颜色。

二。选择性价比最高的工具：

仅heidi自己，就使用过word、ppt、flash来做过线框图，我们身边的同事，有使用visio的，也有使用excel的，也有使用photoshop的，当然，在使用这些工具前，我们最容易使用的，最经常使用的，仍然是白纸和笔，所以，总是想在分享这个内容前，先强调一下：工具真的不是问题！因为很多新人，总是喜欢上来就问工具，好像掌握了一个工具，就可以画出很好的线框图，就可以显得自己很专业似的。

我们发现，凡是辅助想法表达的工具，可能都会慢慢越来越缺乏专业性，使用门槛降至最低，正因为这样，才能够让我们在表达想法时，不会去受工具使用的束缚，从而真正将注意力放到想法本身。

最后我选择了axure，也不是因为它目前流行，而是真正因为它的性价比。

好的工具，能够使线框图本身的优势得到最大的发挥，所以选择一个好的工具的原则是：

1. 保证线框图本身优势（快速、容易修改、帮助聚焦）

2. 便于分享与传播（导出html，只要有电脑就可以看）

3. 上手快（axure几乎没有使用门槛，真不知道为何有人靠培训axure收钱怎么收的）

至于官方网站上写的选择的理由，我反而觉得不是最重要的，当然，也是仁者见仁，智者见智了。

三。学会基本技能

很多学axure的同学，一不小心将自己进化到高级技能了。但是，除了显示自己很专业外，真的有用吗？

我靠axure吃饭很久了，也没写过什么高级命令，我用的最高级的功能，也就是imageregion以及动态面板了。

看起来很酷，但是实际项目里你会发现，将多种状态做到动态面板里，反而会在交付后，引起误解，并不一定有工程师知道有东西还隐藏在动态面板里嘛。

最简单，仍然是将不同的状态都列举出来，这样就一目了然了：

比如，在留言区域，输入前状态和输入中状态，都列举出来：

所谓的基本技能，其实也就是：

1. 导入图片

2. 增加组件（形状、文本、线条、button等）

3. 改变组件的形状、大小、颜色

4. 增加交互组件（radio button，check box，drop list之类）

5. 增加超链接（内部链接、外部链接）

6. 生成html

over……以上这些，对于简单的线框图，足够了。

若真的不明白，可以看一下这个文档：http://www.webppd.com/thread-82-1-1.html

四。你可能会用到的工具和快捷键

就三个足矣。很不幸的是，我们必须要容忍axure的一些问题，这些问题有可能也是由于汉化导致的，比如中文输入。我做线框图的时候，一般就用以上的三个东西，一个快捷键，加两个外挂。至于好用不好用，用过的人，你懂的。我在这里只所以提一下，是为了避免，万一有同学用axure的时候，不淡定影响自己的情绪和生理健康：

- 为何别人的文本行距都很美，我的不知道怎么调整？——其实人家是一行一行写的。
- 为何别人能输入中文，我的就不行?——有可能是用记事本粘贴的，或者是用了别的输入法。

四。所谓的高级技能

我这里提到的高级技能，在大牛眼里看，其实还是初级的。但是so what，对于我来说，已经足够了，最需要的是效率而不是把线框图做到完全交互的原型。

1. 动态面板实现页面不刷新时的状态切换

你可以将不同的内容分别放到一个动态面板的两个状态里，根据你的需求，事先当鼠标点击后，或者鼠标移上上的状态切换。比如当点击以下的“关闭演示指南”，使此区域变成收起的状态：

使用动态面板就可以轻易实现不刷新页面时的tab切换效果了。

但是，我真的建议，还是分成几个页面做，或者直接将不同的tab内容罗列到同一个页面上，这样也可以帮助pd去整理文案需求，不至于因为隐藏在动态面板里而遗漏掉。

2. 页面内锚标记

一个页面的某个链接点击后，跳转到同一个页面的某个区域。

使用图片映射热区这个组件可以完成此使命，英文版叫做：image map region

我还是忍不住建议，干脆为链接加上标注，或者撰写到文档里好了，否则被交接的人，如何知道点击后是跳转到页面内的区域呢。线框图是代替不了人与人之间的沟通的。

3. 做流程图

我只所以把流程图作为高级技能，是因为大家普遍认为axure做流程图并不专业，所以基本还是用visio做的多一些，但是把流程图和线框图分开来做，很麻烦的，还是整合在一起吧。后来我发现，其实axure做流程图并不难用，我现在无论是简单流程图还是详细流程图都用一个工具来实现，那就是axure：

简单流程图效果：

详细流程图（detailed page flow）效果：

有些同学做的流程图已经很专业很美观了，我的就献丑了！

其他的高级技能还包括：使用masters等，这里也不一一说了。

最重要仍然是在实践中学习。

相关话题：原型(Prototype) 源地址：http://heidixie.blog.sohu.com/159793641.html

UE学习笔记：原型对设计质量的影响

helicopter621 — 2010-06-26 15:11:46

最近迷上iTunes U，下了一堆课在听。除了Open Yale Course系列很赞之外，Stanford的HCI Seminar内容也非常丰富。最新的2010冬季学期有10节课，暂时“修”了一节，题目是：How Prototyping Practices Affect Design Results (January 15, 2010)，其中介绍的两个研究课题蛮有意思，本文将译介这节课的内容。

研究课题1：在同样的时间限制下，迭代是否能提升原型质量

研究通过对比实验进行。参与者被分为两组：迭代组与非迭代组。两组参与者均要求在同样时间内完成一个设计任务，迭代组的参与者会被鼓励在产出最终设计前进行尽可能多的迭代而非迭代组则没有迭代的机会。

研究方法——

1. 参与者与分组

28学生被随机分入两个迭代组与非迭代组。对性别、是否有实验任务经验、是否有设计经验进行了平衡。

2. 实验任务与材料

在选择实验任务时，研究人员制定了四个标准：
（1）可以清晰、客观地测量设计质量
（2）对设计或工程学知识要求较低
（3）可以由个人在一小时内完成
（4）可以有多种途径达到有效的成果

基于这四个标准，研究者选择的实验任务是：参与者在55分钟内完成“扔鸡蛋”装置设计（egg drop exercise）。

*扔鸡蛋装置设计是美国人一个经典游戏，不少人在中学都玩过，而且常用于训练团队合作。它要求参与者在限定时间内，利用限定素材制作一个可以使鸡蛋从高空坠落时不摔碎的装置。谁在最高的高度扔下来不碎就是胜者（图1-3）。详见：http://en.wikipedia.org/wiki /Egg_drop_competition

photo credit: Flickr

研究者为每个参与者提供了同样的材料，测试现场有一张书桌，以及一个测量标尺（图4）。

photo credit: Steven D ow

3. 实验过程

参与者有25分钟的设计时间，在此期间，材料可补充。25分钟后，研究者会提供一套全新的材料（但这次材料不可补充），让参与者在15分钟内进行最后的成品设计。完成后，将有10分钟的访谈，以及扔鸡蛋测试。对迭代组的参与者来说，在25分钟的设计期间，会被提供一盒鸡蛋，并被鼓励在4个高度进行预测试。测试区域就在工作台旁边。参与者可以进行少于或多于4次预测试，这取决于个人。而对于非迭代组的参与者来说，只会为他们提供1个鸡蛋，这个鸡蛋也将用于最终的测试。另外，在设计开始与结束之后（最终测试之前），会让参与者预估自己的鸡蛋会在多高的高度摔烂，作为信心对比测试。

实验过程图示见下。

4. 实验结果

迭代组的摔烂高度显著高于非迭代组，且设计开始与结束后的信心对比也显著提高（即，设计完后预测的高度比设计之前预测的要高）。有扔鸡蛋装置设计经验者的表现比没经验者好，有设计经验者的表现没有显著更好，但由于样本较小，不足以下结论。

总而言之，在同样的时间限制内，迭代有助于提高设计质量与设计者的信心。

研究课题2：平行原型设计（Parallel Prototyping）是否比连续原型设计（Serial Prototyping）更能产出优质的设计

研究通过两个对比实验进行。两个实验的主要区别在于设计任务，分组方法与实验过程是类似的。

参与者被分为两组：平行组与连续组。两组参与者均要求在同样时间内完成一个设计任务，并且在产出最终设计前要产出5个原型。平行组的参与者会在完成3个原型后接受评估，再完成2个原型后接受第二次评估，然后产出最终设计。连续组的参与者在每完成1个设计后，就会接受评估，这样接受5次评估后，再产出最终设计。

实验1的设计任务是，利用一在线编辑软件制作一个放在MySpace上的广告banner。设计期间的评估由专业设计人员进行，但他们给出的建议都源于一个固定的建议库（包含若干建议维度，每个维度有固定的十余条建议）。最终设计效果的对比通过点击量、通过banner到底广告主网站后的停留时等定量指标，以及7名专家的评分。

实验2的设计任务是，制作扔鸡蛋装置。在这个实验中，设计期间的一次评估就是一次扔鸡蛋测试。即，平行组会在做出3个原型后测试这3个原型，然后再做两个，再测试。线性组则做一个摔一次。最终评估的是摔烂高度。

实验1和2的最大区别在于，前者在设计期间的评估及对设计的反馈是主观的，而后者是客观的（鸡蛋是否被扔烂了）

研究结果：
（1）对于实验1的banner设计任务，平行组的设计显著优于连续组（点击量更高、评分更高等）；平行组的参与者自我效能感知提升程度显著更高；
（2）对于实验2的扔鸡蛋装置设计任务，平行组与连续组无显著区别

姑且不去考究研究本身存在的局限性（设计任务是很关键的一个变量），结果本身还是具有借鉴意义的。

尤其重要的一点是：时间。时间紧迫往往是迭代无法展开的原因，研究课题1力图证明的就是，在同样的时间限制下，不仅可以实现迭代，迭代还使设计质量提升了。研究者使用了心理学上的功能固着（functional fixation）来解释这一结果：如果过早把全部精力投入在建立、完善一个想法上，很容易陷入思维僵化。而迭代——设计、测试、再设计，其实是一个学习的过程，使设计者能够得到更多的启发，对设计也更有自信。

研究课题2探讨的是在迭代的基础上，平行原型设计是否胜于连续原型设计。虽说设计任务导致研究结果出现差异，但其实banner设计更贴近实际中的设计任务。因此可以认为，在设计过程中，平行的方式有可能激发更多样化的设计方案，而通过对比多个设计方案又有助于学习，进而提升设计质量。

这让我想起之前译介过的Yahoo首页改版例子，设计团队共产出了12种方案，虽说未必数量决定质量，但这种思路也许值得借鉴。在设计的最早期可以尽可能抛开太多限制，无需顾虑太多细节，尽可能发散。当然了，说得轻巧，在整个大环境下，创新、发散的空间可能很狭隘。

相关话题：原型(Prototype) 源地址：http://piglili.blogbus.com/logs/66945151.html

使用线框图来简化你的产品设计流程

elya妞 — 2010-05-25 23:22:50

绘制一个线框图是你在制作一个网站前必须要经历的过程。线框图能够帮助你合理的组织并简化你内容和元素，是网站内容布局的基本视觉表现方式，是网站开发过程中一个重要的步骤。

一、线框图的好处：

让项目组成员在初期就可以对网站有个清晰明了的认知
能激发设计师想象力，使其在创作过程中有更多发挥空间
给开发者提供一个清晰的架构，让他们知道他们需要编写的功能模块
让每个页面的跳转关系都变得清晰明了
很容易的改变页面布局

二、绘制线框图的工具：

手绘：纸、笔
流程图或思维导图工具：Visio、Mindmap、MindManager
原型绘制软件：Balsamiq、Axure
图形软件：Photoshop、Illustrator
HTML工具：Dreamweaver

三、线框图实例：

1、简单纸面原型：这是Broad Reach Retail Partners网站的简单纸面原型

2、低保真的HTML原型：没加任何风格的网站内容陈列

3、低保真的布局原型：界面布局线框图，由Jesse Bennett-Chamberlain设计

4、线框图原型：A preliminary mockup of a social conferencing tool built on Tiddlywiki for use at Le Web 3. The notes to accompany it are at tiddleleweb.tiddlyspot.com. Wireframe byPhil Hawksworth.

5、线框图原型：This one is based on advanced use of a blog publishing system (WordPress). ByMattheiu Mingassson or Activeside Internet Strategies and Consulting.

6、线框图：A wireframe for the Embrace Pet Community, by Jesse Bennett-Chamberlain of31Three.

7、线框图： A wireframe with color and images. Author page wireframe by Bokhandel.

8、线框图： 另一个带色彩的线框图. By Mattheiu Mingassson of Activeside Internet Strategies and Consulting.

四、最佳范例要点：

简单设计
灰度模式展现：灰度有助于把注意力集中在产品功能层面和布局层面，如果直接加图片和颜色，容易让人陷入对色彩细节的判断中忽略掉功能层面更本质的东西。
线框图用网站地图串联起来
专注于理想结果
等同于真实分辨率尺寸
一开始就计划好内容和元素

五、要避免的问题：

内容太多，重点不突出
强调颜色和设计
过多的设计细节

另外，介绍一个专门讲线框图的网站：Wireframe Magazine

本文缩略翻译自Using Wireframes to Streamline Your Development Process，疏漏和错误之处，还望批评指正

相关话题：原型(Prototype) 源地址：http://elya.cc/product/588.html

我们的原型设计方法

farthinker — 2010-03-22 21:46:02

根据Standish Group的“Chaos Chronicles Report ”，大约 66% 的软件开发项目不是失败，就是超出预算、超出项目时间，或是交付缩水的功能。

项目失败或亏损的前三大原因为：

缺乏使用者的参与
需求或规格不完整
需求或规格变更

白大哥在上一回的《我们的UED设计流程及方法》中也提到，一些需求管理工具或者上百页的文档已经不合时宜，不能作为我们跟客户讨论交流的介质和核心。所以我们需要制作原型，用来提高与客户沟通的效率、让客户参与到设计中来并且帮助他们找到核心需求。

传说哥经常说，使用工具是人和动物的根本区别。有很多工具可以帮助我们完成原型设计：

纸和笔

纸和笔是最简单也是最常见的原型设计工具。与客户、与同事沟通的过程中，不用打断思路，随手拿起纸和笔，就能表达出我们的心中所想。很撇托、很强大……

Visio

在Axure进入人们的视野之前，Visio是产品原型设计的一个常见选择。Visio的适用性非常之广，从网站界面、数据库模型，到平面布置图到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。

Fireworks/Photoshop

视觉设计师出身的项目经理，很多时候喜欢直接使用图形处理软件制作产品的原型。

Balsamiq Mockups

一个基于Adobe Air的手绘风格原型制作工具，控件库很丰富，而且可以自定义控件外观。导出格式为pdf和png。

Mockflow以及其他在线原型工具

与Balsamiq Mockups相似，各有各的特色，例如Mockflow的原型模板是它的一大特色。这些工具的导出格式也是pdf和png。

前面我提到了，原型需要帮我达到的目标有两个：

提高与客户沟通的效率，降低迭代周期
引导客户参与设计，找到他们的核心需求

刚才介绍的原型制作的工具大多都能实现第一个目标，但是这些工具的输出物通常是一张png图片，对客户来说，它也就是一张图片而已，大多数客户很难透过这张图片去思考其中的逻辑。这个时候我们的主角Axure RP就该出场了。

Axure RP Pro是美国Axure Software Solution公司的出品一款原型制作软件。Axure的发音是“Ack-sure”，RP则是“Rapid Prototyping”（快速原型设计）的缩写。顾名思义，Axure RP能够帮你快速而有效的建立产品的prototype。

Axure RP上手容易，操作简单，不需要任何技术背景，大多数人都能在一天之内掌握它的使
用方法，所以它能很好的实现上面提到的第一个目标；另外，Axure RP的事件机制能够模拟大多数Web应用中出现的交互行为，并且它的输出物是html，客户能够直观的通过“使用”原型，来想象产品的最终形态，思考原型是否反映了自己的真实需求，这样客户能够自然的参与到设计之中，从而实现了原型的第二个目标。

通常我们将原型设计分为两个阶段，“低保真原型”和“高保真原型”。“低保真原型”的作用是跟客户确认产品的需求和业务逻辑，所以低保真原型通常会很简陋，甚至我们会故意做的很简陋，比如我们会使用一些手绘风格的控件库，这样可以避免客户提出一些不合时宜的问题；而“高保真原型”会高度仿真产品的最终形态，是用于给客户验收的最终产物，另一方面也可以作为产品开发的标准。使用Axure制作高保真原型的时候，几乎能做到跟开发后最后形态一摸一样，包括视觉和交互行为，这一点是其他原型工具很难做到的。

使用Axure RP制作高保真原型

当我们启动一个用户体验设计项目的时候，我们第一项工作并不是原型设计，在之前还需要很多准备工作：在现场跟客户讨论，了解产品的业务逻辑，有条件的话还会对产品的直接用户进行一些访谈，了解用户的日常工作。紧接着回到公司内部，针对产品的信息架构进行团队头脑风暴，然后项目经理会整理出信息架构的脑图，脑图会作为成果物交给客户确认……在这一系列的准备工作之后，我们才会开始制作产品的原型。

按照我个人的习惯，在低保真设计之前我会用纸笔画一些草图，然后再根据草图制作原型。这样做的好处是，我能够最快的表达并验证自己的想法。

另外，我会使用一些Axure控件库来提高制作原型的效率，例如：Better Defaults和Sketchy Axure Widget Library针对一些周期较长的项目，我们会整理一些Axure RP的视觉规范库，提高维护以及二次设计时的效率,并且使用shared project功能通过SVN来管理Axure RP的源文件，方便多人协作设计以及源代码的备份和版本控制。

产品交互原型设计工具分享

Seven — 2010-03-15 21:51:31

交互设计师的一项重要工作就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是画出站点的大体wireframe(框架图)并结合批注、大量的说明以及流程图等，将自己的产品原型完整而准确的表述给产品、UI、重构/开发工程师等等，并通过沟通反复修改prototype 直至最终确认，然后进入后续的设计开发流程。

要完成以上复杂的设计和沟通工作，需要一个好的原型设计工具。这里就目前常用的和比较热门的工具来分享一下：
Word（产品经理比较常用）
Fireworks（交互组内推广的）
Balsamiq Mockups（近期曝光率比较高）
Auxre RP（业界圈子内广为流传）

一、优势劣势对比

二、操作界面对比
Word：基本是通过绘图工具栏的各种线框来画wireframe。

Fireworks：通过公共库的WEB原型组件库画wireframe。

Balsamiq Mockups：操作类似FW，通过顶部的控件库拉取到工作区域画wireframe。

Auxre RP：基本操作也和FW，Mockups类似，3是工作区域，从5控件库里拉取到工作区域画wireframe。

控件库内含了许多会经常使用到的widget物件，例如：按钮(Button)、图片(Image)、文字面板(Text Panel)、单选按钮(Radio Button)、复选框(Checkbox)、下拉式选单(Droplist)。甚至可以藉由Dynamic Panel的功能，来设计动态介面，例如：下拉式选单、页签，甚至是更进阶的AJAX或RIA的功能。

Axure RP相对于其他原型工具，比较有特色的有以下几个方面：

·区域4站点地图（页面列表）
可以自动根据页面列表，快速绘制树状的网站架构图，而且可以让架构图中的每一个页面节点，直接连结到对应网页。

·区域6 Masters共用模板功能。
在设计Wireframe时，如果能善用Masters共用模板功能，您可以节省下不少重复修改的时间，Master可以是经常被使用到的widget集合，例如：页首、页尾、或是一个登入的画面。

·区域8为高级交互操作区域
Wireframe里的大多数的widget可以对一个或多个事件产生动作，包括 OnClick、OnMouseOver和OnMouseLeave诸如此类。模拟出逼真的交互工作，十分方面的进行演示和讲解。

·自动输出网站原型 (HTML Prototype)
Axure RP可以将您设计的wireframe，输出成符合Internet Explorer或Firefox等不同浏览器的HTML prototype。

也就是说，您不需要安装Axure RP或任何其它软件，就可直接将产生的Prototype档案email给客户，或是发布到网页服务器让客户或使用者检视和操作，Prototype包括 Sitemap、Page Notes、Annotations和功能性的交互效果，是一个能有效测试所提议的功能和清楚沟通设计的工具。

·自动输出Word格式规格文件(Functional Specification)

Axure RP可以输出Microsoft Word的格式的文件，不只容易阅读，更可以展现规格文件的专业，能有效的记录、沟通和取得设计的最后确认。

规格文件包含了目录、网页清单、网页和附有批注的Master、撷取的画面、Annotation、Interaction和Widget特定的信息，以及结尾文件(例如：附录)，规格的内容与格式也可以依据不同的阅读物件来变更。

三、实例操作对比

这里，我们利用以上各工具，实际操作一次，制作一个简单的原型设计实例，看看各个工具的表现。
我们将实际制作一个Tab View的例子。

Word：

不足：对交互表达不好，也不利于演示。（一个基本的页面要分3页，且一页一页看才能表达交互效果）；没有标准样式，各种线框画的很随意。

FW：页面效果同Word。

不足：对交互表达不好，也不利于演示。（一个基本的页面要分3页，且一页一页看才能表达交互效果）；控件的扩展和修改不便利。

Balsamiq Mockups：

不足：对交互表达不好，也不利于演示。（一个基本的页面要分3页，且一页一页看才能表达交互效果）；输出界面手绘风格，随意性较大。

Axure RP：基本的外观和Word、FW相差不大。

但最奇妙的是他能生成一个真实的页面，可以演示Tab切换的效果，同时生成一份word格式的交互说明文档（实例暂不提供下载）。

四、总结
通过以上几个方面的比较，4个原型工具在绘制wireframe的基本操作上不相上下，各具特色。但Axure RP快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发等方面完胜，我们给于其★★★★★评价，不愧为产品经理基本基本原型设计和交互设计师做快速高保真原型的一把利器。

相关话题：原型(Prototype) 源地址：http://webteam.tencent.com/?p=1741

非原型不设计

牧童 — 2010-01-20 21:18:03

在风起云涌的互联网浪潮中，产品迭代的速度越来越快。随着用户需求的激增，也不断带来了对设计师能力要求的提高。初入交互设计领域几年来，明显发现可视化的内容远比文档的更易于被用户（以至我们的客户）所接受，就像用户研究项目中常说的一句话：“用户怎么说的，并不代表他们怎么想。”今天以“原型设计”为基点，与大家展开几点做简要的分析。

一、什么是原型设计？

首先，让我们看看在体验设计的过程中的“原型设计”。

以下结合个人对UCD理解和项目经验，梳理和简化的传统体验设计的流程。（流程是每个群体的工作方式，好像我们的长相，很难完全一样，并且时常改变，不能盖棺定论。）

简而言之，传统的原型设计往往是定位于概念设计或整个设计流程初期的一个过程。随着项目大小、时间周期等，UED人员往往会根据需求确定纸原型、低保真原型、高保真原型等不同质量的内容作为输出。具体来讲可以将原型划分为3类：

● 纸原型：顾名思义，就是画在文档纸、白板上的设计原型、示意图。便于修改和绘制，不便于保存和展示。因此想有效的利用纸原型，我们就需要注意纸原型的承载。
● 低保真原型：通常是基于现有的界面或系统，通过电脑进行一定的加工后的设计稿，示意更加明确，能够包含设计的交互和反馈，美观、效果等欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称，往往也可以作为需求设计稿输出。
● 高保真原型：属于原型设计的终极武器。包括产品演示Demo或概念设计展示。视觉上与实际产品等效，体验上也与真实产品接近。而为了达到完整的效果，很大程度上就要求交互设计师对视觉审美的能力。只有从视觉、体验两方面同时打动客户，在能最终赢得客户的信赖。

在我们不断按图索骥的去设计原型时，会不会发现有时原型并没有起到它的作用呢？又或者会不会发现抽不出时间做原型？做出的原型只用于展示特性和效果，没能物尽其用？下面，让我们进一步看看，如何将原型设计结合在体验设计过程中。

二、Why & How？

我们热爱动手、创新，也喜欢评论、思考。而在实践中往往是如下情况：

回头看看，我们多数时候输出的低保真设计稿，传递的信息是完全可以通过上图的纸面原型去表达的，而纸面原型所花费的时间和成本可能只有一半或更少。放眼整个产品设计过程，一个导航、对话框、窗口，也依然可行。试着在“需求讨论”的时候，去用手讨论，动上几笔可能就能帮我们在很短的时间内梳理清楚交互设计所需的“流程、布局、控件”等等。而且在画图过程中，还能以较低的门槛（可能需要另一只笔）就能让所有人参与其中，创造很多附加信息和价值。而或许更好的是，通过绘制白板的过程，你可以更清晰的传递出窗口的布局和逻辑；而通过在真实介质是低成本的交流，将会更容易打动你的产品经理和客户。在创建纸原型时，仅需要注意几点：

● 试着同时准备2支笔，让更多人参与设计
● 试着准备一支红笔，在讨论结束时，把所有内容进行梳理和总结
● 记得给白板拍照，或在输出之前保留好绘图纸

如果你有丰富大胆的想象力和一定的手绘基础，甚至可以将整个设计过程通过手绘的形式记录和展示，现在类似的产品宣传也随处可见，比如著名的宝马轿车。再顺便推荐一本关于视觉化思考的书《The Back Of The Napkin》与各位共勉。

上面我们只看到了天平的一端，我称之为“敏捷化原型”，就是鼓励大家在最初的设计时，动嘴的同时勤动手。大胆的把笔交给产品经理和团队的其他人，来帮助设计师完善和丰富你的稿件，这样才能激发和节省更多的时间去产生Idea。更进一步说，甚至在专业能力和环境允许的情况下，完全可以采用在需求开始时由设计师与团队一起进行纸面原型的绘制，之后由产品经理给出相关的设计稿或低保真原型。

在天平的另一端，是应当走向“精细化原型”时代。尽可能的将设计创意完善并融入到真实的场景中，不论是软件界面还是Web体验，都可以真实点击和拖拽。通过高保真原型的输出，用户更容易被整个产品而不是某个图案或体验特性所吸引。这不仅有助于单一方案的认可机会，还可以从侧面树立起设计师的专业形象，提升客户的认可，甚至可以大胆的提出流程的假设：“以原型为中心的设计”。

三、动手做原型设计

以下推荐并简单分析几个原型设计的途径。

前面说的纸面原型，最基础的就是需要纸和笔，我们可以简单快捷的描绘出一个窗口面板，从中点击弹出一个对话框，进行设置并保存，在旁边补充出对应的出错和分之流程。另外，为了解决不易保存的缺陷，除了自己亲自动笔，再推荐几款软件作为纸原型的输出。

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。

相关话题：原型(Prototype) 源地址：http://cdc.tencent.com/?p=2146

用户研究员对比原型有感

helicopter621 — 2009-12-20 21:10:41

一般我们会觉得，最终呈现给用户的UI是交互设计师水平的直接反映。但作为用户研究员的我，开展原型测试时接触、比较过各条产品线十多个交互设计师所做的原型，深刻体会到：原型的质量，有时更能体现交互设计师的功力——包括思维能力、组织能力以及细致程度。就比如你看一个美女穿着光鲜亮丽得体，但你得看过她家里才知道她到底是淑女还是邋遢女。

原型的质量，是指保真程度么？非也。

高保真——交互细节均做到位，带有视觉雏形——当然非常好，但这只能体现交互设计师使用原型软件的技巧。九零后的PS技巧也很高超，不代表他们的作品有品质。同理，你是Axure高手不代表你能做出可用、易用的产品，只能保证你的工作更有效率。

那怎样评价一个原型的质量？其实，光看页面结构树，页面命名这两点就能看出问题来。

1. 页面结构树

页面结构树图例

个人认为，页面结构树是否结构分明、分层清晰，能反映设计师对于产品整体把握程度。不仅对于页面关系复杂的产品如此，对于树状结构不强，流程性结构的交互也一样（详例见页面命名部分）。页面结构树为什么重要？

它反映了产品的信息架构。如果结构树混乱不堪、节点层级错乱，大可推断设计师也许只是机械地按照产品经理的产品说明文档（PRD）把页面给做出来，TA缺乏深入思考，并没掌握信息架构或页面流。那试问，连自己都没搞清楚，你怎样期望用户顺利完成任务、不迷失？
它使设计师在整个设计过程中，清楚知道当前编辑中的页面的归属，从而保证一致性和连贯性；
没有良好的结构作为基础，在需求变更时只会使页面及页面关系越来越混乱。结构化并不会导致灵活性缺失，因为只要有明确的页面子节点关系，整个分支的移动反而更轻易、更不会出错；
原型毕竟并不是只给自己用的，它是交付物，对其他岗位角色的工作也会有影响。比如交付给用户研究员开展原型可用性测试，如果页面结构乱七八糟，而页面又没有很好地串联起来，我为了设计测试任务而不断走查原型会非常麻烦。

页面结构树与产品逻辑结构树一样么？非也。因为前者完全以产品、以功能为中心，反映了产品的思维能力。而页面结构树，是在产品逻辑的基础上，融入交互设计师对于信息架构、对于用户的理解。比如实现一个功能，用一个还是两个页面？用页面还是层？用跳转还是新窗口？等。

总之，在花心思实现某个页面上的交互前，不如花一点时间，把页面结构树建立好？这是帮助自己理清思路、深入思考的重要一步。月漓的做法很值得参考，她会先画出页面结构图（图1），计算总共需要多少个页面、多少层，以及这些页面在流程上的分布。

图1

2. 页面命名

每每看到命名为new page或者copy of XXX的页面，我就要抓狂。页面命名只是举手之劳，没有任何技术难度，也正因此，它能反映一个设计师是否细致周全——而这，正是做出精致产品的关键条件！

表意清晰的页面命名，才能保证页面结构树的清晰和一目了然，才能时刻提醒自己：这个页面到底是干嘛的？？比如超群的做法（图2），我觉得非常好，在页面上加上StepX的标注，能让自己在设计时脑清目明。

图2

一致的页面命名，才能保证页面涉及到的概念，在展现给用户时是一致的。比如某个界面上的tab叫牛逼，对应的页面却命名成牛掰，你就常常会发现下次牛逼/掰这个概念再出现时，又会变成niubility了。小文案，大学问呐！常常我看着界面上那些错字、不统一的名词，就纳闷设计师们做好页面后，是不是连好好瞅一眼自己作品的时间都没有呢？

除了以上两点，原型制作还应养成一些良好习惯，如添加标注、添加参考页面等。图3是我在老三的原型里发现的资料参考页，他把可用于参考的一些关键页面、模块截出放在原型里，方便查阅，是非常好的做法。

图3

以上是我在接触十多个设计师的原型后的小小想法。我绝对认可必须做好具体交互过程，但是我觉得，制作原型，保真度低点、页面丑点没关系，建立架构和准确命名却能使你的整体设计更佳——而这其实并不需很多时间。更何况如今有了模式库，实现控件化，就能有更充分的时间投入到整体规划上。养成良好的思考习惯以及操作习惯，也许对长远的发展、成长为交互设计大师会有好处吧？

当你从零开始，用原型软件动手做原型时，第一步该做什么？期望看到有交互设计师分享他们的第一刻。

相关话题：原型(Prototype) 源地址：http://piglili.blogbus.com/logs/54440623.html

画好线框图的20个步骤

飞琼 — 2009-08-31 21:45:32

原文作者：Clive Howard
原文链接：20 Steps to Better Wireframing
译者：飞琼

对于任何一个开发项目来说最大的错误可能就是没有计划。最近，有些人认为开始前无需计划，一个优秀的开发者需要的是随机应变。我敢肯定这样的做法最后注定是要失败的。

线框图是计划中的第一步也是最重要的一步。这是将创意转换成客户使用的程序的第一步。本文将要带你了解线框图整个的流程；包括涉及参与人员，工具等，以便您能够更好的制作计划。

1）了解自己的目标
作为一个开发人员我想大家都有马上坐下来开始编码的冲动。通常最初的想法都很简单，那么你真的可以坐下直接开始吗？答案是否定的，项目很少有那么简单的，任何有经验的人都知道这样做将会有很多这样的那样的问题等着你。

一个线框图可以有效的提供您的工作效率。修改计划内容远比在工作开始后在更正要来得更容易。

这个过程也有助于对项目更深的理解。事先作出计划，提出问题、意见，以便解决问题。

最终制定一个工作计划，规划设计者，开发者，工程师以及项目经理各自的工作内容，并且要保证各个环节的配合。

2）重功能，轻外观

计划展示的效果不同主要体现在所采用工具的多样性。其实从根本上说都是介绍有关功能部分的应用，例如，一个网页将有3个文本框和2个按钮。这是功能而不是形式。

在Howard Baines我们严格按照这一原则进行，并且我们的线框图只包括一些功能要素（线框，按钮，下拉菜单等）。我们忽略任何视觉和布局的东西。其他人可能会做的更多一些，包括了布局和其他视觉的元素。这取决于你自己。

3）积累自身经验

并不一定要求您具备设计和开发的能力，而需要的是在网页应用或者网站上的经验。当然经验越丰富越好，并且你不需去理解关系型数据库只要画线框。

4）确定负责人

确保有人对整个计划负责。他们负责跟进和管理反馈，变化等。如果一个项目，那么通常负责人是发起人，因为他们更清楚目标所在。如果为客户提供服务，我们将会负责计划的进程。不管是谁，只要有人负责。

5）涉及每个人

也许不是第一次会议，必须在纸上锁定一个简单的方案并且是涉及关键利益者的想法。很少，参与的人们加快设计进程。同时，线框图的开发涉及你的团队和客户团队。例如，你正在用你现有的数据库整合你的应用程序或者网站，然后确保数据库所有者可以检测所有数据库中的数据字段在你把他们加入到你的线框之前。收集用户的传真号码如果无处存放是不好的。同水平的设计师对用户体验有很好的理解，并且在早期流动时会存在潜在的问题。

6）完成期限

预先留出时间和交付期限，对保持项目运行是非常重要的。最初线框图会议可以是一天或是几天，具体取决于应用程序的大小，但都需设定一个时期并且坚持下去。会后按记录跟进，以保持项目进程。

7）保持清洁

如果一个特别的网页要求两个文本框和一个按钮，那么只要有这些即可，不多不少。

8）避免设计的线框图太多

线框图只要阐述如何达到所需功能，不包括任何介绍和设计的内容。应尽量避免任何有关设计的内容，这样很容易分散客户的注意力。例如：为了更生动而增加一些蓝色，那么有可能需要半小时的时间去解释关于蓝色的用意。这些设计的内容应该是设计师的工作。

9）记住用户界面不是用户体验

想一些使用的介绍方法是极其诱人，比如AJAX。注意：线框图是关于功能元素而不是方案展示或者互动的方法。为了更直观的展示应用，应尽量避免AJAX，应侧重于线框图。

10）想想用户

这是很显然的，但是在规划线框图过程中还是很容易忽略这一点。我们的重点是功能，但是同样要考虑用户的体验。例如，如果你做了一个三页长的注册表单，可能发现很多人都是无法完成的。

11）不要懒惰

我们常听到：登陆页面是简单，可以不用写在线框图内。确保线框图包含计划的所有内容。在项目的末尾你应该有一个详细的说明。每一步都不应被忽略。

12）将线框图分成几个部分

一个网站地图或者应用被经常分为几个部分，比如新闻，产品，和用户账户。这样做更容易理解。

13）页面的数量

一个网页的应用往往包含了若干程序；结算就是一个很好的例子。通常是线性的，但是有时用户会选择不同步骤，例如跳过一步。显然你文档中的一些页面和页面中的标签（例如点击按钮）让用户跳转。

14）重复性

应用中的一致性可以有效地帮助用户，开发和设计者。组的重复元素是一件好事。例如，无论用户输入一个地址，将会是同样的地方在同样的命令。在规划线框图时就可以将其表示出来。

15）全部检查是有意义的

最终文档应该让任何人都能简单的操作。如果只是一个开发可以理解你的线框图，那么肯定是有问题的。最后问一下对这个项目什么都没有做的人，他们是否能理解。

16）广告也是功能

很多网站都有收费广告，这可能和google的广告一样简单，但他是功能而不是设计，所以也包括在内。

17）这不仅仅是公开网站

很多网站有一个管理区域用来管理内容，浏览注册用户概况，重设密码等。这个功能许多人都用不到，但是也很重要。很多时候这可能包含一些不公开的数据（例如用户账户启用按钮）。这对于开发在设计数据库时是很重要的信息。

18）知道什么时候结束

确保所有的利益相关者有机会去给反馈，但不把这种锻炼成画西斯廷教堂。通常情况下，可以说三步就能把工作确定下来。第一，把想法写在纸上；第二，从其他人那里得到反馈意见，比如，开发和设计者；第三定稿。

19）选择正确的工具

用纸和笔比用电脑更能抓住你的想法和创意。

一旦你开始设计你的文档我们建议使用你更喜欢的工具。例如，开发者可以用Microsoft Visio,项目经理用PowerPoint，设计者用AdobeFireworks。

我认为线框图应该是一篇文档而不仅仅是交互交流（像设计，可能被分散注意力）因此设计html可能不是最好的。

有很多线框图的工具，例如Balsamiq提供环境帮助很快的增加和自定义普遍的界面元素。他们可以给它一个手绘的感觉，提供一个视觉工具而不是真正开始的设计。

20）考虑相依性

每个人都知道一个购物车的流程是什么吧？因此很容易画成线框图并且放在一边。如果你用第三方支付工具例如PayPal?那么也许影响部分网站的工作。研究相依性，做出相应的修改。这在开始时更容易做到。

希望这篇文章可以提供一个清晰的画线框的思路，谁参与，如何完成，工具如何使用，最后的输出怎么样。最终的事情是，好的完整的线框可以节省你的时间。

你有其他什么秘籍，可以更快的画出线框图吗？

相关话题：原型(Prototype) 源地址：http://ued.alimama.com/?p=208

从线框图到最终设计

admin — 2009-07-12 02:21:52

原文：From wireframes to design

作者：Jesmon Allen

译者：耿人杰

———————————— 全文的分割线 —————————————

我们能做什么来确保我们所绘制的梦幻般的线框图能激发同样梦幻般的图形设计并最终创建一个梦幻般的网站？（译者注：有点绕口！）

什么是线框图？

“线框图是单一网站页面精简版的视觉表现，没有经过任何视觉处理”

此定义来自Strange Systems。

线框图是用来做什么的？

我在cxpartners花费了大量时间制作线框。它们被用来生成想法、测试用户、获得客户验收和创建最终网站或应用的蓝图。

递送交付物

当我将线框图交给开发团队后将发生什么？前端、后台程序各展所长，编辑人员摩拳擦掌，而图形设计师需要将他们的设计理念应用到基于线框的页面中。

不要给线框加样式

信息架构师经常开玩笑说：图形设计师的任务就是将线框图加上颜色。线框上所有的导航和内容通常是黑色和白色，所以设计师需要给线框加上一定的商业色彩。

这里暴露了一个潜在的冲突，信息架构师和图形设计师在哪个点进行工作交接的。如果给到图形设计师一个极其完善的线框，他的剩余工作只是动动彩色铅笔，那他们应该会郁闷到不行。最后，设计师通常也会感觉在给定线框下设计会限制他们的创新。

从一开始就让设计师参与其中

这就是为什么cxpartners提倡以用户为中心的设计过程，涉及项目的关键利益相关者从一开始就参与到设计中。利益相关者包括客户和最终用户，也包括程序员和设计师。从第一天开始就把这一条写在项目白板上，让他们参与到关键的决策中，并跟随进行的用户测试。用户测试可以就早期的图形设计想法进行测试，确保他们随着时间的推移看到线框的每一版进展，这是能影响整个设计进程的方式。

所有权和理解力

一个对线框图有所有权和理解力的设计师将能灵活和有创意地阐述他的设计，即使是在项目已经交付了很长一段时间后。网站是不断发展的，一个对线框背后的设计有深入思考和理解的设计团队能够不断的调整和补充，继而维持伟大的用户体验。

不断发展的关系

我喜欢看到我的线框被带入到生活中，所以cxpartners总能通过设计和开发进程让产品团队理解我们的想法，一个电话总能将问题讲明白。我也总能看到我的线框与聪明代码、伟大的图形设计一起结合成一个有着梦幻般用户体验的网站…

了解更多：

Wireframing and prototyping

用Flash Catalyst做交互原型

李小帅 — 2009-06-18 21:41:42

稍微试用了几天，总体上有这么几个感觉：

1.原理上与其他原型工具大同小异，基本上都是“制作分状态页面—>定义事件关联—>定义交互效果”的套路。

2.从功能上看，Fc像是ImageReady、Flash和Axure 的结合，操作形式上有Balsamiq Mockups的影子,熟悉这几款软件的同学上起手来应该是很快的。

3.与其他相关设计软件无缝集成，可直接导入.ai和.psd文件并将artwork们转化成交互设计组件。这是奥多比平台带来的天生优势，但仅凭这点并不能像卖点中强调的那样可以在根本上提高原型制作效率，该画好的还是要画好，该沟通的还是要沟通。

4.基于flex的丰富功能，轻松实现各种炫酷的交互动作，的确非常适合“效果控”们来炫自己的设计方案。

5.延续奥多比系列的一贯作风，身高体重转身慢，对机器性能有一定要求，用着“卡”，再用“卡卡”。

6.平台、技术和客户端优势还是比较明显的，预计其以后可能会成为主流的原型设计工具（特别是在RIA的大趋势下）。

7.现在的Beta 1版本稳定性欠佳，经常失效，且容易造成ps等的系统错误。还是应了我的内句老话，beta版就是为了崩溃而存在的。

具体的操作教程这里就不写了，推荐给感兴趣的同学们一个比较易懂的E文视频吧：Flash Catalyst and Flex 4: Part 1 Part 2

相关话题：原型(Prototype) 源地址：http://lilong4174.blogbus.com/logs/41102723.html

传说中的纸上线框图

倪爽 — 2009-05-11 20:50:29

画线框图/原型图，是每个产品设计人员的基本功。

可以用绘制画线框图的软件工具很多，从word、ppt这样的办公软件，到PhotoShop、illustrator、visio之类的设计软件，当然还有专用的Balsamiq、Axure等等。

那么如何选择线框图/原型图工具呢？

目的决定方法：明确目的，按照目的选择－－不选好工具，选合适的工具
结合自己的能力：产品人员各有专长，有些偏管理、有些偏设计、有些偏开发－－选一个能够扬长避短的工具
习惯成自然：无论选择哪种工具，频繁地使用它、把它用在不同场合－－通过反复训练，掌握它

此外，还有一组很常用的传统工具：纸、笔。

一些新的产品设计人员不太喜欢old school的办法，为什么有那么多强大工具，还要回到老土的笔和纸呢？不如看一下成功人士的实例。PhotoShop不能让你成为毕加索，word不能让你成为JK·罗琳，但毕加索一定画了成千上万张草稿，而JK·罗琳在纸上描绘出了你所熟悉的哈里·波特，你和成功人士的差别在于－－他们以简便的手段积累能力，而你把时间用来研究工具。

所以，请在产品设计中，特别是在学习和练习性质的简单设计中，充分利用手边的纸笔。

下面有两张比较详细的纸上线框图，来自things的开发公司。这两张图，显示了things iphone版的产品设计，原图比较大，请点开图片看细节。

全文看这里 >>

这是产品的实际界面。Things iPhone更多界面见这里 >>

最终，Things得到的评价是：Things definitely tops our list of GTD applications for the iPhone.

相关话题：原型(Prototype) 源地址：http://nishuang.de/archives/3068

线框图 - 原型可视化

applia — 2009-04-21 22:06:30

原文作者：Editorial.co.in
原文链接：Wireframes - Prototyping Visualization
译者：applia

当你需要为网站快速创建一个直观和可用的用户界面的时候，在写代码之前做好设计是基础。一个普遍的方法就是通过线框图来展现你的设计，线框图是一种使用线条为基本元素的绘画，与蓝图相对，像框图表现基本的导航和功能块，比如内容、功能等，这些都已经进入网站的创建。线框图的主要原理就是通过归类每一个页面上的入口和出口来保证设计的逻辑流程与功能。

可以在纸上画线框图，这是最快而且最简单的方法。如果时间有限，就把布局摄像画在页面上，重点表现每一个元素指向何处。

一些人更喜欢用Visio，Adobe Illustrator, Photoshop, Freehand, Fireworks，当然还可以是PowerPoint，Dreamweaver, Adobe Indesign等等。这里列出一些另外的工具，是世界上其他人可能在是用的。在此之前，首先大概了解这些工具都能带来什么好处：

在开发的前期，线框图是非常重要的组成部分，它能（影响）用户的期待，由于对网站了解更多，促进对网站的理解和流程规划。
在项目进程中，能够在线框图的基础上考虑变更和提出新的需求。使用线框图可以容易的表达常见的页面结构和单独页面内容需要。
线框图多数情况能够由于更好的输出引致更加卓越的产品，因为它在获得有价值的和准确的输入方面非常有帮助。
线框图／原型使得评价和对比不同的想法和不同的设计更加容易，更进一步的，他也能更加容易的改进。
由于线框图被审核通过，则会避免因为程序员对代码的无尽修改而造成的时间和费用的浪费。

Website Wireframes Tools (Web)－－网站线框图工具（适用于网站）

这是一个基于web的工具，用于构建网站的线框图。线框图就是一种对网站内容的简单视觉表现形式，节省开发者和客户去设计网站内容布局的时间。这个工具可以在几分钟内构造线框图，如果需要的话，可以通过email、即时消息或者电话的形式将线框图预览地址发送给他人。即使是不同地方的人也能够同事看到它，根据回馈、讨论、想法、建议等进行快速的修改。对于我来说两个非常有用的功能——首先是你可以每次修改的时候建一个信的版本，易于比较，也可以很容易的回到先前的任何一个版本去。第二个是上面说过的，结果可以分发给其他不同地方的人。

只需提供邮箱新建一个账户，就可以免费使用这个工具了！

Oversite (Mac, Win, Linux)

OverSite 提供了控件菜单，用于为网站创建线框图、概念图或者软件原型。OverSite有很多组件和形状以供选用来创建线框图。他的拖曳功能很像切蛋糕。另一个我个人非常喜欢的功能就是你可以为你创建的组建添加标注，在耗时较长的开发中这是非常有用的，也能够帮助理解情景概念。它有很多围绕软件原型的功能。如果你需要使用它创建网站构架，则OverSite能够自动生成网站地图表示构架。可以将网站构架和线框图导出到HTML（也可以导出成PDF格式，当然PDF格式就没有点击链接功能了）。这个软件最低35美元，适用mac,window 和linux操作系统。

Gliffy (Web)

网站线框图是表明你向整个网站开发团队表明观点的有力工具，Gliffy是一个用来创造线框图的免费软件，可以和其他人分享网页原型。使用这个工具设计线框图是非常容易的，只需要从空间库中拖拉盒子、按钮、线条等组件，然后添加文字。

这个软件是在线的，利用它可以创建、分享和协同设计流程图。它使用起来像是桌面软件，但是的确是通过web浏览器工作的，所以不需要安装什么的。

协作是一个非常棒的功能，在创建一个流程图的时候可以让多人一起工作。但是我得承认这个软件的用户体验和可用性并不如其他的软件。但他依然是免费的，非常值得推荐使用。

Gliffy有两种账户，一种是基本的一种是高级的，很明显高级的拥有更多的便利和功能。高级功能每月最低需要5美元。

Protoshare (Web)

如何通过实时的协同工作创建和改进可点击的、可以工作的网站原型？如何在开发的每个阶段将客户融入进来？如何使开发过程更加容易更加快捷呢？如何节省时间和金钱就能交付给客户更好的望着你呢？不需要论文和软件。

ProtoShare不仅仅是一个线框突制作工具，更是一个网站开发协同工作平台。不需要安装任何软件，ProtoShare建立在SaaS(服务性软件)环境上，则意味着依靠网络，团队成员可以在世界的每个角落协同工作，保持工作进度。这个实时协同工作的功能非常有魅力，支持IE , Firefox ，Safari。

PC和MAC电脑都可以使用ProtoShare.

可以免费试用30天，商业版每月26美元。

Axure RP (Win)－－仅适用于window

Axure RP 是一个快速原型和线框图创建工具，适用于负责定义应用软件需求和说明文档以及设计用户界面和功能的专业人士。相比其他的工具创建静态的原型图，Axure RP能够更加快速和容易的创建网站和应用的动态原型和说明文档。有一点非常好的是，在这个软件中能够穿件真实的控件，例如按钮、表单、图形和动态元素等。

界面非常易用，能够全选替换等便于全局控制，可以生成可交互的HTML页面而不需要额外的编码。也可以生成word格式的说明文档。协作和整合版本控制也非常棒。但是缺点在于我觉得过于昂贵了，而且我也不喜欢它自动生成的乱码。

只能用于Windows操作系统。

单个用户授权589美元，但是会有一些其他的折扣。

你可以从这里下载使用.

Jumpchart (Web)

Jumpchart 具有多种不同的账户类型：免费账户、简单、超级和豪华。当然免费用户是有限制的。

Jumpchart使用的Textile标记语言非常简单易学，简单性是非常好的特性，另外对于有可复用性要求的项目来说小纸片也是不错的功能。

这个软件基于web，用于快速规划和创建原型。一个Jumpchart是可以共享的，可以导出齐整的css，自动生成自己的网站地图。不能使用它创建高级页面布局，或者富导航，但是对于基本的网页布局设计是足够好用的工具。

Denim (Win, Mac, Unix)

Denim

使用Denim可以使用手绘的方法创建带有链接的网页布局。

使用曲线来创建和改进你的设计，为了保持方向感，有一个可选的浮动窗口提供当前编辑曲线的一个放大的视图。有些人发现这在他们感觉到在设计中失去方向感的时候或是是在想拖曳一个在主窗口中不是很容易观察的页面的时候非常有帮助。

设计者可以在多重层次上创建网站的显示方式，网站也可以在多重层测上被修改更正。

Denim 用于Windows, Unix, and Mac OS X. 在此下载.

Dia (Win, Mac, Linux)

Dia是一个矢量做图工具，类似Win32的Visio.适用于图形语言比如数据流、 entity-relationship diagrams，组织关系图表，统一建模语言（UML），电路图等等。适用于复现图形相互连接的情形。Dia是非常好学的，而且对语有能力的用户来说很熟悉。

Dia可以加载和保存图形为XML格式，可以导出为多种图形格式：eps. svg. xfig, 以及png格式，也可以打印（包括多页打印）。另外，它是免费的。

You can download it here.

MockupScreens (Win)

MockupScreens 顾名思义是能够创建页面的显示原型，并且组织成使用场景。使用这个软件，你可以和可用一起尝试交互设计，并快乎生成软件的视觉场景。

由于界面很直观，所以非常容易使用。可以快速添加组件，快速创建窗体。可以的组织这些窗体创建场景和故事板。可以为单独的窗体添加注解，比如使用留言本的方式或者添加彩色图标，看起来非常有吸引力。另外他是以一种演示幻灯片的模式，所以非常容易向别人讲解你的设计。

只能用于Windows，单用户授权的价格从79美元起。

这里可以下载试用版.

Balsamiq Mockups (Win, Mac, Linux)

Balsamiq Mockups 可以创建和协同设计软件原型。

Balsamiq Mockups比之其他工具更快捷，它自带非常巨大的预先建好的模式库，所以就不需要再花时间设计他们。

如果需要更加快速的选择，需要用户快速添加功能：输入一些控件或者图标的名称的若干字母然后就出现了！select from the list of suggestions, and your control will be added in no time.另外一个非常有用的特征就是Balsamiq Mockups具有无限制的返回和重做，另外动作名称清除明白也是非常有帮助的。对输出的范围限制是比较遗憾的，但起码是比较好用和快捷的。

Mockups is tightly integrated with Atlassian Confluence, Atlassian JIRA and XWiki.使用60个预先构建的空间你能设计任何东西，从一个超简单的对话框到正式的软件，从一个简单的网站到富交互网络应用。

能够在Mac,Windows，linux上使用，桌面版需要70美元。

从这里下载。

Lucid Spec (Win)

Lucid Spec 是Window适用的软件，用来创建原型和描述软件界面。使用这个软件可以快速创建页面布局，向用户展示，为程序开发者添加更多的细节。可以节省开支，增进用户的满意度，加快项目交流，明确需求。甚至可也可以创建功能需求说明文档。Lucid Spec可以模拟软件的运行状态，这可以帮助设计者和用户发现遗漏或者错误的需求。我比较喜欢的是它支持17种不同的组件，包括菜单、网格、树状结构和日历。这些组件都可以重新设置其参数。

使用Lucid Spec，你在三种活动中循环：1）设计页面布局和内容，在窗体中安排组件的位置，修改窗体和组件的参数值。2）模拟应用的运行，尤其是窗体之间的转换流程。2）描述在布局中不太明显的动作，这些描述都以绑定在组建或窗体上，也可以被引用。

单用户授权的价格为499美元。

iRise (Win)

iRise就不仅仅是个线框图工具了。

iRise应用程序模拟器可以帮助使用者确定(核对)需求。这个神奇的工具具有很多出色的功能，可以帮助提高软件质量，以及integrated development environment (IDE)。iRise 服务器安装一个迷你应用服务器，这个模块可以用于生成可容多个用户试用的应用原型。还可以跟踪需求、缺陷、测试用例及其他项目信息，这些都是基于web浏览器的。创建了原型之后，可以随时将其推至服务器，以模拟模式运用。这个模式下其他用户可以通过web访问原型。

I think its high cost is a great negative.

这里下载适用版.

Intuitect (Win)

Intuitect 有基本型和专业型两个版本。基本型是完全免费的，可以用来创建网站地图、线框图和流程图。专业版需要145美元。Intuitect是UX设计流程的易用工具，用来设计模型和文档。用它可以快速的为网站和基于web的应用项目创建高质量的说明文档和原型。也有助于创建交互模式以重复利用和共享，另外也可以用来创建能把项目所有元素保存起来重复利用的模板，不需要编码创建HTML的原型。通过Intuitect可以以一页的线框图的形式，或者网站地图、蓝图、更加直观和可用的可交互的流程的方式来审视你的设计。Documentation is not as what anyone can expect from a product of this caliber.

Pencil (Win, Linux, FireFox Addon)

Pencil 是一个免费的草图和GUI原型工具，可以作为Firefox的插件的形式安装，也可以独立安装。它的功能包括：通过模板创建图示、设计原型、有背景的多页面文档、支持富文本的即时编辑的文本控件、PNG rasterizing,跨平台等等。Pencil项目不需要过多的专业知识，而且非常快捷。Pencil会是永远免费的，可以再任何支持Firefox 3的系统上运行，这个项目看起来是非常有用的而且同时是免费的。

可以再Firefox的插件中找到它也可以下载这个单独安装源程序。

OmniGraffle (Mac)

OmniGraffle提供了许多工具用于快速创建流程图、图示、网站原型、页面布局、网络对话、脑图（哈哈！）以及其他可视化的图形。OmniGraffle 5.0 使用了新的“Graphviz layout engine” 变得更加功能强大，快捷和容易使用。OmniGraffle 可以打开和转换一系列文档格式，包括微软visio。There's plenty of power under the hood使画图和设计都更加快捷和容易，同时具有定制和融合工作每个方面的能力。

在流程图上创建连接是我很喜欢的。我喜欢它的功能强大同时界面易用。贝塞尔曲线是非常有用的，但是以我个人角度来看我觉得有些难用。

有两个版本供选用：基本版和专业版。只适用于Mac OS X.

标准版费用为99.95美元。这里提供免费试用.

EasyPrototype (Win, Mac)

EasyPrototype依靠你的一些经验能力工作，比如手绘、Photosho或者白板会议，以此在短短几分钟内创建出动态原型。可以不需要编码而快速的创建应用程序原型，使过程非常简单。它的功能包括：将静态Photoshop图形转换为动态原型，根据反复出现的描述生成自动标签，通过标签指向将多个页面链接到一起等等。可以将你的原型打包成ZIP以email发送。我发现EasyPrototype的基本工作流程非常简单而且用起来非常舒服，包括容易指向和点击的界面。

Mac 和Windows都可以使用。

The cost is $69 with a 30 day money back option.

此处下载30天免费试用版本.

SmartDraw (Win)

SmartDraw为你而画。它可以帮助你创建流程图、组织关系图、脑图、项目甘特图、时间线、因果关系图、建筑平面图、软件模型（UML, Booch OOD, Entity Relationship Diagrams 等等）、决策树、家庭成员树、网络对话、家系图、演示故事板，你需要喝点水嘛？大多数情况下，SmartDraw的模板都是可以满足需要的。也可以不需要创建一个软件表格就可以画数据图（饼图、柱状图）。简单的选择一个图表类型然后直接在图上设定数据值。

它也提供了网页标注，点击抓取任一个网页然后在其上标注。对于网站评审和开发都是非常有帮助的。SmartDraw可以喝微软的办公软件无缝结合。SmartDraw的模板是非常有力的， Limited maps may be its drawback which I feel.

SmartDraw's内建相片-软件功能，可以从相机或者其他地方直接导入照片，切割或者缩放、调节对比对和颜色，然后将其放入组织关系图或者其他任何绘图之中。

只可以在Windows使用。

这里可以下载免费试用版。

MxGraph (Web)

MxGraph 是一个 javasript 库，使用基于web浏览器的功能创建交互图形以及流程图。面向的软件是需要设计工作流/BPM,图解、网络或者一般的可以编辑的图形的基于web的应用。

使用MxGraph是不需要安装插件或者第三方软件的，只需要在web浏览器中创建和绘制图表。MxGraph可以用于对网络、数据库等追踪工作流程。

MxGraph的价格多种多样，取决于使用。The price range of mxGraph starts at 3,600 Euros for a limited distribution single development license with 12 months of technical support and software updates. The browser list it supports includes Firefox, IE, Safari, Opera, Camino, Iceape, Epiphany, Galeon, Google Chrome, I think they forgot to mention flock.

WireframeSketcher (Eclipse plugin)

WireframeSketcher是一个Eclipse自带的可以快速创建窗体原型和UI 交互原型的工具。它提供非常多的空间和窗体组成部分。WireframeSketcher 提供了一个 CANVAS，设计者可以再其上是使用标签、文本输入框、数和图表来设计模型。WireframeSketcher具有所有的习惯操作方法例如复制、粘贴以及无穷的撤销重做。多个页面可以同时编辑，内容可以再其间复制。

窗体原型以XML的格式保存，所以可以容易的进行版本控制，对比和合并。原型可以输出到剪贴板或者导出为PNG格式。需要阅读以下说明来获得免费版密匙。

Draw (Part of OpenOffice)

Draw是个强大的图形软件包。我很喜欢停泊工具栏这个功能，可以通过点击一次选到合适的作图工具。另外对对象的群组、解组、重组功能也不错。另外一些功能包括在二维或者三维角度处理和旋转物体，导入BMP, JPEG, PNG, TIFF等格式图形，可以将其保存在Openoffice文档格式等等。另外一个令人激动的特征是Draw可以创建当前工作的Flash版本。

相关话题：原型(Prototype) 源地址：http://www.yeeyan.com/articles/view/56451/36653

纸上原型设计方法探讨

李小帅 — 2009-04-20 22:52:32

做这个东西有两个目的：

1. 把业内一些零碎和模糊的东西进行分析、整理并加以亲身实践，制定成使用说明或者标准化的设计工具。现在国内的交互从业者对一些概念和工具的理解基本上只停留在老外创造的美好词汇和自己的臆想之中，融入到工作实践时总有这样那样的不靠谱，这并不是东西本身不实用，而是师夷长技的时候并没有结合自身情况。

2. 抛块砖，引堆玉。希望童鞋们把UED的相关方法、工具和经验成果都规范总结起来，提高自己工作效率和作品质量的同时，也为整个UED行业的发展壮大贡献力量。在这条方兴未艾的行业道路上，我们需要交换思想，互相启发，彼此搀扶，共同进步。

这只是团队工作和设计实践的经验总结，离所谓的标准和规范还差的很远，况且即使是标准和规范也都是需要不断完善和修正的。欢迎大家多提宝贵意见。猛击此处下载PDF文档

该[规范]版权以及最终解释权为阿里巴巴（中国）用户体验设计部所有，转载请注明出处。

相关话题：原型(Prototype) 源地址：http://lilong4174.blogbus.com/logs/38167779.html

常用原型图设计工具

胡晓 — 2009-03-14 16:45:08

天天和产品打交道，不时要做一些页面原型、离不开各种工具，工欲善其事必先利其器，好的工具软件可以大大提高工作效率，工具各有优劣，大家按需取之。原型设计工具我暂时把它分为两类，Web应用原型设计工具及软件应用原型设计工具、微软的visio就不说了：

Web应用原型设计工具：先来看看这个几个：Axure RP、Balsamiq Mockups和Pencil Project试用感觉：

第一个、Axure RP：

来这里看看视频简介：http://www.axure.com/tour.aspx

Axure的发音是”Ack-sure”，RP则是”Rapid Prototyping”快速原型的缩写。Axure RP Pro是美国Axure Software Solution公司的精心杰作，可以说Axure是Windows上最出色的原型设计软件，亦是web产品前期设计的首选，原因是：够简单、上手快，能帮助网站需求设计者，快捷而简便的创建基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发；
Axure RP六合一功能：网站构架图、示意图、流程图、交互设计、自动输出网站原型、自动输出word格式规格文件；
国内都有很多教程了，看看这些：悠识网站的教程、iaxure网站
客户端下载地址：http://www.axure.com/downloads.aspx 现在是5.5的版本，支持圆角、SVN协调编辑等等。

第二个、Balsamiq Mockups：

Balsamiq Mockups 视频简介

Balsamiq Mokups是用Flex和Air实现的，在Mac OS, Linux和Windows下都能使用，有桌面版本、Confluence，JIRA，和XWiki中的版本；
涂鸦风格、使用起来也很简单、各模块工具也很齐全，详细说明可见官方博客 http://www.balsamiq.com/blog/?cat=14

有人提到不能输入中文的问题，很简单：在Mockups的菜单里选择 View -> Use System Font 就可以了；
该软件的桌面版售价78美刀。作者意大利人Peldi说这款软件的设计就是用它自己来设计的，满足自己的需求。而在经济寒冷的2008年，从1,322位付费用户那获得了162,302美元的收入（其中12月份就有39,000美元）;
windows版本下载地址 http://www.balsamiq.com/products/mockups/desktop#download

第三个、Pencil Project：

查看官网简介：http://www.evolus.vn/Pencil/Screenshots.html

一个firefox插件，比较小的工具，画简单的界面基本上可以满足了；
安装地址：https://addons.mozilla.org/en-US/firefox/addon/8487

第四个、OmniGraffle

很不幸的是，这个软件只有Mac版；
Omni Group这家只有26个人的小公司，他们人数虽少，但却产出了像OmniWeb、OmniGraffle、OmniPlan和OmniOutliner等等一系列深受用户欢迎的精品软件，实力绝对不容小觑；
漂亮的界面、能轻而易举的绘制出漂亮的图形、丰富、精致的模板、辅助对齐和尺寸调整功能；详细描述去丁宇的博客看吧；
下载地址 http://www.omnigroup.com/applications/omnigraffle/

软件应用原型设计工具：

第一、UIDesigner http://qbar.qq.com/uidesigner/

UIDesigner由腾讯CDC出品；
是如何设计软件原型的呢？详细介绍请见腾讯博客；

相关话题：原型(Prototype) ucd的工具和软件源地址：http://hx.okvi.com/?p=522

交互设计文档4：Axure交互实例

季子乌 — 2009-03-11 09:15:00

上下文链接：交互设计文档-1：经验和设计工具、交互设计文档-2：设计工具的选择、交互设计文档-3：Axure线框图实例

上篇用SNS未登录首页的实例介绍了Axure RP Pro制作线框图(Wireframe)的基本操作方法，嗯，那只是个入门。这个工具更多的“好东西”在这篇，以及在大家自己的研究之中。下面，我就把我所用到过的“好东西”先来分享分享，嘿嘿！

Masters（通用模块）
上篇的未登录首页中的底部，在网站中是通用的内容，因此我们可以利用到Masters（通用模块）。在通用模块中新增一个取名为“footer”的Masters。

双击“footer”模块名进行编辑，将Home页中footer的内容剪贴到模块中。为了在页面中的准确定位，我给footer也加了一个底色框。

然后别忘了把“footer”拖到Home页中相应的位置哦。
Menu(菜单)和Quick Link(快捷链接)
RP中制作多级菜单非常方便，只需要用到组件工具中的：

一个Menu(Vertical)：垂直菜单，一个Menu(Horizontal)：水平菜单。
菜单默认的一级Menu Item（菜单选项）有3个，我们可以通过右击某个选项来插入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可以编辑菜单

Tips：按键盘Tab键只会让当前聚焦点在菜单选项间浮动，不能增加新菜单选项。
新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同；
另外，在菜单中修改任一菜单选项的宽度，整个菜单的宽度都会被修改。也就是说，菜单宽度值是各个一级菜单选项的和，而不是自己事先定好的宽度。

拉长或缩短整个菜单的宽度时，只有最后的一级菜单选项的宽度被改变。可以通过拖动来选择多个菜单选项，在公共栏中对内容显示进行相关操作。

Tips：要先选中上级菜单选项，下级菜单才会显示出来；
下级菜单显示的起始位置是上级菜单的左边线，并且无法超过左边线。通过右击菜单中的“Edit Rollover Style（编辑翻转样式）”项，可以制定鼠标移动到菜单上时的菜单样式变化。

Apply to：
This menu item only ：只应用到对当前菜单选项；
This menu only：只应用到同级菜单；
This menu and all submenus：应用到所有同级菜单和下级菜单；Tips：为菜单添加了Rollover Style之后，菜单选项的左上角会出现一个黑白小框，鼠标移动到小框上，就可以看到Rollover Style的预览效果。
为菜单加上链接，我们选择菜单选项“首页”，再选择Interactions（交互）事件中的“Quick Link”

在Link Properties（链接属性）中选择网站页面地图中的“Home”页。一个链接就添加好了。

当然，也可以添加外部链接（Link to an external url or file）、重新加载当前页（Reload current page）、返回前一页（Back to previous page）。
表单和交互事件-关键字匹配实例
在前一篇介绍了一些表单组件的使用（文本输入框Text Field、下拉菜单Droplist、复选框Checkbox等），下面我们通过“关键字匹配”实例中交互事件，深入一点来认识表单的丰富交互效果。做一个类似google搜索的“查询建议”的关键字匹配实例：

我们简单模拟这个效果，寻找好友中姓“李”的朋友和叫“李查……”的朋友。实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。=
点这里先看看我做好的效果，下面的图片效果：

过程讲解：
用Text Panel、Text Field和Button 先做好搜索内容。然后拖出一个Dynamic Panel（动态面板）：

在Text Field下面拉伸出一个“查询建议”的区域来：

在Label标签栏分别为工作区中的Text Field和Dynamic Panel命名为“keyword”和“matching”双击“matching”，为它加上3个State(状态)：

第一个状态设为空内容，双击第二个状态(matching1)进行编辑，用List Box(选择框)：

在List Box中添加多个姓“李”的好友名字选项。

注意：Allow multiple（允许多选）不要勾选。回到工作区，选择“matching” 动态面板，双击第三个状态(matching2)，继续制作“查询建议”菜单，这次都叫“李查……”。
以下是“matching1”和“matching2”状态的菜单内容。我们分别为两个选择框命名为“matchingList1”和“matchingList2”。
和
Tips：可以看到两个状态的边缘都有一条蓝色虚线，这就是我们在调用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面中无法被显示出来。
下面开始添加Interactions(交互事件)。为表单添加交互事件的方法，先选中工作区中的表单组件，然后在Interactions面板选择“Add case..”添加事件。

或是用一些预设的交互行为作为条件，为组件添加事件。
OnClick：点击
OnKeyUp：键入
OnFocus：聚焦
OnLostFocus：失去聚焦

为“keyword” 文本输入框OnKeyUp（键入行为）添加事件。键入“李”时，显示“matching” 动态面板中的“matching1” 状态。

勾选Select Actions（选择动作）中的“Set Panel state(s) to State(s)（改变动态面板的状态）”，在“Step 3: Edit the Actions description（第三步：编辑动作描述）”中选中蓝色的Set Panel链接，将动态面板“matching”的默认状态“none”改为“matching1”，即前面设好的姓“李”的“查询建议”状态。

点击右上角的“Edit Condition（编辑条件）”，为Case设键入时的keyword值。
可通过下拉菜单和输入框设置条件：“text on widget（文本组件）”，找到“keyword”文本输入框，equals value “李”（变量值等于“李”）。

以下还需要添加几个Case，这里不详说，大家试着自己做一下：
OnKeyUp行为下：
Case 2：当键入“李查”时，“matching”动态面板状态变为“matching2”
Case 3：当键入值不等于“李”时，“matching”的状态变回为“none”
OnFocus行为下：
Case 1：keyword的值是“李”，“matching”动态面板状态变为“matching1”
Case 2：如果keyword的值是“李查”，则“matching”动态面板状态变为“matching2”
OnLostFocus行为下：
Case 1：“matching”动态面板的状态为“none”

为“matching”动态面板内的两个状态添加交互事件，效果是“当某个查询建议被选中时，keyword文本输入框的文本值变为选中的内容”。
“matchin1”状态里的“matchingList1”选择框，OnChange行为的Case 1：

这样的Case我们需要做5个，因为我们有5个姓李的好友。我们可以通过Copy Case和Paste Case，来复制和粘贴。

但我们需要把equals的值“李安”分别改成其他的名字……

再选择OnChange，复制所有的Case：

到“matchin2”状态里的“matchingList2”选择框

将多余名字（不叫“李查”）的Case删除“Delete Case”

别忘记需要将选择框的名称修改为“matchingList2”

总算好了，发布看看吧（捏汗ing~~）~~点这里看效果；and 点这里下载.rp源文件，源文件包括了前篇中制作的SNS首页和今天讲解的所有内容。
RP Pro5.5多动作-倒计时跳转页面实例
RP 5.5版本之后，支持多个Action（动作）同步，这样我们可以制作出更多的交互效果来了。比如说：倒计时跳转页面。
新建一个页面，添加一个Text Panel加上内容“将在　　秒后跳到首页！”。在文本空格处加上一个Dynamic Panel(动态面板)，在Label中为它取名为“stopwatch”。

再为它加上“s5”到“s1” 5个状态，分别编辑5个状态，在里面加上内容“5、4、3、2、1”5个倒计时秒数。
Tips：建议文本中输入空格时用全角输入，否则它将跟Dreamweaver一样在HTML不能显示全部的空格，这样会产生与设计时的错位。利用工作区下面的Page Interactions（页面交互栏）为页面添加事件。

双击“OnPageLoad”，这时我们看到5.5版本中有一个选项“Advanced Editor(高级编辑器)”

利用这个高级编辑器我们可以为页面同时添加多个动作。选择“Add Action”增加动作，可以不断为页面添加动作。

Wait Time(ms)（等待时间）是我们等下要作为倒计时用的动作，单位是毫秒(ms)，1秒=1000毫秒。我们按步骤为页面事件添加动作：

“stopwatch”秒表跳在“s5”第5秒；
等待1秒；
“stopwatch”跳到s4；
等待1秒；
“stopwatch”跳到s3；
等待1秒；
“stopwatch”跳到s2；
等待1秒；
“stopwatch”跳到s1；
等待1秒；
跳到首页。“Step 2: Select Actions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。另外，跟前面讲的表单交互一样，“Step 3”动作描述中的参数可以通过蓝色文字链接进行修改。
完成添加事件，多个动作一次完成。点这里看效果吧！

据称Axure是目前Windows系统最好的原型设计工具了，它的强大就在于这些交互事件，远不止我说的这些。欢迎大家继续研究、发现和探讨。
如果你说这些交互操作太复杂了？！嗯，是的，如果你不需要用到交互效果，可以选择其他更轻巧工具（如Mockups 或 Pancil）。但既要做原型又要达到交互效果，又加上你是Win操作系统的话，Axure无疑是当前最好的选择了。而且，Axure也是有汉化包的，大家可以去google之哦~~偶已经习惯于用“有道桌面词典”+ 英文版软件了=。=（这是无奈的习惯~~）
祝你“用餐”愉快~~

终于收尾了，撒花~~~~

相关话题：原型(Prototype) Axure 源地址：http://p.pnq.cc/ue/?p=185

原型(Prototype) - UCD大社区

十个方法，让你的线框原型更具沟通能力

1.通过明暗对比来描述模块之间的视觉优先级

2.使用真实的数据内容

3.确保细节的准确无误

4.增加范例图片的自我描述能力

5.使用色彩时保持谨慎

6.确保交互元素明确易懂

7.以实际像素为单位

8.创建变更日志

9.避免深色线框

10.保持跟进

浅谈草图设计（一）——自由

线框原型(线框图)的本质及实践应用概述

线框原型就是蓝图(blueprints)

对线框原型概念的误解

线框原型不是设计

线框原型不代表最终布局结构

线框原型不是交互原型

线框原型的实际应用

可用性测试

实践技巧

展示细节

实践技巧

将网站架构形象化

实践技巧

总结

关于快速原型的一点纠结

聊聊线框图：UED和PD对于线框图不同的定位

聊聊线框图：那些必要的理论和前提

UE学习笔记：原型对设计质量的影响

使用线框图来简化你的产品设计流程

我们的原型设计方法

纸和笔

Visio

Fireworks/Photoshop

Balsamiq Mockups

Mockflow以及其他在线原型工具

产品交互原型设计工具分享

非原型 不设计

用户研究员对比原型有感

画好线框图的20个步骤

从线框图到最终设计

用Flash Catalyst做交互原型

传说中的纸上线框图

线框图 - 原型可视化

Website Wireframes Tools (Web)－－网站线框图工具（适用于网站）

Oversite (Mac, Win, Linux)

Gliffy (Web)

Protoshare (Web)

Axure RP (Win)－－仅适用于window

Jumpchart (Web)

Denim (Win, Mac, Unix)

Dia (Win, Mac, Linux)

MockupScreens (Win)

Balsamiq Mockups (Win, Mac, Linux)

Lucid Spec (Win)

iRise (Win)

Intuitect (Win)

Pencil (Win, Linux, FireFox Addon)

OmniGraffle (Mac)

EasyPrototype (Win, Mac)

SmartDraw (Win)

MxGraph (Web)

WireframeSketcher (Eclipse plugin)

Draw (Part of OpenOffice)

纸上原型设计方法探讨

常用原型图设计工具

交互设计文档4：Axure交互实例

非原型不设计