用Word画原型
写于 2009年02月18日 22:44 评论(27)
关于原型，有太多故事了。说起快速的原型制作（区别于软件工程的快速原型法），应该以文本文档/富文本文档（如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），共勉。
J.
原文地址：http://www.junchenwu.com/2009/02/prototyping_with_word.html
评论(27)
写得很精彩，学习了，谢谢！以后工作试用一下
不错，以前用word画这些东西的时候太痛苦了...
很不错，不过能表达清楚、效率高的前提下，用什么样的工具都没有问题的。
个人以前用visio，现在用axure
word、ppt都有人在用，各有优点
@盆地 就像Axure最快也比不上纸和笔是一个道理，而且这是无法磨灭的差距。在不同的环境下，用不同的方式去做原型，以及原型的精细程度。
看了那个示例原型图，几点看法：
1, 不适合用表格去处理，最主要是在结构上欠表现力，可以使用“形状” ( MS word 2007，word 2003 是“文本框”)，并且可以随意移动其位置，以及框的粗细、颜色、背景的处理，很具有表现力；
2, 链接建议全部用蓝色+底线处理，文档中看到有的做了处理，有的没有，虽然也容易理解，但有歧义，设计师和制作人员不知道这是一个链接；
3, 不用图片来处理，小的钗勾类的小图标我则常用，这样可以更好的表达；
4, 做注释，有的页面上可能是一些系统机制在控制数据显示，则做备注，放在当前线框图的下面，我不常用“批注”，批注影响对简图的正常阅读，；
5, 使用 web 版式处理视觉更宽更方便，我给各个页面做标题，所以用文档结构图可以清晰看到结构和迅速定位。
@大郎 可以结合的使用。不过因为操作比表格复杂（而且用的时候有很多边线，影响视觉），所以很少用。批注是在给其他人的时候，给他人批注用，自己不用，因为影响浏览。不用Web版式是个人习惯，我很反感100%的宽度（不利于打印）。谢谢分享经验，你的建议很好 :)
PS. 文档中链接是我偷懒了，已经更新了一下 :D
不看工具看人
不过为何visio如此高效和通用的软件没有多少人推呢?
@Mouce Visio我也用，用GUUUI Web Prototype那套形状，但比起文本表示还是效率略低。（比如在bug tracking里面，用纯文本描述，要比画个图附加上去更容易沟通，当然是针对简单的需求而言）。
word A4的好处是门槛低、高效、通用。
适时打印出来也相当方便，Junchen如果有时间可以整理套word wireframe的规范出来。
我同事用word花原型那个叫逼真啊，基本就是网页了
之前只用WORD画过流程、泳道之类的，线框图还真没画过。保真度高一些的原型用HTML或FLASH更好吧，便于进行测试。
@行云流水泵 文中说了，主要是速度快，效果也还行。
就这个问题，Gtalk上咨询过JunChen，看到这篇文章很欣喜，Word、Visio、Axure都有在用，其实最重要的不是掌握很多工具，而是把某一擅长的工具用到极致。同意千鸟，JunChen有时间能否整理下word wireframe的规范，供大伙学习探讨，刚入行的同学，估计多数是从Word入手的。
同意笑炊的说法。
要是设计一个表单的话，当仁不让要用Word或者Excel，所以重要的是发挥工具的特点。
我也喜欢用word。有几个自己的习惯，比如用“口”字做checkbox，“O”代表未被选中的radio。可以看http://picasaweb.google.com/ehaagwlke/Captured# 有几个截图。也喜欢用文本框来做布局。
不过正在转向 pencil，一款ff插件，简单好用，也有独立安装版本。
@ehaagwlke 如果用口和O的话，那么cheched怎么表示呢？这样就不统一了。截图我看了下，滚动条很有意思，不过做起来略嫌繁琐。Pencil我也用过，那个时候刚出来吧，还不是那么完善。
Axure哪麻烦了？太好用了。
Axure很方便的啊，不过每个人有自己的工作习惯，:-)
我觉得axure做一些常用的master，组合一起还是比较快的，基本上只要拖拽就可以了。
如果是和同事沟通的话，我通常会用axure+snagit
Axure 我也觉得很方便，不比word效率低！
工具只是工具而已，不同的情况下用不同的工具吧，各个工具都有其自身的特点，灵活掌控。
@ shujie 原型我认为没有必要画那么逼真，需要考虑成本的。
@ 行云流水泵 用flash做原型真是太有空了。
至于word wireframe的规范我倒真认为没必要花时间整理，因为这个不是一个标准，各个公司的规范都不一致，具体倒每个设计师也是有其自己偏好。
原型能够快速有效的沟通就好。
pencil现在有EXTjs的一些widget，也可以自己做stencil。它的stencil是基于svg的。可以看下这里：http://takeotakao.blog126.fc2.com/blog-entry-5.html。
你说：“Axure，则效率也低，使用也复杂。” 这话可真不敢苟同呀。
可以来axure.org 看看。进了那个台阶，一切都很简单，快捷，并且在修改需求更能够体现出来。
我也一直在用，用的大郎的方法，很省，其实一个方法都是习惯问题，大家习惯了就好了
受教，学习ing
嘿嘿,我也是用visio,而且一直都用它...
其实在开始的时候多发点心思做套模具,把模具的表现也用CSS写好.....
以后就直接可以生成界面原型.也有利于整体风格的统一.....
CSS代码结构上后面的流程也不会有太大的歧异...
Word我控制不好，做个文档还可以，要画个让自己满意的图确实有难度。
试用了下Firefox扩展Pencil，很赞，不过貌似控件稍少了点。
axure太贵，奢侈不起。
正在学习UI设计，学习了
haha,在没有用axture之前,我用过word,用过flash,用过ppt,反正能够用到的都用了.
其实word在写FBRD的时候画demo是最快最方便的，修改起来也很方便。但是后来word2007不好用了就放弃了。
又和junchen学到了一些小技巧，谢谢！