標題整的太大了，所以為了不讓各位看官們失望，請不要抱着太大的期望來看待本文。從2011年12月開始進行移動網站的開發，經歷了一年多的跌打滾爬，雖沒有金剛鑽，但也有點小九九。本人參照了Maximiliano Firtman的《Programming the Mobile Web》一書，其中稍微加上了點個人的一些看法，但是我不會明確告訴你們哪些是大師的，哪些是我這個鳥人的，我要沾光沾到底，好了，不扯淡了，開始吧~
中國互聯網正在向移動端快速地發展，艾瑞咨詢集團預測到2015年中國網民將達到7.3億，其中7.1億的用戶都是移動互聯網用戶，加上HTML5、CSS3的興起，移動網站將會大放光彩。所謂移動網站，其實他還是一個網站，只是和普通的PC網站比起來有一些不同之處而已：
1、導航：
構建移動網站的時候必須要為用戶提供導航菜單中的內容項，參考M大師的說法，對於導航需要遵循一些建議：
- 定義一些合適的用例，比如說搜索產品、查看產品信息、尋找附近賣家、點擊撥打電話等。
- 按照用戶的使用頻率，對定義好的用例進行排序之后提供給用戶使用，但是切記一定要根據統計數據和大膽的猜測，即使調整用例的順序。
- 移動網站不比PC網站，一個用例可以點擊個十次八次的，在移動網站上，盡量確保一個用例不讓用戶三次以上。
- 切記在你的移動網站上提供一個PC網站的鏈接。
- 因為移動設備的特殊性，要盡量減少用戶輸入的表單頁面。
- 移動網站不比Native應用，不需要那些啟動界面、歡迎頁面、新手指導之類的東東。
2、環境上下文：
移動網站的用戶不像PC網站的用戶可以坐在椅子上隨意的瀏覽和操作，我們在做移動網站的時候很有必要思考用戶可能使用的環境上下文，這將對你的移動網站的導航、用例設計以及可用性的需求提供很多幫助性的信息：
- 准確定位移動網站的用戶群體。
- 告訴用戶一個拿出設備訪問你的移動網站的理由。
- 你的移動網站能給用戶提供什么有價值的東東。
- 從移動的特性問問自己，你的移動網站能給用戶提供什么幫助，像阿里巴巴的移動網站可以幫助賣家做生意，幫助買家查找自己的目標產品。。。
- 根據不完全統計，用戶使用手機的環境90%-日常休閑、85%-上廁所、69%-睡覺前、48%-公共交通中、40%-排隊中。所以一定要考慮用戶會在什么場景下訪問你的移動網站。
3、漸進增強（Progressive Enhancement）：
漸進增強是應用於網絡設計中的一個簡單又強大的技術，它定義了兼容性層次的概念。通俗點講，就是從簡單到復雜，逐步增強。如果你的移動網站一開始就是按照代表“高帥富”的iPhone標准開發的，那么請問你能保證你的網站能在“屌絲”的低端機上順利訪問嗎？
其實，漸進增強有這么幾個核心的原則：
- 網站的基本內容是所有瀏覽器上都可以看得到。
- 網站的基本功能在所有瀏覽器上都可以玩得轉。
- 解析標記語言包括了所有的內容。
- 增強的網頁布局通過外鏈的CSS樣式。
- 通過外鏈的JavaScript提供非侵入式的行為。
- 尊重終端用戶的瀏覽偏好。
接下來需要做的就是在以上幾個原則的基礎上逐步增強網站的交互、視覺、功能的增強。
4、多版本的實現手段：
多版本的實現其實就是創建N個不同的版本，來根據不同的設備類型來決定用戶訪問的應該是哪個版本。但是其實實際我們開發中，只提供兩個版本：①適應低重端設備的版本，我們稱之為標准版；②適應高端設備和智能手機的版本，我們稱之為觸屏版（有的網站稱之為3G版之類的）。當然也有一些網站提供了一個中間版本。
*對於觸屏版，現在時下流行一個叫響應式網頁設計的說法，即一個網頁多處運行，這里對響應式網頁設計不做介紹，后續我會發文對這個進行詳細的介紹。
下面將集合我這一年的開發經歷，來說說移動網站設計的一些點，上面參照了M大師的書，所以寫的還算整齊，但是下面可能就會比較零亂了，多擔待~
針對移動設備的特性，移動網站設計應該是按照豎直排列的方式創建頁面的區域模塊，一般來講，一個頁面應該包括以下幾個區域模塊：
- Header
- 主導航欄
- 內容模塊
- 二級導航欄
- Footer
千萬不要把移動網站理解成PC網站在移動設備上的一個簡化版，相反移動網站的要求有時候卻比PC網站還要高，他要求我們設計者能夠理解用戶的環境上下文，按照用戶的習慣准確定位用戶需求，提供精准的服務和內容，以及快速的訪問接口。
給出一些總結的想法：
- 避免頁面中出現水平滾動的交互模式：移動網站頁面設計以豎直排列為主要模式，水平滾動在技術實現上有難度，而且與用戶慣性操作不符合。
- 如果存在PC網站，要盡量保持一些視覺上一致的風格，比如整體網站的背景色，提示ICON圖標等。
- 減少文本字數，非資訊閱讀類的模塊，要盡量減少文本字數，用戶並不是每一個人都是老學究，對滿屏滿屏的文字有興趣。
- 每一個頁面都要使用清晰的字體，以320px寬度的屏幕為例，主要字體不要小於14px字體，輔助字體不要小於12px的字體。
- 使用背景顏色來區分不同的內容區域模塊。
- 每一個頁面上的鏈接數目盡量不要超過10個，當然首頁除外。
- 主導航欄的快捷鏈接數目盡量保持在3-4個，不要太多，如果導航快捷數目太多的時候，可以采用隱藏的方式實現，比如一個按鈕，點擊之后展開所有導航快捷鏈接，或者直接跳轉到一個新的頁面，布置所有的導航快捷鏈接。
- 對標准版的網頁，每一行的文本鏈接數目不要超過1個。
- 對於按鈕、輸入框等需要用戶進行點擊的元素，盡可能擴大可點擊區域，因為有些的手指比較粗大哦，呵呵~已320px寬度的屏幕為例，可點擊區域最小不能小於40px*40px。同時給可點擊元素之間設置一個合理的間距，不能小於20px。
- 在頁面Header和Footer上提供一個返回主頁的按鈕，在大內容的頁面底部也需要提供一個返回頂部的按鈕或者鏈接元素。
- 記錄用戶的操作歷史和習慣，便於預測用戶的操作，比如用戶的搜索關鍵詞等。
- 大段文本的時候如果不考慮多頁面顯示的話，可以優先顯示文本的前幾行，然后提供一個鏈接元素，點擊后逐步展開其他的文本內容。
- 盡可能減少用戶輸入信息，當使用輸入域時，盡量保證一個輸入項占用一行，下方用小號文字提供一些提示性信息。
- 使用分頁加載模式來取代PC網站的點擊翻頁操作，這個可以考慮使用“更多...”按鈕或點擊區域元素，也可以時髦一點，拖動底部自動加載，初始顯示和每次分頁加載的時候，建議每次加載10條數據。不要太多，也不能太少。
- 對用戶經常使用的輸入框最好提供一個可清除輸入內容的點擊元素，比如搜索框。
- 如果你的網站必須使用選項卡進行導航的時候，建議把你的導航選項卡固定在屏幕的底部，而不要放在頂部，因為用戶瀏覽操作時，屏幕底部更接近手指。
- 盡量使用列表元素，不要使用表格元素。
- 一行只有一個文本鏈接時，記住把可點擊區域設置為整行可點擊，這樣方便用戶使用。
- 為智能手機提供高質量的色彩圖片，為iphone提供視網膜圖片，這部分優化，我會在后續響應式設計中再說。
- 從網站性能考慮，盡量減少請求次數，頁面內部需要加載數據的時候，盡可能使用異步請求，而不用全頁面的刷新方式。
- 當列表中每一個項目都有圖片的時候，初始只顯示屏幕可見區域中的圖片，其他圖片請使用延遲加載的方式，我們戲稱為“懶加載”。
當然，一個移動網站的架構和設計遠不止上面所說的這些，從交互優化、視覺優化、SEO優化。。。等多個方面都有很多的工作要做，借用一句詩來結束本文“路漫漫其修遠兮，吾將上下而求索”。