首頁 找知識 用戶體驗. 電腦網頁選單設計-購物網站設計趨勢(二)

電腦網頁選單設計-購物網站設計趨勢(二)

網站設計,電腦網頁,購物網站

 電腦網頁選單設計

購物網站選單的呈現方式不盡其數,透過之前分享的內容,我們了解手機購物網頁選單設計的趨勢,今天歐斯瑞要談談電腦版的購物網站選單設計,了解一些大品牌是如何呈現的, 一起來看看吧!

 

之前我們談過關於手機網頁選單設計,從中我們知道導航/導覽對選單的重要性,也提到了螢幕尺寸改變的趨勢,而在電腦版較大的空間,選單功能、樣式也越來越多,但購物網站卻要以導航為重,雖然在這限制下,我們還是可以有著很多的變化方式。

 

結構是選單設計最重要的因素

網站設計,電腦網頁,購物網站
選單結構是影響選單設計好壞的最大因素,必須符合商品的分層方式、清楚的文字敘述、評估商品優先順序以及最終要達成的目的,我們以同樣是服裝品牌來舉例,兩品牌同樣都有販售平價男女童裝,但因商品不同、細分的對象不同,在結構、分類方式與順序就大不相同。不同的商品、客群、目的等,都會影響著結構的製訂,了解傳達的客群及希望達成的目的,再對商品做最合適的分類,來製訂出合適的商品層級。

案例分析

網站設計,電腦網頁,購物網站
範例一:10/10 HOPE  來源網址:www.1010hope.com

10/10 HOPE使用大眾最容易操作的選單,滑入主選單時向下展開第二層選單,滑入第二層選單再向右展開第三層選單,使用者已知的操作方式可以降低操作上負擔。

網站設計,電腦網頁,購物網站
範例二:Uniqlo  來源網址:www.uniqlo.com/tw

Uniqlo點擊主選單後(如男裝),將選單展開分三個區塊,滑入最左側的分類後,中間會秀出第三層分類,而最右側區塊則用文字來呈現該分類(男裝)相關優惠活動,有效利用選單空間來提供優惠訊息。

網站設計,電腦網頁,購物網站
範例三:Shop Influxx  來源網址:www.shopinfluxx.com

Shop Influxx滑入主選單時向下展開所有層級分類選項,並將畫面做視覺編排,最右側放置優惠活動圖示,一次性列出所有項目,讓使用者更快速找到想要的類別,在選單中提供該類別的優惠圖片資訊,吸引消費者進入。

網站設計,電腦網頁,購物網站
範例四:GLICO  來源網址:www.glico.com/jp
網站設計,電腦網頁,購物網站

範例五:ZARA  來源網址:www.zara.com/us

網站設計,電腦網頁,購物網站

範例六:Abercrombie & Fitch  來源網址:www.abercrombie.com.tw

 

以上三個範例都使用左側垂直選單,GLICO將選單獨立於左側,滑入選單區塊時會向右延伸範圍,顯示部份原本被遮住的選單文字,當點擊第一層分類後,會水平切換選單畫面顯示第二層分類,進入目錄頁時,選單並保持顯示在商品目錄列表的畫面。利用手機版常用的導航選單設計方式,並對電腦板的需求作調整,使用者被清楚引導。

ZARA點擊主選單後,連結至第二層目錄頁面,並展開該類別之選單,為方便使用者能重複操作選單,而將選單保持在畫面上,節省使用者回到上方再做點選的時間。Abercrombie & Fitch先從上方大分類(第一層)進入第二層分類頁面,分類頁面則使用左側選單列表,點選後進入該類別頁面,並展開第三層分類。

網站設計,電腦網頁,購物網站

範例七:A Common Space  來源網址:www.acommonspace.com

網站設計,電腦網頁,購物網站

範例八:AVLT Power  來源網址:www.avlt-power.com

網站設計,電腦網頁,購物網站

範例九:BMW  來源網址:www.bmwusa.com

 

 

以上三個範例都有在選單中放置圖片,A Common Space在選單中使用形象圖片,來增加選單的活潑性。AVLT Power與BMW都使用商品分類圖片與商品圖,利用圖像讓使用者更快速辨識產品

網站設計,電腦網頁,購物網站

範例十:Bose  來源網址:special.bose.eu/en

網站設計,電腦網頁,購物網站

範例十一:Deejo  來源網址:my.deejo.fr/en

 

購物網站選單當然不只這些,我們找到兩個比較酷炫範例與大家分享,Bose直接使用大區快分割產品圖片,滑鼠滑入會有該品項簡介,點擊後則進入商品頁,Deejo使用360度互動方式來呈現產品內容。這種酷炫效果在視覺上讓人印象深刻,但卻不見得適合您的網站與商品,像是在商品數量較多時可能較不合適,另外網站也使用相當多的動態效果,需要考量使用者的電腦配備不見得能完全支援,在速度和順暢度就會有所影響,而在購物功能的部份還是需要切換至購物網站介面來作購買。

 

選單設計方式相當多種,其設計方式沒有一定的對錯,但合適性絕對影響網站選單的好壞,了解傳達的客群及希望達成的目的,再來評估一下您的網站最合適的選單呈現方式,希望未來對您網站建置有所幫助。

關於 Astralweb

Astralweb
歐斯瑞是全台唯一MAGENTO雙認證的專業公司,精通網站前後台功能規劃,擁有GOOGLE ADWORDS、BING ADS關鍵字廣告認證,精通網路行銷與搜尋引擎優化。 Astral Web(歐斯瑞有限公司)起源於2008年美國洛杉磯,我們用心達到客戶要求,所有專案透明化,客戶擁有網站所有權,提供自由開放的合作模式及友善的溝通環境。 我們是一群對網路充滿熱情的專業團隊,堅信網路的力量無遠弗屆,人人都有機會開創網路事業。

大家都在看

withering-sunflowers-field

品牌翻轉靠的不是作法而是商品本質

品牌老化(僵化)是許多品牌碰到的問題,而解決之道,往往是把自己的宣傳「變年輕」,或是用「年輕人」的方法,就希望品牌形象能夠翻轉,但卻忘了品牌的形成是由產品出發,若產品力本身沒有變成是年輕人喜歡的產品,光「換湯不換藥」,品牌年輕化的效果自然不會呈現。

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?