優秀的移動網頁是如何煉成的？

賈智

調查機構Company Data Trees曾發現，國外的手機網站優化比例不超過20%，而在中國還遠遠達不到這個比例。國內多數手機網站的優化主要是針對搜索引擎，因為搜索就像這個網站的導航，只要有搜索排名，就有點擊率和瀏覽量。而國內的移動端，百度依舊占據著搜索的龍頭位置，說的更明顯一些，手機網站優化是面向百度搜索引擎來開展的，這種做法的直接后果就是帶來了兩種極端，一種是移動端網站極其簡陋，另一種是移動端網站極其復雜。

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

移動化網頁設計難在哪兒

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

移動互聯網和傳統互聯網的區別不僅僅是設計標準和設計規范的變化，而應該從整個物理環境的變化來重新全面的認識。首先，移動互聯網的使用場景更復雜。用戶在使用桌面客戶端或者訪問傳統頁面的時候，都是坐在電腦前使用鍵鼠操作，這個使用場景一直是簡單而固定的。但在瀏覽移動網頁的時候，用戶不僅是在室內，也可能在行走中、在交通工具上、在電梯中、無聊等待時或者邊走路邊用。如此復雜的場景，需要產品設計者考慮的要素也自然非常的復雜，用戶如何才能順暢的進行移動操作？

其次，用戶在使用電腦時大部分的時間都是固定的。也就是我們經常說的：“在電腦前就是一整天?！钡且苿佣司痛蟛幌嗤耍脩羲幍沫h境不同，使用手機時會隨時隨地受到周圍情況影響，從而中斷或暫停中的操作，相對傳統網頁瀏覽，移動端的使用時間更加碎片化。

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

另外，傳統網站上可以加入很多廣告框，但是在移動端上還無法完善這一設計。因為本身需要屏幕展現的必要信息就很少，還需要有一個合理的規劃和抉擇，而加入次要的信息不僅會破壞用戶體驗，還將影響網頁有用信息的加載。

隨著智能手機的發展，智能系統越來越多樣化，這就帶來了一個新的問題—各系統平臺的設計規范和標準。比如，蘋果為確保iOS上各類APP和網頁的用戶體驗質量和一致性，為產品設計師們公布了一份名為HIG（Human Interface Guideline）的設計指導。而微軟的Windows 8和Windows Phone也有自己的Metro風格，它們無疑也為設計者帶來了或多或少的影響。

優秀的移動網頁設計如何煉成

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

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

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

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

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

響應式網頁成為趨勢

到2015年，移動互聯網的用戶數量將會超過桌面用戶。

除了智能手機外，使用平板電腦甚至是電視機上網的用戶在持續增加。于是，怎樣讓網站盡量兼容各種設備，并確保良好的用戶體驗，這將是越來越重要的問題?！绊憫骄W頁設計”（Responsive Web Design）設計的概念應運而生。這個概念是讓Web設計根據不同設備自動響應，自動識別屏幕寬度，自動對網頁調整。響應式網頁設計的到來使既兼容各種設備又能確保良好用戶體驗成為可能。

可以說響應式網頁設計是為移動互聯網而生的。

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

（編輯：楊磊）