活動網頁設計 是由多個元素組合成的，而各元素的應用並沒有絕對的用法、組合，必須依目標用戶與活動主軸不斷優化。活動網頁的設計元素包含了標題文案、圖片、產品優點、CTA等。本文我們將一一的透過簡單的介紹各個設計元素，讓你了解如何設計一個高轉換的活動網頁。
活動網頁特輯：
1. 活動網頁是什麼？實際案例說明！活動網頁創造高轉換的3大要點解析！
2. 活動網頁架設 | 先別急著動手！架設活動網頁之前，你應該先思考的6件事
活動網頁設計 建議元素：
1. 引人入勝的標題
a) 主標題
活動頁面要提供什麼好處？產品的獨特銷售賣點是什麼？與其他的競爭者有什麼差異？進入到活動網頁的訪客會優先透過主標題來決定是否要繼續閱讀其他內容，所以在撰寫的標題文字時，我們應該已簡短易懂的寫出使用者可以或得的好處，且能一眼就能讓訪客了解活動網頁的主軸。
b) 副標題
如果主標題是需要簡短精準的點出產品的價值，那副標題就是同樣以簡單扼要的方式加以補充產品價值的額外訊息。通常我們會透過兩種方向撰寫副標題，分別是：
- 延續主標題的內容，且使用更白話的方式讓使用者了解
- 提供與主標題價值相符且相對次要的資訊
2. 搭配適合的圖片、影片或動畫 (Hero Image)
第一印象是非常重要的，而人是視覺性的動物。當訪客首次來到活動網頁時，展示在他們眼前的若是符合主題的圖片、影片或是動畫時，能夠有效的利用視覺加強標題文案所要傳遞的資訊，並讓訪客對於你所提供的產品或服務有一定的概念。
a) 圖片（插圖、照片等）
訪客會點擊進來你的活動網站，主要是想了解更多你提供的服務或產品。所以當我們在選擇網站首圖時，應考慮優先展示企業的產品，不論是實體商品、網站或是APP畫面。或是使用者在不同情境下使用你的產品的相關照片。
b) 影片
如果一張圖片難以傳達你的產品內容，或是需要更多的使用解說，不妨透過一支簡短的介紹影片快速讓訪客了解你的服務。
c) 動畫
在這個資訊爆炸的年代，人們往往想要更快、更便捷的接收資訊，而動態的元素往往能更有效的吸引人的注意，適當的使用還能創造更高的互動性與趣味性。
3. 列出產品特色/優點
透過條列式的方式列出約3至5項，以使用者的角度來描述你的服務或產品的特色、若使用哪些特色的功能做到哪些功能。也藉此讓還不是很熟悉你的訪客，在快速的閱讀後能了解為什麼要使用你的產品。
4. 給予安心與信任
如果想要獲得陌生訪客的初步信任，我們可提供與目標用戶相同類型使用者的見證。要知道，別人說你好遠比自己說自己好還來得可信。透過既有使用者的背書，能更有效的影響更多的訪客轉換為用戶。
常見的手法有：
- 客戶的使用心得
- 過往的執行案例
- 合作客戶的品牌商標
- 名人的推薦
- 網路上的評分、評價
< 延伸閱讀：如何收集客戶意見、需求、喜好？善用表單結合互動抽獎創造 100% 回覆率 >
5. 行動呼籲按鈕 (CTA)
行動呼籲是Call To Action的中文翻譯，以字面上的意思來說既是號召、呼籲以作出某種行動。CTA可以應用在各類網站、EDM或是Banner上以促使使用者達成轉換。舉例來說，當訪客來到你的活動網頁後，你希望他們達成的目標動作。
在轉換按鈕之前，也可透過再次強調標題中提及的獨特銷售賣點，提出你的結論並向你的網頁的訪客保證他們可獲得的好處與利益，引導訪客完成轉換。轉換按鈕的設計也需清楚獨立，並包含了醒目且有吸引力的文字，常見的行動呼籲有「立即以50%優惠訂購」、「註冊獲取免費好禮」等。
< 延伸閱讀：Call To Action 是什麼？一篇搞懂CTA使用情境、轉換目標、CTA的設計要點 >
< 延伸閱讀：除了Call To Action，5招教你增加網站轉換率的方法！ >
6. 一致的瀏覽動線
除了擁有適合的圖片、吸引人的文案和CTA以為，活動網站的版面設計內容呈現方式也是非常重要。而設計的前提需要建立在使用者習慣之上，所以我們應該了解一般使用者在瀏覽網頁時的習慣和動線。
一般來說，人們通常不會直接去仔細的閱讀資訊，而是通過由左至右的去掃視瀏覽。這也對應到了上述提到的標題等元素，要讓訪客一眼就被吸引住必須要有適當的留白與間距、文字需簡短且可讀識。
簡單了解了瀏覽動線的重要後，接下來就來簡單介紹三種常見的版面設計模式：
a) Gutenberg Diagram
Gutenberg Diagram的概念重點提到了人們在閱讀不熟悉的內容時，習慣由左而右、從上到下，以左上至右下的為重點注意力的方式去做瀏覽，因此，從傳統的報紙標題、雜誌標題，到網站的LOGO等重要的元素都是放置在左上角這個位置。
b) Z-Pattern
Z-Pattern和Gutenberg Diagram概念非常相近，都有著相同的起點、終點位置，不同的是，Z-Pattern的概念不是由左上至右下，而是像Z字母一樣，把重點資訊放置在Z字母的各個角落處。
c) F-Pattern
F-Pattern由Nielsen Norman Group在一項研究中所發現。他們通過研究紀錄下超過200位使用者瀏覽網頁的軌跡就像是個F字母。數據指出使用者瀏覽網頁時，會先平行看過上方，接著往第二行水平閱讀，閱讀的軌跡會比第一次更短，最後，眼球會垂直往下移動左側的內容，如果看到有興趣的內容，則會往右側仔細看。
活動網頁設計-同場加映：
1. Above the Fold
Fold是指進入網站後，在不滾動熒幕畫面的情況下，可以被使用者看到的畫面。而使用者約花80%的時間都停留在「Above the Fold」（即標題和主圖的位置），這也說明了當訪客在進入活動網頁後的第一印象非常重要，我們必須明確的提供產品的核心價值。
2. 創造使用者與網頁互動的動機
我們可使用一些簡單的互動機制，讓使用者透過和網頁的互動增加「顧客契合」，在不知不覺中完成行銷活動的目標，並創造轉換。例如透過使用者感興趣的心理測驗題目收集客戶資料、以分享換優惠的機制讓活動網頁的效益最大而達到品牌曝光的最終目標。
< 延伸閱讀：讓您的顧客當您的最佳代言人，為您的活動病毒式曝光、帶來更多顧客。 >
3. 重視手機版網頁的使用體驗
為因應 Mobile first 的時代，企業所設計的活動網頁應在行動裝置上有適當的排版（同時也支援多螢幕尺寸），且確保每個裝置上都能保有友善的使用者體驗。如文字大小和間距的考量、CTA按鈕和輸入框也需易於單手操作時方便點擊。
< 延伸閱讀：3步驟輕鬆打造手機網頁！Engagement Platform 數位行銷必備的管理工具簡介 >
想透過活動網頁速輕鬆搭起與顧客的橋梁嗎？立即連絡我們了解如何製作多個活動頁面、即時優化更新，我們將親自為您介紹！
