淘寶轉(zhuǎn)讓麥淘網(wǎng)：無線端頁面設(shè)計(jì)“三大雷區(qū)”

  手機(jī)端頁面的設(shè)計(jì)有許多的規(guī)范，大到涉及整個(gè)頁面的排版呈現(xiàn)方式，小到一個(gè)icon的尺寸大小，這都關(guān)系到視覺頁面的美觀程度以及用戶體驗(yàn)設(shè)計(jì)。所以應(yīng)該積極主動(dòng)去分析深入了解并研究出可行的解決方案，同樣的，無線端頁面設(shè)計(jì)存在許多雷區(qū)陷阱，這個(gè)需要設(shè)計(jì)師去避免出現(xiàn)錯(cuò)誤的。

  一、無線端視覺規(guī)范

  1、無線端頁面尺寸規(guī)范隨意縮放

  無線端頁面一般來說是延續(xù)pc端來進(jìn)行更改調(diào)整的，所以很多小伙伴直接在pc端的基礎(chǔ)上直接進(jìn)行收縮，然后變形，大部分操作就會(huì)失效，這樣的話就會(huì)影響到無線端文字的可讀性以及整個(gè)視覺畫面的布局，造成整個(gè)視覺布局的不協(xié)調(diào)性。

  2、解決方法:

  針對(duì)無線端與pc端存在的差異，首先應(yīng)該不能直接在pc端的原基礎(chǔ)上進(jìn)行修改，而是應(yīng)該對(duì)無線端的頁面進(jìn)行“再設(shè)計(jì)”，針對(duì)手機(jī)端的規(guī)范尺寸進(jìn)行適配，比如：應(yīng)該調(diào)整按鈕大小，以更加適合無線端用戶的視覺可讀習(xí)慣、文字大小，一般18px的字號(hào)是剛好可以清楚的程度，而24px是比較舒服的一個(gè)狀態(tài)，30px是用于想到重點(diǎn)突出的大標(biāo)題，不過一般在頁面中出現(xiàn)頻率不高，因?yàn)槿绻晃队么髽?biāo)題字體的話，盡管可讀性比較好，但是頁面也需要加長，用戶會(huì)沒有耐心。

  二、無線端頁面呈現(xiàn)內(nèi)容

  1、pc端內(nèi)容信息量大，一字不漏照搬到無線端

  由于pc端的頁面尺寸比無線端大很多，所以pc端承載的信息內(nèi)容相對(duì)比較全面,但無線端尺寸相對(duì)小很多，如果把所有pc端的內(nèi)容原封不動(dòng)地搬到無線端的話，就會(huì)顯得擁擠不堪，導(dǎo)致整個(gè)頁面布局看起來太過于糟亂，重點(diǎn)信息不能夠很好地展示。

  2、解決方法：

  手機(jī)端尺寸相對(duì)手機(jī)端很小，所以讓頁面看起來簡單有層次是比較重要的，這個(gè)點(diǎn)對(duì)于手機(jī)端頁面布局是很重要的，因?yàn)闆]有對(duì)比就沒有重點(diǎn)，不能每個(gè)都是重點(diǎn)，每個(gè)都想突出，這樣反而沒有重點(diǎn)了，其實(shí)現(xiàn)在簡潔風(fēng)是很多大牌只要的營銷手段，可能是因?yàn)樘O果簡潔風(fēng)當(dāng)下比較盛行，看起來比較有高級(jí)感，但是并不適合所有的頁面，因?yàn)轭愃埔恍┮曨l食品類還有一些促銷類頁面，需要重點(diǎn)突出信息部分，這個(gè)事根據(jù)自身品牌店鋪定位來決定的。

  三、用戶體驗(yàn)

  1、按照pc端的用戶體驗(yàn)操作習(xí)慣延續(xù)到無線端頁面上

  首先pc端一般用戶習(xí)慣是點(diǎn)擊鼠標(biāo)左右滑動(dòng)瀏覽banner圖或者向上下滑動(dòng)鼠標(biāo)瀏覽頁面，而無線端一般用戶的操作習(xí)慣是一直向上下移動(dòng)瀏覽頁面，而且操作環(huán)境的選擇也會(huì)有所區(qū)別，在PC端上，點(diǎn)擊店鋪內(nèi)容的方式更加直接，用戶只需要通過鼠標(biāo)來操作，而在無線端，直接用手指和屏幕之間直接接觸，很多人會(huì)直接把pc端的頁面展示方式直接搬到無線端上，但是現(xiàn)在手機(jī)端以輪播的形式展示的點(diǎn)擊率越來越低了，很多重點(diǎn)信息內(nèi)容都在banner圖上展示，這樣就會(huì)造成店鋪點(diǎn)擊率降低。

  2、解決方法：

  因?yàn)槟壳盁o線端的店鋪比重占據(jù)了很大的一部分，所以還是要注重?zé)o線端的用戶體驗(yàn)設(shè)計(jì)，首先應(yīng)該積極主動(dòng)引導(dǎo)用戶行為，所以不是很有必要的話盡量避免以輪播圖的形式展現(xiàn)，因?yàn)橛脩粢呀?jīng)習(xí)慣了上下的瀏覽操作習(xí)慣，所以一般都不會(huì)主動(dòng)左右滑動(dòng)。