製作Landing Page你一定要看這篇 到達頁結構與框架圖設定

到達頁的框架與結構

Landing Page的製作過程中,除了很重要的視覺設計之與編輯程式碼的術數層面,其中有包括設計結構與框架。到達頁的結構與框架圖為設計與程式碼的基礎,有了這些設計師與工程師們才能著手進行作業;相對的一旦設計錯誤,即使有美觀的視覺設計及優秀的程式碼製作出到達頁,可能也無法順利達成Landing Page的目標。

Landing Page的結構與框架圖設定

注重個區塊的比例

到達頁為一頁的縱長型頁面,需將訪客所需的資訊於一頁內呈現出來,因此結構與一般網站會稍有不同,份量也較大。為避免訪客離開頁面而持續向下觀看,到達頁更需注重各區塊的比例,思考整區塊的組成順序,應形成情緒的轉折,如使用後令人滿足的情形,藉此呈現出商品的價值,誘導訪客再向下觀看的心理因素或是達成到達頁之目標。LOGO、標語、說明內文、圖片、插圖、CTA區塊,仔細的安排規劃,詳細地將各區塊要呈現之內容具體呈現,能有效減少完成後的反覆修改,就能減少製作到達頁的困擾。

到達頁的結構組成

首先,主視覺搭配大小標語,圖片吸睛大幅增加對此Landing Page之興趣;大標讓進入之訪客能快速得知此到達頁的主題,輔以小標補充說明大標,訪客就能掌握約5成之內容,由此建構出主視覺。

第二,引出消費者的痛點,例如消費者在在日常生活中遭遇的一些不便之處或是小麻煩,能透過提供的產品或服務,解決這些煩惱,產生情緒的轉折,從原本的苦惱轉成喜悅,傳達出與競品的不同,引導出商品服務之優勢。

第三,到達頁其實可以不只有一個轉換區塊,建議設置二至三個轉換區,擺於頁面中段的區域與頁面尾端,讓使用在瀏覽過程中,能輕易快速的找到購買的方法,也在無形之中提高訪客完成轉換之意願。

第四,提供使用者見證或是相關報導,輔以圖文或是影片,加強消費者的信賴度,最後再加上誘因,如:留下名單就能獲得小贈品,或是折扣資訊,給予受眾有價值之內容或產品,促成當次或是未來之轉換。

-Brian-

網友回應

網友回應