1.符合用戶的瀏覽習(xí)慣

版塊之間的排序應(yīng)當(dāng)符合用戶的習(xí)慣。用戶瀏覽網(wǎng)頁(yè)通常是從上到下，從左到右，所以排布各個(gè)版塊的時(shí)候應(yīng)該根據(jù)用戶的視線流走向?qū)⒕W(wǎng)站最重要的和最想讓用戶看到部分放在視覺(jué)流的上游，簡(jiǎn)單的來(lái)說(shuō)就是最重要的最先被看見(jiàn)。

如果網(wǎng)站提供社區(qū)服務(wù)和搜索服務(wù)的話，用戶登錄和搜索通常也應(yīng)該在第一屏出現(xiàn)。如果網(wǎng)站并不是以資訊為主，而是以功能性為主，比如提供郵件服務(wù)或者B2C性質(zhì)的網(wǎng)站，那“幫助頁(yè)面”的入口也應(yīng)該被安排在靠近頁(yè)面的頂部。

2.版塊的排布在視覺(jué)上盡量符合縱向分割

在板塊排布的時(shí)候在視覺(jué)上盡量在符合縱向分割，能在縱向上對(duì)齊。避免在縱向上出現(xiàn)犬牙交錯(cuò)的布局，見(jiàn)下圖。當(dāng)然，橫向和縱向都能對(duì)齊那就更好了。但對(duì)于大部分門(mén)戶網(wǎng)站來(lái)說(shuō)比較難。

3.以用戶的角度出發(fā)，將版塊劃分成幾個(gè)獨(dú)立并且連續(xù)的區(qū)域。

從用戶的角度出發(fā)，將版塊按用戶需求劃分成幾個(gè)區(qū)域。每類版塊都占據(jù)一塊獨(dú)立并且連續(xù)的區(qū)域。不同分類的版塊的信息不能混合分布在同一個(gè)區(qū)域。這樣做，可以方便用戶了解整個(gè)網(wǎng)站的主要內(nèi)容和結(jié)構(gòu)；減少用戶在瀏覽網(wǎng)站時(shí)的干擾信息。

以門(mén)戶類網(wǎng)站為例，可以將整個(gè)頁(yè)面劃分成以下板塊：頭部，導(dǎo)航，搜索，分類新聞區(qū)，工具區(qū)，互動(dòng)與社區(qū)，輔助信息區(qū)，商業(yè)信息區(qū)（或者說(shuō)是廣告區(qū)），頁(yè)腳。這幾個(gè)部分。在這個(gè)方面騰訊首頁(yè)做得還是蠻好的。見(jiàn)下圖。

]

頁(yè)面分為三欄。左欄分兩個(gè)區(qū)域：一個(gè)是騰訊的產(chǎn)品區(qū)域，另一個(gè)分類新聞區(qū)域。中欄也分兩個(gè)區(qū)域：一個(gè)區(qū)域包括了推薦內(nèi)容、專題內(nèi)容和博客，另一個(gè)是分類娛樂(lè)和休閑資訊區(qū)域。右欄可以看做廣告和輔助信息區(qū)域。這樣的做的好處是用戶很容易就掌握騰訊網(wǎng)首頁(yè)的結(jié)構(gòu)，尋找他們自己感興趣的信息而，將可能干擾他們的信息噪音減到最少。關(guān)心各種新聞的用戶，在左欄里就可以找到他們自己感興趣的信息。關(guān)心休閑和娛樂(lè)的用戶可以在中欄找到他們想要的。這樣用戶就不用在整個(gè)頁(yè)面中尋找自己需要的信息，而且也最大程度減少?gòu)V告或者其它干擾信息對(duì)用戶的影響。而與之對(duì)比的網(wǎng)易在右欄這塊區(qū)域的版塊排布就不那么清晰了，廣告和內(nèi)容交替出現(xiàn)，給網(wǎng)友的瀏覽帶來(lái)一定的障礙

4.在同一區(qū)域里內(nèi)容相關(guān)的版塊相鄰，或者按照用戶習(xí)慣來(lái)排序。

在同一區(qū)域（同類版塊）中不同內(nèi)容的版塊也需要排序。這里遵循的原則是內(nèi)容相關(guān)的版塊相鄰?；蛘叻嫌脩袅?xí)慣的來(lái)安排版塊間的先后順序。還是用QQ首頁(yè)作為例子。QQ首頁(yè)中許多內(nèi)容都是通過(guò)標(biāo)簽切換的，但相鄰標(biāo)簽的內(nèi)容大部分都是相關(guān)或者符合用戶瀏覽習(xí)慣的。如下圖。

5.根據(jù)用戶的需求來(lái)組織版塊，避免版塊劃分粒度太粗或者太細(xì)。

在組織版塊時(shí)，應(yīng)該從用戶的需求出發(fā)，來(lái)分類各個(gè)版塊。而不是因?yàn)榉诸惗诸?。這樣做通常會(huì)將版塊劃分的太粗或者太細(xì)。這里就這兩種情況各舉一個(gè)例子。

版塊的粒度劃分得太粗

視覺(jué)中國(guó)可以按照“資訊”“競(jìng)賽”“展覽”對(duì)它的信息進(jìn)行劃分。這樣的劃分對(duì)于用戶來(lái)說(shuō)粒度就太粗了。訪問(wèn)視覺(jué)中國(guó)的網(wǎng)站有平面設(shè)計(jì)師，網(wǎng)頁(yè)設(shè)計(jì)師，工業(yè)設(shè)計(jì)師等等。僅僅將信息分類成“資訊”“競(jìng)賽”“展覽”顯然讓用戶承擔(dān)了更多的信息壓力。這時(shí)用戶可能會(huì)抱怨：“我想看動(dòng)畫(huà)設(shè)計(jì)方面的信息，為什么有這么多平面設(shè)計(jì)的信息？”所以按照不同的設(shè)計(jì)門(mén)類來(lái)劃分信息類別，比如：”平面設(shè)計(jì)”,“動(dòng)畫(huà)設(shè)計(jì)”等等，更加方便用戶查找信息。

版塊的粒度劃分得太細(xì)

在做太平洋汽車(chē)網(wǎng)的一個(gè)頻道“國(guó)際新車(chē)”的頁(yè)面改版時(shí)。我發(fā)現(xiàn)原來(lái)的頁(yè)面就出現(xiàn)了因?yàn)榉诸惗诸惖牡膯?wèn)題。在對(duì)發(fā)布新車(chē)的消息的劃分中，有三類：第一類“新車(chē)巨獻(xiàn)”內(nèi)容是官方已經(jīng)正式推出新車(chē)的消息；第二類是“新車(chē)諜報(bào)”內(nèi)容是官方未正式推出該新車(chē)，但民間已經(jīng)有這些車(chē)的一些信息（這些信息通常是被證實(shí)）；第三類是“新車(chē)預(yù)測(cè)”內(nèi)容為一些車(chē)型的預(yù)測(cè)和傳聞（這些信息未被證實(shí)）。首先這樣的分類太過(guò)細(xì)致和復(fù)雜，用戶對(duì)于理解這三塊發(fā)布新車(chē)資訊內(nèi)容的區(qū)別會(huì)有困難（當(dāng)然，這里三個(gè)板塊的標(biāo)題都不太好理解，也是重要的原因）。其次這樣的信息組織結(jié)構(gòu)并不符合用戶對(duì)這類信息的需求。其實(shí)用戶只想知道自己感興趣的車(chē)的信息。而信息本身的可信度完全可以由用戶自己來(lái)判斷。所以這里只需要將新車(chē)發(fā)布信息分為“已經(jīng)正式發(fā)布車(chē)型的消息”和“未發(fā)布車(chē)型的消息”就可以了。這個(gè)頻道的另一個(gè)問(wèn)題是對(duì)信息屬性的劃分太細(xì)。頁(yè)面第二屏的“國(guó)外新車(chē)”版塊是用圖片與文字鏈的形式介紹最新的國(guó)外新車(chē)的資訊。而在頁(yè)面最底端“新車(chē)圖輯”版塊是以圖片的形式來(lái)展示新車(chē)。我覺(jué)得這里有些重復(fù)了?？梢詫蓚€(gè)板塊和并在一起，讓用戶自己去判斷是選址文字信息還是圖片信息。

原文：http://www.novastudio.cn/blog/post/76.html