可見，目前使用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/