過(guò)去，對(duì)于網(wǎng)頁(yè)項(xiàng)目，大部分網(wǎng)頁(yè)設(shè)計(jì)者和他們的客戶都先從桌面版入手，同時(shí)把移動(dòng)版放在第二步實(shí)現(xiàn)。即使在響應(yīng)式設(shè)計(jì)興起之后，我們中的很多人仍然會(huì)從“全尺寸”的網(wǎng)站設(shè)計(jì)開(kāi)始，然后再進(jìn)行裁減。

不過(guò)目前在該行業(yè)中，將整個(gè)工作流程完全顛倒過(guò)來(lái)的趨勢(shì)漸長(zhǎng)，即先考慮移動(dòng)版本，然后再將其擴(kuò)展為一個(gè)更大的桌面版本。為什么你將會(huì)使用這種方式來(lái)處理項(xiàng)目？這種策略的利弊又如何？請(qǐng)繼續(xù)讀下去！

與Heart Internet VPS共同呈現(xiàn)這篇文章，它是我們關(guān)于“展望桌面設(shè)計(jì)”系列的一部分。

移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)并非小眾

如果你仍然認(rèn)為移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)和應(yīng)用開(kāi)發(fā)是小眾市場(chǎng)，那么你需要改變一下你的思路了，移動(dòng)并不是趨勢(shì)，即使將來(lái)也不是，它就是當(dāng)下。不相信？這里有一些自來(lái)Mobithinking的上個(gè)月的統(tǒng)計(jì)數(shù)據(jù)，有點(diǎn)驚人哦！

在美國(guó)，25%的移動(dòng)網(wǎng)頁(yè)用戶只使用移動(dòng)設(shè)備上網(wǎng)(他們很少使用桌面設(shè)備上網(wǎng))

移動(dòng)設(shè)備銷售全線增長(zhǎng)，并且新的手機(jī)中，超過(guò)85%以上具備上網(wǎng)功能

其中最強(qiáng)有力的事實(shí)就是以上的第二條，它足以說(shuō)明很多用戶很可能只會(huì)訪問(wèn)網(wǎng)站的移動(dòng)版本。這是個(gè)很驚人的發(fā)現(xiàn)，不是嗎？

相較以往，網(wǎng)頁(yè)更像是我們隨身攜帶的物品，而不只是出現(xiàn)在我們的桌邊或者家里。這是一種全球趨勢(shì)，在未來(lái)的數(shù)年間，這種現(xiàn)象會(huì)持續(xù)增長(zhǎng)。你準(zhǔn)備好了嗎？你的專業(yè)技能集合中包含了所有重要平臺(tái)上的網(wǎng)頁(yè)開(kāi)發(fā)了嗎？還是只是停留在桌面領(lǐng)域？

為什么移動(dòng)平臺(tái)優(yōu)先？

奇怪的是，到現(xiàn)在為止，還沒(méi)有人從中學(xué)到新的東西。那些你所熟知的200多塊美元的手機(jī)已經(jīng)明明白白的告訴你，網(wǎng)頁(yè)已經(jīng)突破了電腦機(jī)箱的桎梏。

然而，移動(dòng)網(wǎng)頁(yè)訪問(wèn)雖然很流行，但這并不是說(shuō)服我采用移動(dòng)平臺(tái)設(shè)計(jì)優(yōu)先策略的原因。要知道25%的只通過(guò)移動(dòng)設(shè)備訪問(wèn)網(wǎng)頁(yè)的用戶的反面是，還有75%的人并不是這樣的！很顯然，桌面訪問(wèn)仍然是一個(gè)很重要的渠道，還沒(méi)到把它忘記或是擱置一旁的時(shí)候。所以為什么我們?nèi)匀灰紤]移動(dòng)平臺(tái)設(shè)計(jì)優(yōu)先的思路呢？

2010年，埃里克·施密特宣布谷歌從彼時(shí)開(kāi)始將采用這一策略，它是網(wǎng)頁(yè)設(shè)計(jì)移動(dòng)平臺(tái)優(yōu)先興起的主要原因之一。他甚至說(shuō)：“我認(rèn)為，目前，我們?nèi)w的合作項(xiàng)目，使得移動(dòng)平臺(tái)能解決幾乎所有的問(wèn)題。”為什么設(shè)計(jì)思路會(huì)發(fā)生如此劇烈的變化？

優(yōu)雅降級(jí)還是漸進(jìn)增強(qiáng)

這兩個(gè)詞是幾年前的流行詞語(yǔ)，它們現(xiàn)在仍然能夠幫助我們洞察網(wǎng)頁(yè)設(shè)計(jì)移動(dòng)平臺(tái)優(yōu)先的想法，并幫助我們了解其成為一個(gè)重要概念的原因。

曾經(jīng)有一種需求，希望在盡可能多的瀏覽器和平臺(tái)上支持一種設(shè)計(jì)功能，由此引出了“優(yōu)雅降級(jí)”。設(shè)計(jì)者和開(kāi)發(fā)者希望能夠利用新技術(shù)，同時(shí)又不能把那些沒(méi)有安裝新技術(shù)的用戶排除在外。最后總的想法是創(chuàng)建并提供盡可能佳的服務(wù)，同時(shí)要考慮到每種可能的降級(jí)，不管它有什么缺陷，網(wǎng)站都要確保正常工作。

對(duì)于移動(dòng)平臺(tái)網(wǎng)頁(yè)設(shè)計(jì)，這就意味著，需要對(duì)一個(gè)完整的，標(biāo)準(zhǔn)的網(wǎng)頁(yè)進(jìn)行縮減，并逐步去掉內(nèi)容和功能，因?yàn)橐暣白兊迷絹?lái)越小，系統(tǒng)變得越來(lái)越簡(jiǎn)單(比如不支持Flash，等等)

由此趨勢(shì)又引發(fā)了一個(gè)強(qiáng)有力的新概念：漸進(jìn)增強(qiáng)。在這個(gè)版本的故事中，你在移動(dòng)平臺(tái)上使出渾身解數(shù)，占有最小的屏幕面積，占用最少的處理能力以及使用最少的第三方插件，為用戶提供視覺(jué)與功能的完美體驗(yàn)。當(dāng)有需求出現(xiàn)時(shí)，再逐漸“增強(qiáng)”網(wǎng)頁(yè)。對(duì)于較大的平臺(tái)，甚至可以無(wú)需顧忌諸多限制，徹底重新考慮。

為什么漸進(jìn)增強(qiáng)勝出了？

乍一看，這兩種方法都差不多。只要最后完成了，誰(shuí)會(huì)在意你是從哪兒開(kāi)始設(shè)計(jì)的呢？對(duì)嗎？

不過(guò)，實(shí)際情況卻有點(diǎn)復(fù)雜。當(dāng)你從桌面平臺(tái)開(kāi)始設(shè)計(jì)時(shí)，通常會(huì)傾向于利用該平臺(tái)所能提供的所有功能。你利用了很多很棒的技術(shù)，做出了很炫的產(chǎn)品，只是突然意識(shí)到，沒(méi)有一個(gè)能用到移動(dòng)平臺(tái)上的。這會(huì)嚴(yán)重削弱移動(dòng)產(chǎn)品，就感覺(jué)像是一個(gè)事后才想起來(lái)的東西，而不是一個(gè)經(jīng)過(guò)雕琢并完成的產(chǎn)品。每個(gè)項(xiàng)目都會(huì)發(fā)生這種情況嗎？也許不都是，但是通常這種情況比你想象的更加普遍。

如果我們審視一下漸進(jìn)增強(qiáng)的工作流程，就會(huì)發(fā)現(xiàn)它會(huì)導(dǎo)向另一個(gè)結(jié)局。這里讓我們從一個(gè)既非常簡(jiǎn)潔又令人印象深刻的項(xiàng)目說(shuō)起。盡管面臨諸多限制，你還是投入了全部的啟動(dòng)能量，并創(chuàng)造出一個(gè)外觀和功能都很不錯(cuò)的產(chǎn)品。

更重要的是，你已經(jīng)闖過(guò)了將內(nèi)容削減至最重要元素的難關(guān)。等到需要把此設(shè)計(jì)移植到桌面平臺(tái)的時(shí)候，你不再需要考慮要裁減掉哪些，怎么削減產(chǎn)品功能，你只需決定怎么使它變得更加健壯！

網(wǎng)頁(yè)內(nèi)容：有選擇的提供是最佳方案

以上的論據(jù)純粹是從哲學(xué)的角度出發(fā)，來(lái)得出最終的結(jié)論——即如果你使用移動(dòng)平臺(tái)設(shè)計(jì)優(yōu)先的方法，那最終會(huì)有一個(gè)更好的結(jié)局。如果你想要一些更顯著的實(shí)質(zhì)性的論據(jù)，只需看看你是如何提供網(wǎng)頁(yè)內(nèi)容的。

如果我們持優(yōu)雅降級(jí)的觀點(diǎn)，會(huì)基于用戶使用的是最大化的平臺(tái)這個(gè)假定，從而將所有的內(nèi)容(包括文本，圖片，視頻，語(yǔ)音，等等)同時(shí)推送給用戶，由此，移動(dòng)版本的功能就是簡(jiǎn)單的忽略或者是刪除頁(yè)面上的諸多內(nèi)容。問(wèn)題來(lái)了，不管給定的平臺(tái)需不需要，所有的內(nèi)容都已經(jīng)加載了。這些內(nèi)容往往都多于給定平臺(tái)所必須的內(nèi)容，而通常隨之而來(lái)的是超慢的網(wǎng)絡(luò)下載速度。瞧，看出問(wèn)題所在了嗎？

如果持移動(dòng)平臺(tái)優(yōu)先的觀點(diǎn)，那么在那些較小的平臺(tái)上，我們一開(kāi)始只會(huì)加載絕對(duì)必須的內(nèi)容。這樣可以避免不必要的延時(shí)，體驗(yàn)到更快的速度。而附加的資源則嚴(yán)格按照按需的原則進(jìn)行加載，即只加載那些目標(biāo)平臺(tái)能夠很好的進(jìn)行處理的資源。

響應(yīng)式設(shè)計(jì)怎么樣？

那“漸進(jìn)增強(qiáng)”又如何與網(wǎng)頁(yè)設(shè)計(jì)的另一主流趨勢(shì)“響應(yīng)式設(shè)計(jì)”保持一致？好消息是這兩種策略并不是互相競(jìng)爭(zhēng)的關(guān)系。事實(shí)上，你可以認(rèn)為他倆是互補(bǔ)的。

響應(yīng)式設(shè)計(jì)的理念是，基于設(shè)備類型和視窗大小來(lái)進(jìn)行媒體查詢。牢記這一點(diǎn)，你就可以從移動(dòng)平臺(tái)的角度來(lái)進(jìn)行初始CSS的編碼，然后隨著設(shè)備視窗的增大，再使用媒體查詢有選擇的提供附加的樣式。

典型的響應(yīng)式設(shè)計(jì)是從大視窗開(kāi)始，然后再逐步裁減。而以上的方法看起來(lái)剛好相反。不過(guò)基于上述觀點(diǎn)，很顯然，從小至大構(gòu)建媒體查詢的背后仍存在很多邏輯。

肥大正在走下坡路

移動(dòng)平臺(tái)設(shè)計(jì)優(yōu)先萬(wàn)歲！很顯然它是自The Oatmeal以來(lái)，對(duì)網(wǎng)頁(yè)設(shè)計(jì)最具沖擊力的思想。但是為什么我對(duì)它就興奮不起來(lái)呢？即使我經(jīng)常對(duì)響應(yīng)式設(shè)計(jì)大談特談，為什么我還是會(huì)經(jīng)常避免談及網(wǎng)頁(yè)設(shè)計(jì)移動(dòng)平臺(tái)優(yōu)先的話題呢？

答案很簡(jiǎn)單：它既不好玩也不容易。響應(yīng)式設(shè)計(jì)確實(shí)很微妙，但是它讓我真正在布局上施展拳腳，使用眾多的瀏覽器內(nèi)置功能，實(shí)現(xiàn)一些很酷的特效。響應(yīng)式設(shè)計(jì)讓我可玩的東西更多，而不是變少。

然而對(duì)于移動(dòng)平臺(tái)設(shè)計(jì)有限，第一步的諸多限制就給了我當(dāng)頭一棒。一點(diǎn)兒也不好玩！馬上我要面對(duì)的是更小的屏幕，更少的資源，還有一大堆的麻煩。更進(jìn)一步說(shuō)，這不是個(gè)令人感到舒適的領(lǐng)域?；旧衔业木W(wǎng)頁(yè)設(shè)計(jì)生涯都是在桌面領(lǐng)域度過(guò)的，我所積累的經(jīng)驗(yàn)只在鼠標(biāo)的移動(dòng)和點(diǎn)選之間，而不是指尖輕觸。雖然我已經(jīng)做了很多移動(dòng)平臺(tái)的工作，但是我還不能說(shuō)這是我的強(qiáng)項(xiàng)。

更重要的是，從嚴(yán)格的設(shè)計(jì)角度而言，我發(fā)現(xiàn)如果從移動(dòng)平臺(tái)開(kāi)始設(shè)計(jì)，并把它做好真的是很難的一件事。我在最近的一篇文章中提到過(guò)此觀點(diǎn)，在評(píng)論中迎來(lái)了一片歡呼聲。我甚至聽(tīng)說(shuō)業(yè)界領(lǐng)先的專家們也持類似論調(diào)。

迎接挑戰(zhàn)

讓我們?cè)賮?lái)看一下我贊同和反對(duì)移動(dòng)平臺(tái)優(yōu)先設(shè)計(jì)的理由。在贊同這一欄里，我們的觀點(diǎn)直白且富有邏輯，而且難以忽視。在反對(duì)這一欄里，充斥著抱怨和猶豫不決。你認(rèn)為哪一邊會(huì)獲勝呢？

或許你能找出比我更有力的反對(duì)移動(dòng)平臺(tái)優(yōu)先的理由，但是從客觀的角度來(lái)講，很顯然移動(dòng)設(shè)計(jì)優(yōu)先具有更強(qiáng)的競(jìng)爭(zhēng)力。

這意味著我可能需要突破自我，迎接挑戰(zhàn)，以移動(dòng)平臺(tái)的角度開(kāi)始設(shè)計(jì)項(xiàng)目。如果這令我感到很不舒服，很好，說(shuō)明我還有成長(zhǎng)的空間，還有新技術(shù)需要學(xué)習(xí)。

基本上，我采用移動(dòng)平臺(tái)優(yōu)先方法的原因是因?yàn)樗且杂脩魹橹行牡?，而我反?duì)此方法的原因則源于個(gè)人，那么以致力成為一名更好的設(shè)計(jì)師的名義，我必須放棄一點(diǎn)舒適感。

?來(lái)源：譯言-科技

什么讓你畏縮不前？

現(xiàn)在你明白，網(wǎng)頁(yè)設(shè)計(jì)移動(dòng)平臺(tái)優(yōu)先之所以偉大完全是因?yàn)樗欠?wù)于用戶的。你知道諸如谷歌這樣的大公司正在采用這一方法，而你也清楚的了解移動(dòng)平臺(tái)優(yōu)先的工作流程所能帶來(lái)的好處。所以，還有什么讓你畏縮不前呢？

你是否認(rèn)同我的個(gè)人觀點(diǎn)——移動(dòng)平臺(tái)優(yōu)先確實(shí)很難實(shí)施，但是同時(shí)也贊同，你只是需要拿出點(diǎn)男子氣概(或者女漢子氣概也行)勇敢跨出這一步？或者還有什么更大的問(wèn)題在阻礙著你？留下你的評(píng)論，讓我們共同探討吧！