有很多很好的工具来进行Web开发测试。这些工具可以测试从CSS验证到网站速度的一切。确保用户有一个远离问题的使用体验是每个网站的目标，这些工具是那个过程的最终步骤。 

1. WebSitePulse Test Tools

想要一个对反应时间、文件大小和链接的快速测试？WebSitePulse Test Tools提供了一系列快速和简便易用的测试，然后图示出从网站速度到链接错误的一切。同时它也提供了文件大小、重定向速度和DNS的数据。

2. XenoCode Browser Sandbox

浏览器测试是Web开发中最乏味和令人沮丧的部分。什么样的设计师或者程序员看到对齐毁坏的时候，没有尖叫着要杀了IE6？浏览器测试最困难的部分是，没有那个开发者在一台电脑上有各个版本的浏览器来进行完整的测试。
进入XenoCode Browser Sandbox，是一系列的虚拟应用可以同时运行所有流行的浏览器，它甚至不需要安装软件。然而，XenoCode’s Browser Sandbox在某些浏览器中可能消耗很大，而且仍然缺少Mac版本。

3. Firebug Firefox Extension

任何地方的程序员最钟爱的扩展，Firebug是拥有前端代码和CSS调试功能的最好的应用之一。如果有图片或者风格超出了边线，使用Firebug进行检查是最好的反应。设置可以在这个扩展中改变风格，来查看站点在浏览器中会如何显示。

4. Load Impact

如果站点中病毒以及Digg、Twitter和StumbleUpon都同时聚合它，它能顶住压力吗？Load Impact帮助回答这个问题。它模拟在web服务器上大量的过载来确定是否能够处理高流量负荷。它有一个免费的版本和多个付费版本。

5. Safari Web Inspector

Apple Safari浏览器难能可贵的一个性能是它的Web Inspector。Web Inspector仅能够打开开发标签的时候才能使用，可以展示任何网页上的样式表、图片和脚本。不过Web Inspector最有用的部分是它的网络特性，可以展示实时哪个文档或者脚本从服务器传到浏览器的顺序和速度。使用它来查看脚本、文件或者图片是浏览器最紧张，然后修改。

6. Web Developer Firefox Extension

Web Developer是一个健壮的Firefox扩展，几乎没有开发站测试网站的时候不使用它。它提供了一个大范围的测试，包括测试出错的图片、测试在不同大小屏幕上的布局、浏览cookie信息以及校验标记。它是Firefox用户的终极测试伙伴。

7. W3C Validation Services

W3C是所有web验证的标准。W3C Validator查找任意网站的所有标记，展示基于行业标准的错误。它拥有十几种语言和属性变量，这里是一些最重要的验证：

- W3C Markup Validation（标记验证）
- W3C CSS Validation （CSS验证）
- W3C mobileOK Checker（手机浏览验证）
- W3C Link Checker（链接检测）
- W3C Feed Validation Service （Feed验证服务）

这些工具设计用来通过尽早检测问题，使得网站尽量的快、尽量没有缺陷。至少，他们会使一个开发者知道他或她是否需要对着IE6尖叫。

一次在诺基亚网站点击下载手机的词典文件链接时，诺基亚网站出现了错误提示：一个主题为”抱歉”的404页面。

咱们看看诺基亚的具体做法：404页面中随机贴出一张俏皮的图片（共三张）再加上几个关键的”安慰词”，将用户的紧张感瞬间打消，并立刻在下方给出了解决办法。

此页面的价值：

1. 告诉用户所处的环境：出错。
2. 告诉用户出错原因。
3. 打消用户紧张感。
4. 告诉用户该如何解决问题，给出几条途径。
5. 留住用户，增加用户黏性。

尽管用户不一定能得到满意结果，但是，这个404错误页面的使命已经完成，而且完成得很好。

现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。我真希望那个IE6快点退休……

css Hacks，css样式表补丁.用于修正XHTML编码设计的网页模板布局,某些层的溢出问题,HACKS出处:www.webdevout.net，这个CSS补丁(hacks)很简单，在样式表中单独为ie7设置某个元素，id或者class前面这样写:

*:first-child+html #ID{}

或者

*:first-child+html .class{}
别忘掉了前面的*,这个hacks使得DIV+CSS网页模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的浏览器中都可以完美体现原始布局,而不会出现层溢出等问题.

IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：

>body
html*
*+html

这 三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。

最后作者给出了最佳方式：

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element.

The IE7 CSS Hack(!important在ie7.0的hack方法)

由 于ie对!important识别存在bug,而现在大部分网页标准设计师又通过这个bug来兼容ie和ff,但是ie7.0把这个bug给修复了,所以 问题又出现了,怎么兼容ie.7.0的同时又能兼容ie6.0和ff?正所谓”上有政策,下有对策”,国外的网页标准设计师通过使用css filter的办法(并不是css hack)来兼容ie7.0,ie6.0和ff,以下为作者从国外网站的翻译.

新建一个css样式如下：
插入代码：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
插入代码：
some text here
在body表现这里加入lang属性,中文为zh：
插入代码：

现在对div元素再定义一个样式：
插入代码：
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
插入代码：
#item:empty {
background: green !important
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上,并在以下浏览器和操作系统下通过测试：
ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

Screenshot of the IE7 css hack in IE7
Screenshot of the IE7 css hack in Firefox 1.5

按照远作者的说法其实这不能算是一种hack,应该属于filter,不过这似乎并不是最重要的,因为通过这个办法,我们又一次了解决IE6.0,IE7.0和其他浏览器之间的兼容性问题,而且使用:lang-filter这办法,在今后的一段时间内都会有用.
firefox,ie7,ie6兼容性问题，和css解决方案
注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

写两句代码来控制一个属性，区别Firefox与IE6：
background:orange;*background:blue;

//这一句代码写出来时，你用firefox或其它非IE浏览时，会发现，写了该代码的区域背景是橙色的，如果用IE浏览，却是蓝色的，这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；
写两句代码来控制一个属性，区别IE7与IE6：
background:green !important;background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别! important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份。
写两句代码来控制一个属性，区别Firefox与IE：
background:orange; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*
写三句代码来控制一个属性，区别Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执 行，直 接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识 别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

来源：http://tanliping192.blog.163.com/blog/static/1792149820089872386/

以下两种方法几乎能解决现今所有HACK。
1、!important
随着IE7对!important的支持，!important 方法现在只针对IE6的HACK。
（注意写法.记得该声明位置需要提前）
程序代码<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2、IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签，firefox 暂不支持。
而*+html 又为 IE7特有标签。
程序代码<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>注意，*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
程序代码<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd”>
二、万能 float 闭合（非常重要）

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中，给需要闭合的div加上 class=”clearfix” 即可，屡试不爽。
程序代码<style>
/* Clear Fix */

.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼容技巧（再次啰嗦）

1、FF下给 div 设置 padding 后会导致 width 和 height 增加，但IE不会。（可用!important解决）
2、居中问题。
1) 垂直居中。将 line-height 设置为 当前 div 相同的高度，再通过 vertical-align: middle. （注意内容不要换行）
2) 水平居中。 margin: 0 auto; （当然不是万能）
3、若需给 a 标签内内容加上 样式，需要设置 display: block; （常见于导航标签）
4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。
5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明，以避免不必要的麻烦。（常见于导航标签和内容列表）
6、作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden ，以达到高度自适应。
7、关于手形光标。 cursor: pointer ，而 hand 只适用于 IE。
8、至于IE5以及其他浏览器就没有必要兼顾了，在这上面花时间不值得。

下面这段可执行的码可以很形象的说明问题…当然前提是你有IE6 IE7和火狐浏览器…
不过我还是没有研究透…需要注意的是…在<body>标签里加了 lang=”zh” 的定义…
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” target=”_blank”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”>
<html xmlns=”<a href=”http://www.w3.org/1999/xhtml” target=”_blank”>http://www.w3.org/1999/xhtml</a>”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5</title>
<style type=”text/css”>
<!–

#fx {
display: none;
border: 3px double #999;
width:300px;
height:200px;
padding:10px;
}
#ie6{
display:none !important;
display:none;/*ie5*/
font-size:54px;
border:10px solid #CCC;
padding:100px;
}
#ie6/**/{
display:block;
display /*ie5.5*/:none;
}
#ie7 {
display:block !important;
display:none;/*ie5 & ie6*/
background-color:#69f;
border:1px dashed #63c;
padding:50px;
width:200px;
height:150px;

}
*:lang(zh) #ie7{
display:none !important;
}
*:lang(zh) #fx{
display:block !important;
}

–>

#example{color:red ;}
* html #example{color:blue;}
*+html #example{color:green;}
</style>
</head>

<body lang=”zh”>
<div id=”fx”>这是在 FireFox 或者 Opera 下面的效果</div>
<div id=”ie6″>这是在 IE 6 下面的效果</div>
<div id=”ie7″>这是在 IE 7 下面的效果</div>

<div>以下为简单区分FF/IE6/IE7示例</div>
<div id=”example”>这行文字在FF下应为红色，在IE6下应为蓝色，在IE7下应为绿色。</div>
</body>

1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。

3.还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

小实验：有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。
a.<div style=”border:1px solid red;height:10px”></div> b.<div style=”border:1px solid red;width:10px”></div>

c.<div style=”border:1px solid red;float:left”></div> d.<div style=”border:1px solid red;overflow:hidden”></div>

上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。

4.浮动的清除，ff下不清除浮动是不行的。

纠正大家一个误区，遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。

5.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。 padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。

引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。

7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

8.注释也能产生bug~~~”多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用”<!-[if !IE]> picRotate start <![endif]->”方法写注释。

9.<li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。

10.使用了”float:left;display:inline”的ul的奇怪表现。可以看出这句css是针对ie6下的double margin bug 而加上的display:inline，这也是我的css体系里的重要一环，在《ul使用心得》一文中有相关阐述。而这句css用在ul上会让你痛苦不堪。点到为止，这里不能多说哈。

11.img下的留白，大家看这段代码有啥问题：

<div>
<img src=”" mce_src=”" />
</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>
<img src=”" mce_src=”" /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

12.失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。

14.非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。

15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。

想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。

16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li 呢？<ul><li class=”c”></li></ul> 或者 <ul><li><div class=”c”></div></li></ul> 或者 <ul><li></li><div>class=”c”></div></ul> 或者 <ul><li></li></ul><div>class=”c”></div> 或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<style type=text/css>
.c{clear:both;overflow:hidden;+overflow:visible}
.bd{border:1px solid red}

ul.ex{list-style:none;}
ul.ex li{float:left;border:1px solid green;}
</style>
<ul class=ex>
<li>sfsdfsfdf</li>
<li>sfsdfsfdf</li>
</ul>
<div class=c></div>
<div class=bd style=margin-top:19px>sfsdfsfdf</div>

请在ie下 测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。。。大家还可以将 clear 层换不同的位置测试。

解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用）

引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案：给overflow:hidden加position:relative或者 position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

18.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。

19.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。

20.ie6下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

1.       网上购物类

*在频道切换上，各网站都采用在当前页打开的方式，其他链接操作多采用在新窗口打开的方式

2.       综合门户类

*在频道切换上，使用这两种打开方式的网站各占一半，在其他链接的操

作上都采用在新窗口打开的方式

3.       综合搜索类

*在频道切换上，均采用在当前页打开的方式，在其他链接的操作上都采

用在新窗口打开的方式

因此，在频道切换上，推荐使用在当前页打开的方式；在其他页面的操作上，推荐使用在新窗口打开的方式。不合理的窗口打开方式在支付宝的网站上也是大量存在的，希望上述的探讨会给大家在设计窗口打开方式时有一定的帮助作用。

用户总是和你想的不一样，用户很多时候是不会按照你设定的导航走的，他们更多的时候是上来就直接输入关键字进行搜索。对于购物者而言，如果清楚的知 道想要什么，他们会很明确的使用搜索框，这种情况下购物者显示出了明确的购物意图，因此搜索框能够把该意图转变为真实的购买行为。来自Fast Search的数据显示，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。

如果一个网站没有足够合理的信息架构体系，那么搜索引擎不仅仅是有帮助性的，甚至是至关重要的设计功能。有可能比网站的导航更对用户有帮助。事实 上，搜索是用户了解在一些综合性网站内容最直接有效的方式。最好的搜索设计就是给用户提供一个简简单单的搜索框在页面显眼固定的位置上，但却有强力搜索的 能力和范围宽 广的功能。

所以，如果你的网站没有足够清晰的信息架构体系，那么，请把你的搜索框还给搜索，不要再试图去绑架你的搜索框！

2、被绑架的搜索框

不可否认，右侧的背景很美，但是我是来搜索的不是来欣赏图片的，这个背景搞的我都不知道这个搜索还有上面的频道切换是不是可以点击了（我试图去点击新版上线，未果）。这个设计的用户体验差及了。

搜索跟留言板有什么关系？搞个留言板的按钮跟搜索放在一起是什么逻辑？这让我在想搜索的时候很不爽

这个很让我无语，在搜索按钮后面补个按钮就罢了，居然还来个比搜索按钮还大2倍多的按钮……

这个大概是我见过的最无语的搜索框了。想不清楚为什么现在还有设计师会把“设为首页”、“收藏本页”这样的功能摆出来，而且是摆在搜索框上。

对于这个，首先视觉完全被放在了那2个“新”、“热”上去了，压根没有想着点前面的东西了；不知道为什么要把这2个东西摆在搜索按钮的后面，还有，这么长的搜索框是否是在告诉我，你们网站的东西很难找，需要很长的关键词呢？

现在很多网站都倾向于搞一个这样会闪的gif图片来突出某些内容，我习惯把这些东西叫小蚂蚁。有的网站搞的很夸张，这小蚂蚁长的胖的出奇，用户的吸 引力完全都放在了那只胖蚂蚁上，根本没有想着胖蚂蚁前面的东西；有的网站觉得每个栏目都需要突出于是每个栏目上都搞个“新”、“热点”，最后的结果就是整 个网站看着就像个蚂蚁窝。个人觉得要想用这个小玩意赢得好的用户体验，至少要保证3点：小、简、少。小，不至于让我感觉感觉突兀；简，能表达意思就可以 了；少，不至于搞的我想点了不知道点哪里。

3、把搜索框还给搜索

把搜索框还给搜索！搜索就是搜索，不要给搜索背上太多的东西。一个搜索频道、一个搜索输入框、一个搜索按钮这样就已经足够多了，再多一点搜索框都会受不了！当然，你也可以让你的搜索框更精简，精简到只有一个搜索框。

把搜索叫搜索！搜索的位置要明显到用户第一眼就能看到且随时能够找到；输入框应该让用户感觉可以输入；搜索按钮看上去应该更像是个按钮；不要把无关的东西在搜索按钮边上，它就应该一个人待着！

本文引用自：幻风阁| http://www.ikent.me/blog/1389#ixzz0BTnk4FB3

先来看下“rich”在字典里的意思：

(1) having an abundant supply of desirable qualities or substances；

(2) of great worth or quality；

(3) very productive；…

可见，“rich”即暗示比满足普遍需要或期望的要多。

那么以RIA为例，来看下RIA（Rich Internet applications富互联网应用程序）比IA（Internet applications）多在哪？

更快、更直接的互动、更仿真、更流畅的体验、更cool、更好玩、更易安装、更容易传播、更安全…更容易使用户迷惑、更复杂、更容易不切实际、更难部署、更高开发成本…

——可见，多出来的既有优点也有缺点。

我们假设B=f（U，E），即行为(Behavior)是一种以用户(User)与环境(Environment)为变量的函数(function)。

我们想要通过交互设计创建一个符合逻辑的流程以及在其中进行的符合意料的行为，但是我们不能直接控制用户，我们需要通过交互、界面设计等，找到有效 控制环境的方式。因此，我们要仔细的研习下更“rich”的控制与体验并不断探索。以RIA为例，这种探索包括了解其应用类型与常用模式，了解其设计挑战 与风险，在设计其应用时注意扬长避短，并学会评估由此形成的效应。

应用类型与常用模式

RIA从应用上可以做为：

•  单独的软件、widget（脱离浏览器在桌面上运行）

• 网站的某些部分（在浏览器中有效地运行）

• 添加到传统的网页的“丰富组件”（来导航或互动）

且目前已有以下几种类型的应用：

•  信息/参考应用：网络/本地资源的整合，搜索，多媒体，用户参与…

•  资源浏览/编辑应用：浏览，阅读，检索、分类，协作，发布…

•  电子商务应用：购物，数据库浏览…

•  实用应用：提示，过滤，帮助，向导…

•  娱乐应用：游戏…

•  营销应用：广告…

先将这些应用中RIA的模式穷举一下：

再将这些模式分解：

• 交互——每一种模式都以一种交互开始。

悬浮、鼠标滑过、点击、释放、快捷键、拖拽、移动、选择、定焦、调整大小…

• 操作：

查找——“我需要的时候能找到信息”

自动匹配、载入内容、缩小选择、及时搜索、精确搜索、动态过滤、细节缩放、随需刷新、悬停出现的详细信息、原位替换、可调整大小的模块、滚动的模块、模块扩展…

动作——“在界面情境中我能够采取行动”

拖拽模块、当页编辑、内置文字编辑、内置标记编辑、内置的自定义编辑、直接的静态编辑、评价评级、弹出或滑出的自定义编辑、网格单元编辑、记忆选择、自动保存、记忆配置…

验证——“我能提前预防错误发生”

内置验证、验证后建议、气泡提示、计数（如用在文本框的字符限制）、即时预览…

消息——“我能及时的沟通”

• 界面呈现：界面的更新

可用的、已用的、指示、忙碌的指示、进度指示、内置状态、光标状态、渐隐渐现、对比度、动态目标、显示焦点、灯箱特效、高亮、褪色、扩展、淡入淡出、翻转、移动、折叠、幻灯片特效、动画…

设计风险

关于RIA设计容易出现的问题与应用风险，几年来已有很多专家总结，在此仅承接上述模式分类概况几点：

信息浏览与查找是否需要用户更多的注意力和鼠标操作，如：点击、拖拽、滚动?一个页面是否弄得太乱了？是否在界面上滥用了丰富的交互形式？组件与整 体页面是否协调？视觉上是否体现出了层次关系？新的交互模式是否改变了用户使用传统网络的习惯？用户可能看不出RIAs和传统网站的不同——但其实没有后 退按钮了？没有弹出提示窗口了？

那么我们在设计时就要注意建立一些原则尽量规避风险：

1：将控件及其功能可视化，使用户对控件的位置及其作用容易理解。保持操作一致性及与其他类似网站/桌面应用程序的一致性。

2：提供明显的返回途径或确保后退按钮可用。后退按钮通常被视为锚点，一种大众用户的取消方法。

3：变化适当。界面中有更新或微型状态变化时，确保人们注意到这些变化：

选择适当的动态效果和颜色变化吸引注意。

变化应该发生在人们在看的区域及附近。

不要同时更新多处，用户的注意力跨度过大以至于感觉混乱。

4：当界面上的变化不及时时，提供及时的信息反馈；善用提示更新的方式。

5：不要在一个页面塞满内容，腾出空间给新内容。

6：在（概念）设计阶段不要做太多混合应用，做好可复用的设计。

7：提前规划无障碍设计。RIA中的可用性往往比较困难，比如使用移动设备访问可能无法正常显示（即使使用iPhone)，因此可能需要准备其他版本。

一致性的标准来规范设计

对于设计标准，有两件事一定要明确。一，仍然是以用户为中心进行设计，二是要想清楚rich在哪里可以增加价值。因此评估时要尽量对目标用户测试全 方位的互动体验，对于高概率的变化与更新建立详细的标准。比如，我们要规范“悬停出现详细信息”这一模式，就需要说明当需要在界面情境中（文字段落、图片 等）查看详细信息时，弹出气泡太快或太慢都可能降低用户体验，因此要注意规范到对于气泡的弹出要相比鼠标触发有0.3s的延迟；鼠标移开或有点击行为时弹 出的气泡立即消失。

如前所述，当RIAs为我们提供了提升体验的巨大机会，如何设计更“rich”的控制与体验还需要不断积累探索。

1. 网站简明开发流程

简明开发流程是指假设网站开发的每个步骤都可以一次设计开发成功时的网站开发流程。

流程图如下：（点击图片，可以放大。）

2. 网站操作开发流程

网站操作开发流程是指假设网站开发的每个大的步骤都有可能产生未知问题时的网站开发流程。整个开发过程一般会有五次审核、三次测试才能够产品最终上线。看似步骤繁琐，实则是同时保证质量和效率的最佳方案。

流程图如下：（点击图片，可以放大。）

3. 网站操作、部署开发流程图

网站操作、部署开发流程是大型网站项目需要多人团队合理开发网站项目时的开发流程。在操作流程图的基础之上，每一个重要步骤都分别有一级主管领导负责统筹 安排。同时对每一步骤的产品质量和效率负责。分管各部分的产品经理、美工、程序员有对应沟通，日常沟通不经过部门主管。每阶段的总体结果有每阶段主管领导 负责。
流程图如下：（点击图片，可以放大。）

4. 总结

在开发周期的时间和进度把握方面，需要在“整体功能结构”确定以后，由产品项目经理评估“整体设计开发文档”（本人使用 Microsoft Office Visio 2003 文档）的完成时间。UI和网页工程师评估“产品网页Demo演示”的完成时间。后台程序总架构师评估“产品功能实现”的完成时间。

本文引用自：http://blog.sina.com.cn/s/blog_414b46ac01000bya.html