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

網頁設計商品的呈現方式

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

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



極度華麗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 轉載請註明出處或鏈接

網頁設計過程中如何做好色彩搭配
網頁設計過程中如何做好色彩搭配
Jericho
Jericho
Mar 27, 2024
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
Jericho
Jericho
Mar 20, 2024
網站設計思路:創造令人愉悅的用戶體驗
網站設計思路:創造令人愉悅的用戶體驗
Jericho
Jericho
Mar 15, 2024