iLeichun

　 在网页设计中，空白区域是指不同设计元素间的区域。文字之间、段落之间、图片之间、链接和页脚之间等的区域都是所谓的空白区域。空白区域并不一定是“白色的”，而是内容上的空白。

　　 使用空白区域有助于浏览网站或网页的不同部分。不过设计的网页模板设计师通常低估了空白区域的重要性。空白区域减少了访客需要浏览，一气呵成的文字量。不同的视觉隔离设计元素都能有效地用于空白区域。有效地使用空白区域可以使网站模板干净利落并清新。让我们来探讨下有关网页设计空白区域（也称负空间）的几个方面。（编注：关于负空间，这里有《15个极具创意的负空间Logo》。）

　　 聚焦

　　 当设计一个网站模板时，设计师通常把空白区域用于组织文字、对比图片、聚焦和吸引访客的目光。这增加了浏览范围以及可浏览性。正空间——是图片和文字都被合适地放置，可以很好地突出负空间。空白区域也用于创造高价值品牌。同时，空白区域也是昂贵及高品质的代名词。

　　 空白区域的类型

　　 网页设计中有两类空白区域。有效空白区域是有意留下好的结构和布局空间。同样，也用于突出内容。在网页设计布局时，留下无内容的网页或空白区域。这种区域被称为消极空白。

　　 行距（Line spacing）

　　 当留有足够的行距，网页模板更具可读性并且便于浏览。假如行距太紧凑，就不便于浏览。而当行距太宽，字与字之间过于分开，会不易于访客阅读。借助CSS，可以达到标准行距。

　　 行与行之间的距离也被成为—— 行距（leading）。这通常设置在标准字体的 120-150%，就10pts这类来说，12~15pt 为最佳。小于此间距可能会让副本不宜辨别或浏览。大于这个间距可能给访客浏览带来障碍。

　　 页面空白

　　 在设计一个网页模板时，这是围绕一个特定元素的空间。这可以由CSS页面空白控制。尝试着与整个布局保持一致。间距一致也会使页面模板更专业有序。当考虑空白页面时，要考虑纵向和横向距离。

　　 过大面积的空白会带来距离感。在设计网页模板时，你应该注意像素是否适合屏幕。设置过多的空白实属浪费。

　　 当设计网页模板时，你需要确保文字没有与图片、侧边栏、导航以及页眉相左。必要的空白可以给访客一个休息的空间。网页设计常适用于800×600分辨率的屏幕。随着时间的推移，这也发展为1024×768.

　　 标题

　　 标题是可控制内容分隔的一种很好的方式。有H1、H2及H3等不同的类型。这可以强调不同的内容。标题上方或下方的空白区域对于分隔相关部分的内容是十分有用的。

　　 平衡布局

　　 空白区域也具有平衡布局的作用。假如没有足够的空白区域，访客的眼睛就不能得到休息。网页设计应该保持开放空间和内容的平衡。网络营销机构发现，在错误区域过多的空白区域就像过高的页脚会误导用户。他们可能认为已经结束并离开页面。用户希望网页空白内容比印刷媒介中的少。

　　 最近网页模板空白区域或负空间的设计都得到关注。它的存在或使用不是定义上的数量而是对于网页贡献的方式。

　　 空白区域在网页模板设计中得到越来越多的重视。如今它被视为不可或缺的一部分而并非背景。不少网页模板设计师把它用于强调内容、增强网页可读性和平衡网页布局。改革和创新正在日益替代墨守成规和习俗。虽然适量地使用负空间有助于实现预期效果，但是过量使用弊大于利。

来源：http://blog.jobbole.com/1165/

设计一个非常好的布局是一件非常不容易的事情，任何一个设计可能会取悦你，也可能让其它人厌恶。尽管这样，这里仍旧有些大家都承认的设计误区。我这里列出了一些布局设计的小技巧。

1. 空白区域不足

你应该保留一定得空白页面让访问者放松眼睛。很多设计者都想提供更多的内容在第一个页面。感觉初学设计的人更容易犯这个错误，但其实各个设计水平的人都有这个倾向。

2. 颜色搭配不当

一个很常见的错误就是使用高对比颜色创建一个富有视觉张力的设计。很多的对比设计都希望通过一种颜色的色彩和饱和度重点突出最重要的部分。这里有一个小花招非常不错：降低你的颜色饱和度，如果各个元素之间的区别非常清晰的话，那就足够了。

3. 单个页面元素过多

一个拥有信息太多内容的网站，例如，插入太多的图标，按钮和图片将会非常难以浏览。因此会让用户的易用度大打折扣。

4. 图片缺少含义

一个图片可能抵得过成百的文字，但是如果这些文字都是批评你的话，你的布局设计就有问题了。书写的内容，布局和图片应该组合使用，并不是分离的实体。图片应该能有效的说明网站需要表达的信息及其选择，这是一个设计时最初需要考虑的因素。

5. 排版混乱

如果说一个简单演讲是网站的其中一个特殊目地的话，字体排版就是一个关键的因素。另外一个问题是大家如何理解字体排版，它不是一个简单的如何选择字体的过程，它决定了句子、段落及其标题的组织方式。

6. 没有照顾所有人的使用感受和可用性

一个可用性差的网站是一个自私设计者的作品。实际上可用性的使用并不是个高科技的东西。例如，你只需要简单的加上alt标签属性，这并不会带来任何麻烦。

7. 前期准备不足

缺乏经验使得我们不停的修改自己的东西。 一个聪明的设计者会在最开始的时候思考整个布局的大概设计。这种方式可以省去很多时间和资源。很明显，在实际做之前思考是一件很不容易的事情，不可能不去修改任何设计，但是至少能够帮助我们尽量少的去修改我们的设计。

来源：http://www.gbin1.com/tools/design/201111217bigmistakesthatmakeyourlayoutadisaster/

在为大家介绍完如何在XHTML中正确地使用JavaScript和CSS之后，W3CGroup继续为大家带来XHTML与HTML兼容的16条指引！

1.避免将页面声明为XML类型，页面使用UTF-8或者UTF-16字符集。

2.在空元素标签（不能用来包含内容的标签）结束符>前加上斜杠 /，如：<br />,<hr />等等。

3.当一个非空元素（此标签是用来包含内容的，如标题，段落）内容为空时，给它一个空白字符，而不要使用像空元素那样的结束方法，如：当一个没有内容的P标签请书写：<p> </p>而不要写成<p />。

4.当你的style和scripts内容中出现 <, &, ]]>或者两个连续的横杠 --时，请使用外部文件进行引入。

5.避免在元素属性值中出现断行或者多个空格。

6.不要在文档的head部分包含一个以上的isindex元素（最好不使用），此元素不推荐使用。

isindex：使浏览器显示一个对话框，提示用户输入单行文本。

在 HTML 4 中，此元素是不推荐使用的，而推荐使用 INPUT 元素。isIndex 的 tagName 属性将返回 input。

此元素是一个块元素，此元素需要关闭标签。

下面的例子使用 ISINDEX 元素提换了默认的提示：
    <isindex prompt="输入要搜索的索引关键字" />

7.当要给一个元素指定language时，请使用lang和xml:lang属性，xml:lang的值优先级更高。

8.请使用id属性当做元素标识符，避免使用name属性，尤其在这些元素上更不赞成使用name属性当做它们的标识符：a, applet, form, frame, iframe, img, map。

9.给页面定义文档字符集，给xml文档定义字符集使用
<?xml version="1.0" encoding="UTF-8"?>
给XHTML定义字符集使用
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦，需要注意，当然，问题还是一如既往的出现在 IE 下。以下为其中一例：

html

<ul>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
 <li><a href="#"><img src="img/temp.jpg" alt="" /></a></li>
</ul>

css

ul{
 width: 280px;
}
ul li{
 display:block;
 height:57px;
 width:277px;
}

其中 temp.jpg 尺寸为 277×57

Firefox 下的正常表现

IE6 下的非正常表现

很明显地可以看到 IE 中，li 的表现高度，并非我们设定的 57px，而是比其要高，这是因为 img 下面多出了 5px 的空白。

解决方法 一

使 li 浮动，并设置 img 为块级元素

ul{
 width: 280px;
}
ul li{
 float:left;
 display:block;
 height:57px;
 width:277px;
}
img{
 display: block;
}

解决方法 二

设置 ul 的 font-size:0;

ul{
 width: 280px;
 font-size: 0;
}
ul li{
 display:block;
 height:57px;
 width:277px;
}

解决方法 三

设置 img 的 vertical-align: bottom;

ul{
 width: 280px;
 font-size: 0;
}
ul li{
 display:block;
 height:57px;
 width:277px;
}
img{
 vertical-align:bottom;
}

解决方法 四

设置 img 的 margin-bottom: -5px;

ul{
 width: 280px;
 font-size: 0;
}
ul li{
 display:block;
 height:57px;
 width:277px;
}
img{
 margin-bottom: -5px;
}

下面，W3C Group为大家呈现WEB前端开发高性能优化部分之JavaScript的优化细节！

一、避免出现脚本失控

不论什么脚本，在任何时间、任何浏览器上执行，都不应该超过100毫秒。如果实际执行的时间长于这个底限，一定要将进程分解成若干更小的代码段。

脚本失控基本上有以下四个方面的原因：

1. 在循环中执行了太多的操作

解决这个问题的诀窍就是用下面这两个问题来评估每个循环：

1. 这个循环必须要同步执行么？
2. 循环里面的数据，必须要按顺序执行么？

如果1和2都可以否定，那么建议使用setTimeout方式将循环体切分成小块进行异步处理

将循环中的定义变量及初始化操作放到循环外。参见：http://www.w3cgroup.com/article.asp?id=111

2. 臃肿的函数体

在JavaScript中，我们应该尽可能的用局部变量来代替全局变量!

理解JavaScript作用域链。参见：http://www.jslab.org.cn/?tag=ScopeChainAndClosure

理解原型链。参见：http://www.jslab.org.cn/?tag=prototypeChain

3. 过多的递归

使用迭代方式替代递归，采用memoization技术优化递归

斐波那契数列的递归算法优化，参见：http://www.jslab.org.cn/?tag=Memoization

4. 过多的DOM调用

在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作。可你知道么？对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流（reflow）操作。而执行了过多的回流操作，你就会发现自己的网站变得越来越慢了。我们应该尽可能的减少DOM操作。

回流操作主要会发生在几种情况下：

• 改变窗体大小
• 更改字体
• 添加移除stylesheet块
• 内容改变哪怕是输入框输入文字
• CSS虚类被触发如 :hover
• 更改元素的className
• 当对DOM节点执行新增或者删除操作或内容更改时。
• 动态设置一个style样式时（比如element.style.width="10px"）。
• 当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。

解决问题的关键，就是限制通过DOM操作所引发回流的次数:

1.在对当前DOM进行操作之前，尽可能多的做一些准备工作，保证N次创建，1次写入。

2.在对DOM操作之前，把要操作的元素，先从当前DOM结构中删除：

1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
2. 设置该元素的display样式为“none”。
               修改操作完成后，将上面这个过程反转过来，建议使用第2种方式。

3.CSS部分

另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改，如element.style.backgroundColor = "blue";

每次修改元素的style属性，都肯定会触发回流操作，要解决这个问题可以：

1. 使用更改className的方式替换style.xxx=xxx的方式。
2. 使用style.cssText = ¹¹;一次写入样式。
3. 避免设置过多的行内样式
4. 添加的结构外元素尽量设置它们的位置为fixed或absolute
5. 避免使用表格来布局
6. 避免在CSS中使用JavaScript expressions(IE only)

4.将获取的DOM数据缓存起来。这种方法，对获取那些会触发回流操作的属性（比如offsetWidth等）尤为重要。

5.当对HTMLCollection对象进行操作时，应该将访问的次数尽可能的降至最低，最简单的，你可以将length属性缓存在一个本地变量中，这样就能大幅度的提高循环的效率。

二、避免大字符串字面量对象操作，如 字符串.lenth，尽量转换为new String(字符串)后再进行操作

三、在做字符查找替换等操作时善用正则表达式
快速掌握ECMAScript正则表达式。参见：http://www.w3cgroup.com/article.asp?id=202

四、减少语句，利用运算符优先级实现if else表达式，使用三元表达式，使用连续表达式（看情况，将损失程序可读性）

利用运算符优先级实现if else表达式参见：http://www.w3cgroup.com/article.asp?id=131

五、将CSS，JS文件合并到一个文件（非BT爱好者还是不要玩了^_^）
参见：http://www.w3cgroup.com/article.asp?id=29

六、避免Javascript事件绑定出现内存泄漏
"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model)." Microsoft GPDE Team Blog

参见：http://www.w3cgroup.com/article.asp?id=207

七、使用WEB Workers技术（支持html5的浏览器）
Web Workers为JavaScript提供了一种能在后台进程中运行的方法，Web Workers进程能够在不影响用户界面的情况下处理任务。

参见：http://www.w3cgroup.com/article.asp?id=242

八、Y!14条（14 Rules for Faster-Loading Web Sites）

• Rule 1 - Make Fewer HTTP Requests
• Rule 2 - Use a Content Delivery Network (Server端)
• Rule 3 - Add an Expires Header (Server端)
• Rule 4 - Gzip Components (Server端)
• Rule 5 - Put Stylesheets at the Top
• Rule 6 - Put Scripts at the Bottom
• Rule 7 - Avoid CSS Expressions
• Rule 8 - Make JavaScript and CSS External
• Rule 9 - Reduce DNS Lookups (Server端)
• Rule 10 - Minify JavaScript
• Rule 11 - Avoid Redirects (Server端)
•  Rule 12 - Remove Duplicate Scripts
• Rule 13 - Configure ETags (Server端)
• Rule 14 - Make AJAX Cacheable
• Rule 15 - Use Iframes Wisely

参见：http://www.w3cgroup.com/article.asp?id=97

九、微软早期的DHTML优化建议

• 使用数组push替代字符串累加

原创文章，转载请注明出处http://www.w3cgroup.com/article.asp?id=255

在处理css的机制上，IE总是有很多让人吐血的举动，但对于他们现在的改进力度还是值得高兴的。

就拿对伪类:hover的支持来说，IE7+终于添加了对a以外其它标签的支持。对于这样的改进，当然是要拍手称快的，但在IE6下，:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。

很多人可能都已经知道了:hover在IE6及更早浏览器（以下称IE6-）下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。

有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：

是的，这将在所有的浏览器中都有效。但如果换成这样：

你会发现在IE6-下什么都没有发生，我们的样式失效了。对，就是这样，应该很多人都碰到过且已经解决了这个问题。

是的，只需要再添加一个a:hover{}样式就可以解决这个问题了，里面可以是zoom, padding, margin等属性。如下：

看着恢复了正常的效果，去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定，于是想会不会是因为haslayout。恩，很有可能就是这样。但你接着测试，会发现，不论你在a:hover{}写入任何属性，color啊，font-size啊，overflow啊（甚至是不存在的属性，如xx:yyy），都可以使之恢复正常。

测试到这里是不是有点目瞪口呆的感觉？对，我也是这样的。至于原因是什么，我还不知道，或许有人知道。

一个a:hover的简单例子：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>:hover在IE6 and earlier下的问题</title> <meta name="Description" content="IE6 and earlier下的:hover问题" /> <meta name="Keywords" content="IE6, :hover" /> <meta name="author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" /> <style type="text/css"> #nav ul{zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:#CCC;} #nav li{float:left;width:100px;height:30px;line-height:30px;text-align:center;} #nav a{color:#333;} #nav a .en{display:none;} #nav a:hover{display:block;background:#333;color:#CCC;} #nav a:hover .en{display:inline;} #nav a:hover .cn{display:none;} </style> </head> <body> <div id="nav"> <ul> <li><a href="#"><span class="cn">首页</span><span class="en">Homepage</span></a></li> <li><a href="#"><span class="cn">新闻</span><span class="en">News</span></a></li> <li><a href="#"><span class="cn">图片</span><span class="en">Picture</span></a></li> <li><a href="#"><span class="cn">下载</span><span class="en">Download</span></a></li> <li><a href="#"><span class="cn">留言</span><span class="en">Comment</span></a></li> </ul> </div> </body> </html>
 [Ctrl+A 全部选择]

例子虽然简单，但即刻你又会发现其实中英菜单和一些css tips效果也是那么的简单。

原文：http://blog.doyoe.com/article/216.htm

a:hover{zoom:1;}
a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

a:hover em{color:#F00;}

<a href="?">鼠标经过时改变我的<em>颜色</em></a>

a:hover{color:#F00;}

<a href="?">鼠标经过时改变我的颜色</a>

@liuyaping在阿里做的关于用户中心的衡量指标的分享和交流，很受启发。Google应用的这套用户中心的指标体系通过提供一个可广泛适应性的维度框架，以及具体指标的创造流程，给我们量化用户体验提供了非常好的参考。

下面是根据Google的《Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications》一文的主要内容和观点草草翻译如果有翻译的词不达意的情况，请参考原文，见谅哈 ：）

+++++++不算华丽的分割线+++++++++

越来越多的产品和服务被部署在网络上，这对大规模的用户体验衡量提出了新的挑战。非常需要有一个用户中心的指标体系，用以衡量关键目标的达成过程，并推动产品的决策。在这份简报中我们可以看到Google目前使用的以用户为中心度量的HEART框架，以及作为产品目标映射到的这个指标创建的过程。

1、传统的网站衡量指标PULSE

Page view/页面访问次数
Uptime/持续运行时间
Latency/延迟
Seven days active user/7天活跃用户数
Earning/收入
PULSE是基于商业和技术的产品评估系统，被很多组织和公司广泛应用于跟着产品的健康状况。

这些指标非常重要，并且和用户体验息息相关，比如一个产品如果经常访问中断（low uptime）或者非常慢（hight latency）是无法吸引用户的。一个电子商务网站的购买流程如果太多步很可能难以赚到钱。一个拥有很棒用户体验的产品更可能在PV和用户量上不断增长。

但是这些指标要么太浅层次，要么和用户体验不直接相关，很难用以评估用户界面的改变对于用户的影响。并且他们也经常很尴尬的互相影响——比如一个特定功能页面的PV上升可能是由于这个功能真的很流行，或者是由于界面让用户迷惑，而不断在周边点击以便逃走。带来短时期的价值的改进，有可能造成糟糕的用户体验，从而在更长时期造成用户的流失。

2、以用户为中心的指标HEART

Google的用户体验师基于PULSE中存在的问题，提出了一个作为补充的度量框架：HEART。

Happiness/愉悦度
Engagement/参与度
Adoption/接受度
Retention/留存率
Task success/任务完成度
这五个仅仅是衡量的范畴，不同的产品可由此定义特定的指标，用以监控达到目标的进程。愉悦感结合用户的满意度来度量，任务完成度结合任务完成的效果和效率来度量。参与度、接受度、留存率是全新的范畴，一般通过广泛的行为数据来制定。通常并不适合在一个指标设定中用到所有维度，但可以参考该框架来决定是包括或排除某个维度。比如用户是要将使用你的产品作为工作的一部分，在这种企业环境下参与度就没有什么意义了。在这个案例中可以考虑选择愉悦感或者任务完成度。

愉悦感
愉悦感是设计用户体验中的主观感受问题，像满意度、视觉感受、向别人推荐的意愿、易用性感知。可以通过好好设计问卷长时间监控相同的指标来看设计修改后带来的变化。

参与度
参与度是用户在一个产品中的参与深度，在这个维度上，通常用来作为一段时期内访问的频度、强度或互动的深度的综合。比如单用户每周的访问次数，或者用户每天上传的照片数，这比总量要好——因为总量的增长可能是由更多的用户的产生，而不是更多的使用产生的。

接受度和留存率
接受度和留存率指标通过特定时期内大量用户的统计（比如，7天的活跃用户数）提供强大的洞察，来定位新用户和老用户的差异问题。接受度监控特定时期内有多少新用户开始使用产品（比如，最近7天内新创建的账号），而留存率则监控特定时期内有多少用户在下稍后一个时期内仍然存在（比如，某一周的7天活跃用户在3个月后仍然在7天活跃用户中）。

任务完成率
任务完成率维度包括一些传统的用户体验行为指标，比如效率（如完成任务的时间），效果（比如任务完成的百分比）以及错误率。

3、目标——信号——指标

不管定义的用户中心的指标是怎样的，如果不能精确的和目标相关，以及能够跟踪达到目标的过程，那么都是白搭。Google提供了一个简单的流程来完成指标的设定，通过阐明产品或者功能的目标，然后定义达成的信号，最终建立特定的指标的监控方式。

目标
第一步是定义产品或功能的目标是什么，特别是在用户体验方面。用户需要完成什么任务？重新设计是试图达到什么？使用HEART框架来提示相关的目标（比如，是吸引新用户更重要，还是鼓励现有用户更积极参与重要？）一些有用的提示：

不同的团队成员可能对于项目的目标有不同的意见。这个过程提供了一个很好的机会来收集不同的想法并且努力达成共识（并且buy-in选择的指标）
特定项目或功能的成功可能与产品的整体目标不同
在这个阶段无需太担心是否和如何找到相关的信号或指标
信号
接下来，想想用户的行为或态度如何体现成功或失败。什么行动会表示目标已经达到？什么感受或看法能够联系到成功或失败？在这个阶段你应该思考你的这些信号的数据源可能是什么？比如，基于日志的行为信号，这些相关的行为目前有记录或者能够被记录吗？可以收集态度的信号——能否定期投放问卷吗？日志和问卷时我们最常使用的两个信号源，但还有其它的可能性（比如，使用一个面板或判断让用户评分）。一些有用的提示：

选择敏感和和目标特别相关的信号——他们应该不因不想过的原因变化，除非用户体验变好或变糟糕了
有时失败比成功更容易定义（比如，放弃任务、撤销，戳着）
指标
最终，想想这些信号是否可以转换为特定的指标，是否可以被方便的持续跟踪。一些有用的提示：

原始统计数据会随同你的用户基数增长而增长，需要转化为常态；比例、百分率或者每个用户的平均值更有用一些
在确保精度上有很多挑战，基于web日志的指标，如从自动生成的数据中过滤流量（如爬虫、垃圾信息），并且确保所有重要的用户行为都被日志记录（默认情况下可能不会，尤其是在基于AJAX或基于Flash的应用中）
如果需要拿你的项目或产品和其他的进行对比，你可能需要在这些产品的标准指标中增加监控指标。

4、总结

Google已经花费数年时间来解决广泛应用的用户体验的衡量指标体系。HEART框架和目标-信号-指标的过程，已经在Google超过20个产品和项目中进行了应用。不管是数据驱动的还是用户中心的产品中，HAERT框架和目标-信号-指标过程都能帮助产品团队来做出决定。

原文：http://www.tianya8.net/2011/03/user-centerd-merics.html#

本文从网页分析的角度来考查网页设计。我们将围绕网页设计师应该如何使用指标和工具来衡量网页设计的影响力和有效性的问题展开讨论。

访客的参与阶段

任何时候，网站访客都处于以下几个阶段之一：
1. 关注（Attention）
2. 感兴趣（Interest）
3. 渴望（Desire）
4. 交互（Action）
5. 满足（Satisfaction）
在每一个阶段，访客都有不同的期望，设计就是要确保这些期望得到满足。

吸引游客注意的设计问题: 这个设计是否仅在几秒钟就能吸引访客注意？这个设计是否帮助访客很快地找到他们想到的信息？
虽然网站的目标网页和内页需要应用不同的方法，但是有一点是可以肯定的：如果你不尽快地吸引用户的注意力，她很快就会转到其它网站去。

衡量指标：跳出率和退出率

方案：现在大部分网页分析工具都能告诉你有多少次吸引你的用户的注意失败。
退出率告诉你有多少人在某个特定的页面离开网站，而跳出率是指用户没有看网站第二个页面就离开网站的比率。
你可以进一步测量跳出率中用户停留不到10秒的比率。越多用户跳出你的网站，说明你的设计和内容在帮助用户找到想要的信息上越没有用处。

提高用户感兴趣度的设计

问题：用户是否觉得自己找对了地方？你是否能说服用户你网站上的信息就是（或可能就是）他们所需要的？
如果你设法使用用户对你的网站感兴趣，他将会花更多的时间来阅读或参与进来。在这种情况下，设计应该使得网站很容易浏览，阅读和参与网页的交互。
阅读一篇文章所需的时间与大部分访客花在阅读这篇文章上的时间的比较是怎么样的？比如，根据一些材料，大学生的平均阅读速度是每分钟250到350个词。如果你的文章有1000个词，那么阅读整篇文章所需要的时间就是2.8到4分钟。如果用户在这篇文章页上停留的平均时间只有5秒钟，这就说明大部分内容都没有被阅读，内容不够有吸引力来保持用户的兴趣。这个问题可以归结于网页复制问题，设计问题或者二者皆有。
另外一个例子：有多少用户点击了视频的“播放”按钮，或者查看某个产品的其它图片？内容产生兴趣，而设计使得内容更容易享用。
网页分析把这些交互和事件称作微转换。发生得越多微转换，越多用户将会最终参与购买，注册或填写信息（宏转换）。

衡量标准：针对一个设计的交互数，花费在网页上的时间。

方案：测量网页设计保持访客兴趣能力的好坏的一种方法是使用Google Analytics的高级特性，跟踪每个可以被认为用户对网页变得感兴趣的行为（比如点击，滚动，评论，播放视频或其它任何你能想到的）事件。你可也以尝试一下ClickTale，这个工具可以记录网站访问的整个会话，并且可以回放它们。它可以提供有关访客与网页交互的众多深度信息。

增加渴望和获取行为的设计

问题：设计是否明确的激发了你的访客的想象，并使他们觉得能从你提供的东西里获得价值？访客是否点击了行动按钮？
网络上每个产品或服务都是唯一的，网页设计的工作就是要找出什么能使得它与众不同，并且为什么用户应该选择这个而不是其它的。
如果设计工作做得好，就很容易使用户点击行动按钮。当用户决定要注册或购买产品的时候，能够让用户迅速找到行动按钮是非常重要的。

衡量标准：行动按钮点击数

方案：Crazy Egg等提供的点击跟踪解决方案可以告诉你用户如何能过你的行动按钮来交互。
在增别访客渴望方面，多元测试和A/B分隔测试可以帮助你测试不同的设计并找出最有效的一种。

让访客满足的设计

问题：当它们被点击后，下一页是否能提供给访客他们想要的东西以满足他们？
点击之后应该出现什么的设计对于站长们寻求的转化来说是非常重要的。你已经获得了用户的关注，兴趣和渴望，因此现在设计就应该只有两个主要的任务。
第一个任务是使得转化过程尽可能的简单（即优化结账流程和优化网页表单提交过程）。
另一个任务是确保用户对流程可能存在的问题在当前的位置能够得到回答，而不需要去中断流程去站内寻找答案。
由于设计缺陷而在这个阶段损失客户确实是太遗憾了。

衡量标准：使用的渠道和/或路径

方案：如果你有预算的话，我推荐用Kissmetrics，MixPanel或者Performable来跟踪转化的渠道和路径。
如果没有的话，你可以考虑Google Analytics的目标和渠道跟踪，或者使用PadiTrack，一款免费的建立渠道的Google Analytics分析应用。

结论
最后，最要的是网站的每个元素对达到目标的效果。数据驱动，通知设计，它们的所有形式在网站性能方面都有重要作用和巨大的责任。