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

網頁設計商品的呈現方式

一般企業製作網頁,最重要的單元之一就是將商品與服務呈現在客戶面前,促使客戶主動與商家聯絡,達到交易的目的。因此商品的視覺呈現就成為網頁設計十分重要的一環。

商品以網頁呈現的方式很多種,以下我們列舉出馬路科技的作品內,一些具有代表性的商品呈現與介紹方式,給所有即將想要設計網站的廠商們一個參考。



極度華麗Flash 產品介紹

作品:GX Gaming
網址:http://www.gx-gaming.com/?action=products

Flash產品展示頁是非常視覺系的商品展示利器,其千變萬化的視覺特效、光影變化、可以打造出無窮盡的視覺組合,當企業要打造一個極為重要的旗艦款商品,Flash產品介紹絕對是最加的選擇。

以捷元GX Gaming這個系列產品來說,透過了Flash的產品介紹,充分的滿足了電玩玩家對於聲光視覺的挑剔,增強了產品說明的視覺強度,雖然Flash對智慧手機與平板電腦支援不佳,但是主要的族群為PC Game的玩家,犧牲了便利性取得了視覺效果是一個正確的取捨。

 

依滑鼠游標自動顯示圖片

作品:倍騰國際
網址:http://www.e-button.com.tw/index.php?a=pro_list

當一個產品內有多張圖片說明時,設計者會使用滑鼠的游標方式,當產品滑動過圖片時即會放大細節呈現出高質感的產品圖片。

以倍騰國際的案例來看,由於一個商品可能有數種近似的品項,與其一一列舉,透過滑鼠游標的方式呈現商品,是十分智慧的設計。然而這樣的設計方式對於智慧手機卻有潛在問題,因為智慧手機並無滑鼠游標的設計,因此使用此技術需考量主要客戶是否為手機用戶或電腦用戶。

 

點擊圖片放大產品

作品:安姐港式煲湯(已經歇業)
網址:http://www.annsoup.com.tw/?action=product

某些產品的內容物不易使用一張圖片示意時,透過產品介紹的頁面,附加上多張小圖片的方式解說產品的細部內容,就能夠創作出一個令消費者信賴,資訊完整的商品介紹頁面。

以安姐港式煲湯為例,由於每個包裝的藥材多達數十樣,因此廠商便拍攝了內容物圖片分享,如此一來便不需要擔心購買到成份不明的產品,非常的令人安心。

 

大量快速展示型產品

作品:新美鋼製家具
網址:http://www.shin-meei.com.tw/products1.html

許多製造設計商的產品多達百件以上,若使用單一網頁單一產品的方式,會使得產品的介紹頁面過多且內容空洞,因此透過一個產品頁面,以多張縮圖的方式來介紹產品,確實是一個不錯的表現方式。

 

一頁式網頁介紹產品

作品:沾美國際(已經歇業)
網址:http://www.jimmybaby.com/pro.htm

最簡易的產品呈現方式,就是透過一個網頁,結合豐富的圖文介紹,來描述產品與介紹產品。大部分的商品都適用於這樣的方式,雖然十分的傳統,不過以沾美國際這個案例來看,不僅結合了圖片、文字、圖表等方式介紹產品外,亦可以自由的添加Youtube影片介紹、商品購物連結等資訊,極具彈性。

圖片來源 Pixabay 作者 Foundry 轉載請註明出處或鏈接

超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
超好玩nVidia AI樂園,美圖、P圖、去背全自動完成
Free Resource
Free Resource
Apr 08, 2019
Google協作平台製作網站的優缺點分析
Google協作平台製作網站的優缺點分析
Free Resource
Free Resource
May 07, 2019
淺談無障礙網頁設計2.0
淺談無障礙網頁設計2.0
Ryan
Ryan
Jan 11, 2019