天天看點

什麼是前端開發中的 mobile first 政策1. Responsive Web Design (RWD)2. “Progressive Advancement” & “Graceful Degradation”

在 2010 年的世界移動大會上,谷歌 CEO 埃裡克施密特提出,設計師在産品設計中應該遵循“移動優先”的原則。 “移動優先設計”是什麼意思? 它為什麼如此重要? 如何制作? 我将在下面的部分回答這 3 個問題。

什麼是前端開發中的 mobile first 政策1. Responsive Web Design (RWD)2. “Progressive Advancement” & “Graceful Degradation”

兩個相關聯的概念:

1. Responsive Web Design (RWD)

響應式網頁設計是一種網頁設計方法,它使網頁能夠自動适應不同裝置的螢幕,以人們感覺舒适的方式顯示内容。 這大大減少了使用者浏覽網頁時的平移、縮放和滾動等操作。

什麼是前端開發中的 mobile first 政策1. Responsive Web Design (RWD)2. “Progressive Advancement” & “Graceful Degradation”

2. “Progressive Advancement” & “Graceful Degradation”

這兩個概念是在響應式網頁設計之前提出的。 為了使網頁或應用程式界面在不同裝置上合理顯示,設計人員提供了針對不同終端的定制版本的産品。

Progressive Advancement 是指我們在設計産品時,首先為相對較低的浏覽器(如手機上的浏覽器)建構一個版本。 此版本包括最基本的功能和特性。 之後,我們傾向于平闆電腦或PC的進階版本,在基本版本的基礎上增加互動、更複雜的效果等,以獲得更好的使用者體驗。

而“優雅降級”則相反,從桌面這樣的進階端開始産品設計,并在一開始就建構一個功能全面的版本。 然後設計師通過裁剪一些功能或内容,使産品與移動端相容。

如果 UI/UX 設計師從桌面版本開始産品設計,他們将不可避免地希望利用進階端的大部分優勢。例如,光标滑鼠支援的懸停效果;高清圖像和複雜圖表,隻有在最近有帶寬時才能正常顯示。就這樣,設計師們努力完成一個令人驚歎的桌面版本,卻發現它很難被移動端采用,除非他們放棄很多漂亮的想法。如果是這樣,移動端版本将更像是一個事後的想法,一個被淡化的不完整的産品。

但如果我們以移動端産品設計為出發點,在帶寬、螢幕尺寸等限制下,設計師自然會抓住産品的關鍵點,走向功能優先的簡潔利落的産品。當平台擴充到平闆電腦或個人電腦時,設計人員可以利用這些先進端的獨特功能,逐漸加強産品。這可能是漸進式進步政策被廣泛使用的主要原因。

“移動優先”正是“漸進式推進”的規則。

“移動優先”,顧名思義,就是從限制較多的移動端開始産品設計,然後擴充其功能,打造平闆或桌面版本。

什麼是前端開發中的 mobile first 政策1. Responsive Web Design (RWD)2. “Progressive Advancement” & “Graceful Degradation”

除了上面提到的漸進式進步對抗優雅降級的勝利之外,我們有更多切實的理由相信移動優先原則在産品設計中很重要。 也就是說,這些年來全世界移動使用的爆炸式增長。