網頁設計師必知的高效導航設計三原則

來源:互聯網
上載者:User

   為網站設計導航就如同為房子打基礎。如果地基不牢靠,再壯觀的設計也無法掩蓋建築結構的潛在風險,其實網站也是如此,如果想讓網站擁有優秀的使用者體驗,良好的轉化率,可觀的銷售額,你需要花費相當的時間去瞭解你的使用者需求,精心設計網站的內容,尋求可靠而直觀有效內容組織體系,而這些東西的外化體現,就是網站的導航設計。

  什麼是導航?

  許多人對於網站導航設計的認知並不統一。有人認為,構成網站導航的是網頁中的焦點元素,它們讓使用者清晰直觀地找到他們想要的東西。同樣的,還有人認為導航設計是一種方法,引導使用者去尋找網站上最重要的資訊,以達到銷售或者查詢等目的。這些說法都沒問題,它們都是導航設計的一部分。

  和設計領域的許多東西一樣,導航設計並沒有一個統一一致的“官方”的設計方法,或者說法,每個網站由於其目標、需求、設計手法、運營等諸多因素導致它們在導航設計上千差萬別,但是在最基本的設計思路和組織圖上,導航設計還是有基本的規律和原則,確保組織架構可靠,降低失敗的機率。

  70percentpure 使用了最簡單常見的垂直和水平導航來引導使用者。

  1、首先確定資訊架構

  規劃一個大型網站,規劃好內容是進行導航設計之前的第一要務。而我們此處所說的資訊架構(IA,Information Architecture),是合理的組織資訊的展現形式,支撐起網站內容的骨架。資訊架構的主要任務是為資訊與使用者認知之間構建一座暢通的橋樑。

  從更高的位置來看待網站內容有助於資訊架構的搭建。更重要的是,你得學會從使用者的角度來看待網站內容。這也就意味著,有的時候你得站在正反兩個位置來看待同一個東西,不同視角下你會發現有的內容的呈現方式非常反人類。你可以通過下面的問題來完善整個架構:

  ·哪些頁面是這個網站必不可少的?

  ·從宏觀架構上來看是否每個頁面都有其獨立的目的,它們的存在是否影響整體的連續性和可靠性?

  ·有哪些內容是需要在將來持續提供並更新的?

  ·網站所需要涉及到的使用者群有哪些?(登入使用者、訂閱使用者、廣告商等等)

  ·針對每種使用者,網站所要達成的目標是什麼?

  思考這些問題能夠協助你更好的完善網站的資訊架構,為導航設計做好準備。

  2、保持簡單

  絕大多數的網站瀏覽者可能會一致的認同這一點:網站的導航地區要儘可能設計的簡單。的確,複雜而擁擠的導覽列設計會嚴重阻礙網站的整體可用性。

  彭博的網站就是這樣做的,用簡單的導覽列設計來掩蓋網站的複雜性。

  然而,簡單的設計還是具有詐騙。使用者在隨後的操作中會發現複雜的資訊被以一種看起來簡單的方式封裝了起來。這就是資訊架構的作用。

  以微軟的首頁為例,網站的導覽列被劃分成四個項目,考慮到微軟龐大的產品線,這幾乎已經被簡化到了極致。也正是因此,每個項目的下拉式功能表都被巧妙地分割成為幾段,這樣一來,導航的層級就清晰了,使用者可以更快地找到他們想要的東西,而微軟也可以將複雜多樣的產品和服務,整合到一個看似簡單的導覽列裡面。

  類似迷你站的子頁面中,導覽列也沿用了相同的設計。菜單的設定乍一看和首頁很相似,實際上設計者加入了更多細節,更有針對性的功能和服務。

  總的來說,這樣的導覽列設計更加易用了,在保持一致的前提下,也具備更好的預測性。考慮到微軟的產品體量,產品所需的頁面數,微軟官網的設計很明顯是耗費了大量時間反覆式開發法的產物,殊為不易。官網在這樣的組織架構之下,不僅讓使用者的體驗更好了,而且對於微軟而言也更加便於管理內容。這不僅保持簡單,也簡化了複雜。

  3、謹慎選擇方向

  傳統意義上的電腦螢幕方向是橫向的,這也使得縱向下拉式功能表,在很長的一段時間裡面成為了導覽列設計的主流方向。這樣的設計,平衡且少幹擾,從設計的角度上來看是不錯的選擇。

  作為虛擬現實裝置製造商的Oculus,將導航設計成為橫向的非常符合他們的裝置的自然邏輯。

  但是橫向的導航並不一定符合所有的網站的需求,這也是為什麼你會看到那麼多縱嚮導航的網站,尤其是在電商領域。彩色的標籤被用來標識不同的品類,縱向的導航設計,與現實世界中的導購圖冊暗合。這樣的導航符合多品類,多內容的資訊架構,橫嚮導航用在此處會因為品類和文字內容而產生混亂。

  一個良好的垂直方向的導航,要設計好並非易事,尤其是當你的網站內容非常多的時候。Jack Jones 的網站是一個很好的學習對象。

  網站導航中的小表徵圖擁有不錯的可讀性,簡單的形狀包含了可觀的資訊,整齊而有力。每點擊一個類別,菜單展開,顯示子類,邏輯清晰。

  當然,你還可以在Squarepusher 的網站看到相對不同尋常一些的縱向菜單設計。導航被設計成標籤頁,訪客可以通過滾動切換,這是一種更為線性導覽列設計。

  結語:規則正在改變

  新工藝新技術的不斷湧現,使得新的設計趨勢和新的挑戰源源不斷呈現在我們面前。響應式網頁設計使得案頭上傳統的橫嚮導航在移動端呈現的時候,更多是以縱嚮導航的形式表現出來。導航的設計不再被固定的方案所束縛,多種多樣的表現手法都可以產生不俗的效果。但是,設計和測試的迭代方法,最好還是圍繞著網站轉化率和統計資料來進行。

  作為驅動網站發展的引擎,導航設計的好壞是可預計的,精心布置又簡單一致的。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。