《HTML5移動Web開發實戰》——第1章　移動Web設計趨勢

本節書摘來非同步社群《眾妙之門——移動Web設計精髓》一書中的第1章，作者：【德】Smashing Magazine，更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

第1章　移動Web設計趨勢

眾妙之門——移動Web設計精髓
Steven Snell

Web設計師都深知這個行業包含了大量的變化和創新，為了始終保持在業內的領先地位，需要不斷地適應和學習新的技術。在過去的幾年中，該行業中變化最大的領域之一就是越來越多的網民通過手機和移動終端裝置來進行網路瀏覽。因此，Web設計師必須不斷學習和掌握更多、更新的專業知識，從而開發出更多、更好的行動網路應用以滿足這一受眾群體的需求。

因為設計應用於移動裝置的網頁存在一些特有的問題和挑戰，所以這需要設計者和開發者用具有戰略性的方法來對待。在本書中，我們將把移動Web開發作為一個整體來研究，包括行動網路的當前發展趨勢，存在的挑戰，以及開發小技巧和經典案例分析。本書中還包含了大量相關的文章和專業資料，學習資源豐富，如果你有興趣學習更多的移動應用開發，在這裡，你觸手可及。

簡化選項
如今的移動網際網路出現了一個不得不讓人注意的現象，那就是為網站訪客提供的有效選項是按比例縮小的，但可用性是在增加的。例如向使用者推薦的移動網站主頁，頁面上僅僅只有17項簡單的標題和內容連結、一個登入連結按鈕和一些最基本的導航選項。對於移動裝置上Web設計，我認為簡易直觀非常關鍵。由於移動裝置自身的因素，使得裝置的螢幕較小，再加上行動網路瀏覽速度相對較慢，所以儘量減少頁面中不必要的選項從而讓訪客能夠直接瀏覽最關鍵、最重要的資訊才是重中之重，而其他可有可無的連結則越少越好。

在這個Web頁面異常擁擠的時代，簡潔直觀的移動Web頁面能使訪客眼前一亮。另外還有一點非常重要，顯示的內容越多，被刪減的可能性就越大。只要訪客想進行的操作是被允許的，我們就要想辦法簡化頁面，從而能使使用者更加便捷、容易地操作和瀏覽。

smashing-ebook-mobile-design_%e9%a1%b5%e9%9d%a2_006_%e5%9b%be%e5%83%8f_0001.jpg

頁面留白
頁面留白對於任何設計來說都是非常重要的組成部分。如何做好頁面留白對於總是想呈現給訪客更多資訊的Web設計者來說的確是一件難事，因為這看起來很矛盾。由於移動裝置螢幕的大小限制，頁面留白也成為Web設計中不可或缺的重要組成。雜亂無章的網站和頁面設計會大大降低使用者體驗，同樣也很難讓使用者在移動環境中完成他們所想進行的操作。

正如你所看到的本書中所展示的頁面圖片，或者拿出你自己的手機看看上面的網頁，你會發現很多頁面設計中都包含了大量的留白設計，特別是那些我們經常使用和瀏覽的網頁。

少量的圖片
近年來隨著高速網路的普及，Web設計者能夠在寬頻視訊和圖片等方面有更自由的發揮。由於電腦前的訪客總是希望看到具有良好視覺效果的頁面，所以導致Web設計者在Web設計中使用大量的圖片。無論如何，對於移動Web設計來說，在頁面上過度地使用圖片往往會降低使用者體驗。

隨著越來越多的手機使用者使用高速輕便的智慧手機，圖片在網頁中應用的機會已經顯現。但是，目前仍然有大量手機使用者並沒有使用智慧手機，所以很多移動網頁依然選擇儘量避免在網頁設計中使用圖片。

子域將取代.mobi域名和單獨域名
當移動頂級域名（TLD）最初得到應用的時候，在市場上得到了熱烈的反響。當時有很多網站在移動裝置網站中運用.mobi域名，而時下更普遍的做法是，公司在他們主域中建立單獨的資料夾或者建立一個新的子域。在決定使用該技術時，公司必然要有多方面的考慮，與發散性的域名容易混淆瀏覽者的特點相比，使用子域的主要優點是，所有的網站內容都在一個獨立域名中，這樣使用者就不大可能暈頭轉向了。

仔細觀察，我們會發現移動裝置上的網站地址都是例如mobile.xxx.com、m.xxx.com、xxx.com/mobile，xxx.com/m等類似的形式。當然，我們對這種趨勢抱有很大的期望，但是當你開啟一些知名網站的手機版本時，你會發現子域名比.mobi TLDs運用得更加廣泛。

內容優先
由於Web頁面的高度簡潔和普遍偏少的選項，使得人們總是優先關注網頁內容。當你在瀏覽移動網頁時，你會驚奇地發現，網頁內容總是被優先呈現給訪客。網站“聚焦使用者”是理所當然的，因為大部分的網站都依靠其商業用途來維持運營，所以網頁中會有一些對訪客來說並不是必需的組成成分，例如頁面上方的橫幅廣告欄。雖然廣告已經成為網際網路公認的一部分，但是大多數移動網站仍然是沒有廣告的。儘管公司的利潤來源是擁有更多有用的網站，但是移動Web所呈現的豐富實用的內容始終針對的是廣大的移動使用者，而非公司。