--- title: "Landing Page 該從哪一步開始設計？六個步驟，與設計前先跑一次的七題清單" slug: landing-page-design-six-steps url: https://rar.design/posts/landing-page-design-six-steps published_at: 2026-08-29 author: "設計師 Riven" category: "UI/UX 設計" access: public_access --- # Landing Page 該從哪一步開始設計？六個步驟，與設計前先跑一次的七題清單 > 版型是第五件事，不是第一件事 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-08-29 網頁設計 · 2026▲ 一頁式網站的四根柱子：結構、文案、轉換流程、數據優化。這篇按施工順序一根一根拆。QUICK ANSWER設計 Landing Page 的順序是六步：先定義這頁唯一的目標與對象，再把結構排成五個區塊，接著讓開場區塊三秒內說清楚，把文案從興趣寫到行動，補上四種信任證明，最後把 CTA、表單與手機體驗的阻力一一拆掉。動工前先跑一次七題清單，能省掉大半的重做。多數人做一頁式網站是從版型開始的：找一個好看的範本，把自己的文字填進去，然後困惑為什麼流量進來卻沒有人留資料。問題出在順序——版型是第五件事，不是第一件事。Carleton University 的 Lindgaard 團隊在 2006 年做過一組經典實驗：網頁畫面只閃 50 毫秒，受試者對「好不好看」的評分，跟閃 500 毫秒的結果高度相關。五十毫秒連一個字都讀不完，判斷已經下好了。這代表你的頁面同時在打兩場仗——一場在瞬間用畫面決勝負，另一場在接下來的三十秒用結構與文案決勝負。下面六個步驟，是我實際帶案子時的施工順序。CHAPTER 01 · THE ONE GOAL步驟一：先定義這頁唯一的目標▲ 目標、對象、成功標準三件事沒定完，後面每一個設計決定都會變成猜的。Landing Page 跟官網首頁最大的差別，是它只做一件事。首頁要服務所有人，所以導覽列有八個項目；一頁式網站服務的是一種人、一個決定，多出來的每一條路都是漏水口。註冊、購買、預約、下載——挑一個當主行動，其他全部降級成次要連結，或乾脆拿掉。對象要清楚，是因為文案跟視覺的精準度是跟著對象走的。同一個線上課程，寫給「想轉職的上班族」跟寫給「想接案的在校生」，主標題該講的痛點完全不同。含糊地寫給所有人，結果是誰都不覺得在講自己。三件事裡最常被跳過的是第三件：成功標準。沒有事先定義轉換指標，你上線之後只能憑感覺說「好像有變好」。實務上抓兩個數字就夠——多少人捲過第一屏、多少人按到主 CTA。這兩個數字會告訴你問題出在哪一段，而不是只告訴你「不好」。KEY INSIGHT一句話寫得出來才算定義完成：「這頁要讓〔某種人〕完成〔某個行動〕，成功的標準是〔某個數字〕。」寫不出來，就先別開 Figma。CHAPTER 02 · THE SPINE步驟二：把結構排成五個區塊▲ 五個區塊對應訪客心裡的三個問題：這是什麼、為什麼值得、接下來該做什麼。骨架只有五塊：開場區塊給主標題、副標與主按鈕；價值說明回答「你能解決我什麼問題」；重點亮點用卡片整理功能、特色與差異；信任證明擺評價、案例、數據與合作品牌；行動收尾再給一次明確的 CTA。五塊之間的關係是遞進，不是並列。每一段存在的理由是把訪客推到下一段，不是把資訊補完。判斷方法很簡單：把某個區塊整段刪掉，如果讀起來完全沒有斷層，那它本來就沒有在推進，砍掉不可惜。想把每一段對應到訪客心裡的哪個疑問拆得更細，可以搭配六段說服順序那篇一起看，那邊把信任條與異議段各自獨立出來談。CHAPTER 03 · FIRST SCREEN步驟三：開場區塊要在三秒內說清楚▲ 下方那組對照是重點：模糊口號換成具體結果，同一個版型的說服力就完全不同。開場區塊只有四個零件：主標題說核心價值、副標補足對象與成果、視覺焦點幫助理解、主 CTA 給明確動作。零件不難，難的是主標題那一句。「打造更好的未來」這種句子讀完等於沒讀，因為它套在任何產業都成立；「用 AI 提升設計效率，快速完成提案」講的是具體的人、具體的事、具體的結果。檢查方法：把你的主標題貼到競爭對手的頁面上。如果放上去也毫無違和，那它就還不是你的主標題。視覺這一側則有兩個常被忽略的數字。第一，首屏只能有一個視覺焦點——最大的字、最亮的塊、最飽和的色，三個同時出現等於互相抵銷。第二，字級不要一個一個挑。先定內文基準（17 或 18），再用一個倍率往上乘，乘出來的數字就是整頁的全部字級，中間的數字一律不准出現。層級1.25 克制版1.333 戲劇版首屏主標4256區塊標題3342卡片小標2724內文（基準）1718註解、標籤1313中文還多一件事要顧：行長。全形字一行超過三十個字，眼睛換行時會找不到下一行的開頭。內文區塊寬度壓在 640 到 720、行高拉到 1.8，很多「看起來很擠」的抱怨會自己消失。字型一支中文加一支西文就夠，開源可商用的繁中字型已經足夠撐起整頁。CHAPTER 04 · COPY步驟四：文案是推進，不是解釋▲ 文案的動線：從興趣走到信任，再走到行動。四段之間是箭頭，不是並列的四個欄位。接案久了會發現，卡住轉換的文案通常不是寫得爛，是寫得太像產品說明書。功能清單列了十二條，每一條都正確，但沒有一條回答「所以我的生活會有什麼不同」。把「支援多人協作」改成「不用再從十七個版本裡找哪個是最新的」，資訊量一樣，感受完全不同。四段的分工是這樣：吸引注意先點出痛點或理想結果，說明價值告訴他這個方案能帶來什麼改變，降低疑慮把常見問題提前回答掉，促使行動用明確的 CTA 收尾。順序不能跳——在他還沒覺得這件事跟自己有關之前就開始拆解疑慮，只會讓人覺得你很急。“功能是你做了什麼，價值是他因此不用再忍受什麼。CHAPTER 05 · TRUST步驟五：信任證明要有四種▲ 四種信任證明的擺法示意。圖中的評價與數字都是版型示範用的假資料，實際上線請換成自己驗得出來的數字。訪客開始有興趣之後，心裡的下一個問題永遠是「我憑什麼相信你」。四種證明各自處理不同的懷疑：真實評價處理「別人用了覺得如何」，成果案例處理「做出來長什麼樣」，數據佐證處理「規模有沒有那麼大」，常見問題處理「有沒有什麼我沒想到的坑」。評價要具體到有畫面才有用。「很棒很推薦」是零，「上完之後我把提案時間從三天壓到一個下午」才是證據。案例優先放前後對照，因為差異比成品更有說服力。數據則要挑得起檢查——寫得出來源、算得出口徑的數字才放，湊出來的漂亮百分比只要被追問一次就全盤崩掉。常見問題那一區被低估得最嚴重。它看起來像客服，實際上是最便宜的異議處理：把「可以退費嗎」「時間彈性嗎」「付款方式有哪些」提前寫在頁面上，等於在他猶豫的當下就把理由拆掉，不必等他寄信來問——多數人不會寄，他只會關掉。CHAPTER 06 · FRICTION步驟六：把阻力一項一項拆掉▲ 表單那張卡是重點：姓名、信箱，公司名稱標成選填。每多一欄，填完的人就少一批。CTA 可以重複出現，但只能有一種長相。第一顆實心、第二顆變外框、第三顆又多了個箭頭，訪客會以為那是三件不同的事。同一頁的主要行動只給一種樣式、一種文案、一個目的地；次要行動一律降成文字連結，讓它在視覺上明顯矮一階。表單能少一欄就少一欄。你想知道的資訊，跟他此刻願意給的資訊，是兩回事——職稱、公司規模、預算區間這些可以等成交後再問。真的需要就標成選填，別擋在送出按鈕前面。欄位怎麼命名、送出之後接到哪裡、怎麼擋垃圾訊息，Framer 表單那篇有完整流程。資訊易讀這件事有具體數字可以照。段落三到四行就斷、區塊之間的留白要明顯大於區塊內部——桌機版可以抓區塊間 120 到 160、區塊內 48 到 64、元件間 24、元件內 8 到 16，四層之間差距夠大，眼睛才分得出來哪裡是新的一段。這組數字的原理在8pt 網格那篇講得更完整。▲ Framer 的三個斷點與圖層樹。斷點不是縮放比例，是三份可以各自調整的版面設定。手機體驗則要當成重排，不是縮小。字級整組往下降一階，首屏主標抓 32 到 36 就夠氣勢；區塊間距砍掉三到四成；多欄一律變單欄；主要 CTA 考慮做成貼底常駐。按鈕大小有現成標準：WCAG 2.2 新增的 2.5.8 把可點目標的最低要求訂在 24×24 CSS 像素，那是及格線，真的要好按，Apple 的介面指南建議 44pt、Google Material 建議 48dp。最後一種阻力常被歸類成工程，其實是設計決定：載入速度。Google 用三個指標評真實使用者體驗，門檻是最大內容繪製 2.5 秒內、互動到下次繪製 200 毫秒內、累積版位位移 0.1 以內。設計端能做的很多——首屏別放沒壓過的大圖或自動播放影片、字型只載入實際用到的字重、圖片與嵌入區塊事先把高度佔好，版面就不會在載入途中亂跳。2.5sLCP 上限200msINP 上限0.1CLS 上限Framer 官方這支影片示範了怎麼把一頁已經排好的版面再往上修一階，節奏可以當作步驟六的參考：CHAPTER 07 · CHECKLIST動工前，先跑一次這七題▲ 七題清單。多數都能答「是」，這一頁通常已經有競爭力。這份清單的用法是放在設計之前，不是上線之後。七題答不出來的地方，就是你等一下會在版面上卡住的地方——目標不單一，版面就會出現兩顆一樣大的按鈕；沒有信任證明，第四個區塊就會空著不知道要放什麼。版面完成之後，再補一個很土但有效的測試：把螢幕縮到 25%，或乾脆瞇著眼睛看。細節糊掉之後還看得見的東西，就是訪客在那五十毫秒裡真正看到的東西。如果糊掉之後找不到焦點，那不是配色問題，是層級問題。CHAPTER 08 · TAKEAWAYS重點整理TAKEAWAYS→版型是第五件事。先定義目標、對象與成功標準，一句話寫得出來才開工。→五個區塊之間是遞進不是並列。刪掉沒有斷層的區塊，本來就不該存在。→主標題放到對手頁面上還成立，就代表它還不是你的主標題。→首屏只留一個視覺焦點；字級用 1.25 或 1.333 乘出來，中間的數字不准出現。→評價要具體到有畫面，數據要挑得起檢查，常見問題是最便宜的異議處理。→CTA 只能有一種長相；表單能少一欄就少一欄；手機版是重排不是縮小。→上線後只看兩個數字：多少人捲過首屏、多少人按到主 CTA。六個步驟裡沒有一項需要天分，它們全部是可以查表、可以量、可以在交件前檢查的東西。真正稀有的是願意在打開設計軟體之前先把目標寫成一句話的那種克制——而那正好是 AI 一次生成不會替你做的部分。想看這件事在做網站時怎麼運作，怎麼做出沒有 AI 感的網站那篇可以接著看。RELATED READS · 延伸閱讀一頁式網站為什麼好看卻沒人填表單？把五個區塊再拆細成六段說服順序，信任條與異議段各自獨立談。閱讀 →網頁排版的間距系統：8pt 網格與四層間距步驟六「資訊要易讀」背後那組數字的完整原理。閱讀 →Framer 表單怎麼做？CTA 後面接的那一段：欄位、通知、防垃圾與成效追蹤。閱讀 →Framer SEO 怎麼設定？meta、sitemap 與分享預覽圖，上線前一定要走過的欄位。閱讀 →Framer 網域怎麼綁？DNS、SSL 與五個最常卡關的地方，接案交件前必讀。閱讀 →怎麼做出沒有 AI 感的網站？三步調教工作流：品味庫、護欄清單、先廣後深的迭代。閱讀 →接案設計師的素材天堂首屏視覺焦點要用圖時，六個素材來源與三條授權紅線。閱讀 →EXTRA · LINKS· 建站工具：Framer 官方網站· 無障礙標準：W3C 對點擊目標尺寸的說明· 效能指標：Google web.dev 的核心體驗指標COURSEFramer 網站設計課：從零開始把這六個步驟直接排成一頁能交件的網站，從變數、斷點到表單一次做完。了解課程 →SUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：Landing Page 到底該多長？A：長度由訪客的疑問量決定，不是由美感決定。低單價、決策簡單的產品，開場區塊加一段證據加一顆按鈕就夠；高單價、需要說服主管的服務，八到十個區塊都算正常。把訪客會問的問題列出來，一個問題配一個區塊，問完就收尾。Q：一頁式網站可以放導覽列嗎？A：可以，但要當成錨點而不是出口。導覽列連到同一頁的各個區塊沒問題，連到部落格、關於我們、其他產品線就是在幫訪客找離開的理由。廣告流量進來的頁面尤其要克制，理想狀態是只留品牌標誌與一顆主 CTA。Q：表單到底該放幾個欄位？A：以「這個欄位少了會讓後續流程做不下去嗎」當標準。留資料階段通常兩到三欄就夠，姓名加信箱是底線，其他一律標選填或延後到成交後再問。想多要一個欄位，就要準備好用更強的誘因去換。Q：沒有真實評價與案例，信任那一段怎麼辦？A：先用你手上真的有的東西替代：作品過程、實際交付物、公開的規格說明、退費或保固條款都算證明。空著比造假好，假的評價被識破一次，整頁的可信度會一起歸零。Q：首屏放自動播放的影片好不好？A：它同時吃掉視覺焦點與載入速度，兩個都是這篇在講的東西。要放的話把它壓暗當背景、不要跟主標題搶注意力，並確認沒有拖垮最大內容繪製的時間。Q：我不會寫程式，做得出這種頁面嗎？A：可以。六個步驟全部是策略與視覺決定，跟會不會寫程式無關。用視覺化建站工具，把字級與間距先存成變數，剩下的就是排版與取捨。真正的門檻是克制，不是語法。Q：怎麼知道改完真的有效？A：看捲動深度與 CTA 點擊率，而不是立刻看成交數。如果多數人卡在首屏就離開，問題在開場區塊；如果人都捲到底了卻沒人按，問題在信任證明或阻力，不在版面好不好看。