Landing Page到達頁的基本視覺設計攻略

到達頁的視覺設計製作

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

Landing Page 的基本視覺設計攻略

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

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

  • 色彩設計與選擇

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

  • 主色要以品牌顏色為主

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

  • 輔助色襯托主色

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

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

  • 吸睛促使行動的轉換色

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

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

-Brian-

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

網友回應

網友回應