導覽列(Navigation)是每個網站必要且重要的元件，當使用者進到網頁想馬上找尋想要的資訊，好的導覽列設計能最快速、最有效率的引導使用者，減少使用者找尋資訊的煩躁感。

導覽列的類型

這邊將導覽列分類成三種來討論：

1. 都在上面型，在最上方將連結列成一排
   這應該是蠻常見的方式，將主要的連結選項放在上面一目瞭然，而點進商品列表中，可考慮在側邊設計更細的分類選項，還有將列表的篩選功能放置在這邊，這邊建議超過5項連結導致畫面太擠就可以考慮下一種模式喔！
   適合商品數量較少、較專一的電商。

2. 放在旁邊型，在側邊展開或是側邊某區塊，直行排列各式連結
   這樣的方式因為能垂直排列，較能夠展示更多的頁面連結，再分成兩種：

   • 導覽列可能放幾個功能，旁邊放個側邊展開的漢堡選單
     用在想讓畫面更多留白更有空間感的設計，或是連結數量在上排已經放不下的情況，而各類型手機版也應換成這樣的模式。這邊也能設計各連結點擊有下一層的分類，讓導覽列有細項分類但又能省空間。
     手機版當然適用，電腦上則適合較多連結頁面的網站，或是特別想著重畫面中央區塊的設計。

   • 一進網頁就在側邊
     這樣的方式能馬上看到有哪些商品群，因容納大量分類、大量產品，也或許點擊時能展開該選項更深的分類，這樣的形式適合什麼都賣的電商網站。
     適合商品數量較多、較多元的電商。

3. 一鍵觸發型，按下選單按鈕，將跳出整個畫面的導覽選項
   這是一個比較特別且算少見的模式，但因為選單展開成全畫面，優點在於彈性設計容納少至多的選項排列。若放較少的物件可以呈現大塊留白展現質感；而多物件的排列上，可以有較詳細的說明，或是直接將常用功能放進來（例如購物車畫面）。
   適合...想用這種設計的人！

導覽列常見的物件

放在導覽列通常是重要的商品總覽、資訊、功能等等

1. 商標Logo
   常以Logo作為連結，點擊可以回到首頁。
2. 商品分類
   依需求列出幾項連結，比如：最新商品、商品列表、熱銷...等等頁面
3. 資訊項目
   依相關功能性提供顧客重要資訊，可能關於品牌、關於店家。
   比如：販賣衣服提供尺寸比例圖、運送QA。
4. 購物車
   通常是快速瀏覽當前購物車的內容物、總金額等資訊，另外附上前往結賬的按鈕。
5. 搜尋
   讓使用者能搜尋商品。
6. 會員專區
   點擊至登入頁面，登入完成後，登入按鈕可設計換成會員相關資訊，或是改為“登出”按鈕。

補充：頁尾footer

相對於導覽列，頁尾可以說是網頁地下下方的導覽列，因為這個區域較不易被看到，最主要的功能是使用者瀏覽到網站到底時，有各式連結可以快速轉換頁面，所以這部分可以因店家而異，放上各種細項連結，這邊建議幾項常見的物件：

1. 訂閱電子報的email輸入框
   如果有電子報的服務，直接在這邊輸入email就能訂閱，對使用者來說很方便。
2. 品牌有關社群連結
   放上像是facebook粉絲專頁、Instagram帳號、Line官方帳號等等。
3. 品牌訊息
   有關品牌的說明理念，跟品牌聯絡的方式、甚至有分店查詢、加盟合作等。
4. 幫助中心
   可能有關線上交易的條款、貨物退換須知、隱私條款...等客人可能會需要幫助。
5. 網站設計版權
   通常放在最後一行，寫法如下：
   Copyright © [年份] [版權所有人或公司]. All rights reserved.
   或是改成中文
   版權所有 © [年份] [版權所有人或公司]

以上就是今天的分享，關於導覽列的框架及程式會再簡單向大家說明，感謝觀看！