網站建設

  網頁優化

 當前位置: 首頁 > 網頁設計> 瀏覽正文
信息架構之Web導航設計分類
 文章出處:茂名網站建設  作者:茂名網站建設  時間:2011年01月22日

  

開始之前先做個小的知識普及,老鳥請忽視:

信息架構(information architecture),簡稱IA,wiki給出了以下定義:信息架構是在信息環境中,影響系統組織、導覽、及分類標簽的組合結構。

通俗一點的講,信息架構就是合理的組織信息的展現形式。例如一個電子相冊,注冊的時候需要體現怎樣的說明,單張相片,一個相冊集,整個相冊的內容以及它們之間是怎樣的關系。而所謂信息,門戶站中的每一篇文章、B2C站中每一件商品、圖片分享站中每一張照片….這些都是基本的信息構成元素,即信息元。

下面切入正題

網站導航算是互聯網產品中應用最廣泛的應用之一,他們的作用看起來無非就是帶你從一個頁面前往其他頁面。不過相信大家和我一樣會遇到這樣的情形,點擊一個連接后結果讓你大吃一驚,這并不是你想要的頁面,甚至會讓你莫名其妙…導航看起來簡單,卻是產品設計中最復雜最繁瑣的一部分。在我們探討導航設計之前,先明確導航設計的目的:幫助用戶尋找信息。

用戶查找信息的四種方法

訪問者使用網站就是為了尋找信息,當他們看到導航系統時,無非是想更快找到消費的內容或者完成即時的任務。而一個優秀的導航系統將是幫助用戶快速完成任務的重要途徑。交互設計專家Donna Spencer曾經撰文《Four Modes of Seeking Information and How to Design for Them》指出了用戶查找信息的四種方法:

1、 已知項搜索:

當用戶明確知道他們要查找的信息時,他們會使用搜索工具,但是并非所有網站都會提供站內搜索功能,而這時就必須依靠導航幫助他們到達他們想去的地方。(Ps:艾瑞報告曾經指出相較于別的網站,購物網站的站內搜索功能使用率最高,這點值得電子商務網站的PM注意)

2、探測搜尋

用戶可能有一個需求,但是并不能確定什么能滿足這個需求,這時候他們會進行探測性搜尋。例如:我想買一款3000-5000的初級單反相機,我知道佳能EOS 500D差不多這個價位,但是同事又告訴我尼康 D5000 和尼康 D3000 也不錯,這個時候我可能會對三款相機進行篩選,以確定真正的需求。

3、不清楚需要什么

這個情況還可以細分出以下兩種狀態:A、對于很多娛樂性網站的使用者,他們來的這個網站可能僅僅是為了消耗工作時間中的無聊時段或者打發午休時間,他們漫無目標的來的這些網站,只是隨便點擊某些頁面。B、我想買一款單反相機,但是在逛蜂鳥網時候發現一些單反相機使用技巧的內容真正引起了我的興趣,于是我將信息查找重點放在了解更多的相機基礎使用技巧。

4、再查找

人們可能會返回尋找某些他們已經瀏覽過的東西,雖然有瀏覽器書簽、歷史記錄等可以幫忙,不過作為網站設計中,我們有必要為用戶提供更多的選擇途徑以滿足其需求。

明確了用戶查找信息的基本方法后,我們可以開始探討一些基本的導航工具了。
常見導航分類

1、結構導航,又分為全局導航和局部導航。結構導航主要幫助用戶在web網站的組織結構中導航。

圖1:Flickr的全局導航
 

圖2:Flickr的局部導航

圖1、2分布展示了Flickr的全局導航和局部導航,一般的網站設計者會將網站的最重要的內容放在全局導航,這往往是網站的頂層類別。局部導航會將你帶到網站層次結構中臨近你所在位置的層次。結構導航對于已知項搜索和探測性搜尋尤為重要,對于“不清楚需要什么”的那類用戶也會幫助很大。

2、關聯導航,幫助用戶更快的尋找到相關信息。

關聯導航將一個頁面與包含該類信息的其他頁面進行關聯。這樣可以幫助用戶深入瀏覽相關信息,降低用戶的探尋成本。關聯導航特別適合探測搜尋,并且會幫助用戶驚喜的發現某些他們“并不知道”卻又興趣十足的內容。關聯導航主要按照以下形式進行信息組織:按時間、按類型、按主題、按興趣、按所在組…

圖3:百度的相關搜索

搜索引擎一般會列出除“搜索詞”以外的類似內容,方便用戶進行查找。

圖4:某數碼垂直門戶的側欄推薦
 

圖四顯示了電子商務網站常見的關聯產品推薦形式“喜歡該商品的用戶還喜歡xx”和類似產品排行。這種靠關鍵詞進行匹配和“約束條件”進行推薦的內容往往可以在很大程度上加強用戶的“瀏覽深度”,從而增加網站PV。

圖5:Flickr的tags

Tag(標簽),作為國外網站上最常見的一個運用對于相關內容的瀏覽具有很強的引導性。國內用戶對于標簽的使用比率并不高,當然國內產品設計師們對于tag使用的探索卻一直未停止如被很多交互設計師所喜愛的標簽云形式,如下所示:

3、可用性導航,補充不適宜組織在結構導航和關聯導航中但又不可或缺的信息。可用性導航實現了頁面與幫助訪問者使用網站本身的特性之間的關聯,這包括登錄、用戶信息等特性。主要內容組織以外的所有內容都可歸入可用性導航。James kalbach 給出了可用性導航的準確定義:

可用性導航將根據和特性相連接,這些特性可以幫助訪問者使用網站。

圖6:flickr的可用性導航

Flickr的可用性導航將用戶信息、購物車、站內信、幫助、退出放置在此,以方便用戶更快的使用和熟悉網站。

可用性導航有一個慣例,它們總是占據頁面右上方。通常,可用性導航在那里是因為導航系統的其余部分占據了頁面上方和左側的位置。頁面右上方雖然不起眼但依舊可以輕松訪問。

圖7:導航布局示意

不知不覺已經寫了這么多內容,今天只是對導航設計進行了一個簡單的分類,接下去會針對每種分類進行一些簡單的探索,以拋磚引玉。

網頁設計公司茂名網絡公司茂名網站建設茂名網頁設計茂名做網站公司IDC模板東莞攝影設計茂名網站制作公司電白網站建設
高端網站建設茂港網站建設信宜網站建設水東網站建設高州網站建設化州網站建設糯米飯網絡茂名電腦維修茂名做網站
南京設計公司電白網頁制作廣州網站推廣微商城廣州微信開發點擊申請點擊申請點擊申請點擊申請
Powered by:茂名非常網絡科技有限公司 | 聯系電話: 15813055002 [ 茂名網站建設 | 茂名網頁設計 | 茂名做網站 | 茂名建網站 ]
收縮
江苏时时彩计划软件