本文是非常詳細(xì)的一份移動(dòng)建站方面的資料，上一次谷歌發(fā)布了移動(dòng)網(wǎng)站建站的十大原則，這次百度也發(fā)布了移動(dòng)建站指南，圖文并茂的描述了如何提高移動(dòng)站在百度質(zhì)量度的等級(jí)，在百度推廣后臺(tái)已經(jīng)有“移動(dòng)站點(diǎn)質(zhì)量度”的星級(jí)評(píng)價(jià)體系了，頁(yè)面大小、頁(yè)面內(nèi)容、頁(yè)面樣式、轉(zhuǎn)化渠道等因素都會(huì)影響質(zhì)量度星級(jí)，加載速度快、內(nèi)容豐富的頁(yè)面質(zhì)量度星級(jí)更高，提升移動(dòng)網(wǎng)站質(zhì)量可以增強(qiáng)用戶體驗(yàn)和轉(zhuǎn)化效果。

怎樣做好頁(yè)面設(shè)計(jì)？

(1)，頁(yè)面適配手機(jī)屏幕

(2)頁(yè)面專門針對(duì)手機(jī)屏幕設(shè)計(jì):

1、頁(yè)面隨屏幕寬度變化，無(wú)橫向滾動(dòng)條

2、不放大時(shí)，能清晰瀏覽內(nèi)容，文字大小不低于12像素

3、不放大時(shí)，按鈕、鏈接等點(diǎn)擊方便，按鈕尺寸不能過(guò)大或過(guò)小

(3)使用最多三級(jí)的頁(yè)面結(jié)構(gòu)

減少移動(dòng)站的頁(yè)面層級(jí)，降低用戶認(rèn)知難度，一個(gè)標(biāo)準(zhǔn)的移動(dòng)站應(yīng)該包含首頁(yè)、列表頁(yè)和詳情頁(yè)三種類型，以滿足廣告主的推廣需求和用戶的認(rèn)知需要;頁(yè)面類型及層級(jí)建議不超過(guò)3個(gè)，保證簡(jiǎn)單、高效的用戶體驗(yàn)。使用盡量淺的頁(yè)間結(jié)構(gòu)，減少用戶點(diǎn)擊次數(shù)，提升瀏覽體驗(yàn)。

1、首頁(yè)：整站內(nèi)容索引，內(nèi)容預(yù)覽(使用“更多” “詳情”等鏈接)，首頁(yè)作為用戶分流前到達(dá)的頁(yè)面，要求能夠匯集整個(gè)網(wǎng)站的大部分模塊和功能，以保證不同需求的用戶在著陸后都能尋找到自己想要的信息。內(nèi)容式一般首頁(yè)又可以分為導(dǎo)航式和內(nèi)容式，導(dǎo)航式因其風(fēng)格簡(jiǎn)潔，一般又可用作品牌宣傳，起到快速傳達(dá)品牌形象的作用;內(nèi)容式因其豐富的內(nèi)容，常用來(lái)快速傳達(dá)廣告主想傳遞的信息。

(移動(dòng)站首頁(yè)分為導(dǎo)航式和內(nèi)容式)

2、列表頁(yè)：頻道內(nèi)容、分類、列表為主，列表頁(yè)一般用于展現(xiàn)結(jié)構(gòu)簡(jiǎn)單，并且重復(fù)度較高的內(nèi)容，最常見于商家的產(chǎn)品/服務(wù)，形式也一般相對(duì)簡(jiǎn)單，用于滿足展現(xiàn)多產(chǎn)品/服務(wù)的需求，根據(jù)商家產(chǎn)品/服務(wù)信息不同一般分為純文字和圖文兩種基本形式。

3、詳情頁(yè)：詳介紹，推薦以結(jié)構(gòu)化形式展現(xiàn)內(nèi)容，詳情頁(yè)一般用作展示首頁(yè)和列表頁(yè)未顯示完全的信息，以滿足用戶了解詳情的需求，從而輔助用戶進(jìn)行決策。

(4)使用清晰的導(dǎo)航組件

全站導(dǎo)航：快速到達(dá)各個(gè)頻道

局部導(dǎo)航：在單個(gè)頻道的首頁(yè)、列表、詳情頁(yè)面間移動(dòng)

相關(guān)鏈接：相關(guān)頻道之間的鏈接

(5)頁(yè)面單列布局，重要內(nèi)容顯示在首屏

頁(yè)面內(nèi)容模塊從上到下，單列布局，重要內(nèi)容展現(xiàn)在首屏。

(6)保證良好的可用性，頁(yè)面內(nèi)容無(wú)缺失，交互功能正常使用。

不使用flash

使用html5來(lái)實(shí)現(xiàn)動(dòng)畫

(7)優(yōu)秀交互方式，簡(jiǎn)化操作流程，提升使用體驗(yàn)

優(yōu)秀的交互方式能很有效地提升用戶體驗(yàn)，一方面能夠簡(jiǎn)化操作流程提升操作效率，另外對(duì)于產(chǎn)品功能易用性的提升也是較大的。

滑動(dòng)切換圖片相比于自動(dòng)切換和點(diǎn)擊切換，滑動(dòng)切換增強(qiáng)了用戶操作的主動(dòng)性、同時(shí)提升了切換的便捷性。

滑動(dòng)切換頁(yè)面用戶可以通過(guò)滑動(dòng)進(jìn)行頁(yè)面之間的切換，節(jié)省用戶尋址時(shí)間。

點(diǎn)擊放大圖片點(diǎn)擊縮略圖放大圖片，減少了操作流程，一定程度上減少了因頁(yè)面跳轉(zhuǎn)帶來(lái)的用戶流失。

頁(yè)面區(qū)域點(diǎn)擊區(qū)域點(diǎn)擊能較大提升用戶點(diǎn)擊的效率，減少用戶因定位點(diǎn)擊區(qū)域造成的效率損失。

點(diǎn)擊加載更多一方面減少單張頁(yè)面的非必要信息，讓頁(yè)面變得簡(jiǎn)潔，同時(shí)能減少頁(yè)面間的跳轉(zhuǎn)，降低因網(wǎng)速等原因造成的用戶流失。

(8)保證廣泛的兼容性，在主流OS、瀏覽器中均可正常展現(xiàn)

操作系統(tǒng)：Android，iOS;瀏覽器：UC、QQ、iOS Safari、Android原生、Baidu

未完轉(zhuǎn)下篇

Tags：手機(jī)網(wǎng)站，成都百度優(yōu)化，網(wǎng)頁(yè)設(shè)計(jì)