一頁式介紹頁怎麼排？產品、課程、App 頁的 7 種常見區塊

一頁式介紹頁，就是把一個產品、一門課、一個活動，從頭到尾放在同一頁講完。客人從上往下看，看到最後按下「報名」「購買」「預約」。廣告的著陸頁、新產品的介紹頁、招生頁，都很常用這種做法。

我們看了台灣線上語言課程的招生頁，以及幾個賣軟體、賣版型的產品介紹頁，整理出 7 種常見的區塊。每個例子都附上連結，網站上的圖片和文字屬於各自的公司，這篇只描述版面的做法。

廣告著陸頁要注意的事情（廣告和頁面要對得上、一頁只做一件事），可以先看〈廣告點了很多卻沒有客人？著陸頁要注意的 5 件事〉；這篇講的是頁面裡的區塊怎麼排。

1. 第一屏：一句話、一個按鈕、產品的樣子

• Applay（App 商店版型）的 App 介紹頁，第一屏左邊是 App 的圖示和名稱，旁邊兩個下載按鈕（App Store、Google Play），下面一支手機的外框，裡面播放 App 的介紹影片。
• DirectoryEngine（名錄網站版型）的產品頁，第一屏是一行大標、一行說明，加上兩個按鈕：一個實心的「試用示範」、一個框線的「購買」。

可以學的：第一屏一定要讓人看到「產品長什麼樣子」。賣軟體就放操作畫面，賣課程就放上課的樣子，賣實體商品就放商品照。按鈕最多兩個，一個主要、一個次要，用實心和框線分出輕重。

2. 表單直接放在第一屏下面

巨匠線上真人的英文會話課程頁，第一屏是一位苦惱的學生、一個對話框裡的大標題，四周貼滿便利貼；緊接著下一段就是表單：姓名、電話、電子郵件、一個同意個資的勾選框和送出按鈕。手機版也一樣，往下滑一點就看到表單。

可以學的：已經決定要報名、要索取資料的人，不用看完整頁才找到表單。第一屏下面先放一次，頁面最後再放一次。表單的欄位越少越好，三個就夠了。

3. 好處用三個圖示講完

巨匠的英文課程頁，表單下面是三個圖示，分別講學英文對生活、旅行、工作的好處，每個圖示下面兩三行字。

可以學的：「為什麼需要」不要寫成一大段。挑三個最重要的理由，每個一個圖示、一個短標題、兩三行說明，手機上一個一個往下排也很好讀。

4. 功能用「圖文交錯」一段一段講

DirectoryEngine 的產品頁，中間是好幾段「左邊文字、右邊畫面」，下一段換成「左邊畫面、右邊文字」，每段講一個功能：怎麼賺錢、怎麼自訂版面、怎麼被搜尋到。JA Events II（活動網站版型）的產品頁也是這樣，每段一個功能、一張畫面。

可以學的：每段只講一件事，標題直接寫好處（例如「客人自己就能線上報名」），而不是功能名稱。左右交錯可以讓長長的頁面不單調。

5. 讓人看到實際的樣子

Flatsome（購物網站版型）的產品頁，把一大排示範網站的縮圖分成「購物網站」「企業網站」兩組排出來，每張縮圖下面寫名稱，點進去就能看到完整的樣子。

可以學的：客人最想知道「做出來會長怎樣」。課程可以放學生的作品或上課片段，服務可以放完成的案例照片，軟體可以放實際操作的畫面。案例怎麼寫，可以看〈作品集、案例頁怎麼寫〉。

6. 價格方案並排，推薦的那一個突出

DirectoryEngine 的價格區，三個方案並排，每個方案寫價格和包含的項目，中間那個方案的標題是紅色的，另外兩個是深色。

可以學的：方案最多三個，把你最推薦的放中間、用顏色標出來。每個方案包含什麼要寫清楚，客人才比較得出差別。

7. 按鈕不只放一次

巨匠的課程頁，講完上課方式的兩個步驟之後，又放了一個醒目的「填表」按鈕，頁尾是橘色底的免付費電話。DirectoryEngine 在功能介紹中間，插了一條紅色的橫帶，一行標語加兩個按鈕。

可以學的：看完任何一段想行動的人，都要馬上找得到按鈕。長頁面每隔兩三段放一次，最後一段一定要有。手機上可以在畫面下方固定一個按鈕。

加分：畫面的主題跟著產品走

巨匠的日文課程頁和英文課程頁版面很像，但視覺完全換了一套：日式的波浪花紋、和風的色帶，頁尾是鳥居、東京鐵塔、富士山這些插圖。一打開就知道這是學日文的。

同一家公司的不同產品頁，版面可以共用一套，顏色、圖案、照片依產品換，做起來快，看起來又各有特色。

要注意：動畫太多

Slider Revolution 的 Zen 範本是一個深色、霓虹漸層、充滿動畫的一頁式網站，第一屏很有震撼力。但我們用程式拍整頁截圖時，第一屏以下大多是一片空白：很多內容要等捲到那裡、動畫播完才出現。

一般人慢慢捲不會有這個問題，但手機比較舊、網路比較慢的時候，客人可能會看到一段空白或卡頓。動畫用在重點的地方就好，文字和按鈕不要等動畫跑完才出現。

想參考喜歡的介紹頁又怕太像，可以看〈參考別人的網站，學什麼、不學什麼？〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。新產品、新課程、活動需要一頁式的介紹頁，或是要搭配關鍵字廣告的著陸頁，都可以和我們討論。

想做一頁讓客人看完就報名的介紹頁？歡迎免費諮詢。