編者按：隨著大屏手機的普及，網站大都需要適配手機版（這簡直是一定的）。不過在有限的空間上想將整個桌面端網頁轉移上去，設計師可需要下工夫了， 得擇重避輕、全面考慮、無縫對接，等等等等。今天分享的好文，從7個方面幫你打造卓越的移動網站，文章很全面，設計師和產品經理都可以學習一下。

zchening（周晨）：現在手機上App很火爆，看到最近很流行的遊戲很多人就會去裝一個。可實際上不少應用都是一些偶發性的需求，比如我最近 要租房子裝了個58同城，可我不可能天天租房子，租完房子之後這個應用我就幾乎不會打開了。想想我們平常經常使用的應用也就3-5個，微博、微信、瀏覽器 等，一般最多不會超過7個。普通人的大腦無法同時處理七件以上的資訊單位，人們在列出必須記牢的事項上多半隻列到第七項：一週有7天，音樂有7個音符，電 話號碼通常是7位數，世界奇蹟是7個、七仙女、白雪公主和7個小矮人等。(更多請檢視神奇的7±2法則)

一方面是使用者偶發性的需求，一方面卻是開發者面對移動網際網路海量使用者的渴求，如何平衡這兩者之前的矛盾呢？專為移動裝置優化的移動網站是可行的方案之一。

下面是幾個案例。

2012年淘寶無線網站（m.taobao.com）的訪問量增長了6.4倍，佔淘寶流量的比例也從2%上升到11%，其中並不包含來自於App應 用的訪問。攜程也是個很好的例子，其手機網站（m.ctrip.com）推出後訂單成交量增加了5倍。攜程通過向訪問手機網的消費者進行了調研，對預訂過 程進行優化。並且採用了HTML5技術，訪問網站可以很清晰的看到機票、酒店、航班動態、門票、火車篇、我的攜程6個模組，看上去和APP非常像。如果別 人的案例不具有說服力那我就舉我自己的例子：回來後特意去看了下公司的網站（視訊網站），移動裝置的日均PV瀏覽量達到了40萬！要知道，我們的網站沒有 針對移動裝置做任何優化，而且這些視訊在手機上都是無法觀看的。

既然移動網站如此重要，那應該如何來優化移動站點，向手機使用者提供良好的使用者體驗呢?這七條策略或許可以給大家一些啟發：

一、考慮多元化場景

移動使用者的訪問場景經常是多元化的，公交車上、廁所、排隊等人等各種場景都有，而且隨時都可能被打斷，更多的是利用碎片化的時間，所以網站簡便快捷 非常重要。可以利用資料分析移動使用者最感興趣的內容，切記避免大量文字的堆積。如果不能避免大量文字，也要注重排版，分成多個節點來顯示。儘可能地壓縮圖 片，幫助使用者節省流量，加快載入速度。即使你的圖片做的再精美但訪問需要30秒那極有可能使用者在看到網站之前就關掉了。電梯、公交車等場景還要考慮擁擠的 空間，你的按鈕是否足夠大，流程是否足夠順暢簡單，以至於使用者單手也能完成。另外你還需要考慮當用戶切換手機螢幕方向時（如由豎屏切換到橫屏）你如何處 理，是否需要對此進行適配，是否需要展示其他的一些內容（如圖表）。還有就是通過文字、背景配色等方式，讓使用者在光線不足，甚至是陽光下也能有效捕捉信 息。

或許有人覺得這些情況過於極端，但在極端情況下如果仍舊能保證良好的使用者體驗，這樣高標準下正常情況的體驗也會相應提高，同時超出了使用者的預期，使用者對產品的好感度也會增加。

二、簡化導航，減少輸入

導航的目的就是方便使用者從大量內容中快速找到自己需要的內容。移動站點受限於螢幕尺寸和使用者習慣，導航要儘可能少而精。如果內容過多時還需要在顯眼 處新增搜尋框，支援諸如語音等方式搜尋。如果你有兩個導航方案不知道哪個更好，可以分別在兩個時間點分別部署在網站上，看看頁面訪問量、持續時間等資料的 變化來輔助你做判斷，一切用資料說話。當然這並不是讓你頻繁改版，頻繁的改版會讓使用者茫然無措。

三、為不同裝置優化

考慮為不同的裝置做優化，比如塞班手機或者低端手機、大屏智慧手機、iPhone、iPad平板電腦訪問時分別顯示什麼。利用響應式網頁設計（RWD） 等技術讓頁面自適應，同時針對不同的裝置做不同的優化和響應（觸屏、重力感應、定向等）。雖然前期實現成本相對大一些卻一勞永逸，以後改動成本很小。通過 HTML5等強化頁面表現層次、加強多媒體資訊的展示（取決於網站定位和性質，一般的網站不建議用過多使用多媒體資源），改善人機互動體驗等。移動裝置訪 問時可以通過重定向等方式引導到適合移動裝置訪問的站點。

另外，要提供其他版本的切換方式，如果使用者用移動裝置時需要切換到電腦版通常是因為他需要用到電腦版中存在但移動版捨棄的部分功能，也有可能是對用 戶的裝置進行了錯誤的判斷。切到電腦版之後也要提供讓他可以方便切回移動版的選項。比如移動購物網站，手機上搜索對於使用者來說比較麻煩，所以大家更喜歡直 接去逛，因此對於無線的導購產品來說就需要把直接、精準、精品的貨品交到客戶的手上。另外，手機上通常小額的商品比如說彩票下單率比較高。這些都需要針對 不同的裝置做出優化。

四、考慮跨平臺問題

對於部分特殊的網站（有使用者ID系統和同步需要），還需要考慮跨平臺同步時的體驗。如何讓使用者在多個裝置間可以順暢的切換。對於移動購物網站，不少 使用者因為支付安全顧慮和網銀習慣在手機上下單（可能在等公交車時下單），然後再用PC去付款（比如下班回到家）。這時候如何讓使用者在跨平臺時流程順暢特別 重要。再以多看閱讀（雖然不是網站）為例，當你下班前在等公交車時用手機上看《烏合之眾》看到第X頁，晚上躺在床上拿出iPad看時會自動從伺服器獲取最 新的閱讀進度。

五、轉移複雜性

所謂轉移複雜性，就是讓每個平臺（手機、平板、PC等）發揮自己最大的優勢。比如移動平臺（手機、平板電腦）等可以拍照，可以隨時隨地使用，能夠精確識別位置和方向，但不方便輸入大量文字，顯示資訊較少，而且資料傳輸速度有限。但這些缺陷卻是PC的優點。

比如，在移動網站上輸入大量文字是一件非常痛苦的事!如果你的網站經常需要使用者輸入大量文字，你可以給使用者一些建議，將他引流到PC網站上。或者採 用語音的方式來輸入文字。另外你不需要把PC網站上的內容原封不動地搬到移動網站上，而且這通常來說也很愚蠢。你可以通過資料分析和移動場景分析，來看看 移動網站上使用者對哪些內容更感興趣。在一些平臺上很容易的事情在其他平臺上往往會變得異常複雜，如何充分利用每個平臺的優勢，這需要網站設計者仔細考慮。

六、簡化業務流程

結合網站業務特性，仔細考慮如何簡化流程，讓使用者在站點上方便地完成操作。比如網站在PC上註冊時需要填寫大量資訊，在移動網站註冊時能否填寫儘可能少的資訊(比如移動裝置訪問時推薦用手機號碼註冊)，不用填驗證碼等。

七、培養熱心使用者，持續改進

網際網路產品永遠都是Beta版，你會發現也許之前設想得很好的方案結果到使用者手裡完全不是那麼一回事。那就去聽聽使用者的聲音，根據使用者的建議迭代開 發，當然不是所有的使用者都願意給你提供建議，最好培養部分忠誠使用者給他們優先試用權和其他激勵。不一定是物質上的，有時候他們的意見得到採納也是對他們莫 大的鼓舞。當然，這並不意味你可以隨意的新增功能一開發完就可以讓他們使用。在開發前和原型階段就可以邀請部分使用者來測試，這樣避免後期開發資源的浪費。 開發完也要進行必要的自測，避免到他們手上的是一個有各種bug完全不可用的產品。