一年多以前剛進入網易的時候，比較驚訝的是美術部還沒有自己的網頁規(guī)范，只有小莫同學一些比較原始的條目，剛好那時自己收集過其他一些大型網站的視覺規(guī)范，并為以前公司做過類似的標準，于是欣然接受了重新編寫網頁視覺規(guī)范這個任務。后來出來的版本增加了非常多的條目，有些條目看似比較冷門很少人關注，不過在我看來對于提高用戶體驗是非常有幫助的，而恰恰是網易做得不太好的，借博客這里解釋一下某些條目列入網頁規(guī)范的原因。那時在寫規(guī)范的時候還總結了版面影響體驗的一些具體問題，后來由于各種原因不了了之了，現(xiàn)在也同時在這里總結一下拿出來給大家討論討論。先聲明一下，觀點僅代表個人意見，歡迎拍磚。

網頁規(guī)范中諸如固定標識、頁面結構、header、footer、文字規(guī)范、色彩、統(tǒng)一按鈕樣式等是屬于用戶體驗中品牌性的范疇，品牌性反映的是品牌形象，各網站之間沒有統(tǒng)一的標準衡量，是很具有特異性的，需要公司整個決策層去制定，但需保持一個網站內品牌形象的一致性和延續(xù)性。其實有時老羅同學說得也是對的，新浪的排版、色彩、結構不一定就是好的，但給用戶接受和習慣了之后它就牛了，說的其實就是品牌性問題，對比這些其實無太多意義，而一味模仿只會越發(fā)損失自己原有的品牌特征。之前改版組一次討論到首頁改版問題，就談到新浪的首頁改來改去都基本是老樣子，考慮的可能就是品牌延續(xù)性問題，而網易二級欄目頁里大間隔分欄加頻道標識則是網易獨創(chuàng)，品牌性非常明顯，而品牌特征非常明顯的東西個人希望是延續(xù)和保留的。

其實以下要講的問題基本都不涉及用戶體驗中的品牌性，也不屬于內容，而是功能性和使用性。功能的健全與否、能否及時得到信息及反饋、是否易用、是否符合使用習慣、使用中是否友好、是否能有預知性等等是功能性和使用性的范疇，這方面其實是有標準的，也較容易評判，也比較容易發(fā)現(xiàn)問題。要改善用戶體驗，改善功能性和使用性則更顯得迫切，也能更快體現(xiàn)效果。

一些樣式上的誤導或者不統(tǒng)一帶來使用上的認知失誤和非預知性

網頁上一些交互按鈕或標簽，強調的是操作的可識別和可預知性。如果鼠標移上一個按鈕區(qū)域，而這個按鈕沒任何反應的話，那說明這個按鈕是不可識別的，會令用戶非常迷惑。網易頁面上還有不少此類情況，樣子是按鈕的樣式，但鼠標移入按鈕的區(qū)域是沒任何反應的，其實是要移到里面的文字才會有反應，如下圖。

解決的辦法要么就取消按鈕的樣式，要么就把整個按鈕區(qū)域加上鏈接而不是只有文字有鏈接。

標簽有4態(tài)，激活前、激活后、鼠標移上和點擊，不過現(xiàn)在一般都縮減為3態(tài)或者2態(tài)了，這倒不是最重要的問題。如果一個網站不同的頁面上甚至同一個頁面上混雜著標簽鼠標移上就激活和需點擊標簽才激活兩種操作方式的話，那會令用戶無所適從，因為用戶不會花心思去記住你這個標簽是鼠標移上就激活還是需要點擊才激活，常常會出現(xiàn)操作混亂和失誤。如下圖網易首頁的標簽是鼠標移上即激活，而到了體育首頁和財經的的切換標簽便需要點擊才能激活了。

有同樣問題的還有很多頁面的焦點圖變換，如圖體育的是點擊激活，而其他的則是鼠標移上激活。

解決辦法是全站統(tǒng)一一種激活方式，讓用戶習慣于一種操作方式，減少用戶使用前不必要的思考。

增加解釋性標簽的必要性

如下圖中一個例子，為了遷就某些固定寬度的板塊，又不愿文字鏈折行而影響美觀程度和令內容減少，造成的后果是用戶只能看到文章標題的一部分，甚至只是一小部分，連大意還弄不明白。

而此處用戶移上鼠標沒任何提示性語言，用戶就只能是一個個鏈接去打開才能清楚知道文章內容是什么了，但用戶不會那么有耐心去一個個點擊，也許他漏掉了他關注的內容。網易還有不少地方存在相類似的情況，文章標題未完而用省略號代替的情況下，添加title標簽顯得尤其重要，這可以令用戶不必每條鏈接打開而鼠標移上便可以看到完整的文章標題內容。

Title標簽的作用還不僅于此，對于某些評論或者和某篇文章相關的內容，可以添加title屬性指明對應的文章。而一些欄目的“更多”鏈接，有時用戶并不十分清楚這個“更多”打開的是什么，添加title標簽可以十分明了的告訴用戶這個“更多”將鏈接什么內容。如下圖新聞首頁首屏的更多鏈接，用戶就不是十分清楚打開的是什么，如果添加個title標簽注明是打開更多重磅回顧，則清晰明了很多。而在網易的頁面上，基本不存在title的提示功能。

圖片的Alt屬性標簽具有類似功能，還能提供顯示不了圖片的時候提示文字功能，因此顯得更為重要。這方面網易有些頁面較為規(guī)范，但有些頻道頁面的圖片就基本忽略了這個標簽。

增加解釋性的標簽，除了上述所說的增加人性化體驗外，還有重要一點，對于SEO也是非常有幫助的。

導航的一些看法

先說說自己以前碰到過的一些故事：我一直比較喜歡看新浪的體育新聞，我一般是輸入新浪網址，然后從新浪首頁的頂部導航點擊進入體育頻道，以前新浪的導航體育的鏈接位于第二行第一位，因此我養(yǎng)成了一個習慣，打開新浪首頁后我?guī)缀跏遣粫磳Ш降淖郑前咽髽酥苯右葡驅Ш絽^(qū)域的第二行第一位。但有次我失誤了，點出來的竟然是新浪的新產品愛問，倒回到新浪首頁一看，原來是新浪的導航順序變了一通，體育標簽不在原來的位置上了。由于習慣的問題，竟然過了兩三周我還是不能接受體育這個標簽調換了位置這個事實。

另外一個遭遇是關于網易首頁服務產品導航的，由于工作關系，popo對于日常來說還是比較重要的，有時popo發(fā)生錯誤，更新升級，或在另外的電腦登陸，都需要去下載和安裝popo，以前在網易首頁服務產品區(qū)域列表那可以輕松找到popo頁面，現(xiàn)在是把popo的鏈接在產品服務導航里直接給取消了，為了查清楚這個入口是不是隱藏在首頁某些隱蔽的地方，我特意點源文件出來Ctrl F了一下，發(fā)現(xiàn)整個頁面都已經沒有了popo或泡泡的字眼。幸好是自己記住了popo.163.com這個域名直接輸入進入的，不然估計又要去百度了。

由此可見，保持導航的穩(wěn)定性非常重要，包括一些產品服務的導航和二級頻道導航，如果導航一兩個月內變動一次或幾次的話，那導航基本就等于廢了，也留不住用戶了。每更改一次導航，必將會導致一部分忠實的用戶流失，這是毫無疑問的。

現(xiàn)在的頻道是越來越多，頻道里的欄目也越做越多，總希望把新的一些欄目往導航里堆，而導航里位置卻是基本固定的，只能把一些舊的，點擊率不高的欄目從導航里撤掉，但這樣又會造成一些點擊率不高的欄目更少人去看了，可能把一些忠實的用戶也趕走了，形成惡性循環(huán)。

怎么解決這些問題呢。個人認為導航中保留一個固定位置作為全站地圖式的列表頁是非常必要的，這個會是導航中最穩(wěn)定的一個，會逐漸引導一部分忠實用戶使用這個快速的到達自己需要看的但在主導航上沒有的欄目，也許是一些比較冷門的欄目，但不能忽視其中的價值。貌似長尾理論套到此處也很好解釋，在成本不增加的情況下，更多的關注長尾人群的利益，會收到意想不到的效果。新浪、QQ在這方面做得比較好，而網易沒有提供類似的功能，比較遺憾。其實這項功能可以進一步改進一下，把新開單獨的導航網頁換成鼠標移上浮動顯示的方式，則更加人性化一些。

頂部登錄區(qū)該提供什么

網易二級頻道頁面的頂部登陸區(qū)都沒有設置注冊按鈕，有登陸便有注冊，有了注冊才能登陸，這是約定俗成的習慣，有登陸的地方用戶一定會搜尋注冊的地方，不能隨便把一些方便的按鈕去掉。如果是從其他途徑如搜索引擎引導過來的用戶，第一次進入網易頁面，如果有較為明顯的注冊網易通行證按鈕，會帶來潛在的注冊用戶。

登陸后已經可以讀取到注冊用戶的信息了，現(xiàn)在只有郵箱的一些信息，其實可以把一些需要登陸才能使用的功能產品羅列，讓已經登陸的用戶很方便的使用其他功能，同時也能吸引注冊用戶去使用新產品，進一步提高用戶粘性。如：歡迎，XXXX，進入 郵箱 博客 交友 拍拍 印象派  。

現(xiàn)在網易還有些頁面如首頁還不能讀取登陸后的信息，需要用戶重復登陸，體驗不夠好。如能引進一些新的體驗功能，如異步的顯示新到郵件、新的評論等，則對用戶體驗來說更是一個極大的促進。

Flash動畫在網頁上對用戶體驗所產生的不利影響

在其他大型網站視覺規(guī)范中都會有動畫這方面的限制，因此我把這條也單獨列一項到視覺規(guī)范里。其實這條規(guī)范貌似不太引人注意，而我們實際工作中對這樣的限制也基本是忽略無視，不過動畫對于豐富網頁表現(xiàn)形式的同時也有它的弊端，一旦被誤用和濫用有時會產生嚴重的后果。

以前我所在的公司發(fā)生過這樣一件事，網站首頁一向都非常正常，訪問速度也一直比較快，忽然一天上午，所有人打開公司的首頁，發(fā)現(xiàn)瀏覽器都死掉了，無論是ie還是其他瀏覽器，打開任務管理器查看，cpu占用率是100%，再讓外面的人訪問，出現(xiàn)同樣的問題，技術總監(jiān)一時束手無策，也看不出是什么技術問題。我倒是看到那天的首頁比平時多了兩條效果極眩的對聯(lián)廣告，也隨瀏覽器死掉停在了效果最眩的那一刻，找到做對聯(lián)廣告的那位美術部同事，本地打開動畫文件，再打開任務管理器，竟驚人的發(fā)現(xiàn)cpu占用率flash那項峰值去到了80%多，還是在美工cpu性能比較好的機器上測試的，這樣的動畫去到網站首頁，還是要對聯(lián)成雙的出現(xiàn)，瀏覽器當然要處理不過來掛掉了。這次的經驗教訓還是非常深刻，自從這次以后，我都要求做動畫的同事做好動畫后，Ctrl+Alt+Del自檢，CPU占用率峰值在50%、60%以上的就基本不能通過了。

平時大家做動畫尤其是要掛網上的，關注得最多的無非是體積大小而已，都知道體積大，等待下載的時間長會影響用戶體驗，但動畫體積大還未到嚴重影響用戶體驗的地步，而且還可以用下載進度條來優(yōu)化，而CPU的占用率高的話，令到瀏覽者電腦假死，就算動畫做得再眩，體積優(yōu)化得再小，對用戶的打擊卻是致命的。偏偏對于這個問題，很多動畫制作的同志們都忽視了。在網易的頁面上依然會偶爾碰到極耗資源的flash動畫出現(xiàn)，估計很大部分是來源于客戶直接給過來的廣告……前不久就給我逮到了一個，還害我瀏覽器假死了5秒，如下圖所示頁面右列三國風云的flash廣告，下載至本地測試cpu占用率峰值達到70%多。

造成flash動畫cpu占用率高通常于幾個方面：有透明度的變換，特別是png透明圖比如有些復雜光線或者有些發(fā)光效果只能用外部軟件做好，存成透明png圖導入flash進行伸縮或移動操作；多節(jié)點的矢量圖變換動畫，有個誤區(qū)就是以為矢量圖變換不耗資源，都盡量轉變成矢量，實際結果是多節(jié)點的矢量圖運動和變化極耗資源，但盡量轉化成矢量圖是沒錯的，可以盡可能縮減flash體積；還有一些計算比較復雜的flash編程實現(xiàn)的動作，如大量使用一些循環(huán)函數(shù)onEnterFrame、setInterval等。這些都極耗資源，應當盡量回避。另外優(yōu)化動畫mc結構、將復雜耗資源的動畫在時間軸上分開、減少位圖使用、盡量調用相同的背景或元件都能明顯使flash動畫體積減少和cpu占用率高的風險降低，解決了這兩個問題，flash動畫的用戶體驗就算是成功一半了，剩下的就是創(chuàng)意和視覺效果問題。

至于在網頁上一屏內動畫數(shù)量的限制，大型網站都會有所規(guī)定，一般是不超過2個，但在網易的頁面上，這點實際上做得并不好，究其原因可能比較遷就了廣告的要求。如下圖所示一個網易新聞最終頁頭屏flash廣告達到了6個之多。

這里說的一屏是指瀏覽器一次所能瀏覽的區(qū)域，因為對于CPU來說，在屏幕上能顯示到的flash會處理，而顯示不到的則不會處理，一屏內顯示的flash動畫的CPU占用是一個疊加的效果，如剛才那頭屏6個廣告的頁面，假設每個flash動畫占用10%CPU，那疊加的效果就是60%，大大增加了處理的風險。再有從視覺角度考慮，一屏內6處動畫閃動，也實在讓人視覺疲勞，廣告的效果其實也并不好。如果實在要加那么多flash廣告，可以分散至各屏擺放。

另外一點是如果頁面已經有視頻等極占CPU資源的產品時，不適宜再有任何的flash動畫。前不久奧運視頻報道，sohu就是因為在視頻頁還設置了一個極耗資源的flash彈出廣告，極度影響用戶體驗而備受責罵。

鏈接該在原窗口打開還是新窗口打開

我覺得是很重要的一個問題，如果一個網站所有的頁面都在原窗口打開，肯定會造成網友閱讀信息的不方便，必定會頻繁進行返回操作；如果一個網站所有的頁面都是以新窗口打開，那會造成網友要不時關閉不必要的窗口，同樣會造成閱讀信息的不方便。因此制定一個鏈接打開方式的規(guī)范對于網友來說是必要的，有利于提高用戶體驗、有利于閱讀并更好的獲取信息。所以我把這項也寫到規(guī)范當中。

其實這也是一個非常有爭議的問題，網上也有不少這方面的討論，國外普遍的觀點是用戶需要能控制與其互動的界面，替用戶做決定是錯誤的，強制用戶去打開新窗口也是錯誤的，因此國外一般網站都會在原窗口打開新鏈接。而國內由于網民思維和瀏覽的習慣不一樣，大多數(shù)會是新窗口打開鏈接。Google原本都是原窗口打開鏈接，進入中國后中文版一開始的時候也是原窗口打開鏈接，后來是改成了新窗口，正是因為Google發(fā)現(xiàn)了中國人瀏覽習慣的差異。而最近比較熱的開心網則是另外一個比較失敗的例子，里邊所有的鏈接都是原窗口打開，以致于我在瀏覽一個好友的好友名單時，鏈接過去了另外別人的空間，瀏覽了一遍，發(fā)覺還想回去那好友的好友名單那里瀏覽其他人的空間，而不得不去點n次返回。國人的瀏覽習慣就是這樣，不會右鍵新窗口打開一個鏈接，又或者是按住shift去點一個鏈接。所以我們的網頁要去遷就國人的瀏覽習慣。

但這并不是說就可以無休止的使用新窗口打開鏈接了，很多網頁就是這樣，頁頭那里加個base taget=blank就全然不管了，做網頁的很方便，但有時累了用戶。一些有分頁的頁面，如果全部是新窗口打開，那會是一件很恐怖的事情，網易的股票有些頁面有類似的情況。而同級的頻道或子頻道間的跳轉，因為有具體的導航可以很方便跳轉，也應該設為原窗口打開。

出錯頁面的設置

其他大型網站規(guī)范都有出錯頁面設置這項，顯得這項還是非常重要的，而網易這方面做得不好。

有個統(tǒng)計表明，在搜索引擎大行其道的今天，一個網站約40%的流量都是搜索引擎帶來的，而在搜索引擎搜索到的網頁，不可避免的有些陳舊或者是已經訪問不了，設置出錯頁面來加以引導用戶去瀏覽相關內容，會帶來額外的流量。另外一些功能性頁面可能會程序出錯或者由于網絡的原因而出錯了，那出錯頁面會引導用戶完成相關的操作。

出錯頁面的設置不僅可以在使用性和功能性方面提升用戶體驗，還能提高網站滿意度和品牌形象。

原文：http://www.ued163.com/?p=188