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

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

文章導讀：在(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)為(wei)80%yishang，tongsudishuo，xianzaishoujikeyiqingyierqiegengfangbiankuaijienengwanchengdeshishuihuizaiyongdiannaone？name，duiyudianshangxingyelaishuo
，shoujiduanyemianshijiaoshejichengweizhongdianguanzhuduixiangzhiyi。

正文：

手機端頁麵的設計有許多的規範，大到涉及整個頁麵的排版呈現方式

，小到一個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端來進行更改調整的
，所以很多小夥伴直接在pcduandejichushangzhijiejinxingshousuo，ranhoubianxing，dabufencaozuojiuhuishixiao，zheyangdehuajiuhuiyingxiangdaowuxianduanwenzidekeduxingyijizhenggeshijiaohuamiandebuju，zaochengzhenggeshijiaobujudebuxietiaoxing。

（二）
、解決方法:

針對無線端與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端的內容原封不動地搬到無線端的話，就會顯得擁擠不堪，導致整個頁麵布局看起來太過於糟亂，重點信息不能夠很好地展示。

（二）
、解決方法：

shoujiduanchicunxiangduishoujiduanhenxiao，suoyirangyemiankanqilaijiandanyoucengcishibijiaozhongyaode，zhegedianduiyushoujiduanyemianbujushihenzhongyaode，yinweimeiyouduibijiumeiyouzhongdian
，bunengmeigedoushizhongdian，meigedouxiangtuchu，zheyangfanermeiyouzhongdianle，qishixianzaijianjiefengshihenduodapaizhiyaodeyingxiaoshouduan，kenengshiyinweipingguojianjiefengdangxiabijiaoshengxing
，kanqilaibijiaoyougaojigan，danshibingbushihesuoyoudeyemian，yinweileisiyixieshipinleihaiyouyixiecuxiaoleiyemian，xuyaozhongdiantuchuxinxibufen
，zhegeshigenjuzishenpinpaidianpudingweilaijuedingde。

一些品牌的簡潔風頁麵：

（網上素材）

三、用戶體驗

（一）、按照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)

、理念等。