網頁導航設計:讓你的網站導航更紮實更清晰

來源:互聯網
上載者:User

文章描述:Web導航設計二三事。

導航在Web中扮演一個回答使用者"我是誰?""我從哪裡來?""我到哪裡去"的角色。好的導航是一個網站的主要基石。而在開始設計一個網站或者改版一個網頁時,它往往是設計師第一個面臨的挑戰。

01 導航設計之資訊架構

資訊架構決定了導航的定性,在設計之前整理清楚內容的資訊架構,才能最大程度發揮導航的梳理網站結構、有效傳遞資訊功能。網頁結構一共有多少層級關係?是否存在上下層關係?各類別標籤之間的關係是並列關係還是相關聯的?各子級項中是否存在可合并項?等等。要避免單純地按照簡單的邏輯關係,甚至按照業務關係把頁面導航細分到3級甚至4級或者產生出一些和使用者認知不相符的資訊類別。每增加一級導航就增加一個認知維度,每增加一級使得整個導航系統複雜度增加數倍,不僅使用者的操作將成倍的增加,給網頁後期維護的帶來極大的成本。以下兩種圖示,就能清楚地看到相同數量頁面的不同放置方式給使用者帶來不同的體驗。

在web互動設計中存在"3次點擊"的原則,使用者在3次點擊後無法找到想要的資訊或完成某個功能時,便會選擇放棄。所以對於導航來說,最基本的應該是讓使用者知道當前的頁面有哪些內容,並且知道自己的目標內容在哪裡。導航設計的廣度和深度的區別展示,一般來說,廣度比深度的效果要好。在深結構的各層級間選擇更容易迷失方向,甚至可能迷路。但也不要在廣度上鋪的過廣,任何時候把太多內容show出來都會嚇退使用者,讓他們被迫患上了"選擇綜合症"。

為了更明確使用者的認知或者甚至說在設計師面對改版等需求時,有助導航的建立和完善,常用的一個方法是卡片分類法。卡片分類法的進行方式很簡單,首先準備一些大小相同的空白卡片,將資訊寫在不同的卡片上,讓參與人員自行分類,也可有適當的解釋性引導。每次測試的人數最好在2到4個之間,人數過少的話使用者之間不易產生討論,人數過多則會讓討論變得混亂,場面不易控制。這是一種在在網站或其他規劃初期常用的一個測試方法,能從中瞭解真正符合使用者習慣的資訊分類,找到之間的認知差異,作為調整架構的依據。

02 導航設計之互動樣式

Web導航的最重要的作用就是將網站的內容資訊友好地展示給使用者。在確定好網站的資訊架構後,應當按需所取適當的導航樣式。而不是不管三七二十一,都來個tab式導航,覺得沒有個橫樑式的導航都不好意思說自己在做網頁。首先我們瞭解一些常用的導航形式:

1. 分步導航 (Step navigation)通常由文字標籤和箭頭組成,也要伴隨著向後退的連結。適用於環環相扣的頁面流程,如嚮導,支付,線上閱讀等,為一個接一個的頁面提供訪問。

(圖示出自:Google.com 註冊頁面)

2.分頁導航 (Paging navigation)經常出現在搜尋網頁中,一次可展現的結果數目通常有限制,超出限制的結果將在新頁面展現。最簡單的分頁導航就是帶頁碼的分布導航。

(圖示出自:阿里巴巴 我的阿里)

3.麵包屑 (Breadcrumb trail)展示了使用者訪問網站的路線,由一大串的元素和節點群組成。每個節點都與指向先前訪問過的頁面或父級主題相連,節點間以符號分隔,通常是大於符號(>),冒號(:)或者豎線()

(圖示出自:Apple.com)

[1] [2] [3] [4]  下一頁



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。