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

很多人可能認(rèn)為門(mén)戶(hù)網(wǎng)站首頁(yè)設(shè)計(jì)只是把一些導(dǎo)航、資訊內(nèi)容和廣告堆積起來(lái)擺放得好看就可以了，雖然這個(gè)觀(guān)點(diǎn)也并不是完全錯(cuò)誤的，確實(shí)門(mén)戶(hù)網(wǎng)站首頁(yè)是由這三方面內(nèi)容組織而成，但隨著互聯(lián)網(wǎng)的快速發(fā)展，用戶(hù)對(duì)訪(fǎng)問(wèn)網(wǎng)站的要求也越來(lái)越高，在互聯(lián)網(wǎng)行業(yè)，因?yàn)楹芏鄸|西是免費(fèi)和相似的，用戶(hù)轉(zhuǎn)移成本會(huì)比較低，在這個(gè)網(wǎng)站有的東西去其他網(wǎng)站基本都能找到，只是輸入個(gè)網(wǎng)址就可以了。網(wǎng)站營(yíng)運(yùn)商如果想留住用戶(hù)和吸引更多的用戶(hù)瀏覽自己的網(wǎng)站，那這個(gè)時(shí)候就是需要提高網(wǎng)站的用戶(hù)體驗(yàn)來(lái)滿(mǎn)足用戶(hù)多方面的需求。

因此現(xiàn)在門(mén)戶(hù)網(wǎng)站的設(shè)計(jì)越來(lái)越講究和更為用戶(hù)著想，最理想的門(mén)戶(hù)網(wǎng)站設(shè)計(jì)流程需要經(jīng)歷“用戶(hù)研究-交互設(shè)計(jì)-視覺(jué)設(shè)計(jì)-可用性測(cè)試”這幾個(gè)步驟，其實(shí)有很多門(mén)戶(hù)網(wǎng)站設(shè)計(jì)也會(huì)經(jīng)歷其中一些步驟，只是公司對(duì)這方面還沒(méi)有一個(gè)很好的認(rèn)識(shí)，沒(méi)有一個(gè)系統(tǒng)的叫法和詳細(xì)的職能分工，往往都是一個(gè)人身兼多職，大部分都是按個(gè)人經(jīng)驗(yàn)主觀(guān)判斷去決定，沒(méi)有一些客觀(guān)的數(shù)據(jù)支持。例如經(jīng)常會(huì)有一些網(wǎng)站策劃者說(shuō)：我也是網(wǎng)站用戶(hù)之一，這個(gè)功能我沒(méi)有使用需求，其他用戶(hù)也應(yīng)該沒(méi)有使用需求可以刪除。如果這時(shí)候有一份客觀(guān)的使用分析數(shù)據(jù)就知道用戶(hù)到底有沒(méi)有這個(gè)需求了。雖然我們不可能全部都需要客觀(guān)數(shù)據(jù)去做支持，但起碼能以客觀(guān)數(shù)據(jù)為基礎(chǔ)再延伸到其他設(shè)計(jì)中。

下面我們從幾個(gè)方面來(lái)分析網(wǎng)易網(wǎng)站的設(shè)計(jì)思想：

一、架構(gòu)

1、網(wǎng)站首頁(yè)是兵家必爭(zhēng)之地，每個(gè)頻道負(fù)責(zé)人都想在顯眼的位置推薦自己的產(chǎn)品或者資訊來(lái)增加曝光率，總是希望把所有東西一下子讓用戶(hù)看到，但最后我們就發(fā)現(xiàn)你放的東西越多，用戶(hù)就根本找不到他想要的東西，快速離開(kāi)的可能性很大。在國(guó)內(nèi)的門(mén)戶(hù)網(wǎng)站都習(xí)慣了資訊多、頁(yè)面長(zhǎng)，什么都往首頁(yè)堆，感覺(jué)內(nèi)容越多會(huì)顯的越大氣，但用戶(hù)的耐性是有限的，所以網(wǎng)頁(yè)的通透性對(duì)國(guó)內(nèi)網(wǎng)站很重要，每一屏的架構(gòu)變化不宜太多，適當(dāng)就好，主次內(nèi)容信息位置保持一致性，不然用戶(hù)每瀏覽到下一屏都需要重新去解讀架構(gòu)，思考該從那里開(kāi)始閱讀，不但用戶(hù)的耐性被消耗掉還會(huì)增加用戶(hù)的瀏覽成本，所以網(wǎng)站首頁(yè)的架構(gòu)必須清晰明了，保持較好的通透性，減少用戶(hù)的瀏覽成本。

例如網(wǎng)易首頁(yè)，采用三欄式結(jié)構(gòu)，左欄為導(dǎo)航推薦區(qū)提供網(wǎng)易特色產(chǎn)品入口，中欄為主要資訊區(qū)，提供快速、全面、動(dòng)態(tài)的各類(lèi)新聞資訊，右欄為特色欄目區(qū)如博客、論壇等。各欄的內(nèi)容屬性清晰，用戶(hù)能快速找到他們需要的信息暢順的瀏覽不需要多余的思考。

據(jù)研究分析用戶(hù)瀏覽網(wǎng)頁(yè)的視覺(jué)一般是從左到右、從上至下的一個(gè)瀏覽習(xí)慣。網(wǎng)易網(wǎng)站的架構(gòu)也在往這個(gè)方向改進(jìn)，不斷的提升用戶(hù)體驗(yàn)。網(wǎng)易資訊類(lèi)頁(yè)面大致可分為3類(lèi)架構(gòu)，下圖是3類(lèi)架構(gòu)的視覺(jué)走向圖。

網(wǎng)易首頁(yè)采用第一種架構(gòu)，各頻道首頁(yè)例如新聞、體育、娛樂(lè)等采用第二種架構(gòu)，新聞最終頁(yè)采用第三種架構(gòu)。這樣可使用戶(hù)保持統(tǒng)一的視覺(jué)走向，無(wú)論瀏覽那個(gè)頁(yè)面用戶(hù)都知道他們需要的資訊在那里，符合用戶(hù)瀏覽網(wǎng)頁(yè)的習(xí)慣，減少用戶(hù)瀏覽成本。

二、風(fēng)格

相信多數(shù)人都很喜歡apple的產(chǎn)品，為什么apple的產(chǎn)品那么受大眾歡迎，除了品牌影響力外，時(shí)尚簡(jiǎn)單的外觀(guān)設(shè)計(jì)和界面設(shè)計(jì)，也是受歡迎的其中原因之一，在apple的產(chǎn)品設(shè)計(jì)中讓人感覺(jué)沒(méi)有多余的東西，每一根線(xiàn)存在都是有意義的。還有在中國(guó)的書(shū)畫(huà)史上，有很多藝術(shù)境界高遠(yuǎn)的作品都是少費(fèi)筆墨卻格外傳神（如鄭燮的竹石、齊翁的墨蝦）。雖然網(wǎng)站設(shè)計(jì)不能稱(chēng)作為一件藝術(shù)創(chuàng)作，但用最少的元素設(shè)計(jì)出最好的作品這個(gè)也是網(wǎng)站設(shè)計(jì)中所追求目標(biāo)之一。

能用一根線(xiàn)表現(xiàn)出效果就沒(méi)有必要使用2根線(xiàn)，能用文字表示清楚的就不需要用圖片。頁(yè)面設(shè)計(jì)如果使用過(guò)多裝飾元素，會(huì)造成頁(yè)面龐大下載速度緩慢，不要高估網(wǎng)民的耐性，大部分網(wǎng)民都是沒(méi)有耐性的。瀏覽大量信息的時(shí)候需要一個(gè)簡(jiǎn)潔無(wú)阻礙的界面，過(guò)多的色彩和裝飾反而會(huì)分散用戶(hù)的注意力，影響到用戶(hù)瀏覽效果和減少對(duì)資訊的點(diǎn)擊。網(wǎng)站需要用戶(hù)看到的是網(wǎng)站提供的信息內(nèi)容和服務(wù)而不是花俏的裝飾（個(gè)性產(chǎn)品網(wǎng)站除外）。這也是網(wǎng)易門(mén)戶(hù)一直沿用簡(jiǎn)潔風(fēng)格原因之一。

例如新改版的網(wǎng)易新聞，打破了以往條條框框的感覺(jué)，取消了多余的線(xiàn)框，界面更清晰簡(jiǎn)潔，資訊內(nèi)容更突出。

列舉2個(gè)簡(jiǎn)潔風(fēng)格做的比較好的外國(guó)門(mén)戶(hù)網(wǎng)站：

Yaho新聞使用的是立體效果的設(shè)計(jì)，time是以線(xiàn)條為主的設(shè)計(jì)，2者給人感覺(jué)是簡(jiǎn)潔清晰沒(méi)有多余的東西，既突出了資訊內(nèi)容又不失美感。

每個(gè)門(mén)戶(hù)網(wǎng)站的面向受眾都不同，也會(huì)造成門(mén)戶(hù)網(wǎng)站的風(fēng)格定位不一樣，例如面向受眾年齡層比較年輕的門(mén)戶(hù)網(wǎng)站，在設(shè)計(jì)風(fēng)格可能會(huì)偏向多色彩多功能，而面向受眾年齡層較大的門(mén)戶(hù)網(wǎng)站，在設(shè)計(jì)風(fēng)格上就會(huì)相反。但不管怎樣的設(shè)計(jì)風(fēng)格保持清晰方便用戶(hù)瀏覽的界面是必要的。

三、信息排布

門(mén)戶(hù)網(wǎng)站首頁(yè)一般都會(huì)承載大量的資訊信息，密密麻麻的信息會(huì)讓用戶(hù)瀏覽網(wǎng)頁(yè)的時(shí)候會(huì)產(chǎn)生壓迫感，如何能讓用戶(hù)順暢的瀏覽成為設(shè)計(jì)中重要的一環(huán)。

大家可以對(duì)比下面2張信息排布圖，信息條數(shù)都是相同的但第一張信息排布圖會(huì)讓人感覺(jué)信息很清晰。而第2張圖會(huì)讓用戶(hù)感覺(jué)到信息排布有壓迫感，可能還沒(méi)有開(kāi)始閱讀就已經(jīng)沒(méi)有耐性了（忠誠(chéng)度非常高的用戶(hù)例外，但這類(lèi)用戶(hù)畢竟比較少）。所以在信息排布的時(shí)候到達(dá)一定行數(shù)時(shí)需要用一些留空做到視覺(jué)隔離，讓視覺(jué)上有透氣的感覺(jué)。

四、視覺(jué)順序 

每天的新聞會(huì)有重點(diǎn)和非重點(diǎn)之分，有新和舊之分（舊只是相對(duì)），大部分用戶(hù)是希望先看最重要的后看非重要的，先看新的后看舊的這樣一個(gè)順序，那網(wǎng)站設(shè)計(jì)師就需要在視覺(jué)設(shè)計(jì)上引導(dǎo)用戶(hù)去瀏覽，如下圖示：

在一個(gè)信息版塊里，會(huì)有第一視覺(jué)區(qū)、第二視覺(jué)區(qū)、第三視覺(jué)區(qū)，就是說(shuō)當(dāng)用戶(hù)看到這一信息版塊時(shí)第一眼會(huì)落到圖片的位置，第2眼會(huì)落到大標(biāo)題上，第3眼會(huì)落到其他地方。這樣有順序的引導(dǎo)用戶(hù)瀏覽，可減少用戶(hù)的瀏覽成本，增加頁(yè)面的視覺(jué)效果。在這個(gè)信息版塊里第1視覺(jué)和第2視覺(jué)有可能會(huì)因?yàn)檫x材方面而轉(zhuǎn)換視覺(jué)，按常理圖型視覺(jué)沖擊力是大于文字的，但當(dāng)選用的圖片素材不優(yōu)的時(shí)候也會(huì)被文字所吸引過(guò)去。

五、亮點(diǎn)

在國(guó)內(nèi)的門(mén)戶(hù)網(wǎng)站有資訊多頁(yè)面長(zhǎng)的特點(diǎn)，當(dāng)用戶(hù)瀏覽到頁(yè)面最底部而又需要瀏覽更多資訊的時(shí)候，可能需要拉到最頂部才能點(diǎn)擊導(dǎo)航瀏覽其他頁(yè)面，這是一個(gè)比較費(fèi)力的工程，一般門(mén)戶(hù)網(wǎng)站的做法是提供一個(gè)“返回頂部”的功能，新改版的網(wǎng)易頻道頁(yè)面在這個(gè)位置提供一個(gè)和頭部對(duì)應(yīng)的導(dǎo)航，不需要用戶(hù)二次點(diǎn)擊就能達(dá)到目的。如下圖：

以上從幾方面簡(jiǎn)單分析了網(wǎng)易網(wǎng)首頁(yè)的設(shè)計(jì)思想，相信還存在很多不足的地方，但我們會(huì)不斷的摸索和嘗試，為網(wǎng)友提供一個(gè)人性化的網(wǎng)絡(luò)平臺(tái)而努力。

現(xiàn)階段國(guó)內(nèi)互聯(lián)網(wǎng)行業(yè)和一些發(fā)達(dá)國(guó)家相比確實(shí)還有一段比較遠(yuǎn)的距離，特別是在網(wǎng)站用戶(hù)體驗(yàn)上還處于摸索階段，國(guó)人對(duì)瀏覽網(wǎng)站舒適度需求也在不斷提升，因此提高網(wǎng)站的用戶(hù)體驗(yàn)是網(wǎng)站設(shè)計(jì)未來(lái)發(fā)展的方向。但因?yàn)橛脩?hù)體驗(yàn)是純主觀(guān)的，就帶有一定的不確定因素，個(gè)體差異也決定了每個(gè)用戶(hù)的真實(shí)體驗(yàn)是無(wú)法通過(guò)其他途徑來(lái)完全模擬或再現(xiàn)的。但是對(duì)于一個(gè)界定明確的用戶(hù)群體來(lái)講，其用戶(hù)體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)的實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。