移動端網頁設計經驗與心得

智慧手機發展確實很迅速，像今年，我的大部分工作就都在移動端網頁上。

再往前些年，看到的手機版/移動版網頁，限制於瀏覽器與手機效能，2g網路速度等

網頁設計無非是藍、黑、白，介面單調，並且要儘可能的設計簡單。

現在情況就大不相同了，軟體上webkit核心瀏覽器大行其道，硬體突飛猛進，網速來說，4g正炒得火熱。

下面就和大家分享一下我的一些移動端網頁設計經驗與心得。

⒈ 解析度
這應該是移動端網頁最關心的問題了，因為移動裝置五花八門，各種解析度都有。要想在這些裝置上都能有良好的瀏覽體驗，得花一番功夫。

• 使用viewport：這已經是移動端網頁的必備了，它可以設定頁面的寬度，是否允許縮放等等。

• 一般設定width=device-width，就是設定為裝置的螢幕寬度，當然也可以是具體數值
• 百分比與max(min)-width使用：移動端網頁不僅解析度不一，而且隨時可以橫豎屏切換，所以百分比寬度設定非常必要，再配合max(min)-width限制最大(小)寬度，能有效的適應各種解析度，若為此還有特別需求，可看下一條，”使用Media Queries”
• 使用Media Queries，這也是響應式web設計的一部分

這裡的意思就是在大於640px的螢幕寬度下，使用style1樣式，也可以寫在樣式內部，如：

⒉ 內容與快取
雖才說到現在4g正炒得火熱，但不可否認移動裝置網路環境上的侷限性，所以還是有必要對此做一些處理。

• 使用manifest快取

在html上新增manifest，其中檔案格式內容如：

• 瀏覽器將快取chache內所有的內容，並且可以離線訪問，只要檔案發生任何改變都將會重新讀取並重新整理全部快取，所以更改註釋是個更新快取的好方法這裡要注意的是
  1，新增了manifest的當前網頁也會被快取 所以推薦的方式是頁面快取，頁面動態內容全部用ajax獲取，所以在移動網站專案設計開始就要注意這個問題
  2，頁面中新增iframe 然後子頁面引用manifest想達到快取資源而不快取當前頁面內容，是無效的。
• 儘可能使用css樣式來代替圖片，由於移動端瀏覽器對css3的支援，使得以前很多圖片可以用樣式來代替
  如我們公司專案內用到的一些，下圖：

按鈕用到了  漸變+圓角+內陰影

三角形 就是用border的顏色，改變顏色可以畫出指向不同方向的三角形

• 箭頭是兩個三角形疊在一起
  ……
  用樣式代替圖片之後不僅大小減少了很多，可維護性更大大提高
• 頁面只展示部分內容，多提示使用者”點選展開”或者”檢視更多”，再非同步獲取內容，大家都不希望開啟一個網站，流量就嘩嘩沒了

⒊ 佈局
手機端可視區域小，佈局上不同於傳統網頁，需要充分利用有限的空間去展示資訊。

• 頁面流程簡單清晰，複雜的操作儘量分段展示，如下圖：

• 隱藏不常用的功能，可以將其放在側邊欄或彈出層，如下圖：

• 由於移動端是直接用手指操作，而非滑鼠。所以，需要響應元素點選區域要相對明顯，大
• 螢幕寬度雖小，但是上下滑動體驗好，因此佈局上可以多上下排列

⒋ 其他與結語

• 許多小廠商的手機平板，還有一些rom上的系統預設瀏覽器版本各異(很頭疼..)，所以測試工作要做足
• html5中<input /> type有好幾種新型別，比如<input type=”tel” />，移動端上點選會預設彈出數字鍵盤，可多試試
• 本文只是總結了我專案上一些小心得，如有紕漏和錯誤謝謝大家指正，也歡迎大家點贊和討論