1 布局、外觀錯(cuò)誤

　　1.1 頁面寬度

　　1.1.1 頁面內(nèi)容寬度選擇不當(dāng)

　　問題

　　設(shè)計(jì)頁面寬度時(shí)不考慮使用800*600分辨率的用戶

　　分析

　　根據(jù)W3Counter在2006年7月9日發(fā)布的全球Web調(diào)查顯示，使用800*600分辨率的用戶仍占11%，所以在設(shè)計(jì)頁面寬度時(shí)，要照顧這部分用戶。

　　游戲站的用戶大多是游戲玩家，他們中間絕大多數(shù)人的瀏覽器分辨率是1024*768或更高的分辨率，所以游戲?qū)ｎ}為了獲得更好的效果，可以在1024*768分辨率下設(shè)計(jì)頁面寬度，一般為900~1000像素寬。但不排除其中也有一部分800*600分辨率的用戶，為了保證這些用戶能在第一屏獲得更好的效果，要把主要內(nèi)容放在頁面左側(cè)。

　　公司首頁、毒霸、WPS、詞霸等站，應(yīng)盡量保證800*600分辨率下不出現(xiàn)橫向滾動(dòng)條，即頁面寬度為公司常用的760像素寬。

　　除了固定頁面的寬度，設(shè)置頁面寬度的像素值外，還可以將頁面寬度設(shè)為100%，以保證各個(gè)分辨率下的用戶都不出現(xiàn)橫向滾動(dòng)條。對(duì)于信息量比較大的頁面建議使用100%寬度。但100%寬度的頁面會(huì)增加寬屏用戶瀏覽網(wǎng)頁時(shí)視線移動(dòng)的距離，可以用Javascript控制這類頁面的寬度，給它限定一個(gè)最大絕對(duì)值。

　　案例

　　神州學(xué)習(xí)網(wǎng)，面向的用戶中有很多是大學(xué)生用戶，目前大學(xué)里800*600的顯示器還是占不小的比例的。而這個(gè)網(wǎng)站采用1024下的頁面寬度，顯然會(huì)失去一部分用戶。畢竟類似的學(xué)習(xí)網(wǎng)站還有很多。

　　我們政府的網(wǎng)站，面向的用戶是全國人民，不應(yīng)該采用1024分辨率下的設(shè)計(jì)寬度。

　　1.1.2 頁面內(nèi)容寬度不一致

　　問題

　　頁面中的一部分內(nèi)容寬度超出主體內(nèi)容的寬度

　　分析

　　設(shè)計(jì)師常常有這樣的設(shè)計(jì)稿：頁面主體寬760像素，照顧分辨率800*600的用戶。同時(shí)為了使1024*768分辨率下的用戶瀏覽起來不至于感覺兩側(cè)太空，會(huì)把頁面中的某一部分，如頭部，設(shè)計(jì)成1000的寬度。制作這種頁面時(shí)，要注意把兩側(cè)多出來的部分做成自動(dòng)延展的，如果有圖片，做成背景圖。

　　設(shè)計(jì)師使用這種方法設(shè)計(jì)頁面的時(shí)候要注意兩側(cè)多出來的部分，不要放置內(nèi)容，只能放一些純修飾性的東西。

　　案例

　　頁面在800*600分辨率下出現(xiàn)了橫向滾動(dòng)條。

　　這個(gè)頁面的原設(shè)計(jì)稿是這樣的：

　　兩側(cè)的焰火超過了頁面的主體，頁面應(yīng)該這樣來做：

　　1.2 字體

　　1.2.1 字體樣式過多

　　問題

　　頁面中的字體樣式過多

　　分析

　　顯示太多的屬性會(huì)讓用戶難以找到感興趣的對(duì)象，增加了用戶的記憶負(fù)擔(dān)。

　　案例

　　我們政府的網(wǎng)站，文字樣式有十幾種。讓用戶抓不住重點(diǎn)。

　　同為門戶，網(wǎng)易首頁的文字樣式就規(guī)劃得很清晰，重點(diǎn)突出。

　　1.2.2 相同樣式的文字功能不同

　　問題

　　外觀相同的文字，功能不同，違背一致性原則，讓用戶在交互過程中有挫敗感。

　　分析

　　外觀相同的文字在用戶看來會(huì)具有類似的功能，如：是不是鏈接，是不是在新窗口打開鏈接。如果相同樣式的文字在頁面中，既有鏈接文字，也有非鏈接文字，就會(huì)讓用戶在瀏覽頁面時(shí)不斷去試探文字的功能。很可能用戶試圖點(diǎn)擊文字的時(shí)候卻發(fā)現(xiàn)文字不是鏈接，心中默認(rèn)即將在原窗口打開的鏈接卻在新窗口打開了，這樣就會(huì)給用戶帶來挫敗感。

　　案例

　　“中華人民共和國中央人民政府”網(wǎng)站?！皯?yīng)急管理”和“主題服務(wù)”文字樣式相同，卻前者是鏈接而后者不是。

　　CCTV首頁，頂部導(dǎo)航：“繁體”鏈接的目標(biāo)是原窗口，而后面文字樣式相同的英文版、西班牙文版、法文版鏈接的目標(biāo)是新窗口。

　　某學(xué)校網(wǎng)站的導(dǎo)航欄。前面的鏈接都是打開一個(gè)頁面，最后一個(gè)“聯(lián)系我們”卻是發(fā)送郵件的鏈接。用戶以為點(diǎn)擊它會(huì)和前面一樣打開一個(gè)頁面，但點(diǎn)擊后卻啟動(dòng)了Outlook。

　　1.2.3 字號(hào)太小

　　問題

　　頁面文字字號(hào)太小，而且使用了固定大小的字號(hào)樣式，使視力不好的用戶無法閱讀。

　　分析

　　老年、視弱的用戶也許很難看清網(wǎng)頁上的12像素文字。他們往往會(huì)使用類似IE中的“查看->字體大小->最大”菜單來放大文字閱讀。但如果使用像素作單位來定義文字大小的樣式，對(duì)IE來說，這個(gè)菜單就失效了。大部分網(wǎng)頁應(yīng)盡量采用百分比為單為來定義文字大小的樣式，主要面對(duì)視力不好用戶的網(wǎng)站更應(yīng)該這樣。

　　案例

　　中國老年網(wǎng)，網(wǎng)站主要用戶是中老年人。大部分文字都是12像素，在IE下無法放大觀看，讓老頭老太太們拿著放大鏡去瞅吧。

　　1.3 導(dǎo)航欄

　　1.3.1 動(dòng)態(tài)導(dǎo)航欄

　　問題

　　導(dǎo)航欄的內(nèi)容和功能會(huì)因用戶狀態(tài)或用戶在網(wǎng)站中的位置不同而改變。

　　分析

　　多變的導(dǎo)航會(huì)把用戶弄糊涂：用戶很可能沒有意識(shí)到導(dǎo)航發(fā)生變化了。他們也不知道導(dǎo)航在什么情況下會(huì)變化。這就造成用戶要去不斷試探才能了解其中規(guī)律，讓網(wǎng)站的可學(xué)習(xí)性降低。

　　案例

　　CCTV首頁與二級(jí)頁的導(dǎo)航看起來內(nèi)容一樣。但首頁導(dǎo)航鏈接的目標(biāo)窗口是新窗口，而其他二級(jí)頁導(dǎo)航鏈接的目標(biāo)窗口都是原窗口。

　?。河脩舻卿浨昂偷卿浐螅罢搲钡亩?jí)導(dǎo)航有明顯的不同。

　　易趣，將用戶信息與導(dǎo)航分開處理。無論用戶狀態(tài)怎樣，導(dǎo)航欄內(nèi)容不變。

　　1.3.2 重復(fù)的導(dǎo)航項(xiàng)目

　　問題

　　導(dǎo)航中有重復(fù)的項(xiàng)目

　　分析

　　用戶看到重復(fù)的項(xiàng)目，會(huì)想知道他們是癲煌?Ｍ??沒Щ峒俁ㄕ廡┫钅恐趕虻牧唇郵遣煌?模?己蕉雜沒ё髁舜砦蟮囊?肌?/p>

　　案例

　　北航電子信息工程學(xué)院的網(wǎng)站導(dǎo)航：有兩個(gè)“人才培養(yǎng)”的鏈接。

　　1.3.3 導(dǎo)航不能給用戶導(dǎo)航

　　問題

　　導(dǎo)航不能指示用戶當(dāng)前位置，或用戶無法通過點(diǎn)擊導(dǎo)航中的鏈接去他想去的地方。

　　分析

　　導(dǎo)航如果不能體現(xiàn)出網(wǎng)站的結(jié)構(gòu)及用戶的位置，就失去了應(yīng)有的作用。如果僅僅顯示用戶所處的位置，而用戶無法通過點(diǎn)擊指示位置的文字去他想去的地方也是不好的。

　　案例

　　上面兩幅圖分別是TOM網(wǎng)的唐山地震30周年專題的首頁和“唐山故事”。這兩頁的導(dǎo)航?jīng)]有指示出當(dāng)前是在首頁還是在“唐山故事”。

　　某網(wǎng)站新聞頁的導(dǎo)航。“網(wǎng)站首頁 > 新聞?lì)l道 > 官方動(dòng)態(tài) > 新聞?wù)摹笔菦]有加鏈接的文字。用戶只能通過這行文字了解他所處的位置，但無法通過點(diǎn)擊導(dǎo)航返回上一級(jí)。

　　1.4 排版

　　1.4.1 排版沒有體現(xiàn)常用或自然的次序

　　問題

　　排版沒有體現(xiàn)用戶期望的順序。

　　分析

　　排版沒有經(jīng)過分析，不能體現(xiàn)內(nèi)容的順序性和使用頻率，不能按照用戶的習(xí)慣操作流程和邏輯布局。

　　案例

　　Google的Joga.com，加入某個(gè)球隊(duì)社區(qū)功能?！胺祷亍焙汀凹尤搿卑粹o相隔甚遠(yuǎn)，而且把“返回”按鈕放到了“加入”按鈕的前面。

　　由于Joga.com是Google拿原有的英文程序修改而成，所以注冊頁的排版沒有照顧中文用戶的習(xí)慣：讓用戶先填名字后填姓，先選月、日后選年份，先寫城市后選國家再填家鄉(xiāng)。讓用戶感覺思想被操縱著在一堆信息中跳來跳去，整個(gè)注冊流程完成后十分疲憊。

　　1.4.2 排版沒有依據(jù)內(nèi)容的重要程度

　　問題

　　排版主次不分明

　　分析

　　這樣的布局看起來好像只是策劃人員決定需要那些內(nèi)容后多少有些隨意的安放在頁面中。即使這樣的排版看起來似乎還不錯(cuò)，但有可能是非常失敗的設(shè)計(jì)。

　　案例

　　作為一個(gè)體育頻道，用戶需求是大量的體育新聞。TOM體育的頭版卻安排了大量的花邊新聞、美女圖片，這些次要內(nèi)容占據(jù)了很多本該用來顯示體育新聞的位置。

　　新浪體育處理得就比較好，頭版充斥大量的最新最引人關(guān)注的體育消息。

　　1.4.3 將不同類型的內(nèi)容并列處理

　　問題

　　將不同類型的內(nèi)容當(dāng)作同一類型來并列排版

　　分析

　　有些內(nèi)容，功能不同，但往往由于各種因素在排版時(shí)被并列處理。用戶看到并列處理的元素，會(huì)下意識(shí)把他們當(dāng)作功能并列的元素，這樣在使用時(shí)往往會(huì)產(chǎn)生錯(cuò)誤或發(fā)生挫折。

　　案例

　　北航“未來花園”BBS的登錄表單?！暗卿洝卑粹o是表單的一部分，起到提交表單的作用。而“注冊”只是一個(gè)打開注冊頁的鏈接。設(shè)計(jì)者為了追求美觀而將其并列排版，統(tǒng)一處理成按鈕形式，會(huì)讓部分用戶誤以為“注冊”也是這個(gè)表單的一部分，填寫用戶名、密碼后點(diǎn)擊“注冊”就提交了注冊表單。而實(shí)際上點(diǎn)注冊時(shí)，填寫的用戶名、密碼并沒被提交，到注冊頁面以后還要重新輸入你要注冊的用戶名、密碼。

　　搜狐首頁的搜狗搜索。新聞、網(wǎng)頁、音樂、圖片、說吧這五項(xiàng)都是模擬的選項(xiàng)卡效果，點(diǎn)擊以后，改變點(diǎn)擊項(xiàng)的樣式，不打開任何頁面。但點(diǎn)擊“地圖”會(huì)彈出新的頁面，讓用戶在操作過程中很可能感到十分意外。在這里，前五項(xiàng)都具有選項(xiàng)卡的功能，可以并列排版，而“地圖”的功能明顯不同，所以不應(yīng)該和其他五項(xiàng)并列排版。

　　1.4.4 間距處理不當(dāng)

　　問題

　　內(nèi)容間的距離不合適，使用戶無法辨別內(nèi)容是如何組織的。

　　分析

　　排版時(shí)，應(yīng)注意頁面的易閱讀性。每塊內(nèi)容或每個(gè)元素之間的距離如果處理不得當(dāng)，會(huì)迷惑用戶。比如：兩個(gè)相關(guān)元素距離太遠(yuǎn)，會(huì)讓用戶感覺他們是彼此獨(dú)立的。

　　案例

　　Joga.com的注冊頁面。“生日”和“出生年份”后面有兩個(gè)設(shè)置權(quán)限的下拉框（兩個(gè)黃色的鑰匙圖標(biāo)那里）。他們與“生日”和“出生年份”相隔太遠(yuǎn)，讓用戶無法在第一時(shí)間看出其中的從屬關(guān)系，無法判斷他們的功能。

　　某網(wǎng)站的登錄表單。用戶名輸入框離“用戶名”三個(gè)字很遠(yuǎn)，和“密碼”連在了一起。影響用戶判斷它們之間的關(guān)系。