画原型

 

 

1 visio

 

用visio制作线框图原型(wireframe/prototype)教程 – 前言&准备环境

 

最近发了一些我画的产品线框图给别人，被一些业内人士夸得体无完肤。

夸完后又问我是用什么工具画的，我告诉他是用visio，结果他试了之后还是无奈地说了一句：怎么还是这么丑啊……

于是我一怒之下决定写一个visio制作线框图原型（又叫wireframe，也勉强叫做prototype）的教程。不过工具终归是工具，就像用ps处理出奇丑无比照片的大有人在，用word就画出90%近似最终产品设计稿的人我再公司也见过，用得好不好主要还是看使用的人。不过有一些基础知识还是有必要普及一下的。

一些历史……

做互联网公司产品经理两年了，尝试过不少制作原型图的工具。
photoshop：恐怕是最早用的，但这种高级的工具对我等不熟练而且视觉艺术细胞不丰富的人来说，不但用起来慢，而且做出来难看，我最早用他，也最早放弃他。
excel：说出来有点不可思议，估计很少有人用excel画线框图，估计也就只有我这么山寨的产品经理才想得出来，不过这种方式严格基于网格的工具画后台界面比较方便，但是稍微丰富一点的视觉元素就没法表现了。
word：这个是和公司社区部的doubleli学的，以前看过他给主题论坛做的word版线框图（主要使用文本框来实现），清晰直观，再产品例会上被公开表扬。我用了一段时间（比photoshop，excel的时间要长不少）之后，还是觉得自由度还差了点。

Axure：axure确实是非常出色的一原型软件，再visio之前我最喜欢axure，也向很多同事推荐它，演示交互特别强大。它的idea非常好，但是细节上有诸多令人不满的地方，比如速度慢、中文老打不出来。另外调整样式也比较麻烦，导致做出来的东西比较丑，虽说是原型，但在公司里面，原型是要拿去说服人的，老大觉得不好不让通过，开发觉得太丑没有动力也是不好。而且不是所有的原型都需要很复杂的交互，有时用几个静态图片也能说明问题。
其他的零散地用过fireworks（对于不太重视视觉的线框图还是不太方便），flash（不相关功能太多），powerpoint（比较别扭）。
最后发现只有Visio是方便性和自由度都达到了一个比较好的平衡的。但visio也有缺点，就是他不能一步到位表现交互，对于交互不是很复杂的项目的话，还是很适合的。如果交互比较复杂的话，可以先用visio画好，在粘贴到axure中做交互，这样也不麻烦。

一些例子……

根据一些产品经理群的讨论和公司内部的情况来看，使用visio来做产品原型图的人不多，以下都是我个人的一些例子（点击缩略图放大）：

一个客户端的原型图
这个是最近画的一个应用程序的原型图，也是最上面提到被人夸的一张图，我最近习惯用蓝色来标注可以交互的部分

 

一个手机客户端的原型图
优客社区，一个手机上的视屏分享社区。

 

迅雷统计的原型图（下载源文件）
这个是我做过的最令人发指的一个visio图，精细程度堪比设计稿（当然审美观和专业设计师的还有很大的差距），从这个图上面也可以看出，要用visio做设计稿，其实也是可能的。

 

不过话说回来， 产品原型的细致程度的不同，分为低保真(low fidelity)原型和高保真(high fidelity)原型。visio并不太适合太过于精细的高保真原型，那个还是需要用photoshop、fireworks之类的工具来画，甚至直接做html页面来用。根据我的使用情况来看，visio设计的原型图比较适合“刚开始构思”到“提交给视觉设计师进行美化”期间使用，其实visio的尺度还是很open的。

一些设置……

visio作为一个通用的专业绘图工具，默认设置不是非常适合设计网页/应用程序原型，经过一些设置之后才会用得比较顺手，下面以visio2007为例。

设置文字抗失真

visio默认将字体设置为“较高质量的文本显示”，在这种情况下，文本会进行抗锯齿的处理，本意是好的，但是网页中和应用程序中的字体多数都是“宋体12px（非抗锯齿）”，这样设计出来的原型稿中文字会和实际效果差很多，所以需要将这个设置改掉。点击“工具”-“选项”菜单，在出来的对话框中按下图进行设置：

设置之前与设置之后的效果对比：

设置画布

默认设置下的的画布都不足1024像素宽，再设计网页的时候不太方便，所以需要调整一下画布，选择“文件-页面设置”，对对话框中的两个标签页进行如下设置：

设置之后画布的范围基本上就接近1024像素，如果从左右灰边开始往中间各空两个网格的话，剩下的区域刚好宽度是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.youkuaiyun.com/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）加下划线，基本实现。字的大小，用小五表示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），共勉。