1 visio
在visio中创建线块原型教程首先准备环境
最近我把我画的产品线框图发给别人，被一些业内人士夸得体无完肤。
炫耀后，问我是用什么道具画的，我告诉他我用的是visio，他试了一下说：“为什么这么丑……”
于是我很生气，决定写visio制作行框图原型(也称为wireframe，也称为prototype )的教程。 但是工具毕竟是工具。 就像很多人在电脑上处理丑陋的照片一样，在word上画出接近90%的最终产品的设计稿的人在再公司也见过，但是做得好不好主要取决于使用的人。 但是，一些基础知识需要普及。
历史中……成为互联网公司的产品经理两年了，尝试过很多制作原型图的工具。
photoshop：大概是最开始使用的吧，这个高级道具对我等不成熟、视觉艺术细胞不丰富的人来说，不仅使用慢，而且难看。 我最先使用他，最先放弃了他。
说excel有点不可思议。 我想很少有人在excel上画线图。 我想你只能想到像我这样山寨的产品经理。 但是，这种方式虽然严格使用基于网格的工具来绘制背景界面很方便，但无法表达为具有稍微丰富的视觉元素。
word：这是和公司社区部的doubleli学习的。 我以前看过他在主题论坛上做的word版线图(主要通过文本框实现)，清晰直观，在复件例会上被公开表扬。 我用了一段时间(比photoshop，excel花了很多时间)，但我觉得自由度还不够。
Axure：axure确实是一个非常好的原型软件，在visio之前我最喜欢axure，我的很多同事也推荐它。 示威的交流特别有力。 那个idea很好，但是在细节上有很多不满意的地方。 例如，速度太慢，很难会中文。 另外，调整风格也很麻烦，做的东西很丑。 虽说是试制品，但在公司里，试制品是要说服别人的。 认为老板不好而不通过，也认为开发丑陋而没有动力，这都不好。 另外，并不是所有的原型都需要复杂的交互，有时也可以用几个静态图像来说明问题。
其他，fireworks、flash、powerpoint，对于不太重视视觉的线条图来说仍然不方便。
最后，发现只有Visio在便利性和自由度之间取得了平衡。 但是，visio也有缺点。 就是说他不能一步一步地表达对话。 它适合于对话不那么复杂的项目。 如果交互很复杂，用visio绘制，然后贴在axure上进行交互就不麻烦了。
一些例子……根据一些产品经理群的讨论和内部情况，很少有人使用visio来绘制产品原型图。 以下是我个人的例子(点击缩略图放大)。
一个客户端的原型图
这是最近画的APP场景的原型图，是上面列举的自豪的图，我最近习惯用蓝色表示可以互动的部分。
一个手机客户端的原型图
优客社区，手机视频共享社区。
迅雷统计的原型图（下载源文件）
这是我制作过的最引人注目的visio图，精细度堪比设计稿。 当然，审美和专业设计师方面有很大的差距。 从这张图中也可以看出，用visio制作设计原稿实际上也是可能的。
然而，产品原型精细度的差异可分为最低生活保障真(low fidelity )原型和高保真度)原型。 visio不太适合过于精细的高保真原型。 那个还是需要用photoshop和fireworks等工具描绘，或者直接制作html页面来使用。 根据我的使用情况，visio设计的原型图适合在“刚开始构思”到“提交给视觉设计师进行美化”之间使用，但实际上visio的尺度是open。
一些设置…… visio作为通用的专业绘图工具，缺省设置不太适合设计网页/APP演示原型。 经过几个设定之后才容易使用。 以visio2007为例。
在设置字符消除锯齿的visio中，字体默认设置为“高质量的文本显示”。 在这种情况下，文本会消除锯齿，这在设计的原型稿中与文字的实际效果有很大的不同，因为大多数网页和APP的字体都是“宋体12px (无消除锯齿)” 单击“工具”-“选项”菜单，在出现的对话框中按下图进行设置。
设定前和设定后的效果比较：
默认情况下，画布的宽度小于1024像素，这使设计网页变得不方便，因此必须调整画布并选择“文件-页面设置”，然后在对话框的两个选项卡上进行以下设置
设置后的画布范围基本上接近1024像素，从左右灰色的边缘向中央各空出2个网格时，
剩下的区域刚好宽度是960px（48个网格宽），相当于1024像素宽显示器的网页标准设计宽度。打印缩放比例调为75%是因为自定义大小的地方放大了1/3，要在打印的时候比例再缩小25%才能完成打印出来，另外，不缩小25%会让画布上面的灰边错位，大家试试就可以知道了。
设置工具条
visio中默认开启的工具条只有“常用”和“格式”两项（途中未框选的部分）。我常用的还有“设置文字格式”、“设置形状格式”、“视图”、“动作”这四项。
“设置文字格式”的工具条，主要功能是可以切换文字的上下对齐状态。
“设置形状格式”的工具条，可以改变形状的圆角大小、半透明度、填涂图案（比如渐变填充）、阴影效果，对于图形的润色效果非常显著。
“视图”这个工具条，可以切换是否显示标尺，网格，参考线等。
“动作”工具条：可以设置对齐方式、旋转、组合/拆分等。
准备形状库（最重要的一步）
这个是最关键的一步，可以说没有图形库（流程图/业务图……），visio就是废柴一个，就像没有应用程序的操作系统一样。
在做原型的时候，如果不用图形库，要靠自己手画每一种控件的话，那也是非常不切实际的.
好在有牛人（不是指我，不过牛人的网站被墙拦住了）给我们提供了一个非常强大的控件图形库，比如下拉框啊，checkbox啊，按钮啊什么的全都拖拖拽拽到画板里面就可以了，而且经过本山寨产品经理1年内多次修改现在变得更实用了，至于有哪些组件请看下面的预览：
基本上常用的组件都有了，而且更难能可贵的是，原作者在图形上面加了一些属性切换的功能。比如上图中的“单选框”默认是未选中状态的，将其改成选中状态只需要将图形拖入画板后，在上面点击右键选择“Set to Checked”就可以将它变成选中状态，如图：
真的是非常的方便，一用便知。
下载地址：欢呼的火车的visio图形库(通过GUUUI版修改) （适用于visio2007，其他版本的兼容性有待考证）
安装方法：将文件下载下来以后放到“我的文档我的形状”目录下面以后，就可以通过visio的菜单“文件-形状-我的形状”切换出来了。
好了，环境准备到这样就算是完成了，至于在这个环境下面要既方便又自由地设计你的产品原型，还是有不少技巧的，在以后的文章中欢呼的火车再细说。
thanks : http://blog.luwenjin.com/index.php/2009/03/26/visio-wireframe-prototype-tutorial/
2 axure 比Visio更实用的网页原型设计工具Axure RP Pro 5
互联网行业产品经理的一项重要工作，就是进行产品原型设计(Prototype Design)。而产品原型设计最基础的工作，就是结合批注、大量的说明以及流程图画框架图wireframe，将自己的产品原型完整而准确的表述给 UI、UE、程序工程师，市场人员，并通过沟通会议，反复修改prototype 直至最终确认，开始投入执行。
进行产品原型设计的软件工具也有很多种，我写的这个教程所介绍的Axure RP，是taobao、dangdang等国内大型网络公司的团队在推广使用的原型设计软件。同时，此软件也在产品经理圈子中广为流传。之所以Axure RP得到了大家的认同和推广，正是因为其简便的操作和使用，符合了产品经理、交互设计师们的需求。
在正式谈Axure RP之前，我们先来看看做产品原型设计，现在大致有哪些工具可以使用，而他们的利弊何在。
纸笔：简单易得，上手难度为零。有力于瞬间创意的产生与记录，有力于对文档即时的讨论与修改。但是保真度不高，难以表述页面流程，更难以表述交互信息与程序需求细节。
Word：上手难度普通。可以画wireframe，能够画页面流程，能够使用批注与文字说明。但是对交互表达不好，也不利于演示。
PPT：上手难度普通。易于画框架图，易于做批注，也可以表达交互流程，也擅长演示。但是不利于大篇幅的文档表达。
Visio：功能相对比较复杂。善于画流程图，框架图。不利于批注与大篇幅的文字说明。同样不利于交互的表达与演示。
Photshop/fireworks：操作难度相对较大，易于画框架图、流程图。不利于表达交互设计，不擅长文字说明与批注。
Dreamweave：操作难度大，需要基础的html知识。易于画框架图、流程图、表达交互设计。不擅长文字说明与批注。
以上这些工具，都是产品经理经常会使用到的，但是从根本上来说，这些工具都不是做prototype design的专门利器，需要根据产品开发不同的目的，不同的开发阶段，选择不同的工具搭配使用，才能达到表达、沟通的目的。
比如使用纸笔，更适合在产品创意阶段使用，可以快速记录闪电般的思路和灵感；也可以在即时讨论沟通时使用，通过图形快速表达自己的产品思路，及时的画出来，是再好不过的方法。而word则适合在用文字详细表达产品，对产品进行细节说明时使用，图片结合文字的排版，是word最擅长的工作。而 ppt自然是演示时更好。visio则可以适用于各种流程图、关系图的表达，更可通过画use case 获取用户需求。PS/FW是图片处理的工具，DW则是所见即所得的网页开发软件，这些是设计师的看家本领，对于普通的产品经理来说，需要耗费太多的精力去掌握。
其实每件工具，每个软件，在创造它的初期，软件设计师们都给它赋予了性格、气质。因为每个工具的产生，都是为了满足人类的某一方面需求。比如锄头是锄土的，起子是起螺丝的，电熨斗是烫衣服的。但是不同的工具都有自己的工作领域，在其他领域它并不擅长。而以上的软件在创造的初期，并非为了帮助产品经理、ue完成产品原型设计，因此他们都不能在prototype design 这件工作上得心应手。而Axure RP正是在互联网产品大张其道的前提下，为满足prototype design创建的需求，应运而生。
安装
Axure的英文界面一直是对初学者的很大困扰，网上也一直没有中文版本。
今天经朋友介绍，终于找到Axure的汉化包。
不敢独享，发给大家一起学习。
在此非常感谢汉化包作者：平生一笑
经本人亲自试用，这个汉化非常好，仅对Axure 5.1.0.1699版本有效，其它版本会造成软件无法打开。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Axure 5.1.0.1699汉化包
http://www.rayfile.com/files/81ba8bb3-e24b-11dd-8c23-0014221b798a/
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Axure 5.1.0.1699软件原版
http://www.skycn.com/soft/41842.html
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
注册码
Name：3ddown
Serial：FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq+7w1RH97k5MWctqVHA
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
使用方法：
下载后解压缩，用解压缩得到的Client.dll文件覆盖掉Axure安装目录的同名文件。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
原文链接
http://www.thinkjam.org/zoptuno/archives/2009/01/axure-5-chinese-realease.html
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
Axure RP 能帮助网站需求设计者，快捷而简便的创建 基于目录组织的原型文档、功能说明、交互界面以及带注释的wireframe网页，并可自动生成用于演示的网页文件和word文档，以提供演示与开发。
Axure RP 的特点是：
快速创建带注释的wireframe文件，并可根据所设置的时间周期，软件自动保存文档，确保文件安全。
在不写任何一条html与javascript语句的情况下，通过创建的文档以及相关条件和注释，一键生成html prototype演示。
根据设计稿，一键生成一致而专业的word版本的原型设计文档。
参考文献：
交互原型设计软件 Axure RP Pro 5 中文教程
发布：Axure 5.1.0.1699汉化
[分享]Axure中文汉化包
thanks：http://blog.csdn.net/softwave/archive/2009/02/01/3856691.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ziyuli+(%E5%B0%8F%E6%9D%8E%E4%B8%93%E6%A0%8F
3 word
关于原型，有太多故事了。说起快速的原型制作（区别于软件工程的快速原型法），应该以文本文档/富文本文档（如Word）为主。因为，白板、草图虽然快但不易保存，HTML虽然丰富但制作慢，一些原型工具，如Axure，则效率也低，使用也复杂。
最初设计的时候，我是以Word为主的，就是打表格（顺带一句，白鸦是PPT，便于演示和简单的效果）。Word 画表格十分方便，而且在沟通中也比较高效（批注）。渐渐的也有了一些习惯（很山寨）。
布局
打表格（要用绘制功能）。默认的 A4 页面浏览基本足够。有时在处理 100% 表格时，会用 Web 版式，但用 Web 版式阅读时总觉得不那么自然，比较少用。
表格也常用于模拟真实的数据表格（应用上各种样式）。
常用的：单元格居中（水平和垂直）、单元格背景色（突出重点）。
文字内容
直接打字，针对链接，用蓝色（#00F）加下划线，基本实现。字的大小，用zjdzm表示12px，用10表示13px，用五号（默认）表示14px。字体根据具体情况，一般通用 Arial。加粗就是 Ctrl+B。
常用的：对齐、加粗、字号、颜色和下划线、Tab和中文空格（用来占位，和初步排版）。
图片内容
一般结合单元格居中，写上图片的内容作为占位。表示这里放个图片。有时候也会结合截图软件，截图软件的好处是可以保存到剪贴板，然后再 Ctrl+V 粘帖到文档中，这样不会生成额外的图片文件（HTML就这点不好）。
有时候针对复杂的细节，还可以用Photoshop画好，再粘帖进去。不过因为慢，非常少用。
表单内容
这是所有网页、交互的重要组成部分。有一些自己瞎定义的符号（还好比较一目了然），后来有位同事入职后也自创了一套。目前我在用的主要如下：
输入框：[ ]、[请输入搜索关键词...]，类似这样的。 下拉框：[abc ▼]、[abc v]，类似这样的，用 charmap 呼唤出字符映射表拷贝。有时候为了真实一点，还会把向下的三角改为灰色。 复选框：[ ]表示未选中，[√]表示选中。有时也会用[·]，来表示选中，简单，但不那么明显。 单选框：( )表示未选中，(·)表示选中。 按钮：文字加灰色的背景色（字符底纹），这在Word中只要按一下。 其他：发挥你的创意（比如 disable 可以加灰色背景）。其实可以利用Word的控件，但是控件的文案要在另外一个小窗体中输入，总嫌麻烦。
其他
还有一些小交互，比如收拢、展开（用[+]和[-]），关闭按钮（用 × 字符，或字母X），最小化（就是一个下划线）之类。还有，有时候不用表格，用一行“-”来表示分割线。
这个其实可以形成规范，关键是要能够真正的在保证有效传达的情况下，提高画原型的效率。
附上一个刚才花了10分钟画的MT 后台写日志的线框图（doc下载，V1.1），共勉。