官網『行動版底部導覽列』(Mobile Bottom Nav Bar) 設計完整攻略：中小企業如何用一排底部小圖示，把七成滑手機的訪客留在你的網站

先講重點：滑手機的訪客，只用「一根拇指」決定要不要跟你聯絡

我們接過不少中小企業官網案，最常聽到老闆抱怨的一句話是：「電腦版看起來明明很漂亮，怎麼手機版來的詢問單這麼少？」

翻開 GA4 一看，通常七成以上流量來自手機，但轉換率只有電腦版的一半甚至三分之一。原因很簡單：電腦是滑鼠 + 大螢幕，手機是拇指 + 六吋螢幕。你在電腦版精心設計的右上角「聯絡我們」按鈕，到了手機版被塞進漢堡選單裡，訪客要按兩下才找得到。中間只要有 0.5 秒的猶豫，這張單就跑了。

這時候「行動版底部導覽列」(Mobile Bottom Navigation Bar) 就是最直接的解法——一排永遠固定在螢幕下方、拇指伸手就到的小圖示，把「詢價、LINE、電話、首頁、目錄」這五件最重要的事，變成訪客不用思考就能點的動作。這篇文章我把中小企業做官網時該怎麼設計這條底部導覽列，一次講清楚。

Photo by Marco Palumbo on Unsplash

為什麼底部比頂部好？從人體工學開始說

先問一個問題：你自己拿手機的時候，拇指最容易點到的區塊在哪裡？答案是螢幕下方三分之一。這是所謂的「拇指熱區 (Thumb Zone)」，Steven Hoober 早在 2013 年就針對上千名手機使用者做過統計，結論是：單手握持時，畫面下半部才是拇指自然可及的範圍，上半部反而要挪動整支手機才點得到。

而過去我們習慣把選單放頂部，是因為早年的 Web 是從桌機延伸過來的。但現代 App 早就把主要導覽移到底部——打開 Instagram、YouTube、Threads、蝦皮、LINE，全部都是底部導覽列。這不是流行，是使用者行為研究出來的最佳解。

把官網也做成 App 那樣的底部導覽列，好處有三個：

第一，拇指不用移動，點擊率提升。Baymard Institute 的手機 UX 研究顯示，把主要 CTA 從頂部搬到底部固定列，行動版轉換率平均提升 20% 到 40%。第二，訪客滑到哪都看得到聯絡管道。不管在首頁、內頁還是文章底部，那條列永遠在。第三，符合訪客的心智模型。大家都在用 App，一看到底部有一排圖示就知道那是導覽，不用學習成本。

中小企業的底部導覽列該放哪 5 顆按鈕？

這是最多老闆會問的問題：「所以我要放幾顆？放什麼？」我的答案是絕對不要超過 5 顆，最好是 3 到 4 顆。理由是手機螢幕寬度平均 375 到 414px，扣掉安全邊距，一顆按鈕實際能佔的寬度大概 75px。放 6 顆就太擠、點錯機率大增；放 4 顆最舒服，每顆有充足的可點擊區域。

那 4 顆該放什麼？按中小企業（服務業、B2B、零售通用）優先度排序：

第 1 顆：LINE 官方帳號。台灣人習慣用 LINE 溝通，這顆的點擊率通常是所有按鈕之首。連到你的 LINE 官方帳號連結（例如 https://line.me/R/ti/p/@你的ID），開手機就直接跳到 LINE App，一秒加你為好友。

第 2 顆：撥打電話。用 tel: 協定，例如 <a href="tel:0233112200">。訪客點下去手機直接跳出撥號畫面，尤其對 B2B、保全、家電維修、餐飲訂位這種「需要立刻講到人」的產業超級有效。

第 3 顆：詢價 / 聯絡表單。連到你網站的聯絡頁面，用一個信封或問號圖示。對於單價高、需要客製報價的業務（例如網站設計、系統開發、園藝工程），這是最重要的線索來源。

第 4 顆：首頁 / 產品目錄。這是「找路」用的，讓訪客不管滑到哪都能快速回到起點。用房子或選單圖示。

如果一定要放第 5 顆，可以是「我的最愛」「購物車」「預約」，看你的商業模式決定。但寧可少一顆做得清楚，也不要塞到擠成一團。

Photo by Balázs Kétyi on Unsplash

設計細節：圖示 + 文字比純圖示好用 3 倍

很多設計師為了「乾淨」，會把底部導覽列做成純圖示、不放文字。這是新手常犯的錯誤。Google Material Design 跟 Apple HIG 都明文建議：底部導覽列的每顆按鈕，圖示下方要放 1 到 2 個中文字的說明。

為什麼？因為圖示的辨識度沒有你想像的高。一個信封圖示，訪客可能以為是 Email、也可能以為是私訊；一個問號圖示，可能是 FAQ、也可能是客服。加上「聯絡」「電話」「LINE」「首頁」這種明確文字，訪客不用思考就知道要按哪一顆。

其他設計細節，我列幾個中小企業最常忽略的：

按鈕高度至少 56px。這是符合手指觸控最小尺寸的行業標準，太小容易點錯。整條底部列建議 64px 到 72px 高。

顏色要有反差但不要太搶眼。底色用白色或深灰、圖示用品牌主色，避免整條列跟頁面配色打架。CTA 最重要的那顆（例如 LINE 或詢價）可以做成彩色實心按鈕，其他做成線稿圖示，形成視覺主從。

在文章頁要能隱藏或縮小。訪客在看你的部落格長文時，一直有一條列擋在下面會影響閱讀。做法有兩種：一是往下滑時自動隱藏、往上滑時再出現（LINE Today 就是這樣）；二是加一顆小箭頭讓訪客手動收合。

iOS 底部要留 Safe Area。iPhone X 之後的機型底部有 Home Indicator 那條橫線，做網頁時要用 CSS 的 env(safe-area-inset-bottom) 保留 34px 的邊距，不然圖示會被那條線壓到。

當前頁面要有 Active 狀態。訪客在首頁時，「首頁」那顆要變色或加底線，讓他知道自己在哪。這個小細節能大幅降低「我剛剛按了什麼」的認知負擔。

什麼樣的網站不適合放底部導覽列？

誠實講，不是所有網站都該做這條列。三種情況我不建議：

純文字型部落格。訪客的目的是安靜讀文章，一條固定的列會壓縮閱讀空間、影響體驗。這種站建議只在文章結束時出現 CTA 就好。

電腦版流量佔七成以上的 B2B 網站。例如工業設備、大型系統整合，客戶通常在辦公室用電腦研究，那條列做出來沒人用還浪費開發成本。

需要沉浸感的作品集網站。例如攝影師、動畫工作室，滿版影片跟大圖是主角，多一條底部列會破壞氛圍。這種站建議做成「捲動時淡入淡出」的智慧型。

反過來說，這幾種站強烈建議一定要做：本地服務業（餐飲、美容、家電維修）、電商、房仲物件頁、教育課程頁、活動報名頁、B2C 產品官網。手機流量高、需要快速促成聯絡或下單的網站，這條列的投報率是官網所有元件裡最高的之一。

Photo by Amélie Mourichon on Unsplash

技術實作：一段 CSS 搞定，不需要外掛

做官網底部導覽列不需要買昂貴的外掛，用純 HTML + CSS 就能搞定。核心結構大概長這樣：容器用 position: fixed; bottom: 0; left: 0; right: 0; 讓它永遠貼在畫面下方；裡面用 Flexbox 讓 4 顆按鈕平均分配寬度；每顆按鈕包一個 SVG 圖示跟一個文字 span，圖示 24px、文字 11 到 12px。

WordPress 站可以用簡單的 Elementor 佈景搭配 Custom CSS，或是找有支援 Sticky Footer 的主題。Shopify、Wix 這類 SaaS 平台大多有內建的「行動版底部列」設定。純客製化的站直接寫進 layout.vue 或 _app.tsx，加一個 media query 判斷寬度小於 768px 才顯示，電腦版就藏起來。

比較容易踩的坑有兩個：一是 z-index 沒調好，被彈窗蓋住；建議底部列給 z-index: 40、彈窗給 z-index: 50。二是頁面內容底部沒有留 padding，最後一段文字會被那條列蓋住看不到；記得在 body 或主 container 加 padding-bottom: 80px。

結語：先做一個，測兩週，看數據再優化

如果你的官網手機轉換率一直不理想，別再拖了，這週就把底部導覽列做起來。不用一次追求完美，先做一個基本版：LINE、電話、詢價、首頁 4 顆，掛上去跑兩個星期，比對 GA4 的手機轉換率跟聯絡表單送出數，數字通常會給你驚喜。

之後再依照點擊熱圖決定哪顆該放大、哪顆該換位置。UI 設計的重點從來不是「一次做到完美」，而是「快速上線、根據數據迭代」。這條看似小小的底部列，對中小企業來說可能是接下來三個月接單量翻倍的關鍵。

如果你的網站是我們奧隆做的，或想升級官網的行動版體驗，歡迎直接透過官網詢價表單聯絡我們，我們會依照你的產業跟客戶輪廓，給你最合適的底部導覽列設計建議。