首頁 部落格 高質感購物網站網頁設計範例
Ryan
May 29, 2013
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

高質感購物網站網頁設計範例



許多客戶進行購物網站網頁設計,都會以國內的知名購物網站如PChome.com.tw或Books.com.tw當作指標,不過上述的兩家都是大型的購物網站,比較不適合銷售物件少於100件的中小型的購物網站。以下我們分享一個國際購物網站,就十分的適合中小型購物網站。

本次我們以一個國際購物網站Firebox.com為例子,整個網站的設計十分符合近年社群網站的視覺調性:區塊化、單純化、色彩化,很適合用於物件較少的購物網站。該網站也具有近年液態版型的特點,只要變化視窗尺寸,或是透過手機與平板觀看,版面呈現也會隨之調整。

▲新的產品品名都會顯示桃紅色的新品字樣

Firebox.com網站的入口畫面就像是一個拍立得相簿的設計,沒有紊亂的廣告字眼,只有單純的產品圖片、品名與價格。

在網站中可以隨時選擇產品排序的方式,從依照產品種類、價格或是熱門程度,功能簡單,但可以看到網站的分類巧思。即使中小型購物網站品項不多,但搜尋的功能依舊重要,位於購物網站的右上方。

▲超大產品介紹圖,呈現產品質感外,還結合了社群呈現出產品的熱賣程度

進入產品頁面內,可以看到產品的主圖與縮圖佔了網站畫面的50%之多,足見產品的照片質感,決定了產品的賣相。此外非常值得注意的是Firebox.com將社群的機制添加入產品內,例如被按讚的次數、被推的次數...等,充分結合了社群的機能。

購物網站設計最重要的就是產品圖片的呈現,這一點不論是Amazon.com、Newegg.com等國際知名購物網站都有這樣的準則,因此圖片點選後放大觀看細節,是設計購物網站時必要的功能。

▲推薦商品的部份,也與產品說明巧妙的融為一體



最後,請大家回到最上面的圖片,有無看到底下有一行綠色的文字?我們可以看到Firebox.com網站的下方,以單純的色塊方式,跳出並顯示出「可以運送到台灣」的字樣,讓瀏覽者立即知道這個網站的東西是可以國際宅配,增加購買者購物的意願。

整體來看,Firebox.com從網站的整個視覺設計上,已經取得了十分不錯的網友好感。或許整體的設計上,與台灣主流的大量文字型購物網站相比,可能簡潔了些,但如果您想要設計出一個跨國的購物網站,或許這是一個值得參考的設計方式。

2018網頁設計趨勢
2018網頁設計趨勢
Ryan
Ryan
Dec 15, 2017
IWARE官網改版紀錄(上)
IWARE官網改版紀錄(上)
Winnie
Winnie
Nov 10, 2017
常見背景屬性(二)
常見背景屬性(二)
Karen
Karen
Nov 20, 2017