8個手機端優先設計網站案例賞析

2011年，LukeWroblewski大神提出了移動優先的設計理念。在當時看來這無疑是一個打破行業常規的新型設計原則。而在移動網際網路大行其道的今天，誰遵守移動優先的設計理念，設計出最好的移動端網站，誰就能贏得使用者和商機。由此，移動端網站設計的重要性對各大商家來說，毋庸置疑。

“先完成web設計再移植移動設計”的常規模式已經不再適用， 移動化必將是未來網際網路行業的發展趨勢。所以移動優先的網站設計將會變成一個新的潮流，即便這個理念已經存在了好幾年。

為什麼移動優先設計理念如此重要？

1. 據《全球網際網路報告》，截至2016年，全球智慧手機使用者已達28億。

2. 與此同時，人們每天在移動端使用網路的時間越來越長。

3. 早在2012年，全球智慧手機的銷量就超過PC電腦的銷量。

移動端需求的爆炸式增長，要求設計師在進行產品設計時，重視產品的移動端版本，遵從移動優先的設計原則。我相信，這些理由已經足夠讓設計師和商家們好好研究移動端網頁設計，並從中獲益。

有哪些優秀的移動優先設計案例？

今年YouTube的改版就已經體現了“移動優先”設計的權威。Material Design 體現出“桌面版是移動版的從屬”這一設計思想。正對應了微軟現任 CEO 納德拉喊出來的口號——“移動優先”。

對這句話的最通俗的解釋就是：以前，手機版是“縮小了的桌面網頁”，而現在桌面版是“放大了的手機 App”。那麼，藉此機會，我們列舉了8個遵循移動優先設計理念的網站案例供大家學習和參考。

ube

設計亮點：按鈕、文字顯示留白

夜間模式

YouTube桌面網頁版的Material Design設計語言，也體現出了強烈的優先照顧移動裝置的特徵。響應式設計自然是應有之義，按鈕以及文字顯示的大量留白，無疑是為了適應小螢幕觸屏的使用。

新採用的夜間模式也顯示其對移動裝置的臣服。桌面版裝置介面大多是白色背景，而在移動端更好的方案則是使用螢幕偏黃光的夜燈模式，而不是整體介面都變成黑底白字。在所有光源都取消，且螢幕尺寸不大的情況下，手持裝置用黑底白字的介面同時降低亮度，才會讓眼睛更舒服。

e

設計亮點：便捷的滾動式導航

根據Nielson/Norman Group，它所發表的一篇使用者體驗調查研究顯示，隱藏導航（如漢堡導航）會減少21%的內容可發現性，並平均增加使用導航2秒。而蘋果網站的內容被佈局的非常棒，所以我並不需要使用導航按鈕，我可以通過滾動頁面，十分便捷地獲取資訊。一個購物袋的圖示按鈕通常是有必要且一目瞭然的，以符合使用者的購買需求。如果瀏覽頁面後仍獲取不到所需資訊，我可以在底部導航中深度檢索得到想要的資訊。

hfork

設計亮點：拇指化設計

雖然現在有許多拇指化區域的研究，但仍有許多網站與應用將導航放至螢幕頂部。因為大家都是這麼做的。但如果你留心拇指觸及區域，你會發現手機越大，螢幕外部邊緣區域的內容越難以被使用者接觸到。而類似Pitchfork這樣的移動網頁則是將網站主導航欄放在螢幕最底部，拇指最容易觸及到的地方。隨著移動裝置持有量的不斷增長，這樣的設計也將是未來所向。

form

設計亮點：大選單按鈕–非常適合觸屏操作

Typeform的桌面網站設計非常精美，簡潔的副本，高清視訊，動畫等設計元素。但是複雜的設計元件對移動端使用者並不友好，比如視訊和動畫可能會顯著影響頁面載入時間。因此，他們在移動端網頁上刪減了許多不必要的設計元素，但保留了適合在移動裝置上操作的大選單按鈕，簡單卻不失精美，簡化了整體移動體驗。

nb

設計亮點：卡片式設計

卡片式設計更易在有限時間內讓使用者與資訊相互聯絡。這也是谷歌選擇卡片式設計作為他們設計標準的原因。其他網際網路公司例如Airbnb也逐漸認同並採取這個做法。每張卡片的資訊傳達簡潔而有效，通常由一個標題、圖片、圖表或是一段簡介文字組成。這種設計為使用者提供了足夠的資訊並且方便他們決定是否想要繼續更深層次瞭解更多資訊。

hing Magazine

設計亮點：重視使用者，合理優化螢幕使用空間

資料顯示，越來越多的網際網路使用者選擇阻止他們不想要的內容，尤其是移動端使用者近年來攔截廣告的趨勢直線上升。不變的導航設定、滿螢幕的廣告宣傳、過度的市場術語使用，這些並不能為使用者帶來良好的使用者體驗。如果你想推送使用者廣告或引導使用者繼續閱讀，可以循序漸進地根據使用者瀏覽的內容選擇性推送。經過策略性排版的內容也更容易讓使用者主動點選，從而提升使用者體驗。如果只是單純的為了獲取利潤而打破使用者體驗或者讓他們跳轉頁面，逐漸的使用者會越來越少，利潤也會隨著使用者的流失而減少。

book

設計亮點：有效的動畫效果

在網頁中出現的動畫是輔助使用者形象地瞭解當前事物，賦予使用者體驗更強的表現力與人性化，而不是娛樂大眾。例如Mailchimp將其運用為寄信成功後的擊掌，Twitter在轉發或喜歡功能上使用的小動畫，再比如Facebook製做的形象生動的表情包。但如果你想在頁面上製作動畫，請確保它是雅緻而得體的。

note

設計亮點：乾淨清爽的手機UI介面

Evernote主要是提供筆記儲存服務，允許使用者在全平臺的裝置上訪問。因此Evernote也必須獲得正確的移動體驗。和桌面版的網頁設計一樣，Evernote的移動端網頁設計也是同樣的保持了乾淨清爽的UI介面設計。此外，網頁上恰到好處的CTA按鈕對使用者來說是非常有用的。

如何遵循移動優先設計原則？

打造一個符合移動優先設計原則的移動端網站，首先需要藉助原型工具，例如Mockplus。

第一步：登陸已有的Mockplus賬號或申請一個免費的Mockplus賬號；

第二步：新建一個手機專案；

第三步：思考佈局。

“移動優先”設計方法與“桌面優先”有所不同。移動裝置中，我們需要考慮在小屏幕布局中呈現足夠有效的資訊，並不是隨著頁面佈局的改變而減少資訊。

在這個例子中，我們知道主頁應該具備的某些元素，比如網站的名字和應用logo。但並不是所有的桌面端網頁設計元素都適合運用到移動端裝置上，所以我們首先根據旅遊網站的目標來確定優先事項：

啟動頁面、登入註冊頁面、歡迎頁面、城市列表頁面、主頁、詳情頁面、搜尋頁面、活動頁面、個人資訊頁面等。

第四步：效果呈現。

Gogobot線上預覽地址：

卡片式設計和滾動式內容展示符合移動端使用者的資訊獲取和操作方式。既不會因為圖片過大搶佔了有限的螢幕資源，上下滾動的內容獲取方式也樂於被使用者所接受。因為比起漢堡選單，使用者會更樂意去滾動頁面。

桌面端效果展示：Gogobot

結語

通過今年Youtube的改版，相信今後會有更多的商家重視起移動優先的設計理念。也希望以上列舉的8個移動優先設計的案例能為你的新產品或新網站的建設提供一些參考思路。移動版受限於流量必須簡單粗糙，而桌面版則極盡華麗之能事。但現在“移動優先”幾乎成為一句“正確的廢話”，因為它變成了幾乎所有矽谷主流企業的常識。

作者：jongde