meepShop Club 電商學院|真正懂銷售的電商專家

好看的網頁排版怎麼做?5個電商網站設計秘訣、範例推薦

Spread the love

網頁設計怎麼做?電商網站設計,應該怎麼排版,才能提高商品質感和品牌形象?對電商品牌來說,官方網站設計猶如一家店的門面與裝潢,是顧客對品牌的第一印象。因此,好看的網頁排版設計,除了能吸引顧客留在你的賣場之外,更能傳遞出品牌形象與品牌精神,逐漸讓顧客與你的品牌產生連結、認同感。以下5個電商網站設計秘訣、網頁設計範例,教你如何從細節著手,搞定你的電商網頁排版!

好看的網頁排版設計怎麼做?網站設計的秘訣

大家都想要好看的網頁排版設計,那麼到底什麼是好看?好看的網頁設計是什麼?首先還是得回到你的品牌定位,深入了解你的目標群眾是誰?他們喜歡什麼樣的設計風格和店鋪氛圍?否則做得再好看,卻沒有打動你的顧客也是枉然。

延伸閱讀:電商網站必備的4個網頁設計技巧,這樣做避開網頁製作的地雷!

 

不過,根據那些成功的大品牌的官方購物網站,我們仍發現有幾個大原則可以依循:

了解這些大原則之後,我們可以從以下5個網頁設計案例,詳細分析在不同類型的網頁上,如何設計和排版你的頁面:

秘訣一、首頁,簡潔有力的圖片傳達品牌形象

官方網站的首頁,是顧客進入網站後第一眼看到的地方。許多商家會有個誤區:總以為把折扣活動資訊Banner放在首頁,就會吸引到顧客。然而,實際上顧客在還不認識品牌的情況下,那些折扣資訊對他們而言是沒有意義的。反而還有可能形成一種「這個品牌好像都會打折」的印象,不利於品牌價值的塑造。

除非你已是許多人都知道的品牌,否則官方網站的首頁,最重要的資訊就是傳遞你的品牌形象與品牌價值。

電商網站首頁,用畫面傳遞品牌精神與風格

電商網站設計案例,首頁風格

另一個電商網站設計案例,是主張研發符合東方人體質的草本茶主張的「養茶」。主張「融合養生健康茶療與美的生活」,因此,在電商網站的首頁設計上,他們採用的照片和字型選用上,使用純白的服裝、環境與東方瓷器,配合茶色、有襯線的明體字型,讓使用者產生舒服、溫潤、東方的感受。若官網選用的照片、排版設計,都與品牌精神和產品風格貼合在一起,與品牌具有一致性,消費者就更在逛網站的過程中,與品牌產生連結。

在設計網站首頁前,不妨思索一下你的品牌精神、想傳遞出什麼樣的品牌形象,而這個形象如何透過模特兒、產品選擇、背景、畫面佈局等來強化這個形象?

秘訣二、網站LOGO和目錄的排版細節

電商網站設計中,大家都一定會放上自己的品牌LOGO。除了加深品牌印象之外,也能讓顧客點擊後回到首頁。根據使用習慣來說,大部分LOGO都會安排在電腦版網頁的左上角。所以強烈建議除非必要,請將品牌LOGO置於電腦版網頁畫面的左上方;手機版置中於上方,減少使用者的操作和分心。

許多人可能會覺得,既然LOGO版面位置都大同小異,那麼使用現成的網站套版/樣板即可。但實際上,如果想要盡可能貼近你的審美和品牌表達,網站設計能否能調整LOGO與目錄的位置、長度、寬度、顏色等細節還是必須的。品牌的獨特性,往往也都是從設計細節去展現你的不同。

用能自由設計版面的平台,創造像雜誌般的網站排版

服飾品牌電商 ROSCOE 為例,為了能讓顧客在逛品牌網站時像在翻閱時尚雜誌一樣;透過網路開店平台meepShop後台,自己將目錄和LOGO通通固定在左側,使右側版面能全部展示直式的圖片,像在看雜誌一樣欣賞那些漂亮的照片。此外,ROSCOE 還將品牌 LOGO 的字樣,自行排得稍微突出到圖片,像雜誌常見的排版方式,讓字壓版到圖片上,使整個網站不那麼死板。

雖說LOGO和目錄的設計,大部分網站都大同小異,但其實往往一些細節的排版差異,就會產生不一樣的感受。元件能否自由微調位置、顏色,也會影響你的品牌表達。因此建議商家若想好好設計網站排版,可以選擇能自由調整版面設計的網路開店平台。

延伸閱讀:10分鐘用滑鼠打造客製化網站,10歲小孩也會的電商網頁設計

 

秘訣三、打造清晰又具體的商品分類頁

商品太多,如果沒有好好分類和介紹,對顧客來說其實反而會眼花撩亂,最後不知道自己該從何找起。因此,商品類型一覽頁是非常重要的;對於那些商品類型眾多、顧客需求繁雜的商家來說,商品類別一覽頁不僅能幫顧客更清楚、具體地了解產品的差異,也能使新手更無流暢去找到可能適合他的產品,不用擔心逛半天沒找到想要的產品。

與其用文字描述哪種包包,不如用圖片陳列

以包包品牌 matchwood 為例,像這種販售包包、服飾的商家,顧客多半在逛的時候也不太清楚自己到底要什麼類型的包包。大部分的商家僅會在網站上面的目錄頁做分類,而顧客光憑目錄上的文字其實很難快速地找到他要的商品。一旦顧客耗費太多時間在尋找商品,其實就會大大降低顧客繼續查找和購物的意願。

因此,像這種賣包包,包包款式眾多的商家,建議商家可以像 matchwood 一樣,獨立做個商品類型一覽頁面。讓顧客可以透過不同類型的圖片陳列,一眼找到自己有興趣的產品類型。甚至商家也可以帶入實體店鋪的陳列思維,進一步去設計分類的排序動線。例如 matchwood 就將護照包、手機小包、皮夾、零錢包這類量體較小、較輕的產品放在同一排,因為這幾種商品多半是同一種顧客:此刻想要找一些輕便包包的顧客。除了可以免去顧客一排一排查找之外,也更有機會透過這樣的陳列,帶動類似商品的銷售。

 

秘訣四、帶入店鋪陳列思維的商品一覽頁

若你賣的不是像包包有很多種類的產品,只需要商品一覽頁,那麼要怎麼設計會排版設計才能吸引人?其實我們不妨可以帶入實體店鋪的商品陳列思維,試著在商品一覽頁加上簡介文案,讓顧客除了照片之外,獲得更多有意思的資訊。

舉例來說,販賣戶外用品的榛樹林,在戶外家具相關商品頁中,便在商品陳列時加上關於商品特色、賣點的描述,讓玩家可以一眼了解這件商品的功能和優勢。透過這樣的陳列思維,猶如顧客走進一家實體店鋪,顧客透過展示櫃上的文案了解產品故事,默默增加情感認同和連結,進而想要向店員詢問產品的細節和購買方式。因此,在網站上的產品陳列也是如此,如何在有限的版面中,透過圖片與產生連結感的文案,使顧客想要點擊進去了解商品,正是商家在排版設計網站時必須考量到的地方。

 

秘訣五、有段落安排的商品詳細頁

當顧客最後點擊進產品頁面,在決定是否購買前,一定會浮現這些問題:「這個產品對我有幫助嗎?」、「這個產品好在哪裡?」、「我買這個產品可以獲得什麼?」等等,諸多疑惑。

因此,商家在決定你的商品頁面排版設計與風格前,建議可以先梳理好你的產品頁面的結構動線。可以透過常見的一頁式網頁設計思維切入,一步一步去說服你的顧客購買產品。

常見的一頁式網頁設計架構、段落安排為:

決定好你的商品頁面內容架構、段落安排後,才去設計每段內容中的元素和排版。無論是利用影片、圖片、段落文字,還是按鈕;在設計商品頁面時,建議像按鈕能調整色彩、圖片能決定版面位置、尺寸等等,以確保商品頁風格仍能與你的品牌風格保持一致。

舉例來說,販售紐西蘭羊奶的品牌 LittleOak 小樹,為了符合其品牌基調,在設計商品頁面時就使用大量繪本式的插圖圖片,按鈕顏色也一起調整成乳黃色。讓顧客在了解商品的同時,還擁有一致的視覺體驗,感受到那份溫馨和天然感。

 

網頁排版自己來,0基礎也能設計電商網站

看完這些網站設計的秘訣,是不是想好好設計自己的網站了呢?

網路開店平台 meepShop,除了提供具金流物流的購物車系統之外,商家還能自由拖曳網站版面的元件(如目錄、圖片、影片、按鈕等等),依照品牌風格完成自己的網頁排版和設計。以上網站設計案例皆來自meepShop,歡迎想了解如何設計網站的商家,免費預約網路開店顧問。將由經驗豐富的開店顧問,免費提供更多電商網站設計案例,並親手體驗如何從零到一,輕鬆完成網站設計。

免費諮詢 電商網頁設計

Exit mobile version