購(gòu)物網(wǎng)站設(shè)計(jì)趨勢(shì)：手機(jī)網(wǎng)頁(yè)選單設(shè)計(jì)
互聯(lián)網(wǎng)發(fā)展快速，網(wǎng)頁(yè)的設(shè)計(jì)方式必須不斷更新，網(wǎng)頁(yè)設(shè)計(jì)中有許多設(shè)計(jì)元素會(huì)影響使用者操作，其中選單是引導(dǎo)消費(fèi)者到達(dá)產(chǎn)品頁(yè)面很重要的媒介，今天要先從選單設(shè)計(jì)談起，現(xiàn)今選單的設(shè)計(jì)趨勢(shì)，并透過(guò)幾個(gè)知名品牌網(wǎng)站與大家分享，這些品牌他們是怎么讓消費(fèi)者更容易找到想要的產(chǎn)品，一起來(lái)看看吧！
為什么網(wǎng)頁(yè)設(shè)計(jì)方式必須一直求新？
由于互聯(lián)網(wǎng)發(fā)展快速，網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)又與這些息息相關(guān)，我們就需要依照趨勢(shì)與需求，去學(xué)習(xí)與改變我們的設(shè)計(jì)方式，例如2007-2010年時(shí)期智能手機(jī)的普及，衍生了手機(jī)版網(wǎng)頁(yè)與平版網(wǎng)頁(yè)的設(shè)計(jì)需求，也改變了制作軟件發(fā)展，進(jìn)而產(chǎn)生響應(yīng)式設(shè)計(jì)的方式，在2015年手機(jī)屏幕尺寸趨向大屏幕的改變，也再次重新調(diào)整了手機(jī)版網(wǎng)頁(yè)的配置，網(wǎng)頁(yè)設(shè)計(jì)師要不斷因應(yīng)科技趨勢(shì)與市場(chǎng)需求，學(xué)習(xí)新的設(shè)計(jì)方式。
現(xiàn)今消費(fèi)者的使用趨勢(shì)
2014年與2015年相較，民眾使用行動(dòng)裝置購(gòu)物從五成提高至八成，手機(jī)與平版的消費(fèi)人數(shù)上升3倍，而電腦版人數(shù)卻減少了22%，我們合理推測(cè)有幾個(gè)原因：
一、裝置的改變 大屏幕手機(jī)銷(xiāo)售量占比將達(dá) 46%，超越中型手機(jī)兩成行動(dòng)裝置之冠！小屏幕要呈現(xiàn)購(gòu)物流程等復(fù)雜的介面，據(jù)有相當(dāng)大的難度，屏幕尺寸與解析度的提升，擴(kuò)大了可視范圍，對(duì)于使用者瀏覽更為容易。
二、消費(fèi)者使用習(xí)慣改變，消費(fèi)者經(jīng)常接觸手機(jī)，習(xí)慣使用手機(jī)上網(wǎng)與操作，對(duì)于手機(jī)信賴(lài)度提高。
三、網(wǎng)頁(yè)設(shè)計(jì)更為容易操作，手機(jī)版購(gòu)物網(wǎng)頁(yè)越來(lái)越容易操作，甚至簡(jiǎn)化過(guò)后介面會(huì)來(lái)的比電腦版簡(jiǎn)單許多。方便性與使用習(xí)慣改變，讓消費(fèi)者愿意選擇使用手機(jī)來(lái)上網(wǎng)購(gòu)物。
透過(guò)以上的介紹我們可以了解到手機(jī)版購(gòu)物網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)與重要性，網(wǎng)頁(yè)設(shè)計(jì)有很多需要注意的地方，今天我們就先來(lái)談?wù)勈謾C(jī)版購(gòu)物網(wǎng)站的選單設(shè)計(jì)。
手機(jī)版網(wǎng)頁(yè)選單需著重導(dǎo)航設(shè)計(jì)
選單是引導(dǎo)使用者進(jìn)入產(chǎn)品頁(yè)面的媒介，不論是電腦版或行動(dòng)版網(wǎng)頁(yè)，都要著重導(dǎo)航設(shè)計(jì)，特別在于手機(jī)的畫(huà)面有限情況下，應(yīng)以導(dǎo)航為主，將選單舍棄多余的美編圖片、效果及非必要功能。過(guò)去在手機(jī)版網(wǎng)頁(yè)中，對(duì)于手機(jī)的小屏幕，我們會(huì)采用一欄式設(shè)計(jì)并加大字級(jí)等，但現(xiàn)今手機(jī)屏幕尺寸以及解析度的提升，在產(chǎn)品目錄頁(yè)中普遍改采用兩欄式呈現(xiàn)，接下來(lái)透過(guò)幾個(gè)案例讓大家看看他們是怎么設(shè)計(jì)選單的。
案例分析
案例一：Lativ 來(lái)源網(wǎng)址：m.lativ.com.tw
Lativ在選單設(shè)計(jì)上沒(méi)有主選單的圖，直接列出產(chǎn)品的大分類(lèi)，將其他的會(huì)員、購(gòu)物車(chē)放在下方，減少了展開(kāi)選單的步驟，并營(yíng)造簡(jiǎn)潔風(fēng)格。
案例二：Uniqlo 來(lái)源網(wǎng)址：www.uniqlo.com/tw
Uniqlo選單透過(guò)不同顏色來(lái)區(qū)分產(chǎn)品大分類(lèi)，點(diǎn)擊選單圖后直接列出第二層選單，直得關(guān)注的是，可能由于服飾業(yè)中女性網(wǎng)購(gòu)族群相較于男性來(lái)的高，不論是首頁(yè)的選單排序，或是點(diǎn)擊主選單后所展開(kāi)的畫(huà)面，都以女裝為優(yōu)先，這是一個(gè)了解自己客群后，所做出的良好設(shè)計(jì)方式。在第三層的選單中使用產(chǎn)品類(lèi)別的圖、文呈現(xiàn)，并使用兩欄排列，類(lèi)別示意圖能夠幫助使用者快速分辯產(chǎn)品類(lèi)別，也增加選單活潑性。
案例三：A Common Space 來(lái)源網(wǎng)址：www.acommonspace.com
A Common Space不同于他在電腦版的設(shè)計(jì)，將最底層分類(lèi)直接作為手機(jī)版選單，由兩層選單變成一層，讓使用者在選擇產(chǎn)品類(lèi)別時(shí)更為輕松，也將不會(huì)一直使用到的功能，如社群、幣別等，收合在選單中，盡可能的保持畫(huà)面干凈。
案例四：H&M 來(lái)源網(wǎng)址：m2.hm.com/m/en_gb/hm-com.genericdevice.html
H&M的選單使用跳頁(yè)方式，在進(jìn)入第二層時(shí)加入該類(lèi)別的視覺(jué)圖像作搭配，并使用不同的畫(huà)面，讓使用者清楚知道自己進(jìn)入了不同頁(yè)面。在首頁(yè)區(qū)塊中使用產(chǎn)品大分類(lèi)，讓使用者也可以從首頁(yè)區(qū)塊進(jìn)入產(chǎn)品類(lèi)別。
案例五：Apple 來(lái)源網(wǎng)址：www.apple.com/
Apple選單使用跳頁(yè)方式呈現(xiàn)，在選擇產(chǎn)品大分類(lèi)后，進(jìn)入該類(lèi)別的專(zhuān)頁(yè)，不使用相同的選單樣式，而選擇使用橫式滑塊，并使用分類(lèi)圖做搭配，在第三層產(chǎn)品介紹項(xiàng)目頁(yè)面中，使用第二階層下拉選單。他將每一層做區(qū)分，并針對(duì)每一層的不同需求，而對(duì)應(yīng)不同的選擇方式。
案例六：PlayStation 來(lái)源網(wǎng)址：www.playstation.com/en-us
PlayStation在第一層選單點(diǎn)擊后，左側(cè)保留原本第一層分類(lèi)圖，右側(cè)顯示第二層分類(lèi)，清楚讓使用者知道現(xiàn)在在哪一個(gè)類(lèi)別之下，使用者在做上一個(gè)類(lèi)別切換時(shí)，不需回到上一層做選擇。
為什么網(wǎng)頁(yè)設(shè)計(jì)方式必須一直求新？
由于互聯(lián)網(wǎng)發(fā)展快速，網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)又與這些息息相關(guān)，我們就需要依照趨勢(shì)與需求，去學(xué)習(xí)與改變我們的設(shè)計(jì)方式，例如2007-2010年時(shí)期智能手機(jī)的普及，衍生了手機(jī)版網(wǎng)頁(yè)與平版網(wǎng)頁(yè)的設(shè)計(jì)需求，也改變了制作軟件發(fā)展，進(jìn)而產(chǎn)生響應(yīng)式設(shè)計(jì)的方式，在2015年手機(jī)屏幕尺寸趨向大屏幕的改變，也再次重新調(diào)整了手機(jī)版網(wǎng)頁(yè)的配置，網(wǎng)頁(yè)設(shè)計(jì)師要不斷因應(yīng)科技趨勢(shì)與市場(chǎng)需求，學(xué)習(xí)新的設(shè)計(jì)方式。
現(xiàn)今消費(fèi)者的使用趨勢(shì)
2014年與2015年相較，民眾使用行動(dòng)裝置購(gòu)物從五成提高至八成，手機(jī)與平版的消費(fèi)人數(shù)上升3倍，而電腦版人數(shù)卻減少了22%，我們合理推測(cè)有幾個(gè)原因：
一、裝置的改變 大屏幕手機(jī)銷(xiāo)售量占比將達(dá) 46%，超越中型手機(jī)兩成行動(dòng)裝置之冠！小屏幕要呈現(xiàn)購(gòu)物流程等復(fù)雜的介面，據(jù)有相當(dāng)大的難度，屏幕尺寸與解析度的提升，擴(kuò)大了可視范圍，對(duì)于使用者瀏覽更為容易。
二、消費(fèi)者使用習(xí)慣改變，消費(fèi)者經(jīng)常接觸手機(jī)，習(xí)慣使用手機(jī)上網(wǎng)與操作，對(duì)于手機(jī)信賴(lài)度提高。
三、網(wǎng)頁(yè)設(shè)計(jì)更為容易操作，手機(jī)版購(gòu)物網(wǎng)頁(yè)越來(lái)越容易操作，甚至簡(jiǎn)化過(guò)后介面會(huì)來(lái)的比電腦版簡(jiǎn)單許多。方便性與使用習(xí)慣改變，讓消費(fèi)者愿意選擇使用手機(jī)來(lái)上網(wǎng)購(gòu)物。
透過(guò)以上的介紹我們可以了解到手機(jī)版購(gòu)物網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)與重要性，網(wǎng)頁(yè)設(shè)計(jì)有很多需要注意的地方，今天我們就先來(lái)談?wù)勈謾C(jī)版購(gòu)物網(wǎng)站的選單設(shè)計(jì)。
手機(jī)版網(wǎng)頁(yè)選單需著重導(dǎo)航設(shè)計(jì)
選單是引導(dǎo)使用者進(jìn)入產(chǎn)品頁(yè)面的媒介，不論是電腦版或行動(dòng)版網(wǎng)頁(yè)，都要著重導(dǎo)航設(shè)計(jì)，特別在于手機(jī)的畫(huà)面有限情況下，應(yīng)以導(dǎo)航為主，將選單舍棄多余的美編圖片、效果及非必要功能。過(guò)去在手機(jī)版網(wǎng)頁(yè)中，對(duì)于手機(jī)的小屏幕，我們會(huì)采用一欄式設(shè)計(jì)并加大字級(jí)等，但現(xiàn)今手機(jī)屏幕尺寸以及解析度的提升，在產(chǎn)品目錄頁(yè)中普遍改采用兩欄式呈現(xiàn)，接下來(lái)透過(guò)幾個(gè)案例讓大家看看他們是怎么設(shè)計(jì)選單的。
案例分析
案例一：Lativ 來(lái)源網(wǎng)址：m.lativ.com.tw
Lativ在選單設(shè)計(jì)上沒(méi)有主選單的圖，直接列出產(chǎn)品的大分類(lèi)，將其他的會(huì)員、購(gòu)物車(chē)放在下方，減少了展開(kāi)選單的步驟，并營(yíng)造簡(jiǎn)潔風(fēng)格。
案例二：Uniqlo 來(lái)源網(wǎng)址：www.uniqlo.com/tw
Uniqlo選單透過(guò)不同顏色來(lái)區(qū)分產(chǎn)品大分類(lèi)，點(diǎn)擊選單圖后直接列出第二層選單，直得關(guān)注的是，可能由于服飾業(yè)中女性網(wǎng)購(gòu)族群相較于男性來(lái)的高，不論是首頁(yè)的選單排序，或是點(diǎn)擊主選單后所展開(kāi)的畫(huà)面，都以女裝為優(yōu)先，這是一個(gè)了解自己客群后，所做出的良好設(shè)計(jì)方式。在第三層的選單中使用產(chǎn)品類(lèi)別的圖、文呈現(xiàn)，并使用兩欄排列，類(lèi)別示意圖能夠幫助使用者快速分辯產(chǎn)品類(lèi)別，也增加選單活潑性。
案例三：A Common Space 來(lái)源網(wǎng)址：www.acommonspace.com
A Common Space不同于他在電腦版的設(shè)計(jì)，將最底層分類(lèi)直接作為手機(jī)版選單，由兩層選單變成一層，讓使用者在選擇產(chǎn)品類(lèi)別時(shí)更為輕松，也將不會(huì)一直使用到的功能，如社群、幣別等，收合在選單中，盡可能的保持畫(huà)面干凈。
案例四：H&M 來(lái)源網(wǎng)址：m2.hm.com/m/en_gb/hm-com.genericdevice.html
H&M的選單使用跳頁(yè)方式，在進(jìn)入第二層時(shí)加入該類(lèi)別的視覺(jué)圖像作搭配，并使用不同的畫(huà)面，讓使用者清楚知道自己進(jìn)入了不同頁(yè)面。在首頁(yè)區(qū)塊中使用產(chǎn)品大分類(lèi)，讓使用者也可以從首頁(yè)區(qū)塊進(jìn)入產(chǎn)品類(lèi)別。
案例五：Apple 來(lái)源網(wǎng)址：www.apple.com/
Apple選單使用跳頁(yè)方式呈現(xiàn)，在選擇產(chǎn)品大分類(lèi)后，進(jìn)入該類(lèi)別的專(zhuān)頁(yè)，不使用相同的選單樣式，而選擇使用橫式滑塊，并使用分類(lèi)圖做搭配，在第三層產(chǎn)品介紹項(xiàng)目頁(yè)面中，使用第二階層下拉選單。他將每一層做區(qū)分，并針對(duì)每一層的不同需求，而對(duì)應(yīng)不同的選擇方式。
案例六：PlayStation 來(lái)源網(wǎng)址：www.playstation.com/en-us
PlayStation在第一層選單點(diǎn)擊后，左側(cè)保留原本第一層分類(lèi)圖，右側(cè)顯示第二層分類(lèi)，清楚讓使用者知道現(xiàn)在在哪一個(gè)類(lèi)別之下，使用者在做上一個(gè)類(lèi)別切換時(shí)，不需回到上一層做選擇。
- 基于用戶(hù)創(chuàng)新
界面設(shè)計(jì)日新月異，夢(mèng)創(chuàng)義堅(jiān)持基于用戶(hù)需求的界面創(chuàng)新設(shè)計(jì)……
- 服務(wù)設(shè)計(jì)思維
互聯(lián)網(wǎng)的格局發(fā)生的改變，在我們進(jìn)行設(shè)計(jì)服務(wù)時(shí)更是考慮不同用戶(hù)、不同……
- 洞察用戶(hù)心理
洞察用戶(hù)有意識(shí)和無(wú)意識(shí)的行為以及心理特征通過(guò)構(gòu)造一系列的服務(wù)來(lái)促進(jìn)……
- 查看更多 >>
最新新聞Latest News
- 中小型企業(yè)網(wǎng)站建設(shè)完應(yīng)該如何營(yíng)銷(xiāo)
- 很多中小型企業(yè)往往糾結(jié)于以下10個(gè)問(wèn)題：一、我們起步比別人晚，我們的……
- 做企業(yè)網(wǎng)站到底做給誰(shuí)看？
- 設(shè)計(jì)經(jīng)常時(shí)不時(shí)的遇到一些企業(yè)客戶(hù)，常常搞不清楚誰(shuí)會(huì)真正看你的企業(yè)網(wǎng)……
- 傳統(tǒng)企業(yè)進(jìn)軍移動(dòng)互聯(lián)網(wǎng)，從移動(dòng)云網(wǎng)站開(kāi)始
- 移動(dòng)互聯(lián)網(wǎng)是移動(dòng)通信和互聯(lián)網(wǎng)融合的產(chǎn)物，其發(fā)展的重要基礎(chǔ)便是智能手……
- 網(wǎng)站建設(shè)和運(yùn)營(yíng)五大細(xì)節(jié)決定用戶(hù)黏性
- 網(wǎng)站的成功離不開(kāi)搜索引擎優(yōu)化，更離不開(kāi)最基礎(chǔ)最根本的用戶(hù)群體，如何……
- 2015年值得關(guān)注的電子商務(wù)5大趨勢(shì)
- 線(xiàn)上線(xiàn)下銷(xiāo)售的界線(xiàn)正在變得越來(lái)越模糊。在2015年，這一趨勢(shì)仍將繼續(xù)�！�
|
公安部備案號(hào) 11010502032413
