無線端頁麵設計“三大雷區”

關鍵詞：無線端 規範 用戶體驗

文章導讀：在zai當dang代dai互hu聯lian網wang時shi代dai，智zhi能neng手shou機ji的de運yun用yong幾ji乎hu遍bian布bu整zheng個ge世shi界jie，人ren們men越yue來lai越yue注zhu重zhong手shou機ji端duan的de研yan究jiu開kai發fa與yu應ying用yong，而er隨sui著zhe智zhi能neng手shou機ji設she備bei的de發fa展zhan成cheng熟shu
，淘tao寶bao不bu停ting地di把ba流liu量liang引yin到dao移yi動dong端duan上shang
，現xian在zai移yi動dong端duan占zhan流liu量liang比bi率lv為wei80%以(yi)上(shang)，通(tong)俗(su)地(di)說(shuo)，現(xian)在(zai)手(shou)機(ji)可(ke)以(yi)輕(qing)易(yi)而(er)且(qie)更(geng)方(fang)便(bian)快(kuai)捷(jie)能(neng)完(wan)成(cheng)的(de)事(shi)誰(shui)會(hui)再(zai)用(yong)電(dian)腦(nao)呢(ne)？那(na)麼(me)，對(dui)於(yu)電(dian)商(shang)行(xing)業(ye)來(lai)說(shuo)，手(shou)機(ji)端(duan)頁(ye)麵(mian)視(shi)覺(jiao)設(she)計(ji)成(cheng)為(wei)重(zhong)點(dian)關(guan)注(zhu)對(dui)象(xiang)之(zhi)一(yi)。

正文：

手機端頁麵的設計有許多的規範，大到涉及整個頁麵的排版呈現方式，小到一個icon的de尺chi寸cun大da小xiao
，這zhe都dou關guan係xi到dao視shi覺jiao頁ye麵mian的de美mei觀guan程cheng度du以yi及ji用yong戶hu體ti驗yan設she計ji。所suo以yi應ying該gai積ji極ji主zhu動dong去qu分fen析xi深shen入ru了le解jie並bing研yan究jiu出chu可ke行xing的de解jie決jue方fang案an，同tong樣yang的de
，無wu線xian端duan頁ye麵mian設she計ji存cun在zai許xu多duo雷lei區qu陷xian阱jing
，這zhe個ge需xu要yao設she計ji師shi去qu避bi免mian出chu現xian錯cuo誤wu的de。

一、無線端視覺規範

（一）、無線端頁麵尺寸規範隨意縮放

無線端頁麵一般來說是延續pc端來進行更改調整的，所以很多小夥伴直接在pc端(duan)的(de)基(ji)礎(chu)上(shang)直(zhi)接(jie)進(jin)行(xing)收(shou)縮(suo)
，然(ran)後(hou)變(bian)形(xing)，大(da)部(bu)分(fen)操(cao)作(zuo)就(jiu)會(hui)失(shi)效(xiao)，這(zhe)樣(yang)的(de)話(hua)就(jiu)會(hui)影(ying)響(xiang)到(dao)無(wu)線(xian)端(duan)文(wen)字(zi)的(de)可(ke)讀(du)性(xing)以(yi)及(ji)整(zheng)個(ge)視(shi)覺(jiao)畫(hua)麵(mian)的(de)布(bu)局(ju)，造(zao)成(cheng)整(zheng)個(ge)視(shi)覺(jiao)布(bu)局(ju)的(de)不(bu)協(xie)調(tiao)性(xing)。

（二）、解決方法:

針對無線端與pc端存在的差異，首先應該不能直接在pc端的原基礎上進行修改
，而是應該對無線端的頁麵進行“再設計”，針對手機端的規範尺寸進行適配
，比如：應該調整按鈕大小，以更加適合無線端用戶的視覺可讀習慣、文字大小
，一般18px的字號是剛好可以清楚的程度，而24px是比較舒服的一個狀態
，30px是(shi)用(yong)於(yu)想(xiang)到(dao)重(zhong)點(dian)突(tu)出(chu)的(de)大(da)標(biao)題(ti)
，不(bu)過(guo)一(yi)般(ban)在(zai)頁(ye)麵(mian)中(zhong)出(chu)現(xian)頻(pin)率(lv)不(bu)高(gao)，因(yin)為(wei)如(ru)果(guo)一(yi)味(wei)用(yong)大(da)標(biao)題(ti)字(zi)體(ti)的(de)話(hua)，盡(jin)管(guan)可(ke)讀(du)性(xing)比(bi)較(jiao)好(hao)，但(dan)是(shi)頁(ye)麵(mian)也(ye)需(xu)要(yao)加(jia)長(chang)，用(yong)戶(hu)會(hui)沒(mei)有(you)耐(nai)心(xin)。

類似這些頁麵的無線端就是進行過“再設計”的：

（網上素材）

二

、無線端頁麵呈現內容

（一）、pc端內容信息量大，一字不漏照搬到無線端

由於pc端的頁麵尺寸比無線端大很多，所以pc端承載的信息內容相對比較全麵,但無線端尺寸相對小很多，如果把所有pc端的內容原封不動地搬到無線端的話，就會顯得擁擠不堪
，導致整個頁麵布局看起來太過於糟亂，重點信息不能夠很好地展示。

（二）、解決方法：

手(shou)機(ji)端(duan)尺(chi)寸(cun)相(xiang)對(dui)手(shou)機(ji)端(duan)很(hen)小(xiao)，所(suo)以(yi)讓(rang)頁(ye)麵(mian)看(kan)起(qi)來(lai)簡(jian)單(dan)有(you)層(ceng)次(ci)是(shi)比(bi)較(jiao)重(zhong)要(yao)的(de)，這(zhe)個(ge)點(dian)對(dui)於(yu)手(shou)機(ji)端(duan)頁(ye)麵(mian)布(bu)局(ju)是(shi)很(hen)重(zhong)要(yao)的(de)

，因(yin)為(wei)沒(mei)有(you)對(dui)比(bi)就(jiu)沒(mei)有(you)重(zhong)點(dian)，不(bu)能(neng)每(mei)個(ge)都(dou)是(shi)重(zhong)點(dian)，每(mei)個(ge)都(dou)想(xiang)突(tu)出(chu)，這(zhe)樣(yang)反(fan)而(er)沒(mei)有(you)重(zhong)點(dian)了(le)，其(qi)實(shi)現(xian)在(zai)簡(jian)潔(jie)風(feng)是(shi)很(hen)多(duo)大(da)牌(pai)隻(zhi)要(yao)的(de)營(ying)銷(xiao)手(shou)段(duan)，可(ke)能(neng)是(shi)因(yin)為(wei)蘋(ping)果(guo)簡(jian)潔(jie)風(feng)當(dang)下(xia)比(bi)較(jiao)盛(sheng)行(xing)，看(kan)起(qi)來(lai)比(bi)較(jiao)有(you)高(gao)級(ji)感(gan)，但(dan)是(shi)並(bing)不(bu)適(shi)合(he)所(suo)有(you)的(de)頁(ye)麵(mian)，因(yin)為(wei)類(lei)似(si)一(yi)些(xie)食(shi)品(pin)類(lei)還(hai)有(you)一(yi)些(xie)促(cu)銷(xiao)類(lei)頁(ye)麵(mian)，需(xu)要(yao)重(zhong)點(dian)突(tu)出(chu)信(xin)息(xi)部(bu)分(fen)

，這(zhe)個(ge)事(shi)根(gen)據(ju)自(zi)身(shen)品(pin)牌(pai)店(dian)鋪(pu)定(ding)位(wei)來(lai)決(jue)定(ding)的(de)。

一些品牌的簡潔風頁麵：

（網上素材）

三、用戶體驗

（一）、按照pc端的用戶體驗操作習慣延續到無線端頁麵上

 首先pc端一般用戶習慣是點擊鼠標左右滑動瀏覽banner圖或者向上下滑動鼠標瀏覽頁麵，而無線端一般用戶的操作習慣是一直向上下移動瀏覽頁麵，而且操作環境的選擇也會有所區別，在PC端上，點擊店鋪內容的方式更加直接，用戶隻需要通過鼠標來操作

，而在無線端
，直接用手指和屏幕之間直接接觸，很多人會直接把pc端的頁麵展示方式直接搬到無線端上， 但是現在手機端以輪播的形式展示的點擊率越來越低了，很多重點信息內容都在banner圖上展示，這樣就會造成店鋪點擊率降低。

（二）、解決方法：

因(yin)為(wei)目(mu)前(qian)無(wu)線(xian)端(duan)的(de)店(dian)鋪(pu)比(bi)重(zhong)占(zhan)據(ju)了(le)很(hen)大(da)的(de)一(yi)部(bu)分(fen)，所(suo)以(yi)還(hai)是(shi)要(yao)注(zhu)重(zhong)無(wu)線(xian)端(duan)的(de)用(yong)戶(hu)體(ti)驗(yan)設(she)計(ji)
，首(shou)先(xian)應(ying)該(gai)積(ji)極(ji)主(zhu)動(dong)引(yin)導(dao)用(yong)戶(hu)行(xing)為(wei)
，所(suo)以(yi)不(bu)是(shi)很(hen)有(you)必(bi)要(yao)的(de)話(hua)盡(jin)量(liang)避(bi)免(mian)以(yi)輪(lun)播(bo)圖(tu)的(de)形(xing)式(shi)展(zhan)現(xian)，因(yin)為(wei)用(yong)戶(hu)已(yi)經(jing)習(xi)慣(guan)了(le)上(shang)下(xia)的(de)瀏(liu)覽(lan)操(cao)作(zuo)習(xi)慣(guan)，所(suo)以(yi)一(yi)般(ban)都(dou)不(bu)會(hui)主(zhu)動(dong)左(zuo)右(you)滑(hua)動(dong)。

類似這些很好的無線端用戶體驗設計：

（網上素材）

總結：

對於無線端頁麵的設計，用戶體驗是非常重要的，盡管現在無線店鋪設計是處於弱勢，一般都是直接照搬pc端duan的de頁ye麵mian，但dan是shi從cong現xian在zai電dian商shang的de發fa展zhan趨qu勢shi來lai說shuo，無wu線xian端duan的de用yong戶hu越yue來lai越yue多duo
，所suo以yi相xiang信xin大da家jia很hen越yue來lai越yue重zhong視shi無wu線xian端duan頁ye麵mian的de設she計ji，設she計ji師shi也ye要yao深shen入ru去qu學xue習xi無wu線xian端duan的de設she計ji規gui範fan、理念等。