對手機移動客戶端頁面優(yōu)化的幾點建議
百度移動版網(wǎng)頁頁面質(zhì)量評判標準是什么
一：怎樣做好頁面設(shè)計
(1)，頁面適配手機屏幕
(2)頁面專門針對手機屏幕設(shè)計:
1、頁面隨屏幕寬度變化，無橫向滾動條
2、不放大時，能清晰瀏覽內(nèi)容，文字大小不低于12像素
3、不放大時，按鈕、鏈接等點擊方便，按鈕尺寸不能過大或過小
(3)使用最多三級的頁面結(jié)構(gòu)
減少移動站的頁面層級，降低用戶認知難度，一個標準的移動站應(yīng)該包含首頁、列表頁和詳情頁三種類型，以滿足廣告主的推廣需求和用戶的認知需要;頁面類型及層級建議不超過3個，保證簡單、高效的用戶體驗。使用盡量淺的頁間結(jié)構(gòu)，減少用戶點擊次數(shù)，提升瀏覽體驗。
1、首頁：整站內(nèi)容索引，內(nèi)容預(yù)覽(使用“更多” “詳情”等鏈接)，首頁作為用戶分流前到達的頁面，要求能夠匯集整個網(wǎng)站的大部分模塊和功能，以保證不同需求的用戶在著陸后都能尋找到自己想要的信息。內(nèi)容式一般首頁又可以分為導(dǎo)航式和內(nèi)容式，導(dǎo)航式因其風(fēng)格簡潔，一般又可用作品牌宣傳，起到快速傳達品牌形象的作用;內(nèi)容式因其豐富的內(nèi)容，常用來快速傳達廣告主想傳遞的信息。
(移動站首頁分為導(dǎo)航式和內(nèi)容式)
2、列表頁：頻道內(nèi)容、分類、列表為主，列表頁一般用于展現(xiàn)結(jié)構(gòu)簡單，并且重復(fù)度較高的內(nèi)容，最常見于商家的產(chǎn)品/服務(wù)，形式也一般相對簡單，用于滿足展現(xiàn)多產(chǎn)品/服務(wù)的需求，根據(jù)商家產(chǎn)品/服務(wù)信息不同一般分為純文字和圖文兩種基本形式。
3、詳情頁：詳介紹，推薦以結(jié)構(gòu)化形式展現(xiàn)內(nèi)容，詳情頁一般用作展示首頁和列表頁未顯示完全的信息，以滿足用戶了解詳情的需求，從而輔助用戶進行決策。
(4)使用清晰的導(dǎo)航組件
全站導(dǎo)航：快速到達各個頻道
局部導(dǎo)航：在單個頻道的首頁、列表、詳情頁面間移動
相關(guān)鏈接：相關(guān)頻道之間的鏈接
(5)頁面單列布局，重要內(nèi)容顯示在首屏
頁面內(nèi)容模塊從上到下，單列布局，重要內(nèi)容展現(xiàn)在首屏。
(6)保證良好的可用性，頁面內(nèi)容無缺失，交互功能正常使用。
不使用flash
使用html5來實現(xiàn)動畫
(7)優(yōu)秀交互方式，簡化操作流程，提升使用體驗
優(yōu)秀的交互方式能很有效地提升用戶體驗，一方面能夠簡化操作流程提升操作效率，另外對于產(chǎn)品功能易用性的提升也是較大的。
滑動切換圖片相比于自動切換和點擊切換，滑動切換增強了用戶操作的主動性、同時提升了切換的便捷性。
滑動切換頁面用戶可以通過滑動進行頁面之間的切換，節(jié)省用戶尋址時間。
點擊放大圖片點擊縮略圖放大圖片，減少了操作流程，一定程度上減少了因頁面跳轉(zhuǎn)帶來的用戶流失。
頁面區(qū)域點擊區(qū)域點擊能較大提升用戶點擊的效率，減少用戶因定位點擊區(qū)域造成的效率損失。
點擊加載更多一方面減少單張頁面的非必要信息，讓頁面變得簡潔，同時能減少頁面間的跳轉(zhuǎn)，降低因網(wǎng)速等原因造成的用戶流失。
(8)保證廣泛的兼容性，在主流OS、瀏覽器中均可正常展現(xiàn)
操作系統(tǒng)：Android，iOS;瀏覽器：UC、QQ、iOS Safari、Android原生、Baidu
二：內(nèi)容設(shè)置的幾條準則
(1)一致性：著陸頁內(nèi)容與關(guān)鍵字、廣告文字的相關(guān)性，不僅保證廣告與目標頁面呼應(yīng)和一致，更重要的能夠提升潛在客戶在著陸頁上面的點擊次數(shù)，減少客戶流失。
(2)可信度：通過告知潛在客戶公司名稱、聯(lián)系地址、客服電話等信息，能夠有效地提升網(wǎng)站(公司)的可信度。
(3)重要信息首屏顯示：具體產(chǎn)品信息盡量出現(xiàn)在網(wǎng)頁的第1~2屏，避免與用戶玩尋寶游戲。
(重要信息首屏顯示)
(4)根據(jù)行業(yè)特性，放置針對性的內(nèi)容
重點關(guān)注移動頁面的信息構(gòu)建，以滿足用戶需求
基礎(chǔ)信息：公司介紹、產(chǎn)品/服務(wù)介紹、etc.
信任信息：榮譽資質(zhì)、專家團隊、案例，etc.
轉(zhuǎn)化信息：電話、地址，etc.
(5)精簡文字，處理好圖片
精簡文字量：PC內(nèi)容一半左右，
使用圖片、幻燈片提升展示效果，并注意壓縮圖片尺寸，
推薦用寬圖片展示LOGO，正方形圖片展示產(chǎn)品。
三：優(yōu)化頁面性能
(1)控制加載時間與網(wǎng)頁大小
(跳出前等待時間的用戶比例)
加載時間：單頁面5S以內(nèi)
網(wǎng)頁大?。簡雾撁?0K以內(nèi)
優(yōu)化加載時間和網(wǎng)頁大?。褐攸c在前端優(yōu)化
減少HTTP請求：減少重定向，合并圖片，懶加載……
減少傳輸數(shù)據(jù)大?。簤嚎s圖像，開啟GZIP……
考慮到移動設(shè)備和移動互聯(lián)網(wǎng)的特點，在進行移動網(wǎng)站的頁面開發(fā)設(shè)計時，一個總的原則是考慮用戶訪問的效率，降低頁面加載時間。
(2)減少訪問請求數(shù)
從設(shè)計實現(xiàn)層面簡化頁面，不要放太多的圖片、復(fù)雜的表達、動畫、視頻等等，
資源合并及壓縮：比如將背景圖片、導(dǎo)航圖片等等作為一張圖片，這樣只需一次請求，而不是多次。
靜態(tài)資源(Css、Js、Image)懶加載
異步執(zhí)行inline腳本
避免重復(fù)的資源請求
縮小cooike
設(shè)置連接方式為keep-alive
減少DNS查詢
移動端可見區(qū)域是有限的，采用延遲加載方式
開啟服務(wù)器壓縮(gzip方式)
(3)優(yōu)化圖片處理
圖片走CDN
少用動態(tài)gif圖
圖片不適宜過多及過大
零碎圖片使用css Sprite技術(shù)一次性下載
避免使用bmp圖片
圖片壓縮
(4)優(yōu)化HTML
減少HTML標簽，減少不必要的嵌套
廢棄table標簽
減少DOM深度
壓縮HTML，去掉注釋，空格換行等信息
(5)優(yōu)化JS
使用臨時變量或者數(shù)組存儲document.images及document.forms等集合數(shù)據(jù)
慎用with語法
使用AJAX緩存
避免eval及Function語法
避免使用inlineScript
異步、底部加載js
合并壓縮js
字符串連接使用數(shù)組的join方式
上一篇：沒有了