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