ucd的工具和软件 - UCD大社区

Mockingbird: 纯JS在线产品原型设计工具

盗盗 — 2009-11-09 02:18:28

Mockingbird 是一款基于 Cappuccino 开源框架下的产品原型设计工具，能够模拟桌面软件给予设计人员更快速的上手和实践。

Mockingbird 是一款类似于我在此前介绍的 MockFlow 产品，它为用户提供了完全基于浏览器窗口的产品原型设计服务，由于Mockingbird 采用了Cappuccino开源框架，能够较为逼真的模拟 Axure 这类桌面软件，给用户极大的亲切感。Mockingbird 内置了常用的各种Web控件，包括Text, Link, Button, Image, List, Box 等等，鼠标拖拽便可添加至画布中；支持中文。

没啥好评价的，No Flash, No IE, All in Canvas, Apple Style.(via)

相关话题：ucd的工具和软件源地址：http://www.showeb20.com/?p=2407

10款交互设计原型开发工具

tianya8 — 2009-10-22 21:15:36

所谓“工欲善其事，必先利其器”，尽管小米加步枪可以也可以打败敌人，但如果朱棣有了坦克装甲部队，那岂不是更容易平定安南？

关于原型开发工具，各有哥的使用习惯，有人喜欢axure、photoshop，也有人喜欢手绘，robert还见到过高人直接用excel制作的交互原型，不仅能够布局，还具有基本的链接和跳转功能，相当佩服。工具只是实现目标的一个手段，因此选用何种工具完全基于个人的习惯及方便。当然在某些公司为了便于不同的设计师之间进行交流以及重用而规定使用相同的工具，那就另当别论。

下面只是个人所使用过的并且认为值得推荐的工具，我尽可能的将其便利性与不足写出来，当然如果您发现有所不足或有更多的补充，也欢迎随时和我联系。

1、Axure RP（Rapid Prototyping）

Axure（读音为Ack-Sure）无疑是目前最受关注的原型开发工具，其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型（流程图、线框图），并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。

Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。

但Axure仍然有一个让人头痛的问题：对于中文的支持不太友好。在小部分元件上输入中午的时候，经常需要像碰运气似的反复切换输入法，破坏了咱们设计师的用户体验。

瑕不掩瑜，Axure仍然是交互设计师的首选原型工具。

2、Microsoft Office Visio

Visio在2000年被微软收购，并在2002年成为office2003套件中的一个组件，最新版本是2007。Visio能够获得推荐的原因是因为Visio的适用性非常之广，从网站界面、数据库模型，到平面布置图到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。

相较Axure而言，Visio更适合于传统行业的生产或流程设计，或者软件及互联网行业中的信息、数据和流程的说明，而不太适用于web界面。因为其的基于web的元件库还是比较少，并且形式和结构也更类似于word中的图形工具，因此在原型开发效率上都有所不足。

3、Balsamiq Mockups

这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉，手绘风格的元件样式粗犷淋漓，能创建接近于纸上手绘的原型文件。其提供了丰富的手绘风格的web常用元件，包括常用的html控件、以及一些组合控件，如多媒体控制器、标签页、列表、Iphone界面元件等。

Mockups最值得赞赏之处在于其提供的多数组件都可定制外观，对于中文的支持也不错（选择View > Use System Fonts）。

4、Mockflow

Mockflow和以上工具最大的不同在于Mockflow是一项基于Adobe Flex技术开发在线服务，提供了与Balsamiq Mockups基本相似的功能，甚至更丰富的组件，虽然其元件定制化不够强大，但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。有一个让我爱不释手的功能是模板，可以设置基于任何页面的模板来进行新的页面设计。

与其他模板工具相比，mockflow有一个非常特色的功能，基于web的存储可以在任意电脑上联机打开，同时可以其他人进行快速的分享，并收集在线反馈意见，非常适合虚拟团队的原型设计交流。

虽然在线服务的基本帐号只能创建一个文件，但单个文件却没有限制页数，因此也基本上足够使用。

5、Pencil sketch

Pencil 是一款基于Firefox的扩展组件，安装之后即可在Firefox的工具菜单中打开Pencil的绘图面板。功能比较简单，仅能用以日常简单工作的辅助说明。提供的默认元件都是基于软件工程，因此更适合用于windows桌面程序的简易界面搭建，或者是基本的页面功能说明，并不适用于严肃的原型开发，但好在体积小、又轻便，能够方便将网页中的元素直接拖到或者复制到当前的画布中，这也是Pencil安装在Firefox所带来的便利之一吧。

更多工具...

在以上列举的原型开发工具都是较为常用的，也是在国内的交互设计师们比较常讨论的，但其实和Axure功能相似的软件还有很多，下面也就一些简单说明：

6、GUI Design Studio

这是一款真的非常强大的原型制作工具，没有在上面推荐的原因是因为我还没有实际体验过，但冲着这工程级的界面设计就没有去尝试的冲动，但是从官方网站的截图和视频演示来看，这款软件的操作模式和前面的原型工具大有不同。Axure之类多是基于页面的原型设计，对于web网站尽管很实用，但是对于软件界面的流程设计却略显繁琐。而GUI Design Studio却另辟蹊径，直接以建立元素与元素之间的关联的方式来自动化的创建动作流程，而从视频演示来看，这样的确很大程度上提升了软件界面原型搭建的效率。

7、Prototype Composer

Serena 公司免费提供的原型开发工具，功能确实强大，提供了基于项目管理主要流程的产出物文档模板、原型工具以及开发流程控制，这个软件的开发理念非常好，用这一款工具来满足项目开发流程中各个环节的沟通和决策。但软件的学习和使用成本比较高，要了解其中的全部功能，貌似需要花不少时间。另外软件的效率和稳定性还有待提高，试用的过程中多次出错及停止响应。

8、Lucid Spec

由 Elegance科技推出的Lucid Spec是一款很类似Pencil的原型工具，仅仅是提供了更多控件。不过Lucid Spec强调了生成干净的说明文档的功能，这可能是针对于多数原型工具的自动化生成规范的冗余而言的，不过老实说Lucid Spec提供的原型界面太过简陋，并且生成的说明文档也未见优化有怎样的提升。视频介绍

9、Irise Professional Edition

Irise与其他原型工具相比其中一个特色在于提供了样本数据的功能，这是类似于excel表的一个样本数据库，可以通过界面元素直接获取样本数据库中的数据，这样所生成的原型甚至可以使动态数据更新的。

10、Adobe Reader

Adobe reader？没错。其实理论上任何可以创建图形和文本的工具都可以用来原型开发，因为原型本身就是对于业务逻辑和功能界面的模拟或仿真，因此有何理由不能使用PDF格式呢？BoxandArrow的这篇文章《PDF Prototype:》提醒了我们，所有的原型工具都只是工具，而不是设计本身。

当然原型工具还有很多，您可以在这篇文章对比更多可用以进行原型开发的工具。

相关话题：ucd的工具和软件源地址：http://www.tianya8.net/2009/10/10.html

MockFlow – 在线Wireframe编辑器

Lytous — 2009-10-16 17:32:52

总有朋友问起我技术方面的问题，其实技术方面的问题，问是问不来的，还是自己摸索比较好。谈起摸索，就必须有一些好用的工具来配合，今天给各位介绍个新上市的在线软件 – MockFlow 是一个在线的Wireframe编辑器，我注册试用了下，整体感觉还比较轻便。

MockFlow 是由 A Produle Systems (P) Limited. 公司提供的一个在线软件，当然他们还有其他的一些边缘软件，比如把静态图片变成动态图片的一些工具（主要集中在tips上）。MockFlow 直接注册激活就可以使用，如果需要升级为完整版（貌似必要性不是很大，主要提升了在线储存空间还有分享文档的功能），每月需要支付4美金。

http://mockflow.com 官方网站，注册入口

我试用了15分钟，大概说说它的特点，首先它把所有的线框图常见元素都控件化了，直接拖拽到页面中就可以实现功能交互设计，这些控件以后应该还有增加的可能，目前的几乎适用于网页，软件界面等各种常用的线框图制作需求。

在默认的image元素里面包含了很多用于在线电子商务平台的按钮和stickers，也比较方便，由于是线框模型，因此所有的元素都是黑白的。支持从本地上传图片丰富你的images库。

它还支持直接导出 sitemap 为png图片，免费版中只支持4页的分页数量，sitemap页面的弹性效果也挺有意思，免费版的基本导出格式是 png 和 pdf，应该已经够用了。

最后，MockFlow 还提供了报告软件情况的消息通知和一份快捷键列表，相当的贴心。

好了，整体来看，虽然功能不是很强大，但是基础功能该有的都有，而且速度不错，做交互视觉化和信息架构设计的朋友又多了一个选择了。

相关话题：ucd的工具和软件源地址：http://www.ucdchina.com/lytous/?p=1772

Adaptive Path：我们最爱的草图工具

Junchen — 2009-04-13 12:11:29

Adaptive Path版权所有
作者：Adaptive Path
译者：UCD翻译小组，JunChen
原文地址：http://www.adaptivepath.com/ideas/newsletter/archives/031109/index.php

有件事呢本应该是显而易见的，我是指如果你用恰当的工具，那么画起草图来会变得相当、相当简单。

我不会穿着网球鞋去滑雪，但我却常常假想自己可以用蜡笔、羽毛笔或者用剩的铅笔头画出工业级效果。喔，太蠢了。最近我才意识到，拥有一套良好的“装备”是多么重要，真是杀牛要用牛刀啊。

下面就是我的“装备”，看看它们是怎样帮助我成为一个更好的用户体验设计师。

1. 网纹收纳袋

我知道你在想什么。收纳袋不是一个画草图的工具。那你就错了，因为：它可以将你的所有工具收纳在一起，方便拿取和带走。这意味着你更可能将它们随身携带，并且因此能够在更多情况下使用。

如果你能够在人们讨论过程中为讨论的对象画一些草图，那么你通过绘画就可以阐明人们所表达的意思，并且可以使每一个人有相同的认识。这种交流过程中实时产生的草图，在促进想像力方面具有无与伦比的力量，并且会被不断地引用、引用、再引用。比如，“记得那天我们画的一个框和两个圆圈。我想我们漏掉了另外一个圆圈...”

2. 暖灰色马克笔

如果你犹豫踌躇于将看上去挺搞笑的线条草图作为专业的业务交付物，那么一支暖灰色的马克笔立即能够使草图更加美观。我通常用灰色来描绘重点，加一些简单的阴影、细微地区分出前景和背景。这样可以使草图更有层次感，并且可以使眼睛更容易解读具体的情景。

3. 蓝色铅笔

蓝色铅笔对初学者来说是很有帮助的，用来先打底稿，然后再墨水描绘。蓝色的铅笔线条易于擦除，并且不会被复印出来或拍出来。

但是注意不要过分依赖于蓝色铅笔。草图又不是艺术品，不需要在细节上尽善尽美或过分挑剔。蓝色铅笔确实能让你给草图修饰过头，哪怕并不需要这样。但在画故事版，或需要描绘特定位置和姿势的人物时，蓝色铅笔确实能让你有如神助。

4. 红色马克笔

红色马克笔很容易就能够让人关注草图的某些部分。尤其是在箭头和动作的指示上。

5. Sharpie®斜头记号笔

我特喜欢用Sharpie®的斜头记号笔。就像其他好工具一样，它能胜任多种角色。我最常用的是调整草图线条的粗细，来凸显最重要的部分。调整线条粗细（基本上就是通过重复描绘的方式）是画草图的一项最简单、最有效的技巧。能够立即让草图具有对比和视觉层次感，使人眼看上去更加舒适，使大脑更容易处理。

我也用斜头记号笔来写字。我觉得，文字和标记像是草图中默默无闻的英雄。我们总担心我们画的草图，但Jessica Hagy却在她《Indexed》封面上欣欣然地用了一个清晰、有冲击力的箭头指向右侧的文字，一下子使得草图具备了“可读性”。

6. Sharpie®常规记号笔

Sharpie®的常规记号笔是整套装备的主力。你将用它来画人、流程图、标记、界面、方块、箭头等等。事实上最好是多准备一些这种笔，因为大量使用它的笔头很容易用旧或起毛。

7. Sharpie®特细记号笔

Sharpie®的特细记号笔尤其适合画界面。在Adaptive Path，我们通常会在设计一开始画一些缩略尺寸的界面想法，之后再为其中一小部分绘制更具体的草图。缩略的尺寸强迫你关注本质的东西。标题、文本区块、照片或功能特性的位置——这些都通过方块和曲线的形式来简单表示。要让这些方块和曲线看上去有意义，就需要较细的笔头了。我们将在 [Good Design Faster] 工作坊(http://www.adaptivepath.com/events/2009/apr/)中作更深入具体的探讨。

8. 小贴纸（Drafting Dots）

小贴纸可以使任何垂直表面变成你的草图展示空间。这些圆形的贴纸能够附着于大部分表面，不会有痕迹而且粘性能够保留很长时间（所以你能够将草图重新贴在其他任意地方）。将草图挂贴起来看上去很简单，但这样使得其他人也能看到，就让草图从一种个人想法转变为了集体解决问题的工具。

所以啦，我是有些喜欢这些工具的，办公用品、缝纫用品之类。去哪里买？可别让我再罗嗦下去啦。但当然了，真正重要的并非这些工具。照片、草图，这些都不是终点。它们是为了告诉我们该如何做。

我们该做什么？

在对未来的设计中，为了展示现在仅存在于想像中的事物，草图是我们最无拘束的工具。它们看上去会怎样？怎么运行？什么形态？如何展示？以及最重要的，我们如何与之交互。如果每一个新的应用我们都是用Visio的绘图形状，那么我们将生活在一个满是单选框和下拉菜单的世界中。过去可能就是这样，但在现在我们所为之设计的世界中——移动设备、多渠道、服务至上——显然并非如此。这意味着是时候考虑用新的工具了，或者说那些老朋友。

如果你有兴趣学习更多关于次世代用户体验设计工具，可以参加我们4月2-3日在旧金山举办的Good Design Faster工作坊。用“NEWS”促销代码来获得10%的注册折扣。

常用原型图设计工具

胡晓 — 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

经验分享：交互设计文档(3)

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

前一篇：经验分享：交互设计文档(2)
下面，用几个实例来介绍用Axure RP Pro制作交互文档。
在制作过程中，经常会有一些Tips，是一些使用软件的技巧和相关提示。这些多半都是我个人的总结，有些可能是我的“错觉”，希望在这方面能够得到指导，也希望一些有用的技巧真的能在实际操作中帮到大家。

根据Facebook的未登录首面来设计一个SNS社区首页的原型

Facebook的未登录首页

第一部分：制作页面头部(Header)。
作为介绍软件的开始，这一部分将分步骤讲解得比较详细。

第一步：头部底色
打开Axure RP Pro，从Widgets面板中选中“Rectangle（矩形）”工具，从面板中拖到工作区当中。

在软件界面的信息栏我们中可以看到工作区中组件的位置（left、right）和宽（width）、高（hight）的数值，单位都是像素(px)。把这个头部矩形放在左上角（left:0 right:0 ）的位置，并拉长宽高到850和80。在公共栏，可以设置组件内容的一些相关信息。

我们将矩形的边框设为无色，背景设为深蓝，作为Header的底部颜色。
第二步：Logo
从Widgets面板中选中“Image（图像）”工具，从面板中拖到工作区来。

拉到合适的宽度，双击图像，插入我们的Logo图片。如果网站还没有定好Logo图案，或是为了省事，也可以只插入默认的image图案就可以了。
在插入图片时，如果你在工作区预设的图像大小与图像原尺寸不一致，会有一个信息提示。

如果我们想保留原尺寸（保持图像的真实比例并保证图像的显示质量）则选“是”；
如果插入的图片想按我们预设的大小来安放，选择“否”。Tips：我们可以在右边的Anotations & Interactions面板的“Label（标签）”栏中为图像加上命名：“Logo”。

在下面添加的组件内容中，你都可以为它们标签命名，规范的命名是个好习惯。当然，一个简单的原型设计，为每个标签进行命名并不是必须的。
第三步：登录框
从Widgets面板中拖出一个“Text Field（文本输入框）”

可以在公共栏设好文本框的字体大小、颜色等信息，并在文本输入框中输入文字显示：“电子邮件”。

按住Ctrl键手动电子邮件文本框，复制出一个文本框，把框中文字显示内容改为“密码”。

Tips：在RP Pro 5.0及较早的版本中，这些表单组件的中文输入时常会出问题，这时候我通常是在其他地方把内容输好复制过来=。=

从Widgets面板中拖出一个“Button（按钮）”

放在两个文本框右边，按钮文字中输入“登录”

Tips：这时候如果你觉得三个内容不怎么整齐，可以按Ctrl键选择它们（或者是你习惯用的其他选择方式，如鼠标拖选——但要保证附近其他内容是被锁定的状态，像PS中的那样），并在公共栏中找到对齐方式，将内容进行向上或向下对齐。

Tips：选择对齐时，是以第一个被选中的组件内容为基准，其他的内容都向基准进行对齐。如上面的登录框，先选中了“登录”按钮，再按Ctrl继续选择“密码”和“电子邮件”文本输入框，再进行向下对齐时，三个组件内容都会以“登录”按钮的下边线为基准进行对齐。

第四步：登录相关信息
同样的方法，拖出“Checkbox（复选框）”和“Text Panel（文本）”

为登录信息加上“记住我”和“忘记密码？”两个操作信息。

Tips：RP会自动将组件内容向边线对齐，所以将复选框和文本拉长后边线自动对齐到下面的文本框，选择它们的文字内容向右对齐。这样就不需要另外再选择上下两个框进行内容的对齐了。

第二部分：网站介绍、快速注册及底部信息

第一步：垫底色
为了省事（不用重设宽度），我们按住Ctrl键直接从上面的Header底色矩形处复制出另一个矩形。

将这个矩形的位置调整好，拉长，修改好背景色后，并将这个矩形的层次设为最底层。

这样就不会把Header部分有意无意地挡住了。
第二步：网站介绍
用“Text Panel”和“Image”组件工具为网站添上深动的介绍。

Tips：注意哦，”Text Panel”组件中，我们可以选中其中的一部分文字进行特殊上色。当然，有些时候一张图片不足以表达网站的丰富内容，还需要加上一些介绍或宣传的文字。我们可以把文本组件建于图片之上。
也可以直接在Annotations（注释栏）里添加你需要的一些文字内容。在原型拍板（定案）之后，这才是给UI看的，但在内容未确定之前，这个需要得到头儿们的审批。在这个时候，注释栏就显得很有意义了，它直接反应了你们公司的内容审核步骤。

到了原型设计阶段再来确定这些宣传标语/口号并不是件容易的事情。社区做什么、以什么为目的是在战略层就已经确定了的事情，但这些具体内容总是可能会随着工作进程不段被发现和改善的。（具体可参见《用户体验要求》第2章）呃，偏题了……
Tips：可以在Cusomize（自定义）操作中，对注释项进行修改。可以根据自己公司的实际流程或审核步骤来进行自定义。
第三步：快速注册
这里这里不详说了，按上面的方法把表单组件一个个拖出来或是之后再进行复制就好了。

下拉菜单的选择制作方法，简单说明一下。先拖出Droplist（下拉菜单）工具。

然后双击菜单，在Edit Options（编辑选项）中进行菜单选项的添加、删除和移动。

选项前面的复选框被勾选的话，表示默认选择“selected”。
第四步：底部信息及链接
用两条Text Panel分别作为左边的网站信息和右边的链接。

注意：我们假设在这版原型设计中不需要为链接添加各个链接页面的情况下，才可以所有链接文字放在一个Text Panel中。

第三部分：发布
用Axure RP Pro设计出来的文件是以.rp为扩展名的，需要有专门的这类软件才可以打开。同时，它提供了至少6种发布/导出方式。

File（文件）菜单栏中的Print（打印）和Image（图像）

以及Generate（发布）栏中的HTML、Word（2000 / 2007）、CSV（Comma Separated Value）

从Generator Configurations（发布配置）中看操作框看来，发布方式还可以增加更多种类。

今天我们的首页我将它导出了HTML，点击这里可以查看。
下面侧是导出的图片（点击图片可查看大图）：

不知不觉这篇写了这么长，看来今天就只能写到这里了。下次继续，研究一下RP的交互效果=。=

相关话题：原型(Prototype) ucd的工具和软件源地址：http://p.pnq.cc/ue/?p=166

经验分享：交互设计文档(2)

季子乌 — 2009-03-07 15:28:20

前一篇：经验分享：交互设计文档(1)

继续介绍上文中提到的原型设计工具，还有几个工具也是很有必要一一介绍一下的：

Balsamiq Mockups （有Web版本）

关于这个工具，黄主任在他的来，超酷的Balsamiq Mockups中有一些介绍。
优：看着超舒服，提供的组件工具很多。
劣：虽然提供了很多常用的工具，但反而让文字操作变得不太方便（当然，我们不是在介绍排版工具…）。另外，Web版本同样也缺少交互功能。
Pencil Project

这里也有人介绍Pencil：The Pencil Project制作WEB超方便（不过此文表述好像有点不对劲，Pencil不是用来制作Web的，它不过是一个用来做原型的工具而已。或者说它只是参与了制作Web的一个基础步骤。）
优：跟Mockups很像，但更简洁一些。是FireFox浏览器的免费插件，bug少，操作挺流畅的。
劣：作为简单的浏览器插件，它有许多工具没“准备”，当然，更没有交互功能。
Dreamweaver

在上一篇的回复里头也有朋友提到过直接用HTML制作网页的交互原型。
优：在我刚接触工作的时候，不管是程序员，还是网页设计师，都是要了解HTML的。所以，HTML也恰好就是网站前后台的结合点，如果各方对网站有什么意见和想法，也可以直接在HTML上修改。同样，它提供了许多的原型工具，而且直接输出HTML格式的文件，拥有强大的JS库……
劣：问题是，制作HTML需要花比较多的时间，即使是无样式、无视觉效果的HTML。
OmniGraffle

这个主要是用来做流程图~心弦同学对它评价很高：最好的原型和流程图绘制工具：OmniGraffle 文中介绍也挺详细的。
优：（看心弦同学怎么说吧）
劣：暂时只有Mac版。只是做流程图的工具，做交互界面的话应该不太现实（没准也可以做好=。=谁知道，麻烦告诉我~~）。
做流程图的还有 MS Office Visio

优：Office工具很全，操作也如我们往常熟悉的那样，好入门。
劣：收费软件，意味着庞大和复杂，好像还没有web版。有时候只是简单的一些操作需求就有点麻烦了。
专做脑图的软件 Mindjet Mindmanager (还有Web版本)

优：专一地做脑图。
劣：太专一了，所以只能做脑图，连想建立一些相互关系都非常不直观=。=

还有的其他的偶就不一一介绍了，跟我们的主题偏得有点远~~

前面一直在说，许多的原型设计工具都没具备交互功能，而比起做HTML，Axure RP Pro显然更简单，更直观，且可以把成品生成HTML、Word、图片等文件，携带与交流非常方便。我在工作当中也算相对比较喜欢使用它一些，因此在下面着重介绍一下RP这个工具。非常希望更多的人参与交流自己的经验，来完善我们的交互设计文档制作的“技能”^-^

初次见面，请多关照

如果你第一次见到Axure RP Pro，你可以到这里去认识它：Axure Tour ，RP的5.0测试版下载地址。
PS：不要笑话偶火星哦。虽然我知道做这行的知道这个软件的人很多，但我自己就是个新人，所以会一直以新人的出发点来继续探讨下去。
组件工具，直观便捷
有网页制作中所需要的大部分内容组件了：

还可以制作流程图哦：
软件的一些小缺陷
~5.0版，Bug多，难道是因为我用的试用版？……
~当页面信息量多的时候，处理起来速度变慢，而且导出HTML之后操作也变得很不流畅。（突然想起那句：美丽是要付出代价的）
~感觉功能还不够全面，而且做得有点粗糙，做交互效果操作起来并不十分方便。比如像Dynamic Panel(动态面板)制作页面交互动态效果：一些一环套一环的操作步骤，不能设立能用面板，把面板放到Masters(通用栏)时又经常会出命名和层次间的许多问题。另外就是是上面那条提到的，面板内容越多，软件处理速度就会变好卡，而操作步骤这种功能，通常是不可避免的多内容。

~暂时还没有中文中版。这不算缺陷，是对某些人（比如我）而言的小遗憾。
~软件好像很注重Annotation(注释)部分，拥有很多的可选信息。注释图标在HTML中显示也很明显，看上去有点怪，影响HTML的整体性，要是提供注释的“显示方式”就好了。

下一篇，将通过几个文档实例制作，继续介绍Axure软件的使用技巧。
（本来想要本篇说完的，可是……很晚了，晚安zZZZ~~=-=）

参考文章：常用原型图设计工具

相关话题：原型(Prototype) ucd的工具和软件源地址：http://p.pnq.cc/ue/?p=101

经验分享：交互设计文档(1)

季子乌 — 2009-03-03 07:00:21

从主流互联网公司的产品项目流程一文中提到使用几种工具制作低保真的“原型设计”。想到自己从前在还不了解“用户体验”这个概念之前就设计过许多这类“原型”，其实也算是一种不一样的交互设计经历了。
在下面，姑且就把所有的原型设计称为“交互设计文档”吧，用来抛砖引玉，因为最想看到的其实是别人正在做的更专业的东西。同时，通过研究自己过往的经历，也可以总结新经验，嘿嘿！

近年来的交互设计文档
以下是以前做过的几份设计文档，分别使用不同的软件工具来尝试现实需要的效果：

用MM Fireworks（那时候还是MM的，不是Abebo的）制作的小游戏网站首页(2006年)

用MS Word制作的网站报告首页(2007年)
用Axure RP Pro制作的投票网站用户首页(2008年)
用Axure RP Pro制作的社区找好友功能页面(2009年)
另外，09年也尝试过用MS PowerPoint制作界面文档，不过原稿没有保存，而且效果也不如RP Pro的好。

之前看到过一篇关于毕业生应聘工作方面的“经验”问题，里面就谈到了“经验”也可以是一种接触和了解的程度。至少你可以从自己从前经历过的一些跟工作职位方面相关的接触中来总结你对这个职位的了解和“经验”。
所以，可以说我是有些PD和ID经验的，但深浅自知，仍然需要更多的经验总结和学习进步……

简单说一下使用过的4种软件工具的优劣

Fireworks
优：因为是一款设计软件，所以做出来的东西能比一般的“低保真”效果更高保真一点，可以使用于页面元素相等或相似的尺寸来安排网页的各个模块。
劣：输出单页图，只能用于展示，无法进行页面交互。而且对使用者和编辑修改者有一定的软件入门要求。
Word
优：能写能划，操作方便，修改也方便。
劣：单页面输出，无法进行页面；文字图片信息过多时，容易造成卡页不连贯的情况。
RP Pro
优：能实现设计中的许多交互效果，有许多设计工具帮助优化页面效果。
劣：处理信息有点慢，特别是文字多、交互效果增加的时候，输出的页面操作变得不连贯。
PowerPoint
优：模块定位方面，用于演示Demo是非常不错的。
劣：操作和图文处理不如Word方便，缺少交互效果。

（在下一篇，将介绍以上几种软件的一些使用方法，今天先到这里了:）

相关话题：原型(Prototype) ucd的工具和软件源地址：http://p.pnq.cc/ue/?p=88

用Word画原型

junchen — 2009-02-18 14:44:43

关于原型，有太多故事了。说起快速的原型制作（区别于软件工程的快速原型法），应该以文本文档/富文本文档（如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下载），共勉。

三款交互设计工具

zjf — 2009-01-23 11:48:28

http://www.balsamiq.com

手绘风格交互设计工具，完全是苹果系的交互操作方式，需要在air的环境下运营，安装程序只有3M。
如果未注册有些功能是受限的，每5分钟会弹出购买提醒，价格不菲，79美金。下面是利用balasmiq画的一个本blog的结构示意图。
balasmiq上手非常容易，但不支持丰富的交互定义，可以在产品创意或者策划的初级阶段，用来快速呈现产品经理或者交互设计师的想法。

——————————————————————————————————————

http://www.axure.com

不用再多介绍了，主流的交互设计工具软件。
功能强大，可以快速出交互原型。

——————————————————————————————————————

(https://addons.mozilla.org/en-US/firefox/addon/8487)

firefox3.0的插件，安装使用都比较方便。
插件毕竟是插件，功能有限。

10个精选免费网站分析工具

zhengyongmw — 2009-01-17 23:14:18

简介

在本文中，你将发现10个精选的免费web分析工具和应用程序，他们可以帮助你收集和分析与你网站内容有关的数据。

什么是Web分析学？web分析是指，收集站点对于访客的可用性以及有效性方面的有意义的信息，并对web内容的数据进行集合和分析的过程。Web分析相关的网络应用非常丰富，你也许已经知道类似 Google Analytics 和 Crazy Egg 的最有影响力的网站分析应用，以及类似 Alexa 和 Compete 等远程网站服务。

我们这里先跳过这些知名的应用[参考：免费访客行为分析研究工具]，并探讨一些不太知名的网络分析选项。在本文中，你将发现10个精选的免费web分析工具和应用程序，他们可以帮助你收集和分析与你网站内容有关的数据。

1. Piwik

这里可以参考Piwik的在线演示

Piwik 是一个开放源代码的网站分析应用，它使用PHP和MySql开发。Piwik有一个允许你任意延伸和自定义的“插件”系统。你可以选择仅仅安装你需要的插件，或者全部安装。Piwik插件系统，和你想象的一样，它也给你一个创建你自己的定制扩展应用的可能，并且piwik是个轻量级的应用，下载包只有 1.9MB。

2. FireStats

参考 FireStats的在线演示.

FireStats 是一个简单和直接的网站分析应用，使用PHP和MySql开发。它支持多种平台，包括C#站点，Django站点，Drupal，Joomla等CMS，以及Wordpress和其他的一些平台。你是一名经验丰富的开发人员吗？FireStats 还有一个优秀的API[应用程序接口] ，它可以协助你创建你自己的基于你的FireStats数据的特制应用程序或发布平台组件 (想象看: 在你的wordpress博客显示下载次数最多的10个文件) 。

3. Snoop

Snoop 是一个基于桌面，运行在 Mac OS X 和 Windows XP/Vista 平台的web分析工具。它运行后，会驻留在你的系统状态栏或系统托盘中，当一些事件发生的时候，会有声音来提醒你。另外一个显著的Snoop特色就是Name Tags 选项，允许你使用“标记”来更容易的识别访客。因此，当在财务部门Joe的访问你的网站时，你会立刻知道。

4. Yahoo! Web Analytics

Yahoo! Web analytics 是在web分析行业占据主导地位的Google Analytics的另一个替代选择。它属于企业级的，健壮的，基于Web的第三方分析服务，特别是对于多用户集团，它更容易的实现数据的访问。yahoo网站分析工具全面提供你需要的web分析工具，比如图表工具，自定义设计（并且可打印）报表、以及实时数据跟踪。

5. BBClone

参考BBClone的在线演示

如果你正在寻找一个简单的，服务端的并且不依赖于第三方服务的web应用来监控网站数据，BBClone - 一个基于PHP的服务端应用，为你报告详细的站点流量和访客数据。它支持32种本地化语言，包括英语，中文，德文，日文等。BBClone能够与时下最受欢迎的发布平台容易的集成，比如Drupal，Wordpress，Textpattern等。由于它是基于日志文件的，因此它不需要你使用其他的服务端关系数据库。

6. Woopra

Woopra 是使用Java开发的web分析应用。它分为两个部分，包括一个桌面应用进行数据分析研究，还有一个监控站点统计的web service。 Woopra 有一个健壮的用户接口，一个允许你运行在多个网站和域名和直观的管理系统，甚至还提供一个聊天功能，因此你可以通过与访客交谈来收集非商业信息。 Woopra当前还处于beta版本，并且需要你请求一个私有数据beta注册。

7. JAWStats

JAWStats 也是一个服务端的网站分析应用，它与最流行的 AWStats 协同运行(实际上，如果你是使用的共享主机计划的话，那么AWStats很可能已经安装好了)。 JAWStats 在awstats的基础上进行了两个扩展 - 依靠减轻服务器资源的使用来提升执行性能，在用户接口部分做了一点提升。

8. 4Q

有很大部分的web分析涉及数字运算和数值数据。原始数据只告诉你事件的一部分，另外经常与实际用户进行交互的办法来处理分析数据也会非常的有用。 4Q 的开发人员 Avinash Kaushik 让这变得非常完美，他说：“web分析对于‘what’非常适用，但却不适用’why’ ”。4Q 是一个简单的调查应用，专注于使用实际用户的反馈来补充和提升你的传统网站分析数字。下面有个YouTube video 会告诉你如何容易的安装 4Q web分析工具.

9. MochiBot

MochiBot 是一个免费的web分析和跟踪工具，它特别为 Flash 资源设计。使用 MochiBot，你可以看到什么人正在分享你的flash内容，人们视差了你的内容多少次，很好的帮助你跟踪你的flash内容是否被剽窃或非法转载。安装 MochiBot 很轻快，只需要你可以简单的copy几行ActionScript到你需要监控的.fla文件中去。

10. Grape Web Statistics

参考Grape Web Statistics在线演示

Grape Web Statistics 是一个简单，开源的面向开发人员的网站分析应用。它有一个清爽和可用的接口，并且还有一个扩展的API可以定制你的安装。Grape后端采用PHP程序，你可以在任何运行PHP的操作系统上使用该工具。

14个免费的访客行为分析工具

zhengyongmw — 2009-01-08 22:15:47

简介

为什么你网站的访客不断的离开，甚至有些永远都不再回来！本文介绍的14个免费访客行为分析工具将帮助你：
1、了解你的访客需求
2、提升用户体验
3、提高网站可用性
4、留住更多的回头客
5、提高销售的成功率

关于网站设计有一个很大问题: 如果你想让你网站的访客更好的转换为你的客户（或者忠实读者），你需要理解这一点，为什么大多数的访问者不再返回你的网站！

但是这些来来去去的访客没有留下他们的足迹！你怎么能知道他们到底需要一些什么呢？如何才能知道什么才能让他们采取行动，购买或者订阅你的产品或服务呢？

如果你拥有一个现实生活中的实体店铺的话，这当然很容易：你能听到他们的意见。你可以向他们请教，你会听到他们喃喃自语的抱怨。

但是，通过网站捕捉用户的声音却没有那么容易，不过现在这种情况有望得到改观，你能从本文介绍的14个免费工具中得到你需要的答案！他们分别是：

1、利用 Google Analytics跟踪访客来源，以及他们都点击了哪些网站链接

2、容易说明的 “heatmaps” 将准确的显示人们都点击了哪里（即使不是个链接）Crazy Egg

3、“In-page” web页面分析，在视频中显示访客的屏幕！Google Analytics的完美补充 - ClickTale

4、让你的访客在网页中告诉你错过了什么！ Google Talk Chatback

5、向你的访客调查你所有的行销问题 SurveyMonkey

6、向你的访客咨询为什么他们访问你的网站，还有他们是否找到了需要的信息 4Q

7、获得大量真实的访客活动信息 Steve Krug’s book

8、弹出式问卷调查，允许你招募访客参加你的可用性测试 Ethnio

9、使用你的耳朵和口才（到外面去），如果你无法面对面的销售东西给你的客户，你怎么能够指望能从网上把它卖出去呢？

10、你的客户是你最好的销售人员 - 因此倾听他们是怎么卖东西的！ Tell-a-Friend King

11、允许你的访客容易的通过web页面给你发送反馈信息 Kampyle

12、你希望了解你的访客的需要吗？他们的需要已经输入到了你网站的搜索框！ Google Site Search and Google’s Free Custom Search Engine

13、 Serph搜索引擎，让你了解人们如何谈论你和你的生意

14、测试不同版本的页面设计，看看哪一个是最棒的 Google Website Optimizer

用Analytics的新功能Advanced Segment跟踪特定用户群

aw — 2008-11-05 11:56:16

【前言】

用户体验的极致是什么？我认为是尊重每一个不同用户的需求和习惯。当然，我们无法跑去问某一个用户是否习惯用左手使用鼠标、是否习惯更多一点的 padding还是更大一点的标题。但是，在成本和精力足够合适的情况下，如果能为更加特定的用户提供他们习惯的浏览方式（和产品风格设计无关），那就是用户体验一个很大的提升。例如，我曾统计过来到awflasher.com这个博客的细节数据的一些基本情况（如PV）。

然而，一直一来，在网站统计报告中定位这种特定用户群（例如通过Google搜索来到我Blog的所有IE用户）却比较麻烦。好在最近Google Analytics提供了许多新功能。今天我体验了一下，Advanced Segments则完全能够满足我的需要。今天就分享一下使用这个功能的具体过程：）

【需要定位的目标用户】

我要寻找通过Google搜索来到我Blog的所有Firefox用户。

【具体步骤】

1、进入Analytics管理界面，在左上角找到“Advanced Segments”

2、点击之后，左边会出现：

3、点击这个“Create a new advanced segment”，然后你会看到一个全新的界面。左侧有许多可用条件，右侧则有一些逻辑单元（or是或，即两者满足其一即可，and是与，即两者必须同时满足）

我们首先找到Traffic Source（流量来源），把Source（来源）拖拽到右侧的虚线区域。

4、我们在右侧，条件（Condition）这里输入“Starts with”（以…起头）：google

5、这时候，你可以用右下方的测试按钮测试一下满足这个条件的浏览量：

6、等待片刻，这个条件的右侧出现了数据：通过google，给我带来了1674次访问。

7、然后，新增一个“与（and）”条件，确认这些来自Google的流量是搜索引擎（而不是通过Google的其他页面）

8、测试后，我们看到数据是3886，这表示通过搜索引擎（百度、雅虎、Live等）过来的一共有3886次访问（其中包含一部分Google的，待会儿我们就知道了）

然后我们再继续建立一个and条件，确保用户是使用的Firefox浏览器：

9、然后以同样的方法，用“Browser Version”来确保它使用的版本是3以上：

10、这时候，我们按照上面提到的方法再测试一下：

最终：可以清楚的看到，有449个用户是Firefox用户，而其中406个用户的版本在3以上（这说明Firefox用户大多数都是乐于升级的）

至此，我们的特定条件就建立完成了，为这个特定需求输入一个名字：

然后就能在报表中查看了：

可以看到，每天有200-300左右的Firefox3用户是通过Google搜索来到我的Blog的。

如果你有自己的Blog并且也使用了Analytics，还犹豫什么，赶紧去试试看：）

【官方视频（英文）】

http://www.youtube.com/watch?v=wu8YzF0AM14

闲聊网页制作工具

丁宇 — 2008-11-13 23:33:43

试用了一下刚出的Dreamweaver CS4，第一感觉是速度比以前快了。试用了一会儿就关了，在这个CSS决定表现的时代，想不出有什么理由还用它。“网页三剑客”的说法现在已经几乎听不到了。

做网页，我的常用工具包括Editplus、Coda和CSSEdit。

Editplus

在Windows上，Ultraedit太复杂，Aptana太笨重。Editplus小巧轻便，想开就开想关就关，一个字：快！无论是CSS、HTML还是Javascript我都用它包圆了。

Coda

Mac上很多人喜欢用Textmate，尤其是写Ruby的人更是对它赞不绝口。我则偏爱Coda，主要的原因是其用户体验好。不光是我这么认为，Apple也是如此－实际上，Coda是2007年的“Apple Design Award”获得者，奖项是“Best Mac OS X User Experience”。现在知道它的厉害了吧！

关于Coda的具体功能和特点，你可以去它的网站详细了解一下。顺便说一句，它的网站做的也是一流的棒！不仅视觉效果非常漂亮，而且和Coda的界面风格统一，更绝的是，就这样一个看似简单的网站，却发明了两种Javascript特效，一是“Download”按钮上面的浮动提示框，二是网页主体部分的滑动面板。目前这两种效果都已被jQuery爱好者封装为jQuery的插件。

Coda的官方网站

CSSEdit

其实Coda也可以编辑CSS，并且功能也不赖，可是和CSSEdit比起来还是稍逊一筹。

CSSEdit最让我满意的，有两个地方。一是其代码提示的手感非常好，这手感堪比MS的IDE（比如VB），写代码时干净利落、一气呵成，爽快得很！二是其“实时预览”功能非常好用，屏幕大的话，左面放预览窗，右面是编辑器，一边写CSS一边看效果，不用保存、刷新和切换，工作效率之高可想而知！

CSSEdit和24寸宽屏

另外，CSSEdit也是2007年“Apple Design Award”得主，奖项则是“Best Mac OS X Developer Tool”，它的官方网站做得也很棒！

选择原型设计工具

天机不可泄漏 — 2008-11-30 17:56:38

在程序、网页被实现之前，一定需要把界面给“画”出来，成为原型设计，就像动画片要画分镜头、手稿一样。原型设计能起到有效沟通的作用，漂亮，直观的原型图更是让人赏心悦目。

1. Microsoft Visio

我最常用的原型设计工具，几乎是Windows平台下惟一的“最佳”选择。有很多的模板可以选择，可以制作包括流程图、平面布置图、工程绘图、日程图、软件界面、UML、灵感脑图……

Visio的优点很明显，上手很快，能比较快的画出不同种类的图，但缺点也非常明显，由于要支持不同的“模板”，Visio的外观功能不够强大，而且Visio2007和Visio2003相比，并没有很大的改变，实在对Visio有些失望，不过在Windows下还有其他的选择吗？

2. Microsoft PowerPoint 2007

Office2007最值得称道的是对颜色和形状的快速样式，PowerPoint同样是，这个特点能够帮助用户很快的制作一套UI规范；同时，在展示原型设计是PowerPoint的老本行。

但是毕竟PowerPoint不是专门的原型设计工具，所以一些配套的功能不够，比如界面的文档管理，界面的上下文标识等等。另外有人提供了一套PowerPoint的原型模板，还是不错的。

3. Axure

可以说Axure是Windows上最出色的原型设计软件，原因是：够快，够简单，比Visio更加快，既然是原型设计，当然是低保真的。 Axure提供的几个形状能满足基本的需求，但是形状的定制功能太弱，比如大尺寸的圆角框，Axure就不能很好的处理，需要用4个形状拼接起来。

Axure除了提供低保真的形状外，还提供了注释，界面上下文的实现，等等。其中界面上下文非常有用，如果要演示一些界面效果的话，Axure提供的界面上下文是非常直观的。

另外Axure能够导出HTML和DOC的文件，能很方便的将其文档化。

当然低保真的界面效果总有一天会成为高保真的界面效果图，这个时候，你同样能够利用Axure来满足：即拥有高保真界面，又拥有界面上下文的功能。

Axure的模板功能很有特点，Axure拥有两种模板的类型，一个是传统意义上的模板，随着模板的改变，应用这个模板的页面，也会得到改变；二是小部件（Widget）类型，当应用这种类型的模板的时候，这个模板中的所有控件，都成为应用该模板的页面的独立控件，改变这种类型的模板后，其相关字页面是不会发生变化的。简单的说，就是Widget类型是一个控件包，你可以在新的页面中把这个包解开，把里面的东西仍在新的页面中，此后，这些东西就和Widget没有关系了。

4. OmniGraffle

能画出很漂亮的流程图、原型设计，可以说是最好的原型设计软件了，但只限在Mac OS上，不能说是一种遗憾，在Windows上的用户没有办法享受到这款软件。自己也没有用过，对于它的介绍也是从它的官方网站和心弦的博客中获得的。

最后

温伯格曾经在他的一本书中讲到（具体哪一本实在想不起来）：“我工作只用笔和纸，力图对复杂现象做出简单的解释。”有时候离开电脑屏幕，你会发现你的思考力会上升。

用户研究第二季——操作录像

Villiamin — 2009-01-01 20:00:58

上一季谈到了使用调查问卷来收集支持用户模型数据的方法，但这只是第一步。如果能综合其他方法，那么收集到的数据将会更有说服力。

用户操作录像就是另一个数据收集方法。当然如果具备用户研究实验室的条件进行同步录像甚至用眼动议是最好的，如果条件不允许，我们可以用例如Camtasia Studio这样的录屏工具来做。这类的录像工具很简单，他会完整的录制下你的全部操作过程，包括了鼠标点击和键盘录入。然后我们再根据录像中的操作停滞，误点击，误操作等来分析用户在使用过程中遇到了什么问题。这种方法最大的优点就是能直观展现用户的真实操作，用户如何使用与你的设计初衷有什么区别一目了然。

当然操作录像的方法如果能结合问卷调查来使用，会对后期的分析工作有很大的帮助。以下简单谈几点这两种数据收集方法的注意事项：

1. 问卷设计完成后，先找人试答，发现问卷中是否存在问题。同样当你设计完某项功能后，找同事或内部客户试用，并进行录屏，也会发现不少问题。

2. 参与调查活动的用户未必具有代表性。需要客服或营销人员提供比较有代表性的用户名单，同时必须保证有足够的样本量。

3. 参与调查活动的用户来源和动机对结果有直接的影响。例如你对参与调查的用户有过高的利益回报，会在一定程度影响他们的答案。

4. 用户操作录像最好能在用户自己的环境中进行，最大程度还原使用场景。例如就在用户的办公室，用他自己的电脑。避免环境变化对用户操作的影响。

5. 对于针对性较强的任务而进行的操作录像，应该给予用户一些预设场景或引导，帮助用户了解任务目的，更快进入状态。

6. 结合问卷中的信息来分析操作录像。如果问卷中用户就表示出了自己IT技能水平不高，那么在录像中的一些操作就未必代表你的设计有缺陷。

7. 在对用户进行录屏的整个过程中，尽量不要打扰用户的任何操作。即使是用户遇到问题，也让他自己尝试解决并且允许用户自己放弃操作。这样可以最大程度暴露出用户使用中的问题，留给我们去改进。

或许这是2008年KDUED的最后一篇文章。谨以此文纪念今年KDUED团队的进步，并感谢所有KDUED成员以及关心KDUED的人们对我的帮助。

祝大家2009年身体健康，万事顺意！

相关话题：ucd的工具和软件源地址：http://www.kdued.com/2008/12/ur/

采集网站用户行为的免费工具

SeanYuan — 2008-12-15 23:27:00

我想很多网站都在隐式挖掘网站用户行为，从这些数据我们可以发现用户的行为其实和我们的想象很不一样。千鸟说“用户的日常交互行为会产生四类关键数据：鼠标移动轨迹、链接点击分布、页面浏览流、页面停留时间”。那这四类数据是怎样进行采集的呢？

先说最容易采集的两项——页面浏览量和页面停留时间，使用过Google Analytics的都不会陌生吧，系统会给出很详细的数据来，够你分析的了。还可以通过GA统计到跳出率、退出率，通过设定目标，可以计算出目标的转换率等数据，帮助你分析用户行为。

再来说说链接点击分布，GA提供了网站覆盖图，可以对页面内的链接进行点击统计，但是不很直观，并且如果没有链接的鼠标点击行为GA是不会记录下来的。这里为大家介绍CrazyEgg.com，它可以记录所有鼠标点击行为，并生成heatmap，可以让你直观的看到点击热区。不过遗憾的是现在没有免费试用了，但以前注册的账号可以继续免费试用哦。

最后说鼠标移动轨迹，这个以前的做法是用录屏软件录下用户的操作，但这就不叫“隐式挖掘”了，这里介绍userfly.com，嵌入js代码就可以了，你可以像播放视频一样回放用户在页面的鼠标移动轨迹。

至此，四类用户行为的关键数据都可以通过简单的js代码进行统计，不错吧！

闲聊日志分析工具

丁宇 — 2008-12-17 22:30:27

说完了网页设计工具，这次讨论下日志分析的工具。

提起日志分析工具，可能大多会第一时间想起Google Analytics，这东西大家都在用，我就不班门弄斧了。简要介绍下我一直在用的Clicky。

Clicky

Clicky最大的特点，就是它对细节的无比关注。比如在Clicky中可以详细地查看某一个IP的访问踪迹，或是Firefox用户产生的PV。再加上它内置的过滤器，基本上你可以用Clicky仔细地追踪和观察所有特定的信息。

Clicky中对某一访客信息的展现

Clicktale

Clicktale可是个不一般的NB服务，它可以把用户在页面上的动作以录像的形式回放！这意义之大就不用我多说了吧。如果经费有限的话，甚至可以尝试用Clicktale来做可用性测试。

Clicktale中对某一访客操作的回放

Webalizer和AWStats

除了Google Analytics和Clicky这样的工具外，还有另外一类工具也广受欢迎，这就是以Webalizer和AWStats为代表的日志文件分析工具。它们的工作原理是直接读取并解析原始的Apache日志文件，然后再根据得到的数据生成HTML报表文件。一般的用法是利用cron做Apache的日志轮询，和Webalizer/AWStats的报表轮询。

Webalizer

AWStats

这两个工具我都用过不短的时间，感觉从界面上说AWStats要稍微漂亮一些，但其实两者输出的内容基本一致。另外就是，这种工具需要使用者有一定的Unix/Linux知识。

MicroStrategy Business Intelligence（MSBI）

这是我用过的最强大的日志分析工具。可以说，在功能上其它工具和它完全没有可比性－根本就不是一个数量级上的。因为其它工具基本上都是靠 Javascript来记录数据，然后给你一个功能有限的管理面板来查看数据。而MS的BI产品则直接把原始的Apache日志文件导入到数据库中，然后你想怎么分析就怎么分析。想抓什么数据，跑条SQL就出来了。只要你的服务器够强劲，一口气抓十几万条数据做转换率（convention rate）分析根本不是问题！

MicroStrategy的Business Intelligence（BI）产品

Deep Log Analyzer

MSBI是一个真正适用于企业级应用的高端产品，但它的价格也不是一般的公司能负担得了的，所幸我们有Deep Log Analyzer（DLA）。

DLA的亮点在于，它可以像MSBI一样使用SQL执行自定义的查询，并且查询结果展现得非常清晰。其实支持SQL查询的日志分析工具不仅仅有 DLA，但试用下来，DLA在细节方面做得最好，比如它会详细地显示出来一个URL所有的Referrer，以及这些Referrer各自对这个URL所产生的PV，这样在经常使用的转换率计算中就非常方便。

Deep Log Analyzer

DLA的价格只有差不多200美元，是个值得考虑的选择。

还有……

如果上述的工具都不能满足你的需求，你就得考虑自行编写日志分析工具了。借助各种开源项目，自行编写的工作量得以大大降低。以下是一些不错的资源：

Apache Log Analyzer 2 Feed。一个把Apache日志输出到feed的项目，基于PHP。要注意它默认使用的Apache Combined Log Format的定义有错误，在“>”和“s”之间多了个空格；
Apache Log Regex。顾名思义，分析把Apache日志的正则类，基于PHP；
Visitors。我没用过这东西，不过从它的介绍来看，它提供的访客流程图比较有趣。