關於網站主選單的四種類型｜關於那個三條線按鈕

前言

模組類型的網站做久了，在初期規劃客製類型的網站時，有時候我會有點卡住。

不想做得太過制式，但又擔心自己會做出中看不中用的畫面。

這時候除了大量去看資料之外，好好把找到的資料消化也很重要。

本篇文章針對「網站主選單」做了一些類型整理，希望能帶來些幫助。

在和專案經理討論完產業特性、功能內容、設計風格之後，設計師和專案經理對於「網站目標」應會有個基本的共識：

1. 列出最重要的內容或功能，確定哪些項目必須放在「好找或顯眼」的位置。確保在簡潔的設計下，還能讓人一眼就能理解每個項目所代表的內容，會是這段時間要好好考量與討論的。

2. 建立內容層級和邏輯結構，依照功能規格書與第一點的討論，設計師要在執行設計前，思考並規劃主選單的呈現。比如次要內容或分類，是否另外要用下拉選單呈現？選單項目的排列是否依照重要性安排順序？我們都知道主選單的項目數量不該過多(7~8個其實就已是極限)，過多的選項會讓用戶感到困惑，也會讓畫面過於雜亂。

3. 思考網站未來的擴展性。客戶之後是否還會另外新增功能？若這個問題是個未知數，那就需要將這件事情一併考量。比如未來可能新增文章單元、追加搜尋列或篩選器，在這階段若能有這樣的預留規劃，真的碰上時，就比較不會遇到設計大風吹的狀況。

在有了前面的討論與方向之後，那就來看看主選單的類型有哪些吧。

一、網站橫幅選單（Horizontal Menu）

橫幅選單通常位於網頁的頂部或底部，橫向排列，從左到右閱讀方式。

這種類型的選單很常見，大部分人也習慣這樣的配置，尤其在一頁式網站會更常看到，橫幅選單百搭且萬用，可以說是經典不敗款，適合頁面項目較少的網站，能夠很直觀地展示主要資訊，在沒有過多的選項打擾的情況下，能簡潔明了地呈現網站內容。

在這種經典配置下，就比較適合橫向的LOGO與標準字，方格子也是用橫向的標準字放於左上角，在高度有限制的情況下，不太適合正方形的款式，或者，需要像以下網站一樣另外規劃選單的呈現樣式：

◆ 橫幅選單變化 - 放在頂端 - LOGO左上破格

◆ 橫幅選單變化 - 放在頂端 - LOGO置中

◆ 橫幅選單變化 - 放在底部 - LOGO移出選單

◆ 搭配下拉選單（Scroll Down Menu）

當選單項目過多時，依照我們在前言講的討論階段，可能會發展成「橫幅選單再加上下拉選單」的做法，這能大幅降低過多資訊所帶來的問題，也是人們早已習慣的經典操作配置。

依照內頁項目的分類層級所規畫出的下拉選單，呈現方式就更多元了。

這種下拉選單的設計能節省大量空間，並保留增減內容的彈性。

良好的層級配置，能輕鬆引導人們找到想要查看的內容。

◆ 多層下拉選單

但要留意過於複雜(多層級)的下拉選單，若沒有將層級間距處理好，很容易會讓人產生困惑與很難使用、不好找東西的印象喔。

二、漢堡選單（Hamburger Menu）

這個選單款式一定不陌生，但大多數人應該都直接稱呼它為「最上面那個三條線」，但它其實有著「漢堡選單」這個可愛的名稱。

通常會由三條水平線組成的圖標，形狀就像是一個漢堡的側面圖——上面和下面是麵包，中間則代表漢堡餡料，也被稱作是「隱藏選單」、「摺疊選單」，這個最早是由 Norm Cox 在1980年代為Xerox的"Star"所設計，並在之後被廣泛應用，點擊後會展開整個選單項目。

它能夠在不佔用太多空間的情況下，清楚引導人們查看選單位置，在響應式網站設計中早已是大家都習慣的必備元素，不管電腦版如何規劃，在手機版都必定會使用它。

◆ 加上MENU字樣的漢堡選單

◆ 加上MENU字樣的漢堡選單

◆ 點選漢堡選單後，變成打X的效果

三、側邊選單（Side Menu）

當客戶想要有些與眾不同時，偶爾會選擇側邊選單款式。

在畫面上的側邊選單會被像被釘住一樣，在左側或右側出現，它可以是固定的或者滑動式的，這種類型的選單常見於網站的二級導航或附加選項中(經常使用於點選橫幅選單後，在內頁側邊出現)，但現在也有不少網站，以側邊選單當作主選單的樣式。

四、混合式選單（Mega Menu）

顧名思義，就是將以上多種類型結合在一起的選單外觀。

比如橫幅+漢堡選單，或者前面已有提到的橫幅+下拉選單，通常在這種配置下，客戶會有大量內容需要整理與規劃，多列、多層的操作選單，適合內容豐富的大型網站。

◆ 橫幅選單+下拉選單+漢堡選單

◆ 特殊的邊框固定選單

結尾

網站主選單的配置方式，對網站整體結構、使用者體驗至關重要。

若說網址是網站的門牌號碼，那主選單就像是抵達目的地之後，進門的第一眼路標，指引人們探索這個物件。

良好的主選單設計可以大大提高使用者的滿意度與舒適度，好用又好閱讀的版面，能增加使用者停留在網站的時間，除了讓使用者方便找到想看的項目，設計師也需要思考——要如何讓使用者能看見「業主期望被看到」的內容。

希望這篇文章能提供一些設計想法，若有想補充或寫錯的地方歡迎留言~

一起做出好看又實用的商業網站吧！

※本文所使用的截圖僅為設計分析和示意用途，無商業使用意圖。

※如有侵權或您不希望被展示於文章內，請與我聯繫，我會立即移除相關內容，謝謝。