首頁 > 新聞 > 電子商務 > 購物網(wǎng)站設計趨勢：手機網(wǎng)頁選單設計

購物網(wǎng)站設計趨勢：手機網(wǎng)頁選單設計

　　互聯(lián)網(wǎng)發(fā)展快速，網(wǎng)頁的設計方式必須不斷更新，網(wǎng)頁設計中有許多設計元素會影響使用者操作，其中選單是引導消費者到達產(chǎn)品頁面很重要的媒介，今天要先從選單設計談起，現(xiàn)今選單的設計趨勢，并透過幾個知名品牌網(wǎng)站與大家分享，這些品牌他們是怎么讓消費者更容易找到想要的產(chǎn)品，一起來看看吧！

　　為什么網(wǎng)頁設計方式必須一直求新？

　　由于互聯(lián)網(wǎng)發(fā)展快速，網(wǎng)頁設計與開發(fā)又與這些息息相關，我們就需要依照趨勢與需求，去學習與改變我們的設計方式，例如2007-2010年時期智能手機的普及，衍生了手機版網(wǎng)頁與平版網(wǎng)頁的設計需求，也改變了制作軟件發(fā)展，進而產(chǎn)生響應式設計的方式，在2015年手機屏幕尺寸趨向大屏幕的改變，也再次重新調(diào)整了手機版網(wǎng)頁的配置，網(wǎng)頁設計師要不斷因應科技趨勢與市場需求，學習新的設計方式。

　　現(xiàn)今消費者的使用趨勢

　　2014年與2015年相較，民眾使用行動裝置購物從五成提高至八成，手機與平版的消費人數(shù)上升3倍，而電腦版人數(shù)卻減少了22%，我們合理推測有幾個原因：

　　一、裝置的改變 大屏幕手機銷售量占比將達 46%，超越中型手機兩成行動裝置之冠！小屏幕要呈現(xiàn)購物流程等復雜的介面，據(jù)有相當大的難度，屏幕尺寸與解析度的提升，擴大了可視范圍，對于使用者瀏覽更為容易。

　　二、消費者使用習慣改變，消費者經(jīng)常接觸手機，習慣使用手機上網(wǎng)與操作，對于手機信賴度提高。

　　三、網(wǎng)頁設計更為容易操作，手機版購物網(wǎng)頁越來越容易操作，甚至簡化過后介面會來的比電腦版簡單許多。方便性與使用習慣改變，讓消費者愿意選擇使用手機來上網(wǎng)購物。

　　透過以上的介紹我們可以了解到手機版購物網(wǎng)頁設計的趨勢與重要性，網(wǎng)頁設計有很多需要注意的地方，今天我們就先來談談手機版購物網(wǎng)站的選單設計。

　　手機版網(wǎng)頁選單需著重導航設計

　　選單是引導使用者進入產(chǎn)品頁面的媒介，不論是電腦版或行動版網(wǎng)頁，都要著重導航設計，特別在于手機的畫面有限情況下，應以導航為主，將選單舍棄多余的美編圖片、效果及非必要功能。過去在手機版網(wǎng)頁中，對于手機的小屏幕，我們會采用一欄式設計并加大字級等，但現(xiàn)今手機屏幕尺寸以及解析度的提升，在產(chǎn)品目錄頁中普遍改采用兩欄式呈現(xiàn)，接下來透過幾個案例讓大家看看他們是怎么設計選單的。

　　案例分析

　　案例一：Lativ 來源網(wǎng)址：m.lativ.com.tw

　　Lativ在選單設計上沒有主選單的圖，直接列出產(chǎn)品的大分類，將其他的會員、購物車放在下方，減少了展開選單的步驟，并營造簡潔風格。

　　案例二：Uniqlo 來源網(wǎng)址：www.uniqlo.com/tw

　　Uniqlo選單透過不同顏色來區(qū)分產(chǎn)品大分類，點擊選單圖后直接列出第二層選單，直得關注的是，可能由于服飾業(yè)中女性網(wǎng)購族群相較于男性來的高，不論是首頁的選單排序，或是點擊主選單后所展開的畫面，都以女裝為優(yōu)先，這是一個了解自己客群后，所做出的良好設計方式。在第三層的選單中使用產(chǎn)品類別的圖、文呈現(xiàn)，并使用兩欄排列，類別示意圖能夠幫助使用者快速分辯產(chǎn)品類別，也增加選單活潑性。

　　案例三：A Common Space 來源網(wǎng)址：www.acommonspace.com

　　A Common Space不同于他在電腦版的設計，將最底層分類直接作為手機版選單，由兩層選單變成一層，讓使用者在選擇產(chǎn)品類別時更為輕松，也將不會一直使用到的功能，如社群、幣別等，收合在選單中，盡可能的保持畫面干凈。

　　案例四：H&M 來源網(wǎng)址：m2.hm.com/m/en_gb/hm-com.genericdevice.html

　　H&M的選單使用跳頁方式，在進入第二層時加入該類別的視覺圖像作搭配，并使用不同的畫面，讓使用者清楚知道自己進入了不同頁面。在首頁區(qū)塊中使用產(chǎn)品大分類，讓使用者也可以從首頁區(qū)塊進入產(chǎn)品類別。

　　案例五：Apple 來源網(wǎng)址：www.apple.com/

　　Apple選單使用跳頁方式呈現(xiàn)，在選擇產(chǎn)品大分類后，進入該類別的專頁，不使用相同的選單樣式，而選擇使用橫式滑塊，并使用分類圖做搭配，在第三層產(chǎn)品介紹項目頁面中，使用第二階層下拉選單。他將每一層做區(qū)分，并針對每一層的不同需求，而對應不同的選擇方式。

　　案例六：PlayStation 來源網(wǎng)址：www.playstation.com/en-us

　　PlayStation在第一層選單點擊后，左側(cè)保留原本第一層分類圖，右側(cè)顯示第二層分類，清楚讓使用者知道現(xiàn)在在哪一個類別之下，使用者在做上一個類別切換時，不需回到上一層做選擇。