文章列舉了8個遵循移動優(yōu)先設(shè)計理念的網(wǎng)站案例供大家學習和參考，一起來看！

2011年，Luke Wroblewski大神提出了移動優(yōu)先的設(shè)計理念。在當時看來這無疑是一個打破行業(yè)常規(guī)的新型設(shè)計原則。而在移動互聯(lián)網(wǎng)大行其道的今天，誰遵守移動優(yōu)先的設(shè)計理念，設(shè)計出最好的移動端網(wǎng)站，誰就能贏得用戶和商機。由此，移動端網(wǎng)站設(shè)計的重要性對各大商家來說，毋庸置疑。

“先完成web設(shè)計再移植移動設(shè)計”的常規(guī)模式已經(jīng)不再適用， 移動化必將是未來互聯(lián)網(wǎng)行業(yè)的發(fā)展趨勢。所以移動優(yōu)先的網(wǎng)站設(shè)計將會變成一個新的潮流，即便這個理念已經(jīng)存在了好幾年。

為什么移動優(yōu)先設(shè)計理念如此重要？

1. 據(jù)《全球互聯(lián)網(wǎng)報告》，截至2016年，全球智能手機用戶已達28億。
2. 與此同時，人們每天在移動端使用網(wǎng)絡(luò)的時間越來越長。
3. 早在2012年，全球智能手機的銷量就超過PC電腦的銷量。

移動端需求的爆炸式增長，要求設(shè)計師在進行產(chǎn)品設(shè)計時，重視產(chǎn)品的移動端版本，遵從移動優(yōu)先的設(shè)計原則。我相信，這些理由已經(jīng)足夠讓設(shè)計師和商家們好好研究移動端網(wǎng)頁設(shè)計，并從中獲益。

有哪些優(yōu)秀的移動優(yōu)先設(shè)計案例？

今年YouTube的改版就已經(jīng)體現(xiàn)了“移動優(yōu)先”設(shè)計的權(quán)威。Material Design?體現(xiàn)出“桌面版是移動版的從屬”這一設(shè)計思想。正對應(yīng)了微軟現(xiàn)任?CEO?納德拉喊出來的口號——“移動優(yōu)先”。

對這句話的最通俗的解釋就是：以前，手機版是“縮小了的桌面網(wǎng)頁”，而現(xiàn)在桌面版是“放大了的手機?App”。那么，借此機會，我們列舉了8個遵循移動優(yōu)先設(shè)計理念的網(wǎng)站案例供大家學習和參考。

1.?YouTube

設(shè)計亮點：按鈕、文字顯示留白

夜間模式

YouTube桌面網(wǎng)頁版的Material Design設(shè)計語言，也體現(xiàn)出了強烈的優(yōu)先照顧移動設(shè)備的特征。響應(yīng)式設(shè)計自然是應(yīng)有之義，按鈕以及文字顯示的大量留白，無疑是為了適應(yīng)小屏幕觸屏的使用。

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

2.?Apple

設(shè)計亮點：便捷的滾動式導航

根據(jù)Nielson/Norman Group，它所發(fā)表的一篇用戶體驗調(diào)查研究顯示，隱藏導航（如漢堡導航）會減少21%的內(nèi)容可發(fā)現(xiàn)性，并平均增加使用導航2秒。而蘋果網(wǎng)站的內(nèi)容被布局的非常棒，所以我并不需要使用導航按鈕，我可以通過滾動頁面，十分便捷地獲取信息。一個購物袋的圖標按鈕通常是有必要且一目了然的，以符合用戶的購買需求。如果瀏覽頁面后仍獲取不到所需信息，我可以在底部導航中深度檢索得到想要的信息。

3.?Pitchfork

設(shè)計亮點：拇指化設(shè)計

雖然現(xiàn)在有許多拇指化區(qū)域的研究，但仍有許多網(wǎng)站與應(yīng)用將導航放至屏幕頂部。因為大家都是這么做的。但如果你留心拇指觸及區(qū)域，你會發(fā)現(xiàn)手機越大，屏幕外部邊緣區(qū)域的內(nèi)容越難以被用戶接觸到。而類似Pitchfork這樣的移動網(wǎng)頁則是將網(wǎng)站主導航欄放在屏幕最底部，拇指最容易觸及到的地方。隨著移動設(shè)備持有量的不斷增長，這樣的設(shè)計也將是未來所向。

4.?Typeform

設(shè)計亮點：大菜單按鈕–非常適合觸屏操作

Typeform的桌面網(wǎng)站設(shè)計非常精美，簡潔的副本，高清視頻，動畫等設(shè)計元素。但是復雜的設(shè)計組件對移動端用戶并不友好，比如視頻和動畫可能會顯著影響頁面加載時間。因此，他們在移動端網(wǎng)頁上刪減了許多不必要的設(shè)計元素，但保留了適合在移動設(shè)備上操作的大菜單按鈕，簡單卻不失精美，簡化了整體移動體驗。

5.?Airbnb

設(shè)計亮點：卡片式設(shè)計

卡片式設(shè)計更易在有限時間內(nèi)讓用戶與信息相互聯(lián)系。這也是谷歌選擇卡片式設(shè)計作為他們設(shè)計標準的原因。其他互聯(lián)網(wǎng)公司例如Airbnb也逐漸認同并采取這個做法。每張卡片的信息傳達簡潔而有效，通常由一個標題、圖片、圖表或是一段簡介文字組成。這種設(shè)計為用戶提供了足夠的信息并且方便他們決定是否想要繼續(xù)更深層次了解更多信息。

6.?Smashing Magazine

設(shè)計亮點：重視用戶，合理優(yōu)化屏幕使用空間

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

7.?Facebook

設(shè)計亮點：有效的動畫效果

在網(wǎng)頁中出現(xiàn)的動畫是輔助用戶形象地了解當前事物，賦予用戶體驗更強的表現(xiàn)力與人性化，而不是娛樂大眾。例如Mailchimp將其運用為寄信成功后的擊掌，Twitter在轉(zhuǎn)發(fā)或喜歡功能上使用的小動畫，再比如Facebook制做的形象生動的表情包。但如果你想在頁面上制作動畫，請確保它是雅致而得體的。

8.?Evernote

設(shè)計亮點：干凈清爽的手機UI界面

Evernote主要是提供筆記存儲服務(wù)，允許用戶在全平臺的設(shè)備上訪問。因此Evernote也必須獲得正確的移動體驗。和桌面版的網(wǎng)頁設(shè)計一樣，Evernote的移動端網(wǎng)頁設(shè)計也是同樣的保持了干凈清爽的UI界面設(shè)計。此外，網(wǎng)頁上恰到好處的CTA按鈕對用戶來說是非常有用的。

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

本文由 @jongde 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。