為移動優先設計辯護
英文原文:Making a Case for Mobile First Designs
你知道今天移動流量(比如智能手機等)在網站 PV 的占比達到了 30% 嗎?差不多是 2 年前的 3 倍了。同期,桌面訪問下降到了 60%(這里是數據的測量標準)。

除了 PV,再看看消費的時間,由 comScore 出具的報告顯示,移動平臺在時間消費上的占比達到了 60%。

我可以分享更多的數字來支持這個觀點,但是你們能夠在這里和這里看到更多的數據下降趨勢。這些數字只是表明了web 使用模式的變化是多么地快速。
Luke Wroblewski 早在 2011 年就討論過移動優先設計的必要性,在 2012 年分享了一些早期數據,這遠遠早于我們看到 web 使用模式上大遷移的時間。兩年過去了,智能手機和平板引人注目地取代了 PC,甚至在工作場所,大部分設計師和開發者仍然堅持用傳統方式設計——針對大屏桌面——仍然在討論優雅降級和漸進增強的區別。
傳統桌面優先的方式已經過時了
如果你在處理 web 設計策略時,仍然主要考慮大屏,那么是時候好好考慮一下了。原因如下:
- 用戶正在遷移到移動端。如今除了你的網站在桌面表現如何,越來越多的用戶更加關注移動體驗。不管你的網站是關于商務,還是提供信息和內容,用戶無論何時何地,都需要能夠訪問它、使用它。正如本文第一段的數據所展示的,那很可能來自于移動設備。
- 桌面用來創建內容,移動用來消費。移動設備是大部分訪問者今天消費內容的主要方式。桌面繼續被使用,主要用于創建內容或“工作”——這過于錯綜復雜而無法在移動設備上完成。即便如此,很多轉向用移動設備工作的公司也在變化著。你能夠在這個優秀的報告(PDF)里讀到更多關于移動用戶行為。
- 移動設備和瀏覽器已經進化了。對于 web 開發,桌面和移動體驗的主要不同,過去常常在于移動瀏覽器非常基礎,無法支持很多主要的開發特性,導致我們采取優雅降級的方法。如今情形不同了。移動瀏覽 器進化了。優雅降級和漸進增強不再是移動上的主要策略。為了處理各種瀏覽器支持情況的巨大不同,這種原則成為一種方式。當今,移動設備具有與桌面電腦性能 差不多的 CPU 和 GPU。現代的基于 WebKit 的移動瀏覽器比 IE8 好很多了!因此你不必再為移動設備簡化什么了。真正的限制在于屏幕空間和下載帶寬。
- web 的本質是用戶體驗,而不是設計。做為設計師和開發人員,我們經常糾結于我們的工具讓我們做出多么美好的東西——不管它只是在擺弄圖表、動畫和媒體查詢。web 與我們無關,它甚至與 HTML、CSS、JavaScript 或我們使用的其它工具也無關。它是連接人與人的。你的網站真的不需要漂亮的圖表、漸隱效果的表單、或最新的 CSS3 特性來創建精致的用戶體驗。
web 的未來是移動
在過去的幾年里,我們體驗互聯網的方式發生了天翻地覆的變化,那時候你是從為桌面設計開始的,到了如今,就像一只腳牢牢地長在了過去。它讓你無 法前進,這意味著你的網站將很快過時。盡管如此,對于一些人來說(嘿,你可以重做網站,多賺一些錢),這可能是好消息,我們當中的大部分人更喜歡推出優秀 的、最新的作品——這會得到欣賞。下面是移動優先方法對你的幫助:
- 你最好保持前瞻性。再次強調,回頭看看本文前面的數據。
- 它讓你關注人、關注用戶體驗、關注內容。因為設備的限制,移動用戶可用屏幕空間不超過桌面的 20%。為了確保你的網站仍然表達出所需要的信息,你被迫關注核心,你不得不精確地知道誰是你的目標用戶,確切地知道你想讓他們體驗什么。
- 它讓你對擴展功能做出改變。想想觸摸屏,想想 GPS。它們和其它類似擴展功能,已經成為今天移動體驗的一部分。我們將看到它們很快進入桌面空間。明確地為移動設備設計,它為你打開了可能性,改變這些 ‘擴展的’功能來創建豐富的情景感知網站。它給了你打破常規的空間,而不是堅持桌面世界的陳舊概念和功能。
- 更干凈的設計,更干凈的代碼。移動優先方法是極簡化的。不必做涵蓋了所有雜七雜八的大型設計,而是添加媒體查詢,在小屏幕上有選擇地顯示或隱藏元素,從最少開始,僅僅添加絕對需要的元素——差不多是禪的方法。想了解更多,請看 Jeremy Girard 在 Smashing Magazine 網站上敘述他的公司是怎樣執行移動優先設計、以及它是怎樣幫助他們的。
什么在阻礙你?
如你所見,我對移動優先設計有著明顯的偏見。因此我不得不絞盡腦汁,盡量搞清楚為什么其他人沒有這樣的激情。我只總結了兩點。
- 習慣。我們只是習慣了陳舊的設計方式。從大屏開始,‘讓它包羅萬象’;然后為小屏遺留一部分。我們不想努力去 改變,我們不愿相信它是必需的,甚至不愿相信這是可能的。移動優先設計迫使你重新思考整個設計和開發策略。你從少開始,少的空間,少的內容。難度真的不 小。還有,我們不得不考慮像手勢、觸摸和 GPS 之類的細節,而不是過去的鼠標控制和點擊。
- 客戶。是的,客戶。他們在設計上有最終話語權。有些客戶還要求基于 Flash 的網站、而非 HTML。有些客戶想要花哨的圖片和圖表。一些客戶不喜歡你呈現給他們的極簡的、移動優先設計。但是,做為設計師/開發者,弄清楚什么對于網站和客戶才是 最好的、并向他們解釋清楚,這是你的工作。當然,如果他們的網站流量都來自于桌面而不是移動端,那么務必做一個基于桌面的設計。但是如果他們正看到增長的 移動訪問量,那么提高你的談判技巧,告訴他們移動優先的意義。

總結
移動優先設計不但讓你的網站應對已經發生在移動空間的爆炸式增長,而且迫使你這個設計師和開發者關注于用戶。
移動優先設計不只是針對新網站的。即使你已經有一個桌面版了,它也是可以遵循的好方法。在為移動設計過程中,你不得不分清楚什么是核心,什么是優先考慮的,你真正想在屏幕上呈現什么,還有你想讓用戶如何與網站互動。這些見解也為優化桌面網站的方法提供了指導。
雖然我一直在說“移動”優先,但要注意,這個原則不是真地限制在“移動”設備上。它涉及到了更好的可用性、更好地利用屏幕實際使用面積、頁面元素和代碼——我們應該總是優先考慮它們,不過它們經常被掩蓋在奢華之下。
少即是多,簡單的就是更好的。與極簡化有幾分相似。但更多是因為它把關注點帶回到了人本身,而不是技術細節。
— END —