|
1.符合用戶的瀏覽習(xí)慣
版塊之間的排序應(yīng)當(dāng)符合用戶的習(xí)慣。用戶瀏覽網(wǎng)頁通常是從上到下，從左到右，所以排布各個(gè)版塊的時(shí)候應(yīng)該根據(jù)用戶的視線流走向?qū)⒕W(wǎng)站最重要的和最想讓用戶看到部分放在視覺流的上游，簡(jiǎn)單的來說就是最重要的最先被看見。
如果網(wǎng)站提供社區(qū)服務(wù)和搜索服務(wù)的話，用戶登錄和搜索通常也應(yīng)該在第一屏出現(xiàn)。如果網(wǎng)站并不是以資訊為主，而是以功能性為主，比如提供郵件服務(wù)或者B2C性質(zhì)的網(wǎng)站，那“幫助頁面”的入口也應(yīng)該被安排在靠近頁面的頂部。
2.版塊的排布在視覺上盡量符合縱向分割
在板塊排布的時(shí)候在視覺上盡量在符合縱向分割，能在縱向上對(duì)齊。避免在縱向上出現(xiàn)犬牙交錯(cuò)的布局，見下圖。當(dāng)然，橫向和縱向都能對(duì)齊那就更好了。但對(duì)于大部分門戶網(wǎng)站來說比較難。
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í)的干擾信息。
以門戶類網(wǎng)站為例，可以將整個(gè)頁面劃分成以下板塊：頭部，導(dǎo)航，搜索，分類新聞區(qū)，工具區(qū)，互動(dòng)與社區(qū)，輔助信息區(qū)，商業(yè)信息區(qū)（或者說是廣告區(qū)），頁腳。這幾個(gè)部分。在這個(gè)方面騰訊首頁做得還是蠻好的。見下圖。
]
頁面分為三欄。左欄分兩個(gè)區(qū)域：一個(gè)是騰訊的產(chǎn)品區(qū)域，另一個(gè)分類新聞區(qū)域。中欄也分兩個(gè)區(qū)域：一個(gè)區(qū)域包括了推薦內(nèi)容、專題內(nèi)容和博客，另一個(gè)是分類娛樂和休閑資訊區(qū)域。右欄可以看做廣告和輔助信息區(qū)域。這樣的做的好處是用戶很容易就掌握騰訊網(wǎng)首頁的結(jié)構(gòu)，尋找他們自己感興趣的信息而，將可能干擾他們的信息噪音減到最少。關(guān)心各種新聞的用戶，在左欄里就可以找到他們自己感興趣的信息。關(guān)心休閑和娛樂的用戶可以在中欄找到他們想要的。這樣用戶就不用在整個(gè)頁面中尋找自己需要的信息，而且也最大程度減少廣告或者其它干擾信息對(duì)用戶的影響。而與之對(duì)比的網(wǎng)易在右欄這塊區(qū)域的版塊排布就不那么清晰了，廣告和內(nèi)容交替出現(xiàn)，給網(wǎng)友的瀏覽帶來一定的障礙
4.在同一區(qū)域里內(nèi)容相關(guān)的版塊相鄰，或者按照用戶習(xí)慣來排序。
在同一區(qū)域（同類版塊）中不同內(nèi)容的版塊也需要排序。這里遵循的原則是內(nèi)容相關(guān)的版塊相鄰。或者符合用戶習(xí)慣的來安排版塊間的先后順序。還是用QQ首頁作為例子。QQ首頁中許多內(nèi)容都是通過標(biāo)簽切換的，但相鄰標(biāo)簽的內(nèi)容大部分都是相關(guān)或者符合用戶瀏覽習(xí)慣的。如下圖。
5.根據(jù)用戶的需求來組織版塊，避免版塊劃分粒度太粗或者太細(xì)。
在組織版塊時(shí)，應(yīng)該從用戶的需求出發(fā)，來分類各個(gè)版塊。而不是因?yàn)榉诸惗诸悺＿@樣做通常會(huì)將版塊劃分的太粗或者太細(xì)。這里就這兩種情況各舉一個(gè)例子。
版塊的粒度劃分得太粗
視覺中國可以按照“資訊”“競(jìng)賽”“展覽”對(duì)它的信息進(jìn)行劃分。這樣的劃分對(duì)于用戶來說粒度就太粗了。訪問視覺中國的網(wǎng)站有平面設(shè)計(jì)師，網(wǎng)頁設(shè)計(jì)師，工業(yè)設(shè)計(jì)師等等。僅僅將信息分類成“資訊”“競(jìng)賽”“展覽”顯然讓用戶承擔(dān)了更多的信息壓力。這時(shí)用戶可能會(huì)抱怨：“我想看動(dòng)畫設(shè)計(jì)方面的信息，為什么有這么多平面設(shè)計(jì)的信息？”所以按照不同的設(shè)計(jì)門類來劃分信息類別，比如：”平面設(shè)計(jì)”,“動(dòng)畫設(shè)計(jì)”等等，更加方便用戶查找信息。
版塊的粒度劃分得太細(xì)
在做太平洋汽車網(wǎng)的一個(gè)頻道“國際新車”的頁面改版時(shí)。我發(fā)現(xiàn)原來的頁面就出現(xiàn)了因?yàn)榉诸惗诸惖牡膯栴}。在對(duì)發(fā)布新車的消息的劃分中，有三類：第一類“新車巨獻(xiàn)”內(nèi)容是官方已經(jīng)正式推出新車的消息；第二類是“新車諜報(bào)”內(nèi)容是官方未正式推出該新車，但民間已經(jīng)有這些車的一些信息（這些信息通常是被證實(shí)）；第三類是“新車預(yù)測(cè)”內(nèi)容為一些車型的預(yù)測(cè)和傳聞（這些信息未被證實(shí)）。首先這樣的分類太過細(xì)致和復(fù)雜，用戶對(duì)于理解這三塊發(fā)布新車資訊內(nèi)容的區(qū)別會(huì)有困難（當(dāng)然，這里三個(gè)板塊的標(biāo)題都不太好理解，也是重要的原因）。其次這樣的信息組織結(jié)構(gòu)并不符合用戶對(duì)這類信息的需求。其實(shí)用戶只想知道自己感興趣的車的信息。而信息本身的可信度完全可以由用戶自己來判斷。所以這里只需要將新車發(fā)布信息分為“已經(jīng)正式發(fā)布車型的消息”和“未發(fā)布車型的消息”就可以了。這個(gè)頻道的另一個(gè)問題是對(duì)信息屬性的劃分太細(xì)。頁面第二屏的“國外新車”版塊是用圖片與文字鏈的形式介紹最新的國外新車的資訊。而在頁面最底端“新車圖輯”版塊是以圖片的形式來展示新車。我覺得這里有些重復(fù)了?？梢詫蓚€(gè)板塊和并在一起，讓用戶自己去判斷是選址文字信息還是圖片信息。
|
