賈智

調(diào)查機(jī)構(gòu)Company Data Trees曾發(fā)現(xiàn)，國外的手機(jī)網(wǎng)站優(yōu)化比例不超過20%，而在中國還遠(yuǎn)遠(yuǎn)達(dá)不到這個(gè)比例。國內(nèi)多數(shù)手機(jī)網(wǎng)站的優(yōu)化主要是針對搜索引擎，因?yàn)樗阉骶拖襁@個(gè)網(wǎng)站的導(dǎo)航，只要有搜索排名，就有點(diǎn)擊率和瀏覽量。而國內(nèi)的移動(dòng)端，百度依舊占據(jù)著搜索的龍頭位置，說的更明顯一些，手機(jī)網(wǎng)站優(yōu)化是面向百度搜索引擎來開展的，這種做法的直接后果就是帶來了兩種極端，一種是移動(dòng)端網(wǎng)站極其簡陋，另一種是移動(dòng)端網(wǎng)站極其復(fù)雜。

中國的手機(jī)用戶數(shù)已達(dá)10億，超過2/5的移動(dòng)用戶每個(gè)月都會從手機(jī)終端訪問網(wǎng)頁。這就意味著進(jìn)入移動(dòng)互聯(lián)時(shí)代后，移動(dòng)端手機(jī)網(wǎng)站的優(yōu)化工作尤為重要。網(wǎng)站不只是一個(gè)信息入口，更是一種營銷方式，而目前大多數(shù)的網(wǎng)站受技術(shù)和成本的限制，并沒有做好移動(dòng)端的優(yōu)化。

移動(dòng)化網(wǎng)頁設(shè)計(jì)難在哪兒

經(jīng)常在移動(dòng)設(shè)備上訪問互聯(lián)網(wǎng)的用戶都有這樣的感受：許多網(wǎng)站根本就沒有針對移動(dòng)設(shè)備優(yōu)化，用戶體驗(yàn)不友好，閱讀體驗(yàn)也無法與傳統(tǒng)的Web版本相提并論；而且在不同移動(dòng)設(shè)備上的體驗(yàn)也是大相徑庭。究其根源，移動(dòng)設(shè)備的屏幕比較小，例如手機(jī)的寬度通常在600像素以下；而PC的屏幕寬度都在1000像素以上，要求同樣的內(nèi)容在大小迥異的屏幕上呈現(xiàn)出滿意的效果并不容易。

移動(dòng)互聯(lián)網(wǎng)和傳統(tǒng)互聯(lián)網(wǎng)的區(qū)別不僅僅是設(shè)計(jì)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范的變化，而應(yīng)該從整個(gè)物理環(huán)境的變化來重新全面的認(rèn)識。首先，移動(dòng)互聯(lián)網(wǎng)的使用場景更復(fù)雜。用戶在使用桌面客戶端或者訪問傳統(tǒng)頁面的時(shí)候，都是坐在電腦前使用鍵鼠操作，這個(gè)使用場景一直是簡單而固定的。但在瀏覽移動(dòng)網(wǎng)頁的時(shí)候，用戶不僅是在室內(nèi)，也可能在行走中、在交通工具上、在電梯中、無聊等待時(shí)或者邊走路邊用。如此復(fù)雜的場景，需要產(chǎn)品設(shè)計(jì)者考慮的要素也自然非常的復(fù)雜，用戶如何才能順暢的進(jìn)行移動(dòng)操作？

其次，用戶在使用電腦時(shí)大部分的時(shí)間都是固定的。也就是我們經(jīng)常說的：“在電腦前就是一整天?！钡且苿?dòng)端就大不相同了，用戶所處的環(huán)境不同，使用手機(jī)時(shí)會隨時(shí)隨地受到周圍情況影響，從而中斷或暫停中的操作，相對傳統(tǒng)網(wǎng)頁瀏覽，移動(dòng)端的使用時(shí)間更加碎片化。

移動(dòng)端的網(wǎng)頁瀏覽有一個(gè)更直觀的變化就是屏幕尺寸縮小。用戶使用電腦的屏幕尺寸基本上是20英寸左右，而手機(jī)尺寸最大也就是5-6英寸，平板電腦最大尺寸才是11英寸左右。電腦的大屏幕顯示使傳統(tǒng)網(wǎng)頁有充足的區(qū)域來展現(xiàn)信息，因此界面的利用率很高；或者鼠標(biāo)上下滾動(dòng)一兩下就可以看完通篇信息。而手機(jī)就不同了，要想把等同傳統(tǒng)網(wǎng)頁的信息都顯示出來是完全不可能的，而且使用移動(dòng)產(chǎn)品的根本目的就是追求效率，所以在網(wǎng)頁上加入各種信息，讓用戶不斷上下滑動(dòng)屏幕瀏覽網(wǎng)頁的方式是不可取的。

另外，傳統(tǒng)網(wǎng)站上可以加入很多廣告框，但是在移動(dòng)端上還無法完善這一設(shè)計(jì)。因?yàn)楸旧硇枰聊徽宫F(xiàn)的必要信息就很少，還需要有一個(gè)合理的規(guī)劃和抉擇，而加入次要的信息不僅會破壞用戶體驗(yàn)，還將影響網(wǎng)頁有用信息的加載。

隨著智能手機(jī)的發(fā)展，智能系統(tǒng)越來越多樣化，這就帶來了一個(gè)新的問題—各系統(tǒng)平臺的設(shè)計(jì)規(guī)范和標(biāo)準(zhǔn)。比如，蘋果為確保iOS上各類APP和網(wǎng)頁的用戶體驗(yàn)質(zhì)量和一致性，為產(chǎn)品設(shè)計(jì)師們公布了一份名為HIG（Human Interface Guideline）的設(shè)計(jì)指導(dǎo)。而微軟的Windows 8和Windows Phone也有自己的Metro風(fēng)格，它們無疑也為設(shè)計(jì)者帶來了或多或少的影響。

優(yōu)秀的移動(dòng)網(wǎng)頁設(shè)計(jì)如何煉成

首先，無論是傳統(tǒng)網(wǎng)站還是移動(dòng)網(wǎng)站，都要考慮清楚消費(fèi)群體的定位。雖然智能手機(jī)用戶數(shù)量非常普及，但是中國的大部分手機(jī)用戶使用的還是2G網(wǎng)絡(luò)，一直高喊的3G、4G手機(jī)用戶大約只占15%左右。所以在頁面設(shè)計(jì)時(shí)，要考慮用戶打開網(wǎng)頁的時(shí)長。這意味著移動(dòng)網(wǎng)頁應(yīng)盡量避免加入一些炫麗的動(dòng)畫效果或者動(dòng)態(tài)圖片等。同時(shí)還要確保刪除或替換任何大背景的圖片，特別是為整個(gè)網(wǎng)站設(shè)置了背景圖片的時(shí)候。另外也要避免使用彈窗、Flash、Java等行為，這些行為都會占用大流量，且浪費(fèi)時(shí)間。

移動(dòng)網(wǎng)頁在樣式上還有一些必須做的更改，比如通過改變字體大小提高可讀性。接下來，移動(dòng)設(shè)備的點(diǎn)擊一般是缺乏精確的，所以重要的按鈕和鏈接一定要增加可點(diǎn)擊區(qū)域。頁面上的浮動(dòng)元素可能會導(dǎo)致移動(dòng)布局問題，可以考慮取消不必要的浮動(dòng)。

此外，之前提到手機(jī)用戶瀏覽網(wǎng)頁的時(shí)間十分碎片化，不可能耐心點(diǎn)擊或滑動(dòng)很多頁面。其次，移動(dòng)網(wǎng)站比傳統(tǒng)網(wǎng)站的頁面下載速度慢，因此移動(dòng)網(wǎng)頁要盡可能做到簡潔，把頁面數(shù)量和大小控制到最簡單。大多數(shù)手機(jī)屏幕是垂直的，這意味著會從多列布局變成單列。與此同時(shí)，通過減少外邊距和內(nèi)邊距節(jié)省額外像素可創(chuàng)建更嚴(yán)格的布局。

論壇導(dǎo)航或者電商導(dǎo)購頁面也要盡可能做到精簡，這些網(wǎng)站的信息相對繁多，所以要從用戶需求入手。從論壇來講，用戶通過移動(dòng)設(shè)備進(jìn)入論壇的主要目的是閱讀有用信息。這種情況下，網(wǎng)站要盡可能提供最簡單的步驟，那些冗余內(nèi)容，將導(dǎo)航部分做得更易找、易見。在這一點(diǎn)，“數(shù)字尾巴”做得比較到位。相比傳統(tǒng)電腦網(wǎng)頁，移動(dòng)端去除了圖片和文字預(yù)覽，只留下八個(gè)板塊標(biāo)題，讓用戶一目了然，這說明有時(shí)候越想表現(xiàn)豐富越適得其反。

但這不意味頁面就得空空如也，只有幾個(gè)文字導(dǎo)航即可。細(xì)節(jié)優(yōu)化十分重要，不然移動(dòng)端只是個(gè)“簡陋版”而不是“簡約版”。例如，專屬的移動(dòng)網(wǎng)站也要有和傳統(tǒng)網(wǎng)站相同的LOGO與標(biāo)簽，在每個(gè)頁面的關(guān)鍵字及描述要做到和傳統(tǒng)網(wǎng)站保持一致，做好針對性的填寫工作，這對搜索結(jié)果的展現(xiàn)以及優(yōu)化工作也會大有幫助。確保在手機(jī)網(wǎng)站或者PC端網(wǎng)站各個(gè)頁面上有相應(yīng)的導(dǎo)航或者提示鏈接，讓用戶可以在手機(jī)版和PC版進(jìn)行切換。

響應(yīng)式網(wǎng)頁成為趨勢

到2015年，移動(dòng)互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶。

除了智能手機(jī)外，使用平板電腦甚至是電視機(jī)上網(wǎng)的用戶在持續(xù)增加。于是，怎樣讓網(wǎng)站盡量兼容各種設(shè)備，并確保良好的用戶體驗(yàn)，這將是越來越重要的問題?！绊憫?yīng)式網(wǎng)頁設(shè)計(jì)”（Responsive Web Design）設(shè)計(jì)的概念應(yīng)運(yùn)而生。這個(gè)概念是讓W(xué)eb設(shè)計(jì)根據(jù)不同設(shè)備自動(dòng)響應(yīng)，自動(dòng)識別屏幕寬度，自動(dòng)對網(wǎng)頁調(diào)整。響應(yīng)式網(wǎng)頁設(shè)計(jì)的到來使既兼容各種設(shè)備又能確保良好用戶體驗(yàn)成為可能。

可以說響應(yīng)式網(wǎng)頁設(shè)計(jì)是為移動(dòng)互聯(lián)網(wǎng)而生的。

值得一提的是，通過響應(yīng)式設(shè)計(jì)中網(wǎng)頁里圖片的尺寸可以被自動(dòng)調(diào)整，頁面的圖片布局不會被破壞。雖然個(gè)別布局在更改后不算完美，但給了我們更整合的使用體驗(yàn)。無論用戶轉(zhuǎn)換設(shè)備的屏幕方向，還是從臺式機(jī)屏幕切到移動(dòng)設(shè)備上，瀏覽頁面都會真正富有彈性。

（編輯：楊磊）