X-bells’ space

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

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

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

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

在软件界面的信息栏我们中可以看到工作区中组件的位置（left、right）和宽（width）、高（hight）的数值，单位都是像素(px)。把这个头部矩形放在左上角（left:0 right:0 ）的位置，并拉长宽高到850和80。也可以通过右击矩形在菜单中选择“Edit Location and Size(编辑位置和大小)”，快捷键是Ctrl+L（记住快捷键可以提高工作速度）

 通过这个编辑框，可以精确地调整组件内容的位置、大小信息，非常适合多少有点“像素强迫症”的朋友们使用~:D

 
在公共栏，可以设置组件内容的一些相关信息。

我们将矩形的边框设为无色，背景设为深蓝，作为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看的，但在内容未确定之前，这个需要得到头儿们的审批。在这个时候，注释栏就显得很有意义了，它直接反应了你们公司的内容审核步骤。

到了原型设计阶段再来确定这些宣传标语/口号并不是件容易的事情。社区做什么、以什么为目的不是在战略层or范围层就已经确定了的事情吗？当然不然，但这些具体内容总是可能会随着工作进程不段被发现和改善的。（具体可参见《用户体验要求》第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的交互效果=。=

另外，也看到Allen前天写的原型设计工具里关于Axure的一些介绍，其中提到了两个很详细的介绍Axure RP Pro使用方法和技巧的两个网站：iAxure和悠识UserXper 都是中文的，膜拜啊 Orz~~

 网址：http://p.pnq.cc/ue/?p=166

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

1、Balsamiq Mockups （有Web版本）

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

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

 在上一篇的回复里头也有朋友提到过直接用HTML制作网页的交互原型，当然，其实现在主要是用CSS+xHTML。
优：在我刚接触工作的时候，不管是程序员，还是网页设计师，都是要了解HTML的。所以，HTML也恰好就是网站前后台的结合点，如果各方对网站有什么意见和想法，也可以直接在HTML上修改。同样，Dreamweaver提供了许多的原型工具，设计视图还可以帮你写CSS样式，而且直接输出HTML格式的文件，拥有强大的JS库……
劣：问题是，制作HTML需要花比较多的时间，即使是无样式、无视觉效果的HTML。
而在较早的时候(2003-1)也有人对选择Visio或HTML制作线框图(Wireframes)进行了分析：Practical Applications: Visio or HTML for Wireframes
 
4、OmniGraffle

这个主要是用来做流程图~丁宇同学对它评价很高：最好的原型和流程图绘制工具：OmniGraffle 文中介绍也挺详细的。
优：（看丁宇同学怎么说吧）
劣：收费工具，且暂时只有Mac版。只是做流程图的工具，做交互界面的话应该不太现实（没准也可以做好=。=谁知道，麻烦告诉我~~）。在丁宇同学指引下，看到“设计模板下载”里的确有非常多的原型工具提供下载，不过PC的还是用不了，所以遗憾不能进行试用。。
 
5、做流程图的还有 MS Office Visio

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

优：专一地做脑图、结构图。
劣：太专一了，所以只能做脑图、层次结构图，连想建立一些相互关系都非常不直观=。=
还有的其他的偶就不一一介绍了，跟我们的主题偏得有点远~~

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

偶们先来认识一下Axure RP Pro：

1、初次见面，请多关照

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

还可以制作流程图哦：

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

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

下一篇，将通过几个文档实例制作，继续介绍Axure软件的使用技巧。

原文链接：http://p.pnq.cc/ue/?p=101

上篇用SNS未登录首页的实例介绍了Axure RP Pro制作线框图(Wireframe)的基本操作方法，嗯，那只是个入门。这个工具更多的“好东西”在这篇，以及在大家自己的研究之中。下面，我就把我所用到过的“好东西”先来分享分享，嘿嘿！

Masters（通用模块）
上篇的未登录首页中的底部，在网站中是通用的内容，因此我们可以利用到Masters（通用模块）。在通用模块中新增一个取名为“footer”的Masters。

双击“footer”模块名进行编辑，将Home页中footer的内容剪贴到模块中。为了在页面中的准确定位，我给footer也加了一个底色框。

然后别忘了把“footer”拖到Home页中相应的位置哦。

 Menu(菜单)和Quick Link(快捷链接)
RP中制作多级菜单非常方便，只需要用到组件工具中的：

一个Menu(Vertical)：垂直菜单，一个Menu(Horizontal)：水平菜单。
菜单默认的一级Menu Item（菜单选项）有3个，我们可以通过右击某个选项来插入同级菜单(Menu Item)和增减下一级菜单(Submenu)。还可以编辑菜单

Tips：按键盘Tab键只会让当前聚焦点在菜单选项间浮动，不能增加新菜单选项。
新增加的菜单选项的宽度会跟之前被操作的菜单的宽度相同；
另外，在菜单中修改任一菜单选项的宽度，整个菜单的宽度都会被修改。也就是说，菜单宽度值是各个一级菜单选项的和，而不是自己事先定好的宽度。

拉长或缩短整个菜单的宽度时，只有最后的一级菜单选项的宽度被改变。可以通过拖动来选择多个菜单选项，在公共栏中对内容显示进行相关操作。

Tips：要先选中上级菜单选项，下级菜单才会显示出来；
下级菜单显示的起始位置是上级菜单的左边线，并且无法超过左边线。通过右击菜单中的“Edit Rollover Style（编辑翻转样式）”项，可以制定鼠标移动到菜单上时的菜单样式变化。

Apply to：
This menu item only ：只应用到对当前菜单选项；
This menu only：只应用到同级菜单；
This menu and all submenus：应用到所有同级菜单和下级菜单；Tips：为菜单添加了Rollover Style之后，菜单选项的左上角会出现一个黑白小框，鼠标移动到小框上，就可以看到Rollover Style的预览效果。

为菜单加上链接，我们选择菜单选项“首页”，再选择Interactions（交互）事件中的“Quick Link”

在Link  Properties（链接属性）中选择网站页面地图中的“Home”页。一个链接就添加好了。

 当然，也可以添加外部链接（Link to an external url or file）、重新加载当前页（Reload current page）、返回前一页（Back to previous page）。
 
3、表单和交互事件-关键字匹配实例
在前一篇介绍了一些表单组件的使用（文本输入框Text Field、下拉菜单Droplist、复选框Checkbox等），下面我们通过“关键字匹配”实例中交互事件，深入一点来认识表单的丰富交互效果。做一个类似google搜索的“查询建议”的关键字匹配实例：

 
我们简单模拟这个效果，寻找好友中姓“李”的朋友和叫“李查……”的朋友。实际上这个功能肯定不能像我们这样一个字一个字地匹配的啦=。=
点这里先看看我做好的效果，下面的图片效果：

 
过程讲解：
用Text Panel、Text Field和Button 先做好搜索内容。然后拖出一个Dynamic Panel（动态面板）：

在Text Field下面拉伸出一个“查询建议”的区域来：

在Label标签栏分别为工作区中的Text Field和Dynamic Panel命名为“keyword”和“matching”双击“matching”，为它加上3个State(状态)：

第一个状态设为空内容，双击第二个状态(matching1)进行编辑，用List Box(选择框)：

在List Box中添加多个姓“李”的好友名字选项。

注意：Allow multiple（允许多选）不要勾选。回到工作区，选择“matching” 动态面板，双击第三个状态(matching2)，继续制作“查询建议”菜单，这次都叫“李查……”。
以下是“matching1”和“matching2”状态的菜单内容。我们分别为两个选择框命名为“matchingList1”和“matchingList2”。

和

Tips：可以看到两个状态的边缘都有一条蓝色虚线，这就是我们在调用动态面板的时候为它预设的区域大小。超过蓝色虚线的部分将在页面中无法被显示出来。

下面开始添加Interactions(交互事件)。为表单添加交互事件的方法，先选中工作区中的表单组件，然后在Interactions面板选择“Add case..”添加事件。

或是用一些预设的交互行为作为条件，为组件添加事件。
OnClick：点击
OnKeyUp：键入
OnFocus：聚焦
OnLostFocus：失去聚焦

为“keyword” 文本输入框OnKeyUp（键入行为）添加事件。键入“李”时，显示“matching” 动态面板中的“matching1” 状态。

勾选Select Actions（选择动作）中的“Set Panel state(s) to State(s)（改变动态面板的状态）”，在“Step 3: Edit the Actions description（第三步：编辑动作描述）”中选中蓝色的Set Panel链接，将动态面板“matching”的默认状态“none”改为“matching1”，即前面设好的姓“李”的“查询建议”状态。

点击右上角的“Edit Condition（编辑条件）”，为Case设键入时的keyword值。
可通过下拉菜单和输入框设置条件：“text on widget（文本组件）”，找到“keyword”文本输入框，equals value “李”（变量值等于“李”）。

以下还需要添加几个Case，这里不详说，大家试着自己做一下：
OnKeyUp行为下：
Case 2：当键入“李查”时，“matching”动态面板状态变为“matching2”
Case 3：当键入值不等于“李”时，“matching”的状态变回为“none”
OnFocus行为下：
Case 1：keyword的值是“李”，“matching”动态面板状态变为“matching1”
Case 2：如果keyword的值是“李查”，则“matching”动态面板状态变为“matching2”
OnLostFocus行为下：
Case 1：“matching”动态面板的状态为“none”
 
为“matching”动态面板内的两个状态添加交互事件，效果是“当某个查询建议被选中时，keyword文本输入框的文本值变为选中的内容”。
“matchin1”状态里的“matchingList1”选择框，OnChange行为的Case 1：

这样的Case我们需要做5个，因为我们有5个姓李的好友。我们可以通过Copy Case和Paste Case，来复制和粘贴。

但我们需要把equals的值“李安”分别改成其他的名字……

再选择OnChange，复制所有的Case：

到“matchin2”状态里的“matchingList2”选择框

将多余名字（不叫“李查”）的Case删除“Delete Case”

别忘记需要将选择框的名称修改为“matchingList2”

总算好了，发布看看吧（捏汗ing~~）~~点这里看效果；and 点这里下载.rp源文件，源文件包括了前篇中制作的SNS首页和今天讲解的所有内容。
  

4、RP Pro5.5多动作-倒计时跳转页面实例
RP 5.5版本之后，支持多个Action（动作）同步，这样我们可以制作出更多的交互效果来了。比如说：倒计时跳转页面。
新建一个页面，添加一个Text Panel加上内容“将在　　秒后跳到首页！”。在文本空格处加上一个Dynamic Panel(动态面板)，在Label中为它取名为“stopwatch”。

再为它加上“s5”到“s1” 5个状态，分别编辑5个状态，在里面加上内容“5、4、3、2、1”5个倒计时秒数。
Tips：建议文本中输入空格时用全角输入，否则它将跟Dreamweaver一样在HTML不能显示全部的空格，这样会产生与设计时的错位。利用工作区下面的Page Interactions（页面交互栏）为页面添加事件。

双击“OnPageLoad”，这时我们看到5.5版本中有一个选项“Advanced Editor(高级编辑器)”

利用这个高级编辑器我们可以为页面同时添加多个动作。选择“Add Action”增加动作，可以不断为页面添加动作。

Wait Time(ms)（等待时间）是我们等下要作为倒计时用的动作，单位是毫秒(ms)，1秒=1000毫秒。我们按步骤为页面事件添加动作：

“stopwatch”秒表跳在“s5”第5秒；
等待1秒；
“stopwatch”跳到s4；
等待1秒；
“stopwatch”跳到s3；
等待1秒；
“stopwatch”跳到s2；
等待1秒；
“stopwatch”跳到s1；
等待1秒；
跳到首页。“Step 2: Select Actions”区域中的动作可以通过右上角的三个小按钮进行“上移、下移、删除”操作。另外，跟前面讲的表单交互一样，“Step 3”动作描述中的参数可以通过蓝色文字链接进行修改。
完成添加事件，多个动作一次完成。点这里看效果吧！
据称Axure是目前Windows系统最好的原型设计工具了，它的强大就在于这些交互事件，远不止我说的这些。欢迎大家继续研究、发现和探讨。
如果你说这些交互操作太复杂了？！嗯，是的，如果你不需要用到交互效果，可以选择其他更轻巧工具（如Mockups 或 Pancil）。但既要做原型又要达到交互效果，又加上你是Win操作系统的话，Axure无疑是当前最好的选择了。而且，Axure也是有汉化包的，大家可以去google之哦~~偶已经习惯于用“有道桌面词典”+ 英文版软件了=。=（这是无奈的习惯~~）
祝你“用餐”愉快~~

 终于收尾了，撒花~~~~

原文链接：http://p.pnq.cc/ue/?p=185

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

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

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

2、用MS Word制作的网站报告首页(2007年)

  3、用Axure RP Pro制作的投票网站用户首页(2008年)

4、用Axure RP Pro制作的社区找好友功能页面(2009年)

 
另外，09年也尝试过用MS PowerPoint制作界面文档，不过原稿没有保存，而且效果也不如RP Pro的好。
之前看到过一篇关于毕业生应聘工作方面的“经验”问题，里面就谈到了“经验”也可以是一种接触和了解的程度。至少你可以从自己从前经历过的一些跟工作职位方面相关的接触中来总结你对这个职位的了解和“经验”。
所以，可以说我是有些PD和ID经验的，但深浅自知，仍然需要更多的经验总结和学习进步……

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

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

原文链接：http://p.pnq.cc/ue/?p=88

常见到网上博文有错误理论，包括身边很多朋友都曾认同“可访问性(Accessibility)是为残障人士准备”的观点。其实在互联网技术领域远不止这么简单，总结起来有三个方面：

1、应付极端环境下的正常浏览需求；
2、结构、表现、行为跨平台兼容支撑；
3、保障残障人士无障碍信息获取。
web1.0网站以内容为主；web2.0网站以功能为主。当前主要有“纯功能、内容+功能、纯内容”三类网站界面形态，格局已基本定型。虽然以内容为主的网站更突出Accessibility，以功能为主的网站更突出Usability，但不是说以功能为主的网站就不用考虑Accessibility。

技术发展至今，“纯功能”网站界面为提高Usability有大量富客户端应用，并且逐渐形成核心竞争力。也就是说在这种情况下同时保证良好Accessibility和Usability几乎不可能，因此只能采用保底的用户友好方案，告知为什么？怎么办？比如Gmail在disable javascript情况下会默认进入“基本HTML”模式；如果切换标准视图则提醒“必须启用JavaScript。”如下图

但在传统不以富客户端应用为核心竞争力的“内容+功能”网站界面上，同时保证良好Accessibility和Usability则完全可能，只是技术复杂度问题。比如yahoo首页这个著名web2.0门户和Ajax应用典范，在disable javascript情况下，虽然所有交互模式不能用，但功能不受影响，整体页面效果也保持良好。如下图

“纯内容”网站界面就是以信息为主的各资讯、新闻类网站内容页，大量存在于互联网，也大量被收录于各搜索引擎，这样的页面保证Accessibility更得把握住用户核心需求。比如163新闻的内容页，在disable css情况下，依然能够清晰辨认信息内容，一方面呈现优先级处理得当，另一方面标记语言的结构化良好。如下图

说到disable css, javascript，好多同行就会想到人为因素，并且以此定论应用场景不典型、不用考虑。其实懂得disable的高端用户也一定知道如何enable，真正可怕的是网速慢、I/O设备故障等非人为不可控因素，造成css, javascript无法下载或解析。

网上流传份5000万独立用户的网站数据分析显示，javascript disabled有1.19%，这个数据与我能看到的几个网站差不多。如果每天5000万的流量，大概就有60万这样的用户。

不管是客户端还是服务器端的网速问题，都会造成数据无法下载、浏览器无法渲染，严重影响用户的浏览体验。或许有人认为，曾经拨号时代此问题比较明显，现在资源普遍已比较宽裕。首先并不是全中国的网络都已小康，其次并不是小康的网络就健康，比如我们办公室经常还因为硬件防火墙、带宽限制等原因造成网络故障。

尤其在病毒泛滥、中毒杀毒的时候，浏览器经常会出现莫名其妙的问题，我曾经就碰到过因为浏览器一直脚本报错，导致服务无法使用，数据拿不到而影响工作。另外在国内使用代理服务器的愤青、伪愤青们也不少，是否有人考虑过为什么有些网站访问容易？有些困难？

回到五年前，在Gmail和Flickr刚在国内流行时，无疑都经历了访问效率低下的严峻考验。作为当时的用户和现在的从业者，我们不妨设身处地认真思考，为什么Gmail容错做的好？为什么Flickr会慢的很稳定？

极端情况并非只极端条件下才碰到，不可控因素无处不在。著名诗人泰戈尔曾说过，世界上最远的距离不是生和死，而是电信和网通间的距离，还有中国连接世界的距离。

原文链接：http://blog.rexsong.com/?p=5687

作为WIMP(Window/Icon/Menu/Pointing Device)界面的关键部分，图标在人机交互设计中无所不在。随着人们对审美、时尚、趣味的不断追求，图标设计也不断花样翻新，越来越多精美、新颖、富有创造力和想像力的图标充斥着我们的视界。可是，从可用性的角度讲，并不是越花哨的图标越被用户所接受，图标的可用性要回到它的基本功用去思考。图标的功用在于建立起计算机世界与真实世界的一种隐喻，或者映射关系。用户通过这种隐喻，自动地理解图标背后的意义，跨越了语言的界限。但是，如果这种映射关系不能被用户轻松并且准确地理解，那么这种图标就不应是好的图标。因此，图标的设计应该遵守这样的原则：  

图标的可用性原则一：图标指向的映射关系应该尽可能的直接、简单。
可能与我们的直觉相反，一些研究显示图标界面与文本界面的比较中，并没有体现出明显的优越性，一个主要原因就是文字和意义的映射是直接的，而图标与意义的映射却不一定是直接和明显的。在坏的图标设计中，用户需要花费几秒钟甚至更长的时间去猜测图标代表的意义，而且还很可能猜错，错误的理解导致错误的操作，错误的操作导致糟糕的结果，这决不是美妙的用户体验，即便从美学角度讲那个图标可能是上佳的艺术作品。“直接”的意思是：不要绕弯。图标展现的视觉表象与其背后的意义只需要很短的意义路径即可连结。譬如对于“剪切”操作，使用“在文稿上打×”的图标形象比“剪刀”的图标形象更易理解，因为前者与剪切操作有更短的意义路径，尽管“剪刀”图标显得更加生动活泼。认知心理学家提出过一个激活扩散模型，就是在人的知识和概念体系中，当一个概念被加工或受到刺激时，该概念结点就产生激活，然后激活与该结点直接相连的多个连结，并继续向四周扩散。与当前概念在概念网络上的连结关系决定了其被激活的强度。这种连结关系取决于人的知识体系的组织架构（即两个概念是否属于同一类别）和概念同时出现或使用的频率。例如在人的知识和概念架构中，在纸质文稿上写字和在电脑上写字都属于撰写文档的类别，那么当“在文稿上打×”的图标形象出现时，被试就会快速地联想到在电脑上进行剪切操作。而“剪刀”的视觉形象最易归属到“衣服裁剪”或“手工劳动”这样的类别中去，因此映射关系具有教长的路径和较弱的连结强度。因此在图标设计中，设计师应该仔细考虑或者直接去调查用户的知识体系，找到最短的概念连结。

图标的可用性原则二：每个图标指向的映射关系应该是唯一的。
这个原则的意思就是，不要让图标产生歧义。想像一下，一个“飞旋的车轮”图标，它代表了什么？也许设计者的本意，是要用车轮的移动来象征电脑中文件的移动操作。可是，用户也许猜测出了其他十几种对应关系，比如一款3D赛车游戏。这个原则其实还有一个推论原则：
不要使用过于复杂的图标。
因为图标的视觉元素越多，那么其意义指向的可能性就越多，用户越有可能从各种各样的角度去解读，那么该图标的可用性就可能越差。

图标的可用性原则三：同一个图标系列中，最好使用相同的映射模式。
在真实世界与计算机世界（或网络世界）的对应中，存在很多种映射模式。笔者粗粗地归纳下，可以发现这样几种映射模式：外观映射、功能映射、语词（字母）映射、部分指代映射和综合映射。在同一个系列图标中，用户极易对图标形成某种固定的映射模式，如果突然出现了另一种模式的映射，用户可能仍将延用先前形成的思维定势进行理解，从而出现理解困难或理解偏差。

图标的可用性原则四：最好使用简短文字做为图标的冗余编码。
在信息传播的过程中，增加信息的冗余度是保证信息传输的可靠性的最有效的方法。在人机交互设计中，最常见的冗余编码就是红绿灯，即每个颜色皆对应位置，使得在人口中占具相当比例的色盲人群也可以通过灯的位置来接收是否可以通行的信息。图标设计也需要增加冗余编码，以保证绝大多数的人都能够快速、准确地理解图标的含义。一个很好的例子出现在手机主菜单的设计中，下面看两种常见的手机主菜单的设计：

图一、诺基亚N95的主菜单

图二、阿尔卡特OT-C825的主菜单

在图一中的图标都在下方加注了简单的文字，和图标一起形成冗余编码。这样即使用户是第一次使用该手机，也能避免图标选择错误。而图二的图标没有将文字直接标注在图标下方，而是在只有选中某个图标的情况下，在屏幕上方显示文字标注，这样无疑增加了用户操作的负担。尽管某些图标，用户很容易理解其含义，比如图二中第二行第一个“相机”图标，用户很容易清楚这是指拍照功能；但有些图标，在没有文字标注的情况下，还是令人费解，比如图二中第四行第一个“礼品盒”图标。因此，笔者认为，在大多数情况下，给图标加注文字是比较好的选择。

最后，我要说明的是，图标设计中的可用性原则与图标的美学考虑在实践中可能存在矛盾，这时候权衡两者是必须的。好的可用性可以让用户更方便地使用产品，而漂亮、时尚或者富有情趣的外观设计可以给用户带来喜悦感等良好的心理体验。很难说哪一方理所应当地取得主导地位，更理想的状态是交互设计师和视觉（外观）设计师进行良好的沟通和合作，求得双赢的设计方案。

参考文献：
1 朱祖祥主编。工程心理学教程，第305至309页，人民教育出版社，2003年，北京。
2 Wichens C D，Hollands J 著，朱祖祥等译。工程心理学与人的作业，第262至266页，华东师范大学出版社，2003年，上海

原文链接：http://hi.baidu.com/hciobserve/blog/item/356f4e5557267ac5b745aec4.html

简介

你不必在每件事情上取得别人的同意。作为一个专业的Web开发者，你是你访客的爱好和需求的倡导者；你必须坚持你对良好的用户体验的理解，确保在复杂的网站架构下你的访客仍可能找到他们的路径。

你不必在每件事情上取得别人的同意。作为一个专业的Web开发人，你是你访客爱好和需求的倡导者；你必须坚持你对良好的用户体验的理解，确保在复杂的网站架构下你的访客仍可能找到他们的路径。这意味着在与用户和同事讨论时，你必须能够坚持你的立场，有效地传达自己的想法。事实上，你的工作就是妥协处理错误的思想和误导的概念，而不是盲从它们。

在这种境况下，没有任何东西可以帮助你，除了和你工作中根本问题相关的深刻知识。但是，即使你知道这些知识，重要的是你还要知道如何称呼这些概念，如何在讨论中用到它们。此外，准备一些你可能需要的准确术语在手边作为论据，对你的讨论也是有帮助的。

在这篇文章，我们陈述了30个通常被遗忘、忽略和误解的重要的可用性问题、术语、规则和原则。可读性(readability)和易读性(legibility)有什么区别？究竟80/20和帕累托原则是什么意思？扫雷与满意度是什么意思？逐步强化和优雅降级又是什么？OK，是时候深入了。

 可用性：规则和原则
——————————————————————————–

7±2 原则

由于人类大脑处理信息的能力有限，它会将复杂信息划分成块和小的单元。根据乔治A米勒（George A. Miller）的研究，人类短期记忆一般一次只能记住5-9个事物。这一事实经常被用来作为限制导航菜单选项到7个的论据；然而关于神奇的“7，加2或者减2”还是引起了激烈的讨论。因此目前还不清楚是否7±2原则能、可能或应该应用到web中。米勒的研究

2秒原则

一个松散的原则，即用户没有必要对某些系统响应等待2秒以上的时间，比如应用程序转换和开始的响应时间。选择2秒有点武断，但确是一个合理的数量级。可靠的原则就是：用户等待时间越少，用户体验越好。[可用性优先]

3次点击原则

根据这个原则，如果用户在3次点击中无法找到信息和完成网站功能时，用户就会停止使用这个网站。换句话说，这个原则强调明确的导航，逻辑架构和后续站点的层次结构。在大多数情况下，点击的次数是无关紧要的；真正重要的是，游客总是能知道他们现在在哪，他们去过哪，他们接着将会去哪。如果用户感觉他们对该系统如何运作有个充分的了解的话，甚至10次点击，用户都会觉得OK。

80/20原则（帕累托原则）

帕累托原则（也被称为重要少数法则和因素稀疏原则）指出，80%的效应来自20%的原因。这是商业中的基本经验法则（“80%的销售额来自20%的顾客”），但也可以应用于设计和可用性。举例来说，我们可以通过确定那些贡献80%利润的20 ％的用户、客户、活动、产品或程序，并最大限度地注意对他们适用，来显著提高效应。[帕累托原则在维基百科]

8个接口设计的金科玉律

作为接口设计研究的成果， Ben Shneiderman提出并收集了一些从经验中启发而来，适用于大多数交互系统的原则。这些原则适用于用户接口设计，也适用于网页设计。

1. 争取保持一致性
2. 为老用户提供可用的快捷方式
3. 提供有益的反馈
4. 设计结束功能的对话框
5. 提供简单的错误处理
6. 允许简单的逆转功能
7. 提供控制感。支持内部控制点
8. 减少短期记忆
您可以在维基百科： Shneiderman的规则设计中了解更多关于设计中的Shneiderman规则。

费茨定律

由保罗费茨（Paul Fitts）发表于1954年，费茨定律模拟了人类活动，以目标距离和目标规模大小为函数，预测了迅速移动到目标区所需时间。该法通常应用到鼠标的移动，访客就必须从A点移动到B点。例如，这个规则对于如何放置内容区域，以更实用的方式，最大化内容可及性和提高内容点击率，是非常重要的。

倒金字塔

倒金字塔是一种在文章开头表达总结文字的写作风格。这种方式使用了新闻业中著名的“瀑布效应”，新闻作者试图让他们的读者即时知道他们的报道的主题。文章以总结开头，接着是关键点，最后那些次要的细节，如背景资料。由于网络用户需要即时的满足，这种倒金字塔写作风格，对于网络写作和更好的用户体验是非常重要的。就像尼尔森的支持

满意

网络用户不喜欢用最佳方式找到他们寻找的信息。他们对最合理和最健全的解决问题方案不感兴趣。相反，他们永远扫描他们认为“足够好”的quick’n'dirty解决方案。在网络中，这种方式准确地描述了用户的满意：用户使用一个“足够好”的方案解决问题——即时在长远看来一些替代方案能够更好地满足他们的要求。[界面设计]

 可用性背后的心理学
——————————————————————————–

 
婴儿鸭综合症
婴儿鸭综合症描述了游客倾向忠于他们记住的最初设计，并且通过与最初设计的相似度来判断其他的设计。其结果是，用户通常倾向于那些与他们记住的最初设计相类似的设计，不喜欢陌生的系统。这些可用性问题是很多系统重新设计时存在的：用户，习惯了以前的设计，对新的网站架构会感到不舒服，他们必须找到自己的方式去使用网站。

无视广告

网络用户具有忽视一切看起来像广告的东西，有趣的是，他们非常擅于这。虽然广告是被注意到了，但几乎一直是被忽略的。由于用户已经为网站上不同的任务构建了相关联的图式，在网站上搜索特定的信息时，他们只将注意力集中在网页的部分区域，就是那些他们认为可能是相关信息的地方，也就是，小文本和超链接。在这个例子中，大的色彩缤纷的地方或动画横幅广告和其他的图形是被忽略的。

来源：无视广告：一些发现和一些新发现

扣人心弦效应（蔡加尼克效应）

人类无法忍受不确定性。我们倾向于对感兴趣的、未回答的问题尽快找到答案。扣人心弦效应就是基于这一事实的；扣人心弦的电影，文章和情节总是有出其不意的结果，往往总是以一个突然的震惊启示或者困难的局面离开。这种效应经常用在广告上：广告主往往通过要求游客解答刺激的问题，来迫使他们阅读广告，点击横幅广告或者跟进一个链接。

扣人心弦效应由布鲁玛 W. 蔡加尼克（Bluma W.Zeigarnik）在1927年发现，这个效应在读者间建立了情感联系，在营销学中极其有影响力。游客们可以更好地记住是什么广告，甚至是最小的细节都能记得更清晰确切。在web写作中，扣人心弦效应也被用来吸引游客进入网站。（如“抓取我们的RSS-Feed，以确保您不会错过文章的第二部分！”）。
视知觉的格式塔原则

这些原则是人机交互设计心理方面的基本原则。

1、接近法则认为，当我们知觉物体归类时时，易于把相近的物体归于一组。

MTV音乐颁奖的接近法则的真实例子. 来源.

2、相似法则指当内容元素彼此相似的时候我们会感知它们为一组。
3、Prägnanz法则（图像-背景）指在知觉某个的视野时，一些物体（图像）看起来突显了出来，视野中的其他东西则消退到背景中。

苹果机的标志可以被看作是一个正规笑脸和一个侧面欢喜的脸庞（看着计算机屏幕）来源

4、对称性法则指我们在知觉物体时倾向于把物体知觉为一个中心周边对称的形状。
5、连贯性法则指我们倾向于知觉联贯或连续流动的形式，而不是断裂或都不连续的形式，事实上它们并不连贯。

我们知觉到字母’I'，’B'，和’M'，虽然我们事实上看到的形状，只有几行不同长度的白色空格彼此空悬。来源
你可以在视知觉的格式塔文章中找到更多信息

自我参照效应

自我参照效应在网络写作中尤其重要，可以显著改善作者和读者之间的沟通。与我们个人观念相联系的事物要比那些和我们没有直接联系的事物记得更清楚。例如，阅读一篇文章后，用户能更好地记得他们个人经验中相关的人物，故事或事实。在可用性中自我参照效应通常被用在网络写作的表达和网站内容陈述。

 可用性术语表： 术语和概念
——————————————————————————–

眼球追踪

眼球追踪是测量我们凝视的点（我们看着的地方）或者相对于头部来说眼睛移动的过程。眼球追踪监测记录眼球每次的运动，并在网站最活跃的区域高光显示。眼球追踪研究可以帮助估计浏览网站的用户是否舒适地使用网站，以及他们理解网站背后的架构和系统有多快。在最近的眼球追踪研究Eyetrack07中，你可以找到一些有趣的可用性结果。

眼球追踪：来源

折叠位置（Fold）

折叠位置是指一个网站在屏幕上可见区域的最下方位置。当然折叠的位置也取决于你访客的屏幕分辨率。网页可见区域（也称为screenful）是指网页上不需要拉动滚动条就能看到的区域。既然折叠位置是不需要滚动就能看到，它常常被视为可能可以保证最高广告点击率和利润的区域。然而，折叠位置并没有那么重要。[Usability.gov]

中心凹视（中心凹区）

中央窝，人类眼睛的一部分，负责敏锐的中央视力，对于人类在阅读、看电视或电影、驾驶以及其他任何需要高度注意视觉细节的活动中，是非常必要的。中央窝是你的眼睛在瞄准时的一块小范围空间，它是你可以感知最高级别细节的唯一地方。中心凹区相当于两度视野或者放在你眼前的两个缩略图大小的紧密区域。这是你为游客传递最重要信息的地方。

中心凹视是非常重要的，因为在这个宽屏区域外你的访客如何看你的网页变化非常大。在这部分区域内，是你的视线注意力最大的唯一区域——只有在这里没有眼睛扫描是必要的。[来源]

注释

注释是一个自动的行为，它在链接链向的地方和用户一旦点击会链向的地方提供提示和摘要信息。提示可通过链接的标题特征来提供。从可用性的角度来看，用户希望有充分控制一切正在发生在网站上的事情的权利；清晰和准确的内外部链接解释，合理的连接源头标签，都可以提高一个网站的可用性。

优雅降级（容错系统）

优雅降级是指一个网站即使在它的部件（部分或完全）已经无法显示或者无效的情况下还能展示内容和基本的功能的这种能力。在实践中这意味着网站在每一个可能“过失”的情况下显示内容，可在用户可能的每种配置下（浏览器、插件、连接、操作系统等等）被使用。为“骨灰级用户”提供的仍然是丰富的、增强的页面版本。例如，典型地为多媒体内容提供可替代的显示，以确保在图片无法显示的时候内容仍然可以感知。[维基百科：容错系统]

粒度

粒度是指一个大的、复杂的数据集或信息分成何种程度的更小的单位。

热区

热区是网站可点击的区域，一旦被点击时会改变它们的形式或者/和外观、这是典型的：当链接或者任何其他网站元素被点击时的焦点效应。

Smashingmagazine.com上的热区和注释

易读性（Legibility）

易读性是指文章在视觉上是否明确。

扫雷

扫雷是指那些要确定网站链接的用户与网站的交互大多数情况下。在大多数情况下，扫雷是可用性问题中一个明确的警报信号。通常扫雷涉及用户在网页上快速移动光标或者指针，注视光标或指针在哪里有显示链接的变化。[Usability.gov]

肉之谜导航系统（MMN）

网络中的肉之谜导航描述了那种用户要想发现导航链接的目的点或者确定链接在哪里极其困难的设计。

物理一致性

这个概念描述了网站外观的一致性，-如logos的位置、导航、图形元素和版式的使用。物理一致性对于更好的方向和有效的网站导航是至关重要的。

逐步强化（PE）

逐步强化是一个设计战略，网站是以多层次的方式创建的——从适合所有浏览器的最基本的功能，再到更多的适合现行浏览器的加强的功能。逐步强化的主要优势在于它的“普遍可用性”——比如，事实上，它允许使用任何浏览器或者网络链接工具的人访问网站的基本内容和功能，同时它也提供使用更好网络带宽和更先进浏览器软件的用户更强版本的网页。[维基百科]

可读性

可读性描述了基于复杂句子和困难词汇的文字的可理解的程度。可读性的指标通常可以划分可用性层级，通过一些人轻易理解一篇阅读文章所需的年龄和级别来定。可读性不是易读性。[可用性的术语]

用户为中心的设计（UCD）

用户为中心的设计是这样一种设计理念，用户需求、偏好和行为决定了网站的基础，就是网站架构、导航和获取信息的方式。UCD被视为现代网络应用的标准方式，尤其是由于用户创造内容的兴起。在web2.0游客必须积极参与，因此需要最佳化他们需求的条件。

警惕（持续关注）

警惕是在长时间单调的任务中仍能持续关注的能力，比如校队文章查找拼写错误，提醒约会，自行修改文字处理机文档等。在现代网络应用中警惕的任务主要体现在后台、自动化和提供系统的可用性。[接口设计]

走来即用的设计

一个走来即用的设计是不言自明和直观的，所以第一次和一次性用户可以有效的使用它，而不需要实现介绍或培训。[接口设计]

线框图

线框图是一个网站基本的结构——骨架——描述了一个网站的思想、概念和结构。线框图可以被设计成介绍陈述，用来向股份持有者解释网站是如何设计的，提供了什么功能，用户是如何完成他们的任务的。线框图通常不会有任何视觉元素，或者一个完整的页面布局；他们往往是设计者画在纸上的初稿和草图。例子在这里.[术语, 维基百科: Wireframes]

原文链接：http://www.yeeyan.com/articles/view/53948/32033

http://static.chinavisual.com/storage/topics/36136/

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!