購物網站設計趨勢：手機網頁選單設計
2017.03.30
hulianwangfazhankuaisu，wangyedeshejifangshibixubuduangengxin，wangyeshejizhongyouxuduoshejiyuansuhuiyingxiangshiyongzhecaozuo，qizhongxuandanshiyindaoxiaofeizhedaodachanpinyemianhenzhongyaodemeijie，jintianyaoxiancongxuandanshejitanqi，xianjinxuandandeshejiqushi，bingtouguojigezhimingpinpaiwangzhanyudajiafenxiang，zhexiepinpaitamenshizenmerangxiaofeizhegengrongyizhaodaoxiangyaodechanpin，yiqilaikankanba！
為什麼網頁設計方式必須一直求新？
由於互聯網發展快速，網頁設計與開發又與這些息息相關，我們就需要依照趨勢與需求，去學習與改變我們的設計方式，例如2007-2010年時期智能手機的普及，衍生了手機版網頁與平版網頁的設計需求，也改變了製作軟件發展，進而產生響應式設計的方式，在2015年nian手shou機ji屏ping幕mu尺chi寸cun趨qu向xiang大da屏ping幕mu的de改gai變bian，也ye再zai次ci重zhong新xin調tiao整zheng了le手shou機ji版ban網wang頁ye的de配pei置zhi，網wang頁ye設she計ji師shi要yao不bu斷duan因yin應ying科ke技ji趨qu勢shi與yu市shi場chang需xu求qiu，學xue習xi新xin的de設she計ji方fang式shi。
現今消費者的使用趨勢
2014年與2015年相較，民眾使用行動裝置購物從五成提高至八成，手機與平版的消費人數上升3倍，而電腦版人數卻減少了22%，我們合理推測有幾個原因：
一、裝置的改變 大屏幕手機銷售量占比將達 46%，超越中型手機兩成行動裝置之冠！小屏幕要呈現購物流程等複雜的介麵，據有相當大的難度，屏幕尺寸與解析度的提升，擴大了可視範圍，對於使用者瀏覽更為容易。
二、消費者使用習慣改變，消費者經常接觸手機，習慣使用手機上網與操作，對於手機信賴度提高。
三、網頁設計更為容易操作，手shou機ji版ban購gou物wu網wang頁ye越yue來lai越yue容rong易yi操cao作zuo，甚shen至zhi簡jian化hua過guo後hou介jie麵mian會hui來lai的de比bi電dian腦nao版ban簡jian單dan許xu多duo。方fang便bian性xing與yu使shi用yong習xi慣guan改gai變bian，讓rang消xiao費fei者zhe願yuan意yi選xuan擇ze使shi用yong手shou機ji來lai上shang網wang購gou物wu。
透tou過guo以yi上shang的de介jie紹shao我wo們men可ke以yi了le解jie到dao手shou機ji版ban購gou物wu網wang頁ye設she計ji的de趨qu勢shi與yu重zhong要yao性xing，網wang頁ye設she計ji有you很hen多duo需xu要yao注zhu意yi的de地di方fang，今jin天tian我wo們men就jiu先xian來lai談tan談tan手shou機ji版ban購gou物wu網wang站zhan的de選xuan單dan設she計ji。
手機版網頁選單需著重導航設計
選xuan單dan是shi引yin導dao使shi用yong者zhe進jin入ru產chan品pin頁ye麵mian的de媒mei介jie，不bu論lun是shi電dian腦nao版ban或huo行xing動dong版ban網wang頁ye，都dou要yao著zhe重zhong導dao航hang設she計ji，特te別bie在zai於yu手shou機ji的de畫hua麵mian有you限xian情qing況kuang下xia，應ying以yi導dao航hang為wei主zhu，將jiang選xuan單dan舍she棄qi多duo餘yu的de美mei編bian圖tu片pian、效xiao果guo及ji非fei必bi要yao功gong能neng。過guo去qu在zai手shou機ji版ban網wang頁ye中zhong，對dui於yu手shou機ji的de小xiao屏ping幕mu，我wo們men會hui采cai用yong一yi欄lan式shi設she計ji並bing加jia大da字zi級ji等deng，但dan現xian今jin手shou機ji屏ping幕mu尺chi寸cun以yi及ji解jie析xi度du的de提ti升sheng，在zai產chan品pin目mu錄lu頁ye中zhong普pu遍bian改gai采cai用yong兩liang欄lan式shi呈cheng現xian，接jie下xia來lai透tou過guo幾ji個ge案an例li讓rang大da家jia看kan看kan他ta們men是shi怎zen麼me設she計ji選xuan單dan的de。
案例分析
案例一：Lativ 來源網址：m.lativ.com.tw
Lativ在選單設計上沒有主選單的圖，直接列出產品的大分類，將其他的會員、購物車放在下方，減少了展開選單的步驟，並營造簡潔風格。
案例二：Uniqlo 來源網址：www.uniqlo.com/tw
Uniqlo選xuan單dan透tou過guo不bu同tong顏yan色se來lai區qu分fen產chan品pin大da分fen類lei，點dian擊ji選xuan單dan圖tu後hou直zhi接jie列lie出chu第di二er層ceng選xuan單dan，直zhi得de關guan注zhu的de是shi，可ke能neng由you於yu服fu飾shi業ye中zhong女nv性xing網wang購gou族zu群qun相xiang較jiao於yu男nan性xing來lai的de高gao，不bu論lun是shi首shou頁ye的de選xuan單dan排pai序xu，或huo是shi點dian擊ji主zhu選xuan單dan後hou所suo展zhan開kai的de畫hua麵mian，都dou以yi女nv裝zhuang為wei優you先xian，這zhe是shi一yi個ge了le解jie自zi己ji客ke群qun後hou，所suo做zuo出chu的de良liang好hao設she計ji方fang式shi。在zai第di三san層ceng的de選xuan單dan中zhong使shi用yong產chan品pin類lei別bie的de圖tu、文呈現，並使用兩欄排列，類別示意圖能夠幫助使用者快速分辯產品類別，也增加選單活潑性。
案例三：A Common Space 來源網址：www.acommonspace.com
A Common Space不bu同tong於yu他ta在zai電dian腦nao版ban的de設she計ji，將jiang最zui底di層ceng分fen類lei直zhi接jie作zuo為wei手shou機ji版ban選xuan單dan，由you兩liang層ceng選xuan單dan變bian成cheng一yi層ceng，讓rang使shi用yong者zhe在zai選xuan擇ze產chan品pin類lei別bie時shi更geng為wei輕qing鬆song，也ye將jiang不bu會hui一yi直zhi使shi用yong到dao的de功gong能neng，如ru社she群qun、幣別等，收合在選單中，盡可能的保持畫麵幹淨。
案例四：H&M 來源網址：m2.hm.com/m/en_gb/hm-com.genericdevice.html
H&M的(de)選(xuan)單(dan)使(shi)用(yong)跳(tiao)頁(ye)方(fang)式(shi)，在(zai)進(jin)入(ru)第(di)二(er)層(ceng)時(shi)加(jia)入(ru)該(gai)類(lei)別(bie)的(de)視(shi)覺(jiao)圖(tu)像(xiang)作(zuo)搭(da)配(pei)，並(bing)使(shi)用(yong)不(bu)同(tong)的(de)畫(hua)麵(mian)，讓(rang)使(shi)用(yong)者(zhe)清(qing)楚(chu)知(zhi)道(dao)自(zi)己(ji)進(jin)入(ru)了(le)不(bu)同(tong)頁(ye)麵(mian)。在(zai)首(shou)頁(ye)區(qu)塊(kuai)中(zhong)使(shi)用(yong)產(chan)品(pin)大(da)分(fen)類(lei)，讓(rang)使(shi)用(yong)者(zhe)也(ye)可(ke)以(yi)從(cong)首(shou)頁(ye)區(qu)塊(kuai)進(jin)入(ru)產(chan)品(pin)類(lei)別(bie)。
案例五：Apple 來源網址：www.apple.com/
Apple選(xuan)單(dan)使(shi)用(yong)跳(tiao)頁(ye)方(fang)式(shi)呈(cheng)現(xian)，在(zai)選(xuan)擇(ze)產(chan)品(pin)大(da)分(fen)類(lei)後(hou)，進(jin)入(ru)該(gai)類(lei)別(bie)的(de)專(zhuan)頁(ye)，不(bu)使(shi)用(yong)相(xiang)同(tong)的(de)選(xuan)單(dan)樣(yang)式(shi)，而(er)選(xuan)擇(ze)使(shi)用(yong)橫(heng)式(shi)滑(hua)塊(kuai)，並(bing)使(shi)用(yong)分(fen)類(lei)圖(tu)做(zuo)搭(da)配(pei)，在(zai)第(di)三(san)層(ceng)產(chan)品(pin)介(jie)紹(shao)項(xiang)目(mu)頁(ye)麵(mian)中(zhong)，使(shi)用(yong)第(di)二(er)階(jie)層(ceng)下(xia)拉(la)選(xuan)單(dan)。他(ta)將(jiang)每(mei)一(yi)層(ceng)做(zuo)區(qu)分(fen)，並(bing)針(zhen)對(dui)每(mei)一(yi)層(ceng)的(de)不(bu)同(tong)需(xu)求(qiu)，而(er)對(dui)應(ying)不(bu)同(tong)的(de)選(xuan)擇(ze)方(fang)式(shi)。
案例六：PlayStation 來源網址：www.playstation.com/en-us
為什麼網頁設計方式必須一直求新？
由於互聯網發展快速，網頁設計與開發又與這些息息相關，我們就需要依照趨勢與需求，去學習與改變我們的設計方式，例如2007-2010年時期智能手機的普及，衍生了手機版網頁與平版網頁的設計需求，也改變了製作軟件發展，進而產生響應式設計的方式，在2015年nian手shou機ji屏ping幕mu尺chi寸cun趨qu向xiang大da屏ping幕mu的de改gai變bian，也ye再zai次ci重zhong新xin調tiao整zheng了le手shou機ji版ban網wang頁ye的de配pei置zhi，網wang頁ye設she計ji師shi要yao不bu斷duan因yin應ying科ke技ji趨qu勢shi與yu市shi場chang需xu求qiu，學xue習xi新xin的de設she計ji方fang式shi。
現今消費者的使用趨勢
2014年與2015年相較，民眾使用行動裝置購物從五成提高至八成，手機與平版的消費人數上升3倍，而電腦版人數卻減少了22%，我們合理推測有幾個原因：
一、裝置的改變 大屏幕手機銷售量占比將達 46%，超越中型手機兩成行動裝置之冠！小屏幕要呈現購物流程等複雜的介麵，據有相當大的難度，屏幕尺寸與解析度的提升，擴大了可視範圍，對於使用者瀏覽更為容易。
二、消費者使用習慣改變，消費者經常接觸手機，習慣使用手機上網與操作，對於手機信賴度提高。
三、網頁設計更為容易操作，手shou機ji版ban購gou物wu網wang頁ye越yue來lai越yue容rong易yi操cao作zuo，甚shen至zhi簡jian化hua過guo後hou介jie麵mian會hui來lai的de比bi電dian腦nao版ban簡jian單dan許xu多duo。方fang便bian性xing與yu使shi用yong習xi慣guan改gai變bian，讓rang消xiao費fei者zhe願yuan意yi選xuan擇ze使shi用yong手shou機ji來lai上shang網wang購gou物wu。
透tou過guo以yi上shang的de介jie紹shao我wo們men可ke以yi了le解jie到dao手shou機ji版ban購gou物wu網wang頁ye設she計ji的de趨qu勢shi與yu重zhong要yao性xing，網wang頁ye設she計ji有you很hen多duo需xu要yao注zhu意yi的de地di方fang，今jin天tian我wo們men就jiu先xian來lai談tan談tan手shou機ji版ban購gou物wu網wang站zhan的de選xuan單dan設she計ji。
手機版網頁選單需著重導航設計
選xuan單dan是shi引yin導dao使shi用yong者zhe進jin入ru產chan品pin頁ye麵mian的de媒mei介jie，不bu論lun是shi電dian腦nao版ban或huo行xing動dong版ban網wang頁ye，都dou要yao著zhe重zhong導dao航hang設she計ji，特te別bie在zai於yu手shou機ji的de畫hua麵mian有you限xian情qing況kuang下xia，應ying以yi導dao航hang為wei主zhu，將jiang選xuan單dan舍she棄qi多duo餘yu的de美mei編bian圖tu片pian、效xiao果guo及ji非fei必bi要yao功gong能neng。過guo去qu在zai手shou機ji版ban網wang頁ye中zhong，對dui於yu手shou機ji的de小xiao屏ping幕mu，我wo們men會hui采cai用yong一yi欄lan式shi設she計ji並bing加jia大da字zi級ji等deng，但dan現xian今jin手shou機ji屏ping幕mu尺chi寸cun以yi及ji解jie析xi度du的de提ti升sheng，在zai產chan品pin目mu錄lu頁ye中zhong普pu遍bian改gai采cai用yong兩liang欄lan式shi呈cheng現xian，接jie下xia來lai透tou過guo幾ji個ge案an例li讓rang大da家jia看kan看kan他ta們men是shi怎zen麼me設she計ji選xuan單dan的de。
案例分析
案例一：Lativ 來源網址：m.lativ.com.tw
Lativ在選單設計上沒有主選單的圖，直接列出產品的大分類，將其他的會員、購物車放在下方，減少了展開選單的步驟，並營造簡潔風格。
案例二：Uniqlo 來源網址：www.uniqlo.com/tw
Uniqlo選xuan單dan透tou過guo不bu同tong顏yan色se來lai區qu分fen產chan品pin大da分fen類lei，點dian擊ji選xuan單dan圖tu後hou直zhi接jie列lie出chu第di二er層ceng選xuan單dan，直zhi得de關guan注zhu的de是shi，可ke能neng由you於yu服fu飾shi業ye中zhong女nv性xing網wang購gou族zu群qun相xiang較jiao於yu男nan性xing來lai的de高gao，不bu論lun是shi首shou頁ye的de選xuan單dan排pai序xu，或huo是shi點dian擊ji主zhu選xuan單dan後hou所suo展zhan開kai的de畫hua麵mian，都dou以yi女nv裝zhuang為wei優you先xian，這zhe是shi一yi個ge了le解jie自zi己ji客ke群qun後hou，所suo做zuo出chu的de良liang好hao設she計ji方fang式shi。在zai第di三san層ceng的de選xuan單dan中zhong使shi用yong產chan品pin類lei別bie的de圖tu、文呈現，並使用兩欄排列，類別示意圖能夠幫助使用者快速分辯產品類別，也增加選單活潑性。
案例三：A Common Space 來源網址：www.acommonspace.com
A Common Space不bu同tong於yu他ta在zai電dian腦nao版ban的de設she計ji，將jiang最zui底di層ceng分fen類lei直zhi接jie作zuo為wei手shou機ji版ban選xuan單dan，由you兩liang層ceng選xuan單dan變bian成cheng一yi層ceng，讓rang使shi用yong者zhe在zai選xuan擇ze產chan品pin類lei別bie時shi更geng為wei輕qing鬆song，也ye將jiang不bu會hui一yi直zhi使shi用yong到dao的de功gong能neng，如ru社she群qun、幣別等，收合在選單中，盡可能的保持畫麵幹淨。
案例四：H&M 來源網址：m2.hm.com/m/en_gb/hm-com.genericdevice.html
H&M的(de)選(xuan)單(dan)使(shi)用(yong)跳(tiao)頁(ye)方(fang)式(shi)，在(zai)進(jin)入(ru)第(di)二(er)層(ceng)時(shi)加(jia)入(ru)該(gai)類(lei)別(bie)的(de)視(shi)覺(jiao)圖(tu)像(xiang)作(zuo)搭(da)配(pei)，並(bing)使(shi)用(yong)不(bu)同(tong)的(de)畫(hua)麵(mian)，讓(rang)使(shi)用(yong)者(zhe)清(qing)楚(chu)知(zhi)道(dao)自(zi)己(ji)進(jin)入(ru)了(le)不(bu)同(tong)頁(ye)麵(mian)。在(zai)首(shou)頁(ye)區(qu)塊(kuai)中(zhong)使(shi)用(yong)產(chan)品(pin)大(da)分(fen)類(lei)，讓(rang)使(shi)用(yong)者(zhe)也(ye)可(ke)以(yi)從(cong)首(shou)頁(ye)區(qu)塊(kuai)進(jin)入(ru)產(chan)品(pin)類(lei)別(bie)。
案例五：Apple 來源網址：www.apple.com/
Apple選(xuan)單(dan)使(shi)用(yong)跳(tiao)頁(ye)方(fang)式(shi)呈(cheng)現(xian)，在(zai)選(xuan)擇(ze)產(chan)品(pin)大(da)分(fen)類(lei)後(hou)，進(jin)入(ru)該(gai)類(lei)別(bie)的(de)專(zhuan)頁(ye)，不(bu)使(shi)用(yong)相(xiang)同(tong)的(de)選(xuan)單(dan)樣(yang)式(shi)，而(er)選(xuan)擇(ze)使(shi)用(yong)橫(heng)式(shi)滑(hua)塊(kuai)，並(bing)使(shi)用(yong)分(fen)類(lei)圖(tu)做(zuo)搭(da)配(pei)，在(zai)第(di)三(san)層(ceng)產(chan)品(pin)介(jie)紹(shao)項(xiang)目(mu)頁(ye)麵(mian)中(zhong)，使(shi)用(yong)第(di)二(er)階(jie)層(ceng)下(xia)拉(la)選(xuan)單(dan)。他(ta)將(jiang)每(mei)一(yi)層(ceng)做(zuo)區(qu)分(fen)，並(bing)針(zhen)對(dui)每(mei)一(yi)層(ceng)的(de)不(bu)同(tong)需(xu)求(qiu)，而(er)對(dui)應(ying)不(bu)同(tong)的(de)選(xuan)擇(ze)方(fang)式(shi)。
案例六：PlayStation 來源網址：www.playstation.com/en-us
PlayStation在(zai)第(di)一(yi)層(ceng)選(xuan)單(dan)點(dian)擊(ji)後(hou)，左(zuo)側(ce)保(bao)留(liu)原(yuan)本(ben)第(di)一(yi)層(ceng)分(fen)類(lei)圖(tu)，右(you)側(ce)顯(xian)示(shi)第(di)二(er)層(ceng)分(fen)類(lei)，清(qing)楚(chu)讓(rang)使(shi)用(yong)者(zhe)知(zhi)道(dao)現(xian)在(zai)在(zai)哪(na)一(yi)個(ge)類(lei)別(bie)之(zhi)下(xia)，使(shi)用(yong)者(zhe)在(zai)做(zuo)上(shang)一(yi)個(ge)類(lei)別(bie)切(qie)換(huan)時(shi)，不(bu)需(xu)回(hui)到(dao)上(shang)一(yi)層(ceng)做(zuo)選(xuan)擇(ze)。
薦讀文章：在線商城類網站設計如何吸引顧客
