移動端網(wǎng)頁在今天雖然已經(jīng)變得越來越重要，但我們在日常使用中依然會遇到一些糟糕的頁面。近日，開發(fā)者Umer Mansoor就總結(jié)了開發(fā)移動網(wǎng)頁時應(yīng)該避免的“七宗罪”。

在移動端方寸地，有細(xì)節(jié)才能抓住用戶，可以參閱這《60個以小見大的設(shè)計細(xì)節(jié)！》，保證會學(xué)到很多。還有，記得不要犯《ANDROID應(yīng)用中十大常見UX錯誤》

一、頁面加載緩慢：

眾所周知網(wǎng)頁加載速度是網(wǎng)站性能的一項重要衡量指標(biāo)，畢竟很多時候用戶并不總是在WiFi狀態(tài)下瀏覽網(wǎng)頁，所以加載緩慢無疑是移動頁面七宗罪之首。移動網(wǎng)頁在設(shè)計時應(yīng)該避免集成過多高分辨率的圖片以及累贅的腳本文件。

 

二、排版凌亂：

當(dāng)網(wǎng)頁映入眼前，凌亂的文字排版當(dāng)然也是訪客難以忍受的。就像人們在現(xiàn)實(shí)生活中傾向于和思路清晰的人交流一樣，當(dāng)用戶和網(wǎng)頁“交流”時也希望能快速找到自己需要的信息。所以雜亂的排版同樣是移動網(wǎng)頁應(yīng)該避免的設(shè)計誤區(qū)之一。比如Eurosmartz的移動版完全不像是為移動設(shè)備設(shè)計的網(wǎng)頁。

三、導(dǎo)航功能不易使用：

隨著移動設(shè)備性能的提升，很多移動網(wǎng)頁設(shè)計者傾向于在移動端堆疊更多的內(nèi)容，這時導(dǎo)航功能就變得必不可少了?？芍T多移動頁面在設(shè)計導(dǎo)航功能時又沒有足夠重視其可操控性，比如按鈕太過緊密、鏈接間距過小、菜單過于隱蔽等等。各種社交網(wǎng)站的點(diǎn)贊功能尤其容易在滑動網(wǎng)頁時誤點(diǎn)擊。蹩腳的導(dǎo)航無疑嚴(yán)重影響了用戶和網(wǎng)頁“互動”的過程，以至于有些用戶要“抱怨”自己手指太肥。

 

四、桌面端和移動端頁面風(fēng)格差異巨大：

某些時候我們可能會遇到一些桌面端和移動端頁面風(fēng)格差異巨大的站點(diǎn)，比如Toybox。一些對此站點(diǎn)不熟悉的用戶在從Toybox的桌面端跳轉(zhuǎn)到移動端時，也許很難意識到這是同一個網(wǎng)站的兩個不同版本。雖然Toybox桌面端的動態(tài)效果挺好，但這種會給用戶造成極大困惑的設(shè)計明顯難以得到用戶的喜愛。

五、彈窗：

網(wǎng)頁彈窗在桌面端已經(jīng)令用戶厭煩不已，可不幸的是一些移動端的網(wǎng)頁設(shè)計者還是把其帶到了移動頁面上。毫無疑問由于移動設(shè)備屏幕尺寸的限制在移動端彈窗明顯會有更好的傳播效果，但無疑也會遭受到用戶更多的厭惡。

 

六、自動重定向：

當(dāng)用戶使用iPad訪問某一個網(wǎng)站時將其自動重定向到適配iPad的版本，這聽上去的確是一個好想法，可在實(shí)際操作中一樣會遇到問題。比如當(dāng)一個網(wǎng)站的移動版由于以上的種種問題讓用戶感到難以接受而想切換回桌面版時，自動重定向基本上讓用戶陷入了死循環(huán)。此外由于重定向而導(dǎo)致瀏覽器無法打開網(wǎng)頁的現(xiàn)象也時常出現(xiàn)。所以在使用自動重定向功能時應(yīng)該三思而行。

七、橫幅廣告：

作為用戶當(dāng)然可以理解網(wǎng)頁開發(fā)者在頁面上設(shè)置一些廣告，可橫幅形式的廣告無疑應(yīng)該被歸為“七宗罪”之一。從互聯(lián)網(wǎng)的發(fā)展歷程來看，橫幅廣告的思維好像還停留在1999年，可現(xiàn)在已經(jīng)是2013年末尾了。

總結(jié)看來，Umer Mansoor列舉了頁面加載緩慢、排版凌亂、導(dǎo)航功能不易使用、桌面端和移動端頁面風(fēng)格差異巨大、彈窗、自動重定向、橫幅廣告共七種讓移動頁面體驗(yàn)糟糕的“罪惡”。如果自己設(shè)計的頁面中包含這其中的某些項，也許是時候考慮做一些改進(jìn)了。

作者：程遠(yuǎn)

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.820esy.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司

更多精彩文章：

網(wǎng)站設(shè)計之一：怒馬！超實(shí)用的單頁網(wǎng)站設(shè)計指南（附大量資源）

網(wǎng)站設(shè)計之二：旅游網(wǎng)站設(shè)計分析！教你10個小技巧

網(wǎng)站設(shè)計之三：實(shí)例教學(xué)！如何將極簡風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計中？

網(wǎng)站設(shè)計之四：另辟蹊徑談創(chuàng)新！提升網(wǎng)站設(shè)計形式的幾種方法

網(wǎng)站設(shè)計之五：經(jīng)驗(yàn)分享：移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計之六：4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史！

網(wǎng)站設(shè)計之七：騰訊出品！2021-2022設(shè)計趨勢報告：動態(tài)篇

網(wǎng)站設(shè)計之八：為什么千萬別隨便學(xué)國外的極簡設(shè)計？

網(wǎng)站設(shè)計之九：高手出品！2020~2021年UI界面設(shè)計趨勢

網(wǎng)站設(shè)計之十：如何做好網(wǎng)頁頭部內(nèi)容設(shè)計？來看 58 設(shè)計師的總結(jié)！