top of page
person-typing-laptop-keyboard-businessman-working-laptop-he-is-typing-messages-colleagues-

資訊集合

News & Insights

網站架設 — 談網站導航設計

已更新:3月1日

想像一下,一個平常日的上班時間,你現在有個休息的空檔,想起早上逛Facebook看到朋友新買的手提包,覺得好看想上網買。

你經過多次的確認比較,看了色糸、價格等必要資訊,現在你想要購買了,但現在可能有幾個狀況:

1. 你第一時間找不到”購買”的按鈕

2. 剛放入購物車的圖標怎麼消失了

3. 找不到退貨政策說明,如果貨有問題該如何


這一切讓你覺得複雜不順心,於是,你選擇了離開到另一個地方購買。

以上的情況都是你我常遇到的,這就是網站導航的影響:建立良好或差勁的用戶體驗。它會影響流量、轉化率和跳出率。

創建好的網站導航需要不同的面向,從網站的視覺、元素的佈建、文字的使用等,但請記得要讓使用者覺得「簡單」是最關鍵的因素。


以下是11個讓你的網站導航變的更好的方法:

1、規劃導航

2、決定頁面的優先順序

3、堅持使用者慣性

4、一個清楚的菜單

5、限制菜單中的可選項目

6、如果有需要,創建下來式選項的菜單

7、添加搜尋欄位

8、清楚的標示菜單

9、將logo設定連結回首頁

10、指明用戶所在的頁面

11、確保用戶可以訪問至任何頁面


網站導航的類型

雖然網站的內容,設計和結構不同,但你可以從網路上了解一些標準類型的導航菜單,這些規範可以幫助用戶輕鬆地在網站上瀏覽。


菜單在網站標題上:經典常用,顯示在網站每個頁面的頂部。


菜單在網站的側邊欄:可能在左邊或右邊,或者可以大膽地佔據在網頁中間成為不可或缺的一部分。


菜單可能被放在角落或側邊:這是相對較新的網站設計趨勢。


漢堡菜單:雖然這在行動網站設計中經常出現,但這個簡單的三行圖標現在也可以在許多桌面版網站上看到,它提供了一個不會干擾網站設計的最小圖標。


頁腳:頁腳是添加社交媒體鏈接的好地方,也是用戶認為網站的相關鏈接,它也可以重複頁面頂部的導航菜單。


01、規劃導航

要根據需求規劃菜單,請先創建“網站地圖”。網站地圖是您網站的所有主要頁面及其中所有子類別的列表。它應該清楚地表明哪些頁面更重要,哪些更不重要。網站地圖是導航菜單​​的基礎,你可以用流程表或是樹狀圖工具。

例如,如果你要為化妝品品牌創建網站,會先有個首頁,“關於”部分和在線商店。但是,在您的在線商店部分,您可以將其分解為單獨的類別,例如護膚品,美髮產品和暢銷商品。




02.決定頁面的優先順序

在決定層次結構時,請考慮希望引導訪問者如何最好地引導他們通過你的渠道,將其轉換為客戶或粉絲。請考慮訪問者最感興趣的信息,這稱為“主要導航”,應盡可能輕鬆訪問。構成主要導航的所有頁面都應顯示在網站的主菜單中。

即使在您的菜單中,您也會擁有優先級越來越高的頁面。一旦您確定了頁面的優先級,就可以在導航菜單設計中傳達這一點,從而使最關鍵的頁面脫穎而出。這樣做的好方法和一般規則是,菜單上首先或最後出現的項目會引起更多關注,因此您應該放置高優先級頁面。

如果你的網站包含大量信息,你可能還需要輔助導航頁面的附加菜單。這些頁面不太重要,但當然仍需要清晰的導航。次級菜單應該吸引較少的注意力,使用較小的類型,也許對比度較低的顏色。


03.堅持使用者慣性

雖然嘗試打破傳統並創造一個前所未見的設計很誘人,但有時候最好堅持人們已經知道的東西。例如,超連結通常顯示為藍色和下底線,或者為什麼LOGO通常會放置在網站的上方,這是有原因的。存在這些熟悉的細微差別或“設計慣性”,因為它們讓用戶覺得理所當然。

在導航方面,您希望用戶能夠盡可能輕鬆地無縫瀏覽您的網站。即使內容,產品或設計對他們來說都是全新的,他們仍然希望菜單位於標準位置之一 - 頂部角落或網站標題中。

當然,有時你可以擺脫常態。如果它符合您的目的或消息,請嘗試僅執行此操作。了解插畫家和藝術家Rose Blake如何將她Wix網站頂部的標準菜單與插圖形式的菜單相結合,您可以點擊這些菜單來發現她的更多作品。


04.考慮創建一個粘性菜單

粘性菜單(也稱為“固定”或“浮動”菜單)是一個菜單,即使用戶向下滾動網站也會看的到。 這對於資訊頁面多的網站尤其重要,因為您不希望訪問者必須一直向後滾動才能訪問另一個頁面。 但是,還可以選擇添加“返回頂部”按鈕,以幫助用戶節省時間。

要在Wix上創建浮動菜單,您只需轉到編輯器左側的“添加”,然後選擇“菜單”以選擇要使用的菜單樣式。 接下來,右鍵單擊菜單並選擇“Pin to Screen”。




05.限制菜單中的項目數量

沒有人喜歡被信息轟炸。 在瀏覽網頁時,努力保持專注,並且會突然出現所有分心。 保持菜單最小化,最多六個或七個類別。 這樣,用戶將能夠更好地處理信息並更快地到達他們想要的頁面。

如果您的網站包含大量信息,您可以使用下拉菜單將其細分為多個部分。 這意味著當訪問者將鼠標懸停在菜單上的一個項目上時,會出現一個可供他們選擇的子類別列表。


06.如有必要,創建大型下拉菜單

雖然我們建議限制您的菜單項,但如果網站包含大量內容,則並非總是如此。在這種情況下,您可以創建一個大型菜單。一個典型的例子是銷售許多不同產品的電子商務網站。您不希望在菜單中包含所有產品,因為這看起來很混亂。相反,您可以將產品分類,從而實現更有序的瀏覽體驗。例如,如果您有一個健身中心的網站,您的主菜單可能包含一個名為“課程”的項目,其中大型下拉菜單分為子類別,如“健美操”,“拉伸”和“懷孕課程” 。在每個子類別下都是所有特定類別。

為避免混淆或信息過載,您可以使用設計工具在潛在的混亂中創建層次結構。使用排版樣式來使子類別脫穎而出 - 您可以將它們設置為粗體,稍大或不同於其下方文本的顏色。您還可以在它們周圍添加一些額外的空間,以便訪問者了解分離。


07.添加搜索欄

內容繁重的網站的另一個選擇是添加搜索欄。 它可以幫助用戶更快地找到他們想要的東西。 請記住,您的網頁設計需要為關注度越來越低的受眾群體提供服務,讓所有人都能無縫地工作,而不必等待太久。 搜索欄對於瀏覽網頁經驗較少的訪問者也很有用,因為這是一個他們可以立即理解的熟悉概念。

就搜索欄的位置而言,請將其與菜單保持一致。 它應該在您網站的標題中,並且與菜單一樣,當訪問者向下滾動您的網站時,它可以保持固定。


08.清楚地標記菜單

現在您知道哪些項目會出現在您的菜單中,現在是時候決定每個項目的確切措辭和標籤了。 使用您的微複製品(整個網站或應用程序中的一點點文字)非常棒,但您還需要確保您的用戶能夠快速了解您所說的內容。 您的菜單不適合您的措辭或使用行業術語。 相反,文本應該是描述性的,最重要的,最重要的是,清晰。

如果您不完全確定哪種措辭能夠更好地運作,您可以嘗試兩種不同的版本,並通過在您的網站上執行A / B測試來測試它們。


09.將Logo連接回主頁

這是一個常見的網頁設計錯誤,請避免。在您網站的每個頁面頂部添加您的商家Logo,並將其鏈接到主頁,這對於大多數用戶來說非常直觀,因為它堅持網頁設計慣例。通常,徽標顯示在網站標題的左側,但確切的位置會有所不同。最重要的是,您的徽標將顯示在您網站的頂部,非常靠近您的菜單。


10.指出用戶所在的頁面

人們通常不喜歡迷失方向,你的網站也是如此。您可以通過向用戶清楚地了解他們在您網站上的位置來改善您的用戶體驗。有許多不同的方法。

您可以通過將該項目設置為不同的顏色,加下劃線或您可以提出的任何其他不會過多關注的創意選項來指示菜單中的頁面。


11.確保訪問者可以從任何頁面訪問任何頁面

最後一個提示和經驗法則是訪問者應該能夠從任何頁面導航到他們想要的任何頁面。請記住,並非所有人都必須從主頁訪問您的網站。這意味著他們登陸的任何其他頁面都應該連接到您網站的其他部分。

bottom of page