--- title: "一頁式網站為什麼好看卻沒人填表單？從 Hero 到 CTA 的六段說服順序" slug: landing-page-structure-guide url: https://rar.design/posts/landing-page-structure-guide published_at: 2026-08-27 author: "設計師 Riven" category: "AI 設計" tags: ["UX", "接案", "轉換率", "網頁設計", "Landing Page", "一頁式網站", "Framer"] access: public_access --- # 一頁式網站為什麼好看卻沒人填表單？從 Hero 到 CTA 的六段說服順序 > 版面決定他看得舒不舒服，順序決定他信不信你 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-27 FRAMER · LAYOUT · 2026▲ Framer 官方的一頁式範本示意：標題、主視覺、一句說明、一顆按鈕——首屏該有的東西就這四樣QUICK ANSWER一頁式網站的黃金結構是六個區塊照說服順序排：Hero 五秒講清楚你是誰、給誰、有什麼好處；信任條證明有人已經相信你；問題段用訪客的話講他的痛；解法段用畫面示範；異議段拆掉不敢按的理由；最後只留一顆 CTA。先讓他覺得你懂他，再讓他相信你，最後才要他行動。區塊在 Framer 一分鐘插完，難的是順序。CHAPTER 01 · WHY IT MATTERS好看的網站，為什麼沒人按那顆按鈕這是接案設計師最常遇到、也最難承認的一種失敗：網站做得很漂亮，客戶驗收的時候也很滿意，上線兩個月，表單一封信都沒收到。客戶不會說你設計得不好，他會說「好像沒什麼效果」，然後下一個案子找別人。問題多半出在順序。設計師排版面的時候在想的是節奏——大圖之後接小圖、深色之後接淺色、密的區塊之後給一塊留白。這些都對，但那是視覺的順序。訪客往下捲的時候，心裡在跑的是另一條線：這是什麼、跟我有關嗎、我為什麼要信你、有什麼風險、所以現在要我做什麼。一頁式網站的版面，本質上是一場只能單向進行的對話。對方不能插嘴、不能追問，你講的每一段都必須剛好接住他心裡冒出來的下一個問題。順序對了，他會一路捲到最底下；順序錯了，他在第二屏就走了，而你永遠不會知道原因。所以這篇要談的東西跟工具關係不大。區塊在 Framer 裡拖一拖就有，真正值錢的是那個「為什麼這一塊要放在這裡」。CHAPTER 02 · THE SPINE六個區塊，對應訪客心裡的六個問題我把一頁式網站拆成六段。每一段存在的理由，都是為了回答訪客捲到那個位置時會冒出來的問題。所以區塊可以合併、可以少，就是不能顛倒。THE SPINE · 六段說服順序先建立信任1首屏 HERO「這是什麼？跟我有關嗎？」一句話講清楚結果、對象與差異，一顆主按鈕，主視覺是產品本身。↓2信任條 TRUST「別人相信你嗎？」客戶 logo、數字、獎項、媒體，一行帶過，不需要標題。↓再建立理解3問題段 PROBLEM「你懂我的處境嗎？」用訪客自己的話講出痛點與代價，越具體越像在講他。↓4解法段 SOLUTION「你怎麼解？證明給我看」作品、畫面、流程、數字，用秀的不用說的。↓最後解除風險5異議段 OBJECTION「有什麼風險？」價格、流程、保證、FAQ，把不按的理由一條一條拆掉。↓6行動段 CTA「所以現在要做什麼？」唯一的一顆按鈕，旁邊一句降低風險的小字。這條線有一個很好記的形狀：前兩段建立信任，中間兩段建立理解，最後兩段解除風險。把它想成三扇門——他得先相信你是認真的，才願意聽你分析他的問題；聽完覺得你懂，才願意看你的解法；看完解法還在猶豫，你才需要處理異議。任何一扇門提前打開，後面的內容都會被當成推銷。這跟我在行銷 7.0 讀後感裡拆的三道閘門是同一件事：先過社交，再過個人，最後才是體驗。一頁式網站只是把三道閘門疊成一條往下捲的路。NOTE一頁式網站跟首頁的差別：首頁要服務所有人，所以有導覽列、有很多出口；一頁式網站只服務一種人、只有一個出口。如果訪客是從廣告點進來的，Framer 官方的建議是連導覽列都拿掉——每一個可以點的東西，都是離開這條路的岔口。CHAPTER 03 · HERO首屏：五秒內回答三個問題首屏的工作只有一個：讓人在五秒內知道三件事——這是什麼、給誰用、我會得到什麼。這三件事沒講清楚，下面做得再好都不會有人捲到。▲ Flighty 的首屏：一句標題講清楚「飛行追蹤 App、幫你不焦慮」，副標補功能，兩個獎項當社會證明，下面直接是產品畫面Flighty 這個首屏是 Framer 官方拿來當範例的。拆開看它做對了四件事：標題講的是結果（stress free）而不是品牌口號；副標把「怎麼做到」補完；獎項標章放在按鈕之前，先建立信任再要求行動；主視覺是產品本身，而不是一張抽象的漸層。HERO ANATOMY · 首屏五個部件01 標題十五個字以內，講清楚結果與對象02 副標一句話補「怎麼做到」03 信任標章獎項客戶數平台評分04 主按鈕寫他會得到什麼小字：免費／不綁卡／三十秒完成05 主視覺產品本身或作品本身，不是抽象漸層、不是圖庫照三種最常見的首屏寫法，都會讓人五秒內看不懂：品牌口號當標題（「讓世界更美好」）、「歡迎來到 XX 官網」、以及一張自動輪播的 slideshow。輪播尤其糟，它等於告訴訪客「我們自己也不知道哪個最重要」。順帶一提，首屏那句標題在 Framer 裡要記得指定成 h1，這件事在Framer SEO 怎麼設定那篇講過。搜尋引擎跟訪客看的是同一句話，那句話講清楚結果，兩邊同時得分。CHAPTER 04 · TRUST + PROBLEM信任條與問題段：先讓他相信你，再讓他覺得你懂他首屏之後緊接著的那一行，是整頁投報率最高的區塊。客戶 logo、服務過的案量、媒體報導、平台評分，任何能證明「已經有人相信你」的東西，排成一行放在首屏正下方。它不需要標題，也不需要說明，訪客的眼睛掃過去就會自己下結論。▲ Mutiny 的首屏往下捲，第一個區塊就是一整排客戶 logo：沒有標題、沒有說明，看過就懂接案設計師最常說的是「我沒有 logo 可以放」。三個替代方案：用數字（服務過 40 個品牌、上線 12 個網站），用結果（平均 14 天交件），或是直接把信任條併進解法段，讓作品自己說話。信任條可以少，但那個位置不能空著——空著等於告訴人家「還沒有人信我」。信任建立之後才輪到問題段。這一段的寫法是用訪客自己的話講出他的處境：他晚上十一點還在改的那份簡報、他每次改一個字都要等工程師的那三週。你越具體，他越覺得你就是在講他。Framer 官方的落地頁指南把這件事講得很直接：先講故事、先講痛，再談產品。行銷圈把這個結構叫 PAS——問題、放大、解法。設計師不用背名字，記得順序就好。抽象寫法改成訪客的處境提升企業效率每次改一個字，都要開工單等工程師三天專業網頁設計服務網站上線三個月，表單一封信都沒收到一站式解決方案素材散在五個雲端硬碟，沒人找得到最新版打造品牌形象客戶第一次點開官網，就問「你們還有在營業嗎」CHAPTER 05 · SOLUTION + PROOF解法段：用秀的，不要用說的到這裡訪客已經相信你懂他，他要看的是你怎麼解，而且要看得到。這是設計師最有優勢的一段，也是最常做壞的一段，因為我們太會寫形容詞。「精緻」「專業」「以使用者為中心」，這些字放在解法段裡，等於什麼都沒說。判斷方法很簡單：每一個主張旁邊，有沒有一個訪客自己可以驗證的東西。說秀我們很專業三個案例的 before／after介面很好用一段十秒的操作錄影客戶都很滿意一句有名字、有職稱的客戶原話速度很快「從下單到上線平均 14 天」功能很強大真實產品截圖，而且是關鍵的那一個畫面Framer 官方在同一份指南裡也提醒：用真實的產品截圖，不要用圖庫照片。圖庫照片會讓頁面有一種「哪裡都看過」的感覺，而且它對說服沒有貢獻，佔掉的位置本來可以放證據。這一段跟我在Sagmeister 那篇講的是同一條線：合格的版面現在很便宜，AI 一分鐘就排得出一個乾淨的三欄特色區；值錢的是你知道那三欄要放什麼證據、證據要放在哪一個主張旁邊。“版面決定他看得舒不舒服，順序決定他信不信你。CHAPTER 06 · OBJECTION + CTA異議段與行動段：拆掉不按的理由，然後只留一顆按鈕看完解法還沒按的人，心裡通常有一個很具體的理由：太貴、太麻煩、不確定適不適合我、怕被綁約。異議段的工作就是把這些理由一條一條拿出來講。價格區、流程區、FAQ、保證，都屬於這一段。▲ Acctual 把按鈕與證明放在一起：「Create invoice in seconds」下面直接接「Used by 5,000+ businesses」與一排客戶 logo行動段最重要的規則只有一條：全頁只有一種動作。一頁式網站從頭到尾可以出現很多次 CTA，但它們必須是同一件事——預約諮詢就一路預約諮詢，不要首屏叫人預約、中間叫人追蹤 IG、最後叫人下載型錄。三個出口等於沒有出口。按鈕旁邊那一行小字，是最容易被忽略、又最有效的元件。「不用綁信用卡」「三十秒完成」「不滿意全額退」，這些字直接對應訪客按下去之前最後一秒的猶豫。Framer 官方把這叫做用微文案處理異議，我的講法是：按鈕負責邀請，小字負責讓他安心。按下去之後的事——表單怎麼設、通知寄去哪、資料存在哪——我在Framer 表單怎麼做那篇拆過了。那一篇的結論剛好接在這裡：版面把人帶到按鈕前，表單負責不要把他弄丟。CHAPTER 07 · IN FRAMER在 Framer 裡，區塊一分鐘插完，順序自己排Framer 的插入面板有一整區叫 Sections：首屏、特色區、見證、價格、FAQ、CTA、頁尾都是現成的，點一下就進畫布。它們刻意做得很素，就是要你套自己的樣式。▲ 插入面板的 Sections 分類：左邊選類型，右邊是可以直接點進畫布的區塊預覽2026 之後連這一步都能省。Framer 3.0 的 Agents 用一句描述就能生出整頁的區塊，我在Framer AI 怎麼用那篇實測過它的能力邊界。但它生出來的順序永遠是通用的順序——首屏、三欄特色、見證、CTA——因為它不知道你的訪客是誰、卡在哪一題。順序這件事，還是得你排。▲ Framer 官方示範：用 Agents 生成版面、調整區塊與樣式有一個很好用的檢查方法：打開左邊的 Layers 面板，把每個區塊的圖層名稱改成它要回答的問題，然後只看那個面板，不看畫布。光讀圖層名稱就能讀出一段完整的說服邏輯，這頁就排對了；讀起來像一份功能清單，就是視覺順序贏了說服順序。▲ Framer 畫布左側的 Layers 面板：Top Bar、Hero、About、Services、Footer 一路排下來，區塊順序就是這頁的大綱這也是我把整頁拆成六段的另一個理由：每一段在 Layers 裡是一個獨立的區塊，之後客戶要改順序、要 A/B 測試不同的首屏，拖一下就好，不用重排。CHAPTER 08 · TAKEAWAYS上線前的六題自檢照順序問自己這六題，答不出來的那一題就是這頁的洞。1首屏過不過五秒測試找一個不認識你產品的人看五秒，問他這是什麼、給誰、有什麼好處。答不出來就改標題，改到答得出來為止。2信任條有沒有東西沒有 logo 就放數字，沒有數字就放作品。那一行可以短，不能空。3問題段有沒有訪客自己的話把每一個形容詞換成一個場景。「效率」換成「等工程師三天」，「專業」換成「三個月沒收到信」。4解法段的每個主張旁邊有沒有證據一張圖、一個數字、或一句有名字的原話。沒有證據的主張直接刪掉。5全頁是不是同一種動作數一下 CTA 的動作有幾種。超過一種，砍到剩一種。6按鈕旁邊有沒有小字每顆主按鈕旁邊都要有一句降低風險的話。沒有的話，那顆按鈕正在自己一個人說服訪客。TAKEAWAYS→六個區塊照說服順序排：Hero、信任條、問題段、解法段、異議段、CTA。可以合併、可以少，不能顛倒。→首屏五秒內回答三件事：這是什麼、給誰、有什麼好處。標題講結果，主視覺放產品，不放輪播。→信任條放在首屏正下方，沒有 logo 就放數字或作品，那個位置不能空著。→解法段用秀的：每一個主張旁邊都要有訪客能自己驗證的證據，形容詞一律換成場景或數字。→全頁只有一種動作，按鈕旁邊永遠帶一句降低風險的小字。版面是給人看的，順序是給人信的。一頁式網站做得好看，只是拿到入場券；讓人願意在最底下按那一顆按鈕，靠的是你替他把心裡的六個問題按順序回答完。這件事 AI 排不出來，因為它沒見過你的客戶——這也是你在版面之外，真正該收費的那一層。RELATED READS · 延伸閱讀Framer 表單怎麼做？從原生 Form 元件到通知、防垃圾與成效追蹤版面把人帶到按鈕前，表單負責不要把他弄丟。閱讀文章 →Framer SEO 怎麼設定？從 meta、sitemap 到 AI 搜尋可見度的完整指南首屏那句 h1，搜尋引擎跟訪客看的是同一句。閱讀文章 →Framer CMS 怎麼用？Collection、動態頁面到 SEO 的完整教學解法段的案例與見證，用 CMS 管才不會越加越亂。閱讀文章 →Framer 網域怎麼綁？DNS 設定、SSL 憑證與五個最常卡關的地方順序排好了，把 framer.website 換成自己的名字再上線。閱讀文章 →Framer 是什麼？2026 年設計師為什麼該認真考慮這個工具還在評估要不要跳進來的話，從這篇開始。閱讀文章 →Claude Code 怎麼做出沒有 AI 感的網站？AI 生的頁面順序永遠是通用的，這篇講怎麼把品味餵回去。閱讀文章 →EXTRA · 官方資源Framer 官方部落格：落地頁設計的九個原則與三個實例Framer Updates：插入面板的 Sections 區塊Framer Academy：從零做出第一個網站Framer 官方：用 Framer 做一頁式落地頁Framer 官網（免費開始）COURSEFramer 網站設計課：從零開始三個實戰專案把版面做出來，課後教材再補上區塊順序這一層說服判斷。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：一頁式網站一定要六個區塊嗎？可以少，不能亂。作品集常把信任條併進解法段、把異議段縮成三條 FAQ，四段也能成立。不能動的是順序：證明永遠在主張後面，CTA 永遠在異議處理後面。Q：一頁式網站要不要留導覽列？看流量來源。廣告點進來的頁面建議拿掉，每個可以點的東西都是岔口；自然搜尋進來的頁面可以留，但把項目減到最少，右上角只留那一顆 CTA。Q：CTA 可以出現幾次？次數不限，動作只能一種。首屏一次、解法段之後一次、頁尾一次是常見配置，三次都指向同一件事。首屏叫人預約、頁尾叫人追蹤 IG，就是兩種動作。Q：一頁式網站要做多長？由訪客心裡的問題數量決定。高價或需要信任的服務要長，因為異議多；免費試用可以短。判斷標準是每一段都在回答一個問題，沒有問題要回答的段落就刪掉。Q：作品集網站也適用這個結構嗎？適用，而且作品集最常犯的錯就是首屏放一句「Hi, I am」卻沒說能幫誰做什麼。把首屏改成結果導向、作品當解法段的證據、頁尾留一顆聯絡按鈕，就是同一套結構。Q：怎麼知道順序排得有沒有效？設追蹤與漏斗。Framer 內建的分析可以看捲動深度與按鈕點擊：多數人停在第二屏，問題在信任條或問題段；捲到底卻不按，問題在異議段或那句小字。