原文：http://developer.yahoo.com/performance/rules.html
2007.3.20 Steve Souders
Translated by mask
從2004年開(kāi)始，我開(kāi)始進(jìn)入雅虎的異常表現(xiàn)小組。我們是一個(gè)很小的隊(duì)伍，專(zhuān)門(mén)針對(duì)雅虎的產(chǎn)品進(jìn)行質(zhì)量檢測(cè)和改進(jìn)，我作為一個(gè)后端工程師，現(xiàn)在卻開(kāi)始搗鼓前端代碼優(yōu)化方面的工程，所以我認(rèn)為這是一個(gè)極好的進(jìn)步的機(jī)會(huì)。我的目標(biāo)是改進(jìn)用戶端體驗(yàn)，我度量了在各個(gè)帶寬下瀏覽器的響應(yīng)時(shí)間，得出如下的一個(gè)圖表，它展示了來(lái)自http://yahoo.com的http的流量。
以上圖標(biāo)的第一個(gè)標(biāo)簽就是html，是一個(gè)html文檔最開(kāi)始加載的東東，在這個(gè)例子中，讀取html代碼只占了整個(gè)響應(yīng)時(shí)間中的5%，這個(gè)結(jié)果適用于絕大多數(shù)網(wǎng)站，在采樣美國(guó)的前十位網(wǎng)站中，只有一家超過(guò)5%但少于20%，其余80%的時(shí)間是用來(lái)讀取網(wǎng)頁(yè)其他內(nèi)容的，也就是說(shuō)，前端（原文是front-end，意思就是不包括html代碼的其余內(nèi)容，可以是圖片，腳本，flash，視頻，各種東西）。這就是為什么我們要把目光集中在這些東西來(lái)提高顯示速度的關(guān)鍵原因。
為什么要從前端開(kāi)始著手有三個(gè)主要原因：
- 這里有提升和改進(jìn)的潛力。如果能減少一半的體積，就能減少40%的響應(yīng)時(shí)間
- 改進(jìn)前端比改進(jìn)后端需要的時(shí)間和資源更少。（改進(jìn)后端要重新設(shè)計(jì)應(yīng)用程序規(guī)劃，代碼，尋找優(yōu)化代碼的方法，添加或改變硬件配置，分布式數(shù)據(jù)庫(kù)，等等）
- 前端的改進(jìn)在我們的工作中已經(jīng)被證實(shí)，我們?cè)趛ahoo有五十個(gè)小組，在我們的最佳表現(xiàn)規(guī)則下，提高了他們的用戶端響應(yīng)時(shí)間達(dá)到25%或更高。
我們的黃金規(guī)則是：首先優(yōu)化前端表現(xiàn)，這些東西耗費(fèi)了用戶端響應(yīng)時(shí)間中的80%。
1.減少http請(qǐng)求數(shù)
圖片，css，script，flash，等等這些都會(huì)增加http請(qǐng)求數(shù)，減少這些元素的數(shù)量能減少響應(yīng)時(shí)間。
CSS Sprites技術(shù)能減少圖片的請(qǐng)求數(shù)，把零散的小圖片放到一起，運(yùn)用background-position來(lái)改變背景圖片的位置，前提是html元素事先定義好寬高，其實(shí)就像一個(gè)遮罩，移動(dòng)背景就會(huì)看到不同的景象。
內(nèi)嵌圖像 用data:URL scheme的方式把圖片內(nèi)容代碼直接嵌入html代碼中，這樣會(huì)增大html代碼的體積，改進(jìn)的方式是把內(nèi)嵌圖片嵌入到css中（css被緩存），這樣就會(huì)更好的減少http請(qǐng)求數(shù)而且不增大html的體積。
很多用戶都是在空緩存的情況下進(jìn)入你的網(wǎng)站的，這樣第一次的速度就會(huì)顯得很重要。
第一條規(guī)則是最重要的一條規(guī)則。
2.運(yùn)用cdn技術(shù)
見(jiàn)： http://hi.baidu.com/axne/blog/item/258e23ade2d76f0a4b36d6d1.html
3.加一個(gè)長(zhǎng)時(shí)間過(guò)期的頭部
Expires: Thu, 15 Apr 2010 20:00:00 GMT
瀏覽器會(huì)用緩存來(lái)減少http請(qǐng)求數(shù)來(lái)加快頁(yè)面加載的時(shí)間，如果頁(yè)面頭部加一個(gè)很長(zhǎng)的過(guò)期時(shí)間，瀏覽器就會(huì)一直緩存頁(yè)面里的元素。
不過(guò)這樣會(huì)帶來(lái)一個(gè)問(wèn)題，就是如果頁(yè)面里的東西變動(dòng)的話就要改名字了，否則用戶端不會(huì)主動(dòng)刷新，在yahoo工作組用的是版本號(hào)，例如yahoo_2.0.6.js
4.Gzip壓縮
Gzip是現(xiàn)在最流行和最有效的壓縮方式，她是GNU開(kāi)發(fā)的，RFC1952標(biāo)準(zhǔn)化。
（Gzip是在服務(wù)器端壓縮圖片，css，腳本等，傳送到用戶端的瀏覽器再解壓，這樣可以提高傳輸速度，不過(guò)對(duì)服務(wù)器的壓力會(huì)增大，一般選擇部分元素壓縮比較合適。）
5.把樣式表放到頂部
我們發(fā)現(xiàn)把css放到文檔頭部會(huì)讓網(wǎng)頁(yè)加載得更快。因?yàn)檫@樣可以讓頁(yè)面逐漸加載。
把樣式表放到接近底部的問(wèn)題是它阻止了頁(yè)面元素的逐漸顯示。這樣還會(huì)導(dǎo)致“flash of unstyled content” 即在樣式表加載之前頁(yè)面內(nèi)容是以沒(méi)有樣式的形式顯示出來(lái)的，待加載完樣式后，頁(yè)面重繪，內(nèi)容一閃即改變了樣式表現(xiàn)。
6.把腳本放到底部
把腳本放到盡可能底部的地方，一個(gè)原因是讓頁(yè)面逐漸渲染，另一個(gè)是實(shí)現(xiàn)更好的并行下載。
對(duì)于腳本，腳本以下的內(nèi)容被阻止逐漸加載了，因?yàn)橹挥挟?dāng)下載完腳本以后才會(huì)下載下面的內(nèi)容，第二個(gè)腳本引起的問(wèn)題是阻止平行下載。 “http/1.1 specification”建議瀏覽器對(duì)一個(gè)域名， 同一時(shí)間下載數(shù)不超過(guò)2個(gè)（按：實(shí)際監(jiān)測(cè)發(fā)現(xiàn)一般有超過(guò)2個(gè)），我曾經(jīng)讓ie并行下載100個(gè)圖片。 當(dāng)腳本正在下載的時(shí)候，瀏覽器不會(huì)開(kāi)始下載任何東西。
7.避免css expressions
css expressions 是一個(gè)有力（和危險(xiǎn)）的方式動(dòng)態(tài)的改變css的屬性。他們自ie5就開(kāi)始被支持，舉個(gè)例子，用css expression可以讓背景色每個(gè)小時(shí)輪換一次。但是被非ie瀏覽器忽略的。
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
expressions的問(wèn)題就在與它的計(jì)算頻率絕對(duì)超出我們的想象，甚至當(dāng)我們移動(dòng)鼠標(biāo)，都會(huì)引起頁(yè)面的重繪！
下面是舉例頁(yè)面
減少css expressions計(jì)算次數(shù)的一個(gè)方法就是使用一次性的expressions。 當(dāng)?shù)谝淮蝒xpression計(jì)算出一個(gè)明確的值，就讓樣式等于這個(gè)值，不再變動(dòng)。如果樣式的屬性一定要?jiǎng)討B(tài)的改變，就用時(shí)間句柄吧！
8.讓腳本和樣式外延
Javascript和CSS應(yīng)該是外部調(diào)用還是內(nèi)嵌呢？
用外部調(diào)用文件的方式更快，因?yàn)樗麄兪强梢员痪彺娴?，如果是?nèi)嵌在頁(yè)面中他們就無(wú)法被緩存了！想想如果用戶要在你的網(wǎng)站看很多很多的頁(yè)面，如果都是使用同一個(gè)外部腳本和樣式，那么他們一旦被緩存，就再也不需要下載了，這樣會(huì)給你帶來(lái)很大的潛在好處。
9.減少DNS查詢(xún)
10.減小腳本體積
有兩個(gè)比較流行的工具是用來(lái)減小腳本的體積的–JSMin和YUI Compressor
（按：這個(gè)壓縮和Gzip壓縮是不一樣的，Gzip是傳輸壓縮，這個(gè)是代碼壓縮）
11.避免重定向
重定向會(huì)減慢用戶體驗(yàn)，它會(huì)延遲所有的東西直至到達(dá)新頁(yè)面。一個(gè)最浪費(fèi)的重定向經(jīng)常會(huì)發(fā)生而我們的開(kāi)發(fā)者又會(huì)經(jīng)常忽略的就是比如http://astrology.yahoo.com/astrology的結(jié)果是重定向到http://astrology.yahoo.com/astrology/ 在Apache里用Alias 或者mod_rewrite或者DirectorySlash解決。
從一個(gè)舊網(wǎng)站跳轉(zhuǎn)到新網(wǎng)站也是經(jīng)常要用到重定向，還有就是連接一個(gè)網(wǎng)站中的不同部分和在某些情況下（比如不同瀏覽器，不同的用戶帳號(hào)類(lèi)型，等等）的用戶導(dǎo)向。用重定向很簡(jiǎn)單，而且只需要一點(diǎn)額外的代碼，雖然在這些情況下用重定向減少了開(kāi)發(fā)者的復(fù)雜度，但它降低了用戶的體驗(yàn)，變通的做法是用Alias和mod_rewrite如果兩個(gè)部分是在同一主機(jī)上的話，如果是由域名變更引起的重定向，變通的做法是通過(guò)Alias或mod_rewrite創(chuàng)建一個(gè)CNAME（一個(gè)DNS記錄，創(chuàng)建一個(gè)別名，從一個(gè)域名指向另一個(gè)域名）
12.去掉重復(fù)的腳本
（按：簡(jiǎn)單的說(shuō)，同一個(gè)腳本如果被調(diào)用多次，瀏覽器并不會(huì)忽略后續(xù)的腳本，而總是覆蓋加載，覆蓋運(yùn)行，這樣會(huì)增加開(kāi)銷(xiāo)）
13.配置ETags
ETags（Entity tags）是服務(wù)器和瀏覽器的一個(gè)功能，它用來(lái)判斷瀏覽器緩存里的元素是否和原來(lái)服務(wù)器上的一致。ETags比last-modified date更具有彈性，它用一個(gè)獨(dú)一無(wú)二的字符串來(lái)標(biāo)識(shí)一個(gè)元素的版本。
源服務(wù)器用響應(yīng)頭里的ETag來(lái)特定一個(gè)元素的ETag：
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195
之后，如果瀏覽器要驗(yàn)證這個(gè)元素，它就會(huì)用If-None-Match頭來(lái)回傳ETag到源服務(wù)器。如果符合的話，一個(gè)304狀態(tài)的代碼就會(huì)從源服務(wù)器返回到瀏覽器，這樣源服務(wù)器就節(jié)省了傳輸具體數(shù)據(jù)的開(kāi)銷(xiāo)。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “10c24bc-4ab-457e1c1f”
HTTP/1.1 304 Not Modified
用Etags的問(wèn)題就在于它會(huì)標(biāo)識(shí)那個(gè)特定的服務(wù)器，如果換了服務(wù)器，Etags也就失去了原有的功能，但是這種現(xiàn)在在網(wǎng)絡(luò)上太常見(jiàn)了，因?yàn)槲覀兘?jīng)常用服務(wù)器集群。默認(rèn)情況下，Apache和IIS會(huì)在Etag中內(nèi)嵌數(shù)據(jù)，這樣會(huì)動(dòng)態(tài)減少驗(yàn)證成功的機(jī)會(huì)。
Apache1.3和2.x的ETag格式是inode-size-timestamp。雖然一個(gè)文件可能在不同服務(wù)器的同一個(gè)目錄，同樣的大小，安全級(jí)，時(shí)間戳等等，它的inode會(huì)隨著服務(wù)器的不同而不同。
IIS5.0和6.0有同樣類(lèi)似Etags的東西，叫時(shí)間戳：ChangeNumber（更改號(hào)），更改號(hào)是一個(gè)用來(lái)追蹤IIS配置變化的計(jì)數(shù)器，ChangeNumber在不同IIS服務(wù)器之間是不一樣的。
它最終的問(wèn)題就是，IIS和Apache產(chǎn)生的Etags會(huì)在不同服務(wù)器之間無(wú)法匹配，這樣我們的瀏覽器就無(wú)法得到我們期待的304響應(yīng)，而給我們的是一個(gè)普通的200響應(yīng)，和正常的數(shù)據(jù)流。如果你的網(wǎng)站只有一個(gè)服務(wù)器還無(wú)所謂，如果是集群，而你用的是默認(rèn)的ETag配置，你的用戶就會(huì)獲得更慢的頁(yè)面，你的服務(wù)器也會(huì)有更高的負(fù)載，消耗更大的帶寬資源，代理也無(wú)法高效緩存你的內(nèi)容，甚至即使你有一個(gè)長(zhǎng)時(shí)間過(guò)期的頭部（按：見(jiàn)第三條規(guī)則），也不會(huì)阻止它重新載入內(nèi)容。
如果你不想發(fā)揮Etags提供的這個(gè)彈性驗(yàn)證模型的優(yōu)勢(shì)，你最好關(guān)掉它。Apache中關(guān)掉它的方法是在Apache的配置文件中寫(xiě)這么一句：
FileETag none
14.讓Ajax緩存
人們會(huì)問(wèn)這些規(guī)則同樣適用于web2.0嗎？當(dāng)然！這個(gè)規(guī)則是我在雅虎工作做web2.0后得出的第一條規(guī)則。
Ajax的一個(gè)好處是它會(huì)給你實(shí)時(shí)的回饋，因?yàn)樗秃笈_(tái)的服務(wù)器是異步傳輸?shù)模欢?，用Ajax并不能保證你的用戶不用無(wú)聊的撥弄手指頭來(lái)等待這個(gè)回饋，在很多應(yīng)用中，用戶是否需要等待取決于Ajax是怎么用的，舉例說(shuō)，在一個(gè)基于網(wǎng)頁(yè)的郵件客戶端，用戶會(huì)持續(xù)等待Ajax的回饋來(lái)搜索符合他的標(biāo)準(zhǔn)的郵件信息。記住“異步”并不意味著“實(shí)時(shí)”。讓它緩存的方式同樣是加一個(gè)過(guò)期頭部。
按：
粗略的譯了一下，并非逐字的翻譯，就是讓大家有所了解了，翻譯不好的地方請(qǐng)見(jiàn)諒！
上面那個(gè)圖大家可以在firebug（firefox下運(yùn)行）的net選項(xiàng)卡中獲得服務(wù)器的響應(yīng)數(shù)據(jù)！
基于以上規(guī)則，yahoo出了一個(gè)延伸firebug插件的插件。在這里下載：
http://developer.yahoo.com/yslow/
welcome to my blog
http://www.156544634.cn
科學(xué)設(shè)計(jì)你的網(wǎng)站網(wǎng)頁(yè):來(lái)自 Eye-Tracking研究的23節(jié)必修課 ――Christina Laun
在網(wǎng)絡(luò)設(shè)計(jì)領(lǐng)域關(guān)于Eye-Tracking的研究十分火爆，但是如何把這些研究結(jié)果轉(zhuǎn)變?yōu)榫唧w可行的設(shè)計(jì)來(lái)運(yùn)作依舊是個(gè)難點(diǎn)。以下就是一些來(lái)自于Eye-Tracking研究結(jié)果的竅門(mén)，可以為改進(jìn)你的網(wǎng)站設(shè)計(jì)提供些意見(jiàn)：
1.對(duì)比圖像，文字更具吸引力
與你所認(rèn)為的相反，在瀏覽一個(gè)網(wǎng)站的時(shí)候，能夠直接吸引用戶目光的并不是圖像。大多數(shù)通過(guò)偶然點(diǎn)擊進(jìn)入你的網(wǎng)站的用戶，他們是來(lái)尋覓信息的而不是圖像。因此，保證你的網(wǎng)站設(shè)計(jì)凸現(xiàn)出最重要的信息板塊，這才是設(shè)計(jì)的首要原則。
2.眼球的第一運(yùn)動(dòng)聚焦于網(wǎng)頁(yè)的左上角
用戶瀏覽網(wǎng)頁(yè)的這一習(xí)慣應(yīng)該在意料之中，畢竟左上部為主要操作中心這一點(diǎn)為大多數(shù)重要的計(jì)算機(jī)應(yīng)用程序的設(shè)計(jì)所采用。在你構(gòu)建網(wǎng)站考慮網(wǎng)站設(shè)計(jì)時(shí)，應(yīng)該盡量保持這一格式。要知道，如果你希望保持個(gè)人特色，搭建一個(gè)成功的網(wǎng)站，你就必須尊重用戶們的習(xí)慣。
3.用戶瀏覽網(wǎng)頁(yè)時(shí)，首先觀察網(wǎng)頁(yè)的左上部和上層部分，之后再往下閱讀，瀏覽右邊的內(nèi)容
用戶普遍的瀏覽方式呈現(xiàn)出“F”的形狀 。保證網(wǎng)站內(nèi)容的重要要素集中于這些關(guān)鍵區(qū)域，以此確保讀者的參與。在此放置頭條，副題，熱點(diǎn)以及重要文章，這樣可以吸引到讀者進(jìn)行閱讀。
4.讀者會(huì)忽視橫幅廣告
研究表明，讀者常忽視大部分的橫幅廣告――盡管你以此維持網(wǎng)站生計(jì)――視線往往只停留幾分之一秒。如果你想通過(guò)廣告掙錢(qián)，那么必須創(chuàng)新你的廣告位以及合理配置網(wǎng)站廣告形式。
5.花哨的字體和格式被忽視
為什么呢？那是因?yàn)橛脩魰?huì)認(rèn)為這些是廣告，并非他們所需要的信息。事實(shí)上，研究表明用戶很難在充滿大量顏色的花哨字體格式里尋找到所需的信息，因?yàn)橐曈X(jué)線索告訴他們把這些忽略吧。保持網(wǎng)站的清爽，不要因?yàn)槿A而不實(shí)的表面，讓重要的信息被忽略。
6.用數(shù)詞來(lái)代替數(shù)字
如果使用數(shù)詞取代數(shù)字的羅列，讀者會(huì)發(fā)現(xiàn)在你的網(wǎng)站可以很容易地發(fā)現(xiàn)真實(shí)的資料。要知道，你是寫(xiě)給那些將第一次瀏覽你的網(wǎng)站的讀者，所以，讓他們?nèi)菀装l(fā)現(xiàn)他們所需的信息，讓他們感興趣。
7.字體大小影響瀏覽行為
想改變?nèi)藗儗?duì)你的網(wǎng)頁(yè)的看法嗎？改變網(wǎng)頁(yè)字體的大小。大的字體刺激瀏覽，而小一些的字體則提高焦點(diǎn)閱讀量。根據(jù)你的需要，合理配置兩者的比例。
8.遇到感興趣的內(nèi)容，用戶僅會(huì)多看一眼副標(biāo)題
不要過(guò)分堅(jiān)持副標(biāo)題固定的格式――保證他們的相關(guān)性和興趣。你也可以讓副標(biāo)題包含關(guān)鍵詞，這樣可以有效利用搜索引擎，讓它帶來(lái)讀者。
9.人們大都只瀏覽網(wǎng)頁(yè)的小部分內(nèi)容
如果在用戶瀏覽的時(shí)候提供信息使他們盡快鎖定目標(biāo)，就可以把這一點(diǎn)發(fā)展成為你的優(yōu)勢(shì)。突出某些部分或者創(chuàng)建項(xiàng)目列表使網(wǎng)頁(yè)信息容易找到和閱讀。
10.簡(jiǎn)短的段落相對(duì)于長(zhǎng)段落來(lái)說(shuō)有更好的表現(xiàn)力
網(wǎng)頁(yè)信息是為大多數(shù)強(qiáng)調(diào)快速瀏覽的無(wú)聯(lián)網(wǎng)用戶提供的。除非上下文的銜接要求，保持信息由簡(jiǎn)短的段落和句式組成，例如 這個(gè)電子商務(wù)網(wǎng)站 的產(chǎn)品介紹。
11.根據(jù)視覺(jué)鎖定，一欄格式比多欄格式擁有更好的表現(xiàn)力
別讓過(guò)多的信息把網(wǎng)站來(lái)訪者淹沒(méi)。大多數(shù)情況下，簡(jiǎn)潔更具力量。多欄內(nèi)容容易被用戶忽視，我們需要消除這些干擾。
12.網(wǎng)頁(yè)頂部和左邊的廣告更能吸引眼球
如需要在網(wǎng)站植入廣告，試圖使他們?nèi)谌刖W(wǎng)頁(yè)的左上部，這樣他們才能吸引到最大的視覺(jué)注意力。當(dāng)然，用戶僅僅會(huì)注意到這些廣告，這并不意味著他們會(huì)用鼠標(biāo)點(diǎn)擊。所以不要為了提高廣告的注意力而犧牲原有的網(wǎng)站設(shè)計(jì)。
13.將廣告放置與最佳內(nèi)容一旁也可以提升注意力
如果想要提升廣告的可視性和點(diǎn)擊率，可以將其設(shè)置于最能引起人興趣的內(nèi)容一旁，整合進(jìn)網(wǎng)頁(yè)的設(shè)計(jì)里。這樣，用戶既可以找到所需的內(nèi)容，你也能提升廣告的效益。
14.在各種測(cè)試中，人們閱讀文字廣告最為專(zhuān)心。
正如上面提到的，一般的互聯(lián)網(wǎng)用戶不會(huì)花費(fèi)太多時(shí)間用于查看那些一眼就能看出是廣告的內(nèi)容。這就是文字廣告表現(xiàn)出眾的原因。他們并沒(méi)有分散注意力，而是與網(wǎng)頁(yè)的其它部分內(nèi)容融為一體，這讓他們減少了對(duì)讀者的視覺(jué)刺激，也使這一廣告形式獲得成功的閱讀率。
15.越大的圖像吸引越多的注意力
如果要在網(wǎng)頁(yè)中使用圖片，那越大越好。人們更傾向于查看那些能夠清楚地看到細(xì)節(jié)和獲取信息的圖像。要保證你所用的圖片與文章內(nèi)容相關(guān)，否則它更容易被忽視。大多數(shù)讀者都擁有高速的連接速度，所以請(qǐng)放心在你的網(wǎng)站上使用那些較大體積的圖片。
16.干凈、清晰的特寫(xiě)圖片能吸引更多的視覺(jué)注意
可能那些抽象的藝術(shù)圖片會(huì)讓你的網(wǎng)站看起來(lái)很有味道，但是他們并不會(huì)吸引多少讀者的注意力。如果你需要使用到這些圖片，請(qǐng)確保所用圖片的清晰以及其表達(dá)內(nèi)容的簡(jiǎn)單可讀性。必須注意的是，那些與真實(shí)的“人”相關(guān)的圖片比所謂的模特圖片更為“優(yōu)秀”。
17.標(biāo)題能吸引眼球
瀏覽網(wǎng)頁(yè)時(shí)，讀者能發(fā)現(xiàn)的第一內(nèi)容是標(biāo)題。確保網(wǎng)頁(yè)的所有相關(guān)鏈接暢通和有效，以讓讀者順利的通過(guò)網(wǎng)站進(jìn)一步搜索。
18.用戶花費(fèi)大量時(shí)間察看按鈕和菜單
所以，你需要花費(fèi)額外的時(shí)間維護(hù)你的精心設(shè)計(jì)。畢竟，他們不僅吸引了讀者的眼球，更是網(wǎng)站設(shè)計(jì)的重要組成要素。
19.表單格式可以延長(zhǎng)讀者的注意時(shí)間
分解內(nèi)容和段落，大量使用表單形式來(lái)表現(xiàn)你的文章，可以保證讀者的瀏覽率。使用數(shù)字和其它標(biāo)記符號(hào)來(lái)突出文章的重要內(nèi)容，會(huì)讓網(wǎng)站更容易瀏覽，用戶更快的找到所需的信息。
20.避免呈現(xiàn)大塊的文本
研究顯示，一般的網(wǎng)絡(luò)瀏覽者不會(huì)花費(fèi)時(shí)間去閱讀大塊的文本，無(wú)論他們有多重要或?qū)懙枚嗪?。因此，必須把這些大文本分解為若干小段落。突出重要的地方，放置點(diǎn)擊的按鈕也可以提高用戶的注意力。
21.格式可以吸引注意力
在文中使用粗體、大寫(xiě)、彩體、下劃線可以幫助用戶獲取正文所表達(dá)的最主要的信息。使用時(shí)需要謹(jǐn)慎，因?yàn)檫^(guò)多的使用會(huì)使你的網(wǎng)頁(yè)難以閱讀，把讀者嚇跑。
22.利用好空白
盡管把網(wǎng)頁(yè)的每寸空間都填滿這個(gè)想法十分誘人，但事實(shí)上讓網(wǎng)站留出部分剩余更為不錯(cuò)。網(wǎng)站的過(guò)量信息會(huì)把用戶淹沒(méi)，同時(shí)他們也會(huì)忘記所提供的大部分的內(nèi)容。所以保持網(wǎng)頁(yè)的簡(jiǎn)潔，給讀者預(yù)留出一些視覺(jué)空間來(lái)供讀者休息。
23.放置于網(wǎng)頁(yè)頂部，導(dǎo)航工具的作用將更好的發(fā)揮
理想情況下，你不會(huì)滿足于當(dāng)讀者打開(kāi)你的網(wǎng)站時(shí)僅瀏覽初始頁(yè)，而是希望他們?yōu)g覽翻閱，察看其它感興趣的內(nèi)容。將導(dǎo)航器置于網(wǎng)頁(yè)頂部，就可以讓用戶通過(guò)使用這個(gè)工具輕松的找到所需的目標(biāo)內(nèi)容。
]]>