可见，目前使用800*600的几乎是微乎其微了，1024还是居于上风，目前19，21寸甚至更大的显示正在逐步被广泛使用，所以N年前流行的778，780等等都好像是几个世纪以前的事情了。

再看一组数据

上面都是Alexa全球排名前100的站点，而且WordPress的皮肤，百分之90以上都是960px宽。为什么设计师们都喜欢这个数据(950px/960px)呢？以下部分转自网页栅格系统研究（1）：960的秘密，作者：玉伯

设计师们对苹果情有独衷。在 1024 x 768 的分辨率下，打开Firefox：

自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.

数字背后的奥妙

上面的“自然”出现，细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000之类的整数，自然另有奥妙。

科学界有很多问题都可以归结到数学问题上，我们也从数学着手：

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,
48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480

共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：

N(960) = N(2^6 * 3 * 5) = 26

根据上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30

根据直觉（严格证明也不难，不过还是留给数学系的学生去证明吧），我们得到一个有趣的结论：

要使得N(width)最大，width的取值有两个系列：

A系列： …, 320, 720, 1440, …

B系列： …, 480, 960, 1920, …

N越大，可组合的宽度值就越多。对栅格系统来说，这意味着越灵活！

目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。（也许不久的将来，将会流行1440）

以上内容转自http://lifesinger.org/blog/?p=375

从零开始学习jQuery (二) 万能的选择器

从零开始学习jQuery (三) 管理jQuery包装集

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

从零开始学习jQuery (五) 事件与事件对象

从零开始学习jQuery (六) jQuery中的Ajax

从零开始学习jQuery (七) jQuery动画-让页面动起来!

从零开始学习jQuery (八) 插播:jQuery实施方案

从零开始学习jQuery (九) jQuery工具函数

从零开始学习jQuery (十) jQueryUI常用功能实战

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

淘宝网用户体验设计UED： http://ued.taobao.com/blog/
口碑网用户体验设计UED： http://ued.koubei.com/
阿里妈妈用户体验设计UED： http://ued.alimama.com/
阿里巴巴(中国站) 用户体验部： http://www.aliued.cn/
阿里软件UED团队： http://www.alisoftued.com
19楼UED团队： http://ued.dukuai.com/blog/
用户为中心的设计(UCD),UCD大社区,http://ucdchina.com/

个人技术博客：
李会军：http://www.dotneteye.cnorg 去过博客园的应该都知道吧，神仙级专家。
赵劼：http://www.cnblogs.com/JeffreyZhao/ 同上，为博客员知名专家，特佩服他！
淘宝玉伯：http://lifesinger.org/blog/ 淘宝前端，对前端细节研究很深入！博客更新也算频繁。
淘宝怿飞：http://www.planabc.net/ 淘宝前端，花名圆心，博客内容也很值得看。
cssrain:http://www.cssrain.cn/ 懒人开发人员一定要去看看哦，资源超多，很多效果例子。特别是jquery。

源码站：
http://www.codeplex.com 微软的.NET源码发布站，很多很好的.NET源代码

用户体验（User Experience，简称UX 或 UE）是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。计算机技术和互联网的发展，使技术创新形态正在发生转变，以用户为中心、以人为本越来越得到重视，用户体验也因此被称做创新2.0模式的精髓。”—–百度百科

现在，几乎人人都在谈、在做用户体验，有为了用户体验而用户体验的；有不知何为用户体验，就乱指挥一通的；有做了几天可用性改进就宣称飞跃的…..当然，也有很多是踏踏实实为广大人民做实事，做好产品设计的。
不管怎样，以下的思考文字中希望有那么一点点是闪光的。
 
看了百度百科的词条，结合自己的经验，可以这么理解：用户体验，是通过接触某样有形或者无形的事物后，建立在用户身上的一个范围比较广的情感叠加，跟乐高积木是一样一样的，堆得好，可以很高，某一块不稳，就会全倒下。那，到底有多广呢？

1.一个购书体验：流程流畅度

给自己买一本书，我想到的是淘宝和当当，有人会说：买书当然去当当或者卓越了。我不是这么认为的，首先，都是网购，淘宝也卖书，并且能讨价还价，能了解更多细节，而当当不能，但如果在淘宝上价格太高，没有当当划算，且不是很急着买，那我会选择当当。
—–这里面有两个点：网络购物习惯养成的条件反射 和  买卖家之间的交流 ，这两个是体验的一部分。
决定上当当后，打开首页，logo旁的“十年品质 放心低价”，有点暖，而导航下左边的这个绿色突出的区域也表明，当当主要核心业务就是书！整个配色在视觉上挺舒服，而导航和搜索也让我很快找到我要买的书—《教父》。

——站点的载入速度是个大问题，当当基本能在3秒内打开首页，不错的优化。广告语和用色贴合国内消费人群的心理，起码对于我来说，觉得：可信赖，不太乱。
找到我要的书后，我点击了购买，进入了我的购物车，有一个疑虑、不舒服：

—–不知道这个是好，还是坏，可能对于不同的人，有不同的感受，这个推荐本身是很好的，但让我疑惑的是，它大面积的空间和众多黄色按钮，让我找不着北了，因为到这步，我心里想着：该结算了，但处于商业目的，推荐区域在一定程度上(或许我比较闲的时候，推荐对我有用)干扰了我。
接下来的结算流程很顺利，我选择的是货到付款，很好的是：最后提示我，发货地点是广州，会在2-3天后发货，邮箱也很快收到订单生成的邮件。接下来就是等待，三天后，接到声音不太舒服的电话，说是当当网的，我想，应该是书到了。可怜的是，对方收钱时，零钱不够。
—–最终是买到书了，快递的小伙子找不了我的零钱，我也没要了，书的包装不太好。
整个过程，总体打分8.5分。总的来说，这本书的购买的体验流畅度是很满意的，没有出现意外的中断，要知道体验的流程能完整的走完才意味着，这个产品、这个服务，是可用的，这是根基，其他的视觉效果和折扣等等，都是建立在他之上。而流畅度，就跟用户在这个过程中碰到疑惑和不解的强烈程度是成反比的，想提高流畅度，就需要捋清楚，让这个核心购买流程以最短的时间完成，减少干扰。

2.边缘体验，一样的重要

上面的购书例子，有个地方很重要，那就是最后的线下体验，我把他作为边缘体验的一种，有别于线上的核心业务。
订单下来后，系统能根据我提交的送货地址，选出最近的发货地点，减少物流时间，并且让购买者知道，这个点是好的，说明：我一直为你着想。
但快递环节却有点问题，因为存在一定的不可控因素。送快递的人，需要经过一定的培训，否则，是在砸当当的牌子。电话中的语气让人不舒服，书的包装问题也让人不安，书角磨破了，就这两个点，购买者就有可能把整个交易撤销。
属于边缘体验范畴的还有很多，例如：你到了友商网举办的一个论坛，门前的海报是否能够传递本次论坛的信息、是否能够将友商网的品牌进行诠释，给你的良好感觉有多少？再例如市场营销人员的着装和谈吐，在用户眼里，在一定程度上，也在间接体验他们的产品，起码，穿着拖鞋的营销，不会给人好的感觉。
边缘体验，一样重要。

3.无形的体验

无形的体验有两种，一种是某用户在使用、体验产品后得出口碑传播给另外的用户或者潜在用户，对于后者，他已开始无形情感体验；另一种是用内而外的，是生产此产品的团队或者说这个企业由内发出的一些信息，有意的或无意的信息。
对于第一种，有时候口碑会决定了某个用户是否与产品有缘，举个例子，小姨买了一个xx牌子的冰箱，用了两个月，灯管坏了，打开冰箱门灯不亮了，联系维修后好景不长，还是坏，于是她对死党说：以后打死也不会买xx牌的东西了，这个死党有可能以后就跟这个牌子绝缘了，因为她对“它”的无形体验很不好。当然，这个口碑产生的根源，就是产品质量本身。
而第二种范围包括的就比较大了，如果是上市公司，那么你的财务状况是否良好；组织结构是不是频繁大调整；员工整体对外的信息放射是否正面；网络媒体，传统媒体传播的信息是否有利公司发展（不管是不是软文），这些，都是用户或者潜在用户、普通人可能接触到的一面，这也是一个无形的体验。

4.引领用户的“体验”

在初步发展阶段，无数产品和服务都是跟随用户需求，用户需要什么，就给什么，以找准需求点为重中之重，这个是对的，但到了产品成熟期，到了市场占有率足够高后，需要考虑的，就是引导潮流，引领用户朝双赢的方向。web中的视觉概念设计，汽车中的概念车，走的，就是这个路线。

5.核心产品体验

这个放在最后是因为是人都知道，核心产品，必须做好可用性，通过不断迭代，适当做好减法，提供一个体验好的产品。具体到各个产品和服务各不相同，无需展开。
总之，用户体验设计并不复杂，但需要耐得住性子，需要注意触角，因为，从接触这个品牌那一刻起，用户体验就在进行，是叠加还是消耗呢？就看能否尽量做到人人UE，能否将这些好的idea引导、聚合。

加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。

二，CSS Sprite的使用

有几篇关于CSS Sprites的文章，基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

三，CSS Sprite的例子

[原文：http://blog.rexsong.com/?p=746#comments]

1. 图片限制(Image Slicing)

典型如文本编辑器，小图标特别多，打开时一张张跑出来，给用户的感觉很不好。如果能用一张图解决，则不会有这个问题，比如百度空间、163博客、Gmail都是这么做的。

Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites

2. 单图转滚(Single-image Rollovers)

触发切换图片的需求，传统方案得重新请求新图片，因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图，就能完美解决，然后再使用背景图技术模拟动态效果。

ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/

3. 延长背景(Extend Background Image)

如果图片的某边可以背景平铺无限延长，则不需要每个角、每条边单独搞出来，图片能少一个就少一个。其实，这个理论还可以扩展到四角容器里，好处是能大大简化HTML Structure。

Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/

综合案例

Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/

CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/

四，CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on <a>, cache=‘check every visit’: flicker!，有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题，fivesevensix.com上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外：brunildo.org的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

五，相关资源

What Are CSS Sprites?

http://www.peachpit.com/articles/printerfriendly.aspx?p=447210&rl=1

CSS Sprites: Image Slicing’s Kiss of Death

http://www.alistapart.com/articles/sprites/

CSS Sprites Generator

http://www.csssprites.com/

http://spritegen.website-performance.org/

Fast Rollovers Without Preload

http://wellstyled.com/css-nopreload-rollovers.html

JavaScript Sprite Animation Using jQuery

http://www.sitepoint.com/blogs/2007/07/20/javascript-sprite-animation-using-jquery/

http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/

How to create CSS sprites

http://fatagnus.com/how-to-create-css-sprites/

Creating Rollover Effects with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Creating-Rollover-Effects-with-CSS-Sprites/

Building a Dynamic Banner with CSS Sprites

http://www.devarticles.com/c/a/Web-Style-Sheets/Building-a-Dynamic-Banner-with-CSS-Sprites/

CSS Sprites and IE/Win Flicker Issue

http://www.brajeshwar.com/2006/css-sprites-and-iewin-flicker-issue/

css用法测试工具：CSS tests and experiments

http://www.brunildo.org/test/index.html

各浏览器CSS hack兼容表：
 

整体测试代码示例：

复制代码代码如下:
.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

复制代码代码如下:
#menu { line-height: 23px; }/* firefox 浏览器实行这句定义 */
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/
#menu { *line-height: 23px; }/*ie6,ie7 这句定义主要尖对IE7来hack*/
#menu { _line-height: 23px; }/*ie6 浏览器优先实行这句定义*/
或者写成一句，注意顺序
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; }
或者
* html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */
*+html #menu { line-height: 23px; }/* IE7 浏览器实行这句定义*/

其他说明：
1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
<meta http-equiv="x-ua-compatible" content="ie=7" />
2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。
3、还有其他写法，比如：
*html #test{}或者 *+html #test{}
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：
http://www.w3.org/TR/html4/loose.dtd
5、顺序：Firefox、IE8、IE7、IE6依次排列。
小知识：什么是CSS hack？
　　由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
　　这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
　　这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
下面是补充：

复制代码代码如下:
selector{
property:value; /* 所有浏览器 */
property:value\9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}

详细出处参考：http://www.jb51.net/css/24946.html

border-radius(圆角)的几点说明：

border-radius:长度
Firefox支持border-radius(圆角)：-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
Opera支持border-radius(圆角)：border-radius:2px;
IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera（css3）、中的具体书写格式如下：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圆角)还有其他一些用法，Firefox、webkit内核的Safari和Chrome和opera（css3）其他写法有些略微的差异，具体可以查看以下网址：https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/