`

画原型

阅读更多

 

 

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_gvod_server一个客户端的原型图
这个是最近画的一个应用程序的原型图,也是最上面提到被人夸的一张图,我最近习惯用蓝色来标注可以交互的部分

 

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

 

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

 

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

一些设置……

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

设置文字抗失真

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

设置之前与设置之后的效果对比:
text-compare

设置画布

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

设置之后画布的范围基本上就接近1024像素,如果从左右灰边开始往中间各空两个网格的话,剩下的区域刚好宽度是960px(48个网格宽),相当于1024像素宽显示器的网页标准设计宽度。

打印缩放比例调为75%是因为自定义大小的地方放大了1/3,要在打印的时候比例再缩小25%才能完成打印出来,另外,不缩小25%会让画布上面的灰边错位,大家试试就可以知道了。

设置工具条

toolbar1
visio中默认开启的工具条只有“常用”和“格式”两项(途中未框选的部分)。我常用的还有“设置文字格式”、“设置形状格式”、“视图”、“动作”这四项。
“设置文字格式”的工具条,主要功能是可以切换文字的上下对齐状态。
“设置形状格式”的工具条,可以改变形状的圆角大小、半透明度、填涂图案(比如渐变填充)、阴影效果,对于图形的润色效果非常显著。
“视图”这个工具条,可以切换是否显示标尺,网格,参考线等。
“动作”工具条:可以设置对齐方式、旋转、组合/拆分等。

 

准备形状库(最重要的一步)

这个是最关键的一步,可以说没有图形库(流程图/业务图……),visio就是废柴一个,就像没有应用程序的操作系统一样。
在做原型的时候,如果不用图形库,要靠自己手画每一种控件的话,那也是非常不切实际的.
好在有牛人(不是指我,不过牛人的网站被墙拦住了)给我们提供了一个非常强大的控件图形库,比如下拉框啊,checkbox啊,按钮啊什么的全都拖拖拽拽到画板里面就可以了,而且经过本山寨产品经理1年内多次修改现在变得更实用了,至于有哪些组件请看下面的预览:
shapes

基本上常用的组件都有了,而且更难能可贵的是,原作者在图形上面加了一些属性切换的功能。比如上图中的“单选框”默认是未选中状态的,将其改成选中状态只需要将图形拖入画板后,在上面点击右键选择“Set to Checked”就可以将它变成选中状态,如图:
radio_check

真的是非常的方便,一用便知。
下载地址:小宝的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)加下划线,基本实现。字的大小,用小五表示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),共勉。

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics