到達頁的視覺設計製作

首先在設計Landing Page 初期要決定到達頁的整體風格，其中相當要的視覺設計，為影響使用者體驗與是否能快速吸引訪客的重要元素。到達頁的視覺設計與網站不同的是，到達頁只有一個頁面，因此設計到達頁必須想出能吸引使用者繼續滾動到網頁下方，而不至於感到枯燥乏味離開此頁面，達成最終轉換目的的視覺設計。

• 造訪到達頁的「第一印象」

當使用者進入頁面最先映入眼簾的部分，而尚未向下滾動的區塊就稱為「主視覺」。而主視覺最主要的目的為，進入頁面的『瞬間』就能抓住剛造訪到達頁使用者的目光，進而使訪客繼續瀏覽下去。至於構成主視覺的元素其實包含主標與副標、照片與插圖、按鈕與選單等導覽的UI設計，透過以上三種元素將版面、色彩、字型、物件大小搭配組合起來，即能建構出「主視覺」。

• 色彩設計與選擇

到達頁並沒有固定的顏色規定，主要還是必須依照產品/服務性質去做整體的搭配，例如製作防曬乳到達頁的色彩選擇，就能以淺色系明亮的色彩去做搭配，呈現夏天活潑的風格，更能表達出防曬乳清爽不黏膩的使用感受。另外到達頁的色彩策略大致分為三個部分。第一為傳遞品牌形象的「主色」；第二為與主色形成強弱對比，增加視覺豐富性的「輔助色」；第三為呼籲使用者行動的「轉換色」。

• 主色要以品牌顏色為主

「主色」顧名思義為，到達頁最主要的基調顏色。主色一般會成為品牌或商品服務的核心形象顏色，也就是說可能採用LOGO的顏色或是品牌價值所傳遞的色系感受。另外遇到想要改變目標對象，所以希望刻意選用與品牌不一樣的色彩，請根據到達頁的目的及目標對象來選擇主色。

• 輔助色襯托主色

一個到達頁如果從頭到尾只有一個顏色，尤其到達頁為一頁型的縱長設計，其實非常容易造成視覺疲乏，使用者會無動力往下看觀看，即可能大幅增加離開頁面的機率。因此「輔助色」就是來襯托主色，為整體視覺增加強弱對比，讓使用者的視覺受到刺激，搭配高質量的網頁內容，就能有效增高網頁瀏覽者的興趣，往下觀看最終達成轉換。

雖說是輔助色，不見得只能使用一種顏色，建議根據實際的狀況，可選擇三種顏色，增添視覺豐富感，可帶來更為活潑的視覺感受。但是輔助色最主要的功用為『輔助』主色，因此仍必須注意避免干擾主色，造成視覺比例失衡。

• 吸睛促使行動的轉換色

轉換為到達頁最主要的目的，因此「轉換色」為頁面中不可或缺的元素。設計轉換的區域，促使訪客採取行動，一目了然就能理解此為不同於其他部分的重要區塊。雖說要能讓使用者能清楚的看見，應避免為追求『醒目』而使用與整體形象不一致的顏色。

Landing Page根據網站的內容，可能形成相當長的版面，容易使用過多的顏色搭配，因此了解這三種色彩策略，就能輕易的決定到達頁整體的視覺風格。

-Brian-

–  如果還不清楚什麼是Landing Page到達頁請參考此篇