手機版首頁應該怎麼設計? 首屏結構、聯絡入口與表單實作完整指南

手機版首頁不是把桌機版縮小，而是要讓使用者在小螢幕、單手操作、3 秒判斷的情境下，快速看懂品牌、找到服務、建立信任並完成聯絡。本文把手機版首頁設計拆成具體可執行的步驟:設計基準的數值、首屏結構、主導覽、聯絡入口、服務卡片、詢價表單、版面順序與設計階段的判斷錯誤，適合網站負責人、設計師、前端工程師與正在規劃改版的企業主一起閱讀。

一、手機版首頁的設計目標與桌機差異

手機版首頁與桌機版首頁要做的事情看起來一樣(介紹品牌、引導行動)，但設計目標完全不同。

桌機版首頁 vs 手機版首頁的設計目標

手機版首頁要優先處理三件事

手機版首頁不是內容越多越好，而是越能幫助使用者做判斷越好。商業上為什麼這幾秒鐘決定詢問率與品牌信任，請見 手機版網站對企業的商業價值 第二節漏斗分析。

二、手機版設計的 6 個基準數值

進入具體設計前，先設定六個基準數值。這些數值來自 Apple Human Interface Guidelines、Material Design 與業界長年實務累積，是手機版設計的「最低門檻」——低於這些數值，使用者體驗會立刻出問題。

1. 文字字級:內文最小 16px

為什麼是 16px:這是 iOS Safari 在 input 欄位上「不會自動觸發放大」的最低字級。低於 16px 時，使用者在表單填寫時頁面會自動縮放——這個設計細節常被忽略但會嚴重影響體驗。

2. 行高:1.6–1.8 倍

中文段落的行高建議至少 1.6 倍(行高 1 倍代表行與行貼在一起)，最舒適的閱讀區間是 1.6–1.8。標題行高可以略低(1.2–1.4)。line-height: 1.7 是大部分內文的安全選擇。

3. 按鈕尺寸:高度 ≥ 44px

主 CTA 在手機版建議用滿版寬度(扣除左右 16–24px 邊距)，讓拇指更容易點到。次要按鈕可以縮小到 40–44px 高度。

4. 觸控目標間距:≥ 8px

兩個可點擊元素之間至少要有 8px 空白，避免手指誤觸。導覽選單的選項之間建議 12–16px，主 CTA 與其他按鈕之間建議 16–24px。

5. 內容區塊間距:垂直 padding 32px+

手機版單欄排列下，內容區塊靠垂直空間區隔。每個區塊的上下 padding 至少 32px，重要分隔可以拉到 48–64px。內容區塊的左右邊距(gutter)建議 16–24px。

6. iOS safe-area-inset:處理瀏海與底部指示條

iPhone 從 X 之後有瀏海(notch)與底部 home indicator，要在 CSS 中加上:

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.sticky-bar {
  bottom: env(safe-area-inset-bottom);
}

沒處理 safe area 的網站，固定底部聯絡列會被 iOS 的 home indicator 蓋住，按鈕等於沒辦法點。

三、首屏設計:第 1 屏的 4 個元素

手機版首屏(使用者進站還沒滑動前看到的螢幕範圍)是整個首頁最重要的設計區域。商業上，70–80% 的跳出發生在 5 秒內——這 5 秒幾乎都在首屏完成。

首屏的物理高度

手機首屏的可視高度依機型不同:

實務設計時，首屏完整內容應該裝得進 iPhone SE 的 568px(最嚴格的標準)。這代表整個首屏的內容高度應該控制在 500–550px 內，預留約 50px 給瀏覽器網址列。

首屏應該放的 4 個元素

首屏結構範例

• 主標題(H1，28–32px):企業網站設計與 SEO 內容規劃
• 副標(18px，較淡色):協助品牌建立清楚架構、優化手機體驗，提升網站詢問率
• 主 CTA(滿版按鈕，52px 高):預約初步諮詢
• 次要入口(兩個小按鈕或文字連結):查看服務項目 | 看成功案例

這樣的首屏能同時回答「您是誰」「您能幫我什麼」「我下一步可以做什麼」，使用者不需要再往下滑就能判斷要不要繼續看。

首屏不該放什麼

• 大圖佔滿整個首屏:圖片可以當背景，但不能取代主標與 CTA
• 品牌口號式抽象標語:「創造價值、用心服務」這類文字無法幫使用者判斷
• 過多次要連結:超過 2 個次要入口會分散注意力
• 未經處理的影片自動播放:消耗流量、影響載入速度、被 iOS 阻擋

首屏圖片的處理

如果一定要在首屏放圖(例如品牌形象需要)，優先選用:

• 用 CSS 背景 + 主標題疊加，比 <img> 標籤更好控制裁切
• 用 <picture> 與 srcset 提供手機版直式裁切(完整技術說明見 RWD 是什麼 第二節)
• 確保圖片人物或重點不會被主標題遮住

四、重點訊息與文案寫法

手機版首頁重點訊息要先講服務與利益，再補充品牌特色，避免一開始就使用抽象口號。

主標題:具體、短句、有判斷價值

判斷標準:使用者看完標題，能不能猜出公司業務?如果不能，標題就太抽象。

副標:說明適合誰與解決什麼問題

副標可以補充主標題沒有講完的資訊，例如服務對象、常見痛點或成果方向。

副標範例:

• 適合正在規劃官網改版、想改善手機體驗或提升詢問率的中小企業
• 從首頁結構、內容文案到 SEO 與 AEO 都一條龍協助
• 平均 3–6 週上線，價格透明，後續維護有保固

文案要對應使用者的判斷問題

手機版使用者在前 10 秒會問自己 4 個問題。文案應該對應回答:

AEO 時代的文案策略

近年使用者經常先在 ChatGPT、Perplexity、Google AI Overviews 看到摘要，再點進手機網站確認細節。文案應該支援這個流程:

• 主標題與副標要能獨立成立:AI 引擎抓取時通常只取首屏文字
• 避免依賴圖片中的文字:AI 引擎可能無法讀取圖內文字
• 數字、產業關鍵字要明確:「3–6 週上線」「中小企業」「B2B 工業」這類具體詞彙容易被 AI 正確引用

五、主導覽與漢堡選單設計

手機版的主導覽通常用漢堡選單(hamburger menu)，這是目前仍然主流的設計選擇。

漢堡 icon 的位置與尺寸

點擊熱區比視覺尺寸大是常被忽略的細節——視覺上 icon 是 24px，但實際可點範圍應該是 44×44px，靠 CSS padding 擴展。

漢堡選單的展開方式

兩種主流做法:

• 抽屜式(drawer):從左側或右側滑入，遮住一部分頁面
• 全螢幕式(fullscreen overlay):點擊後鋪滿整個螢幕

對企業網站而言，全螢幕式更清楚(使用者不會分心於背後內容)，抽屜式則適合頻繁需要在選單與內容間切換的應用。

漢堡選單的層級

層級不超過 2 層。手機版選單若超過 2 層，使用者要點 3–4 次才到目標頁面，幾乎沒人會這樣做。

第一層的必含項目(依重要度排):

1. 服務(最重要)使用者最常找的入口，放在第一個位置最容易被點到。
2. 案例 / 作品建立信任的關鍵，讓使用者快速看到實際成果。
3. 關於我們說明公司背景與專業度。
4. 文章 / 部落格若有經營 SEO 內容必放，也是 AEO 流量入口。
5. 聯絡我們 / 預約諮詢放在選單末尾，但首頁應另有快速聯絡入口。

「方案說明」「常見問題」這類也可放第一層，總數建議 5–8 項。超過會變成滑動清單，閱讀效率下降。

漢堡選單的視覺重點

• 每個選項高度 ≥ 44px:跟按鈕同標準
• 選項之間有清楚的分隔:1px 細線或 12–16px 留白
• 目前所在頁面要有視覺標示:粗體、底色或側邊條，避免使用者迷路
• 關閉按鈕(X)要清楚:右上角，與漢堡 icon 同尺寸標準

漢堡選單之外的選項

對某些網站，漢堡選單可以搭配其他導覽元件:

• 頂部 tab bar:適合 2–3 個非常重要的入口(例如「方案」「案例」「聯絡」)，常駐在頁面頂部
• 底部 tab bar:App-style 設計，適合內容高度互動的網站(電商、會員系統)，不是企業官網的標準做法
• 頁內錨點選單:長頁面的浮動目錄

對中小企業官網，漢堡選單仍是最務實的選擇。

六、快速聯絡入口與固定底部聯絡列

手機版首頁應該提供明顯的快速聯絡入口，讓使用者在有需求時可以立即打電話、加 LINE、寄信或填寫表單。

常見快速聯絡方式

tel: 連結的寫法

<a href="tel:+886422609770">
  04-2260-9770
</a>

注意:

• 國碼 +886 與區碼 4 之間沒有 0(國際格式)
• 顯示文字(按鈕內文字)可以用本地格式(04-2260-9770)
• iOS 與 Android 都會自動把這個連結變成「點擊撥號」

LINE 連結的寫法

<a href="https://line.me/R/ti/p/@your_line_id">
  加入 LINE 詢問
</a>

或用 LINE 官方提供的縮網址(如 https://lin.ee/9RiWTCY)。

固定底部聯絡列(Sticky Bar)

如果網站主要目標是詢價或預約，可以在手機版底部放固定聯絡列，讓使用者無論滑到哪都能聯絡。常見配置是 2 到 3 個主要聯絡方式，例如「電話 / LINE / 表單」。

設計參數:

Sticky Bar 的 CSS 範例

.sticky-contact {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid #e5e5e5;
  display: flex;
  z-index: 100;
}

body {
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

CTA 文字要具體

手機版聯絡按鈕不建議只寫「送出」「聯絡」「更多」。按鈕文字要讓使用者知道點擊後會發生什麼事:

• 預約初步諮詢
• 立即電話諮詢
• 加 LINE 詢問
• 填寫詢價表單
• 索取服務建議
• 洽詢網站改版

七、服務入口與內容區塊的卡片化呈現

手機版首頁服務入口要簡短、清楚、可點擊，讓使用者快速進入自己感興趣的服務頁。

服務卡片的三個元素

服務卡片範例

卡片設計的視覺基準

整張卡片可點擊是手機版的關鍵——使用者不會精準點到 CTA 按鈕，他們會點卡片任何位置。

服務入口數量的判斷

如果首頁一次放 12 個以上入口，使用者反而會不知道從哪裡開始，導致選擇困難而離開。

八、案例與信任區塊的精簡呈現

手機版首頁要建立信任，但不能像桌機版那樣放大量案例與品牌 LOGO 牆。

案例區塊的精簡做法

桌機版案例頁可以一次展示 12 張作品縮圖，手機版首頁只放 2–3 個精選案例 + 「查看全部案例」按鈕。

手機版案例摘要應該包含:

不要在首頁放完整案例內容(背景、問題、做法、成果)——這些放在案例詳細頁。首頁的任務是讓使用者點進去。

信任元素的精簡呈現

企業常用的信任元素:

• 服務客戶數量(「已服務 985 家企業」)
• 服務年資(「2005 年至今 20+ 年」)
• 客戶見證 1–2 則(不要超過 3 則)
• 品牌 LOGO 牆(手機版建議 6–8 個 LOGO 即可，太多反而模糊)
• 媒體報導或得獎紀錄

核心觀念:信任建立靠「具體」與「可驗證」，不靠「多」。手機版的信任區塊應該精選最有說服力的 3–5 個元素。

客戶見證的設計重點

如果要放見證，建議:

• 真名 + 真照片:比匿名見證可信
• 見證文字短:手機版每則 50–80 字以內
• 指出具體成效:「網站改版後詢問件數每月增加 30%」比「服務很好」可信
• 產業多樣:如果有不同產業客戶，挑 3 個不同產業的見證

九、手機版詢價表單設計

手機版詢價表單是最常被低估、卻最直接影響詢問率的設計區塊。國際 UX 研究顯示，表單欄位每增加一個，放棄率約上升 10%——這個數字在手機版上更嚴重。

表單欄位數量:3–5 個為佳

第一次詢問的目標不是蒐集完整資料，而是讓使用者願意完成第一次聯絡。其他資料留到後續溝通再蒐集。

表單欄位的單欄垂直排列

手機螢幕窄，絕對不要把欄位左右並排，即使是「姓氏」與「名字」也應分兩行:

<!-- 錯誤:手機上會擠成兩半 -->
<div style="display: flex">
  <input type="text" placeholder="姓氏">
  <input type="text" placeholder="名字">
</div>

<!-- 正確:合併成一個欄位 -->
<input type="text" placeholder="姓名">

正確的 input type 設定

正確的 input type 會讓 iOS 與 Android 跳出對應的鍵盤，大幅降低使用者輸入成本:

範例:

<input type="tel" name="phone" placeholder="0912-345-678" inputmode="tel">
<input type="email" name="email" placeholder="example@gmail.com">

表單視覺基準

錯誤提示要即時且具體

送出後的回饋

送出表單後，使用者最大的疑慮是「真的有送出嗎?」必須在送出後 1 秒內顯示:

• 成功訊息:「您的需求已成功送出」
• 預計回覆時間:「我們會在 1–2 個工作天內回覆」
• 緊急聯絡備案:「若需立即聯絡，請撥打 04-2260-9770」
• 同步寄送確認信:信件內容包含表單副本與承諾回覆時間

這套回饋設計能大幅降低「使用者送出後又再寄一次」「使用者懷疑沒收到而打電話確認」等狀況。

預算欄位的處理

B2B 詢價常想知道預算，但這也是最容易讓使用者放棄的欄位。建議做法:

• 設為選填
• 若必填，必須提供「尚未確定」「需評估後再說」這類選項
• 改用「預算範圍」下拉選單而非自由填寫
• 例:「10 萬以下 / 10–30 萬 / 30–60 萬 / 60 萬以上 / 尚未確定」

十、版面順序、滑動距離與閱讀疲勞

手機版首頁應該依照使用者決策流程安排:先理解品牌，再選擇服務，接著建立信任，最後引導聯絡。

手機版首頁建議版面順序

整體滑動距離建議控制在 5–7 個畫面高度內(一個畫面約 700–800px)。如果首頁要滑超過 10 個螢幕，通常代表內容應該重新分配到其他頁面。

為什麼是 5–7 個螢幕

把最重要的內容(服務、CTA、信任)放在前 6 個螢幕，後續內容是「找的人會找」「沒找的人不在意」的補充。

固定底部聯絡列的影響

如果有固定底部聯絡列，使用者可以隨時聯絡，這時首頁的「最終 CTA」可以變短。但行內 CTA 仍需要在第 3、5、9 個區塊出現，因為使用者通常在「看完一個區塊」當下最容易產生行動意願。

十一、首頁設計階段的 5 個判斷錯誤

進入實作前，先釐清首頁設計階段最常見的 5 個判斷錯誤。這些與實作後的常見錯誤(圖片跑版、選單按鈕跑掉、表格擠壓等)不同——後者請見 RWD 網站製作常見錯誤 專文。

• 錯誤 1:首屏想塞太多東西 設計師常被要求「首屏要放品牌故事、主標、副標、CTA、3 個賣點、最新消息、品牌影片」——結果首屏高度爆到 1500px，使用者第一眼只看到大圖，重要 CTA 在第 2 屏才出現。首屏只放 4 個元素:主標、副標、主 CTA、次要入口，其他都往下挪。
• 錯誤 2:CTA 文字寫得太抽象 「送出」「聯絡」「更多」「點此」這類文字看起來簡潔，但使用者點擊前不知道會發生什麼。CTA 文字要具體描述下一步——「預約初步諮詢」「索取網站報價」「加 LINE 詢問」比「聯絡我們」效果好得多。
• 錯誤 3:服務入口超過 12 個沒分類 把所有服務都列在首頁看起來「資訊完整」，但使用者面對 15 個選項時會選擇困難而離開。手機版首頁主要服務入口控制在 6 個以內，更多的話先做大類分組。
• 錯誤 4:把桌機版內容順序直接搬到手機版 桌機版的順序常是「形象大圖 → 公司介紹 → 服務 → 案例 → 聯絡」，因為桌機使用者有耐心慢慢看。手機使用者沒這個耐心——手機版應該調整為「服務 + CTA → 信任 → 流程 → 聯絡」，把使用者要的「下一步」往前推。
• 錯誤 5:以為「資訊越多越好」 「客戶問了我們才把這個資訊放上來」是企業網站常見的累積結果。但首頁不該無限堆疊——首頁的任務是讓使用者「願意繼續往內頁走」，不是把所有資訊一次講完。每次新增首頁元素前，先問:「這個資訊放在這裡，能不能幫使用者做出下一步決定?」如果答案是不能，就應該移到內頁。

十二、結論:讓使用者不用放大、不用猜、不用找太久

手機版首頁設計的重點不是把所有資訊放上去，而是讓使用者在最短時間內理解品牌、找到服務、建立信任並完成聯絡。

整個首頁設計的核心原則可以濃縮為三句:

• 設計基準先設定好(字級 16px+、按鈕 44px+、間距 8px+、safe-area 處理)——這是低於則崩盤的最低門檻
• 首屏只放 4 個元素(主標、副標、主 CTA、次要入口)——5 秒內回答「您是誰、能幫我什麼、我下一步做什麼」
• 內容用「摘要 + 入口」呈現——首頁不講完所有內容，而是引導使用者往內頁走

對企業網站來說，手機版首頁應該是一條清楚的轉換動線:從重點訊息開始，接著提供服務選擇，再用案例與優勢建立信任，最後引導使用者詢價或預約。

五個快速檢查問題

如果正在規劃改版，可以先用以下五個問題快速檢查目前的手機版首頁:

• 首屏 3 秒內能不能讓使用者知道網站主題?
• 主要 CTA 是否在首屏就出現?
• 服務入口是否清楚分類、容易點擊?
• 是否有明顯的快速聯絡方式?
• 使用者滑完首頁後，是否知道下一步該做什麼?

如果有任一題答不出來，就值得從使用者決策動線重新檢視首頁結構。

十三、常見問答 FAQ