藍(lán)藍(lán)設(shè)計(jì)( yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服

來(lái)源：莫貝網(wǎng)

現(xiàn)在關(guān)于移動(dòng)應(yīng)用的概念有許多：Native App, Responsive Web, Web App, Hybrid App，搞清楚這幾個(gè)概念的區(qū)別和各自的優(yōu)劣對(duì)于設(shè)計(jì)師來(lái)說(shuō)很重要，這篇文章較為全面地探討了這幾個(gè)概念，值得初學(xué)者閱讀，也歡迎大家提出自己的觀點(diǎn)。

譯者：陳凌霜 Liz Chen，華盛頓大學(xué)Human Centered Design and Engineering研究生在讀，現(xiàn)在青蛙設(shè)計(jì)Frog Design做交互設(shè)計(jì)實(shí)習(xí)。

譯者注：

鑒于在中文語(yǔ)境中，一些英語(yǔ)名詞是直接拿來(lái)使用，并無(wú)統(tǒng)一標(biāo)準(zhǔn)的中文翻譯。為了方便廣大讀者閱讀，譯者首先把這些名詞單獨(dú)拿出來(lái)翻譯，只為傳達(dá)大致的意思，并不一定是標(biāo)準(zhǔn)化的名稱(chēng)。鑒于譯者對(duì)于技術(shù)名詞的理解有限，有翻譯不到位的地方也請(qǐng)大家多多指出。

移動(dòng)應(yīng)用及移動(dòng)響應(yīng)式網(wǎng)頁(yè)應(yīng)用

移動(dòng)應(yīng)用程序是在新平臺(tái)上連接市場(chǎng)、搜集客戶(hù)數(shù)據(jù)、提供服務(wù)的強(qiáng)有力工具。但，到底什么才是移動(dòng)應(yīng)用?

從本質(zhì)上來(lái)說(shuō)，移動(dòng)應(yīng)用是運(yùn)行在智能手機(jī)、平板電腦或者其他移動(dòng)設(shè)備上的電腦程序。他們可以通過(guò)應(yīng)用市場(chǎng)獲得，例如谷歌的Google Play或者蘋(píng)果的App Store。這些平臺(tái)現(xiàn)在都運(yùn)行在云端（Cloud-based Solutions），意味著如果你的手機(jī)被卡車(chē)撞了或者掉進(jìn)水里了，你可以買(mǎi)個(gè)新手機(jī)，登陸，然后所有你的應(yīng)用都會(huì)自動(dòng)被重新安裝好。

圖：當(dāng)你需要設(shè)置一個(gè)新的iOS設(shè)備或者在一個(gè)已有的設(shè)備上恢復(fù)數(shù)據(jù)，你的iCloud備份可以讓你輕松實(shí)現(xiàn)。

應(yīng)用程序與移動(dòng)響應(yīng)式網(wǎng)頁(yè)

把移動(dòng)應(yīng)用程序和移動(dòng)響應(yīng)式網(wǎng)頁(yè)相比其實(shí)并不成立，他們完完全全是不同的概念。讓我們來(lái)看看這是為什么。

在移動(dòng)端使用互聯(lián)網(wǎng)已經(jīng)成為了一種穩(wěn)定增加的趨勢(shì)。用戶(hù)越來(lái)越習(xí)慣于在他們的智能手機(jī)上搜索和瀏覽網(wǎng)頁(yè)。為了迎合這種需求，各種機(jī)構(gòu)正花錢(qián)雇傭網(wǎng)頁(yè) 工程師來(lái)提升用戶(hù)在移動(dòng)設(shè)備上的在線(xiàn)使用體驗(yàn)。你可能見(jiàn)過(guò)這種區(qū)分，比如亞馬遜網(wǎng)站在你的智能手機(jī)上和臺(tái)式電腦上顯示得就不一樣。

圖：同樣的一個(gè)網(wǎng)站，當(dāng)在不同尺寸的設(shè)備上瀏覽時(shí)，看起來(lái)是不一樣的。

事實(shí)上，移動(dòng)響應(yīng)式網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序是蘋(píng)果和橙子的關(guān)系（譯者注：也就是兩者八竿子打不著）。移動(dòng)網(wǎng)頁(yè)是在瀏覽體驗(yàn)上的一種變體。移動(dòng)響應(yīng)式網(wǎng)頁(yè) 改變了你瀏覽網(wǎng)頁(yè)的方式。更加準(zhǔn)確的對(duì)比其實(shí)是強(qiáng)調(diào)移動(dòng)應(yīng)用程序和網(wǎng)頁(yè)應(yīng)用程序的區(qū)別（想一想Pandora, Spotify, 谷歌文檔Google Docs, 臉書(shū)Facebook）（譯者注：沒(méi)法翻墻的同學(xué)可以想一想網(wǎng)易云音樂(lè)、蝦米音樂(lè)、新浪微博）。這些就是那種表現(xiàn)得像電腦程序一樣的網(wǎng)站，因?yàn)?，他們確實(shí) 是。網(wǎng)頁(yè)應(yīng)用就是交互式的（網(wǎng)頁(yè)的）電腦程序（應(yīng)用程序）。

應(yīng)用程序與網(wǎng)頁(yè)應(yīng)用程序

這兩個(gè)是我們可以比較的。我和就職于Kitchen Digital的Michael Wahlstrom坐在一起，來(lái)比較他們各自的優(yōu)缺點(diǎn)。

移動(dòng)應(yīng)用程序的優(yōu)點(diǎn)

單機(jī)（Internet Independent）和緩存（Caching）——即使沒(méi)有網(wǎng)絡(luò)連接，也可以運(yùn)行，這是移動(dòng)應(yīng)用的最主要的優(yōu)點(diǎn)之一。也就是說(shuō)，如果你想要制作一個(gè)應(yīng) 用，它可以讓用戶(hù)在一個(gè)數(shù)據(jù)庫(kù)里面搜索信息、玩游戲、或者拍照片，都可以通過(guò)移動(dòng)應(yīng)用程序來(lái)完成。數(shù)據(jù)可以存儲(chǔ)在移動(dòng)設(shè)備中直到網(wǎng)絡(luò)恢復(fù)連接，之后信息被 重新輸送回網(wǎng)絡(luò)中。

交互（Interactivity）和游戲（Gaming）——雖然瀏覽器在交互和游戲方面一直在進(jìn)步，但是與計(jì)算和移動(dòng)設(shè)備的原生程序語(yǔ)言相比，它們?nèi)匀惶幱诼浜鬆顟B(tài)。因此，如果你準(zhǔn)備制作一個(gè)有著超強(qiáng)交互體驗(yàn)的產(chǎn)品，比如一個(gè)游戲，移動(dòng)應(yīng)用程序可能是更好的選擇。

人們花費(fèi)在移動(dòng)設(shè)備和移動(dòng)應(yīng)用上的時(shí)間正在激增——SalesForce的一項(xiàng)研究表明：85%的被訪(fǎng)者說(shuō)移動(dòng)設(shè)備是他們每天生活的中心組成，這些 人中90%的年紀(jì)在18-24歲。91%的消費(fèi)者說(shuō)能夠通過(guò)任何方式來(lái)訪(fǎng)問(wèn)內(nèi)容很重要。很明顯，在未來(lái)，以移動(dòng)平臺(tái)為中心是個(gè)明智的策略。（來(lái)源：http://www.exacttarget.com/sites/exacttarget/files/deliverables/etmc-2014mobilebehaviorreport.pdf）

錦上添花的小功能——不可否認(rèn)的是，Chrome已經(jīng)宣布了在瀏覽器和移動(dòng)設(shè)備上推送通知的功能。但是移動(dòng)設(shè)備本身可以提供多得多的功能：藍(lán)牙、鄰 近系統(tǒng)（Beacon）、地理定位（geofencing）、WiFi、通知推送、應(yīng)用程序內(nèi)付賬（谷歌的Google Play支持應(yīng)用內(nèi)購(gòu)買(mǎi)），等等。

移動(dòng)響應(yīng)式網(wǎng)頁(yè)應(yīng)用程序的優(yōu)點(diǎn)

網(wǎng)頁(yè)應(yīng)用的編程已經(jīng)完成——由于很可能你已經(jīng)完成了桌面端網(wǎng)頁(yè)應(yīng)用的程序編寫(xiě)，剩下來(lái)的只是審查移動(dòng)端的用戶(hù)體驗(yàn)，然后量身定做用戶(hù)界面，使得它對(duì) 移動(dòng)端更加友好（Mobile Friendly）。這意味著通過(guò)調(diào)整導(dǎo)航菜單、按鈕和字體尺寸以及輸入框，來(lái)創(chuàng)造出更好的移動(dòng)端體驗(yàn)（譯者注：實(shí)際操作起來(lái)不僅僅是調(diào)整以上這些這么簡(jiǎn) 單，信息架構(gòu)、交互方式得也需要做一定的調(diào)整來(lái)更好地適應(yīng)移動(dòng)端瀏覽器）。

不依賴(lài)任何設(shè)備平臺(tái)——網(wǎng)頁(yè)應(yīng)用程序不依賴(lài)于操作系統(tǒng)（比如針對(duì)iOS和安卓需要不同的應(yīng)用）?，F(xiàn)在有一種混合技術(shù)可以讓移動(dòng)應(yīng)用開(kāi)發(fā)者僅用一套代碼來(lái)讓?xiě)?yīng)用程序同時(shí)適用這兩種操作平臺(tái)，但目前為止這還是一項(xiàng)新型技術(shù)，且十分昂貴。而對(duì)一個(gè)網(wǎng)頁(yè)應(yīng)用程序來(lái)說(shuō)，開(kāi)發(fā)者會(huì)針對(duì)最常見(jiàn)的網(wǎng)頁(yè)瀏覽器來(lái)進(jìn)行設(shè)計(jì)。一旦完成，它可以在任何使用那些瀏覽器（如Chrome，火狐，IE）的設(shè)備上運(yùn)行。

內(nèi)容不受應(yīng)用商店規(guī)定的限制——網(wǎng)頁(yè)應(yīng)用程序存在于蘋(píng)果的App Store和谷歌的Google Play的規(guī)定之外，因此他們可以自己制定自己的規(guī)則。沒(méi)有額外的步驟來(lái)進(jìn)入市場(chǎng)，沒(méi)有繁復(fù)縟節(jié)的束縛。

網(wǎng)頁(yè)或應(yīng)用可以互相鏈接——這在行業(yè)中還屬新概念，意思是你可以把不同的應(yīng)用鏈接起來(lái)達(dá)到1加1大于2的效果，或者把同屬于一個(gè)公司的產(chǎn)品鏈接起來(lái)。

*考慮WebGL的局限性——WebGL是網(wǎng)頁(yè)瀏覽器的圖像引擎。雖然它可以實(shí)現(xiàn)很多功能，但它還不是最好的用來(lái)實(shí)現(xiàn)移動(dòng)端CPU密集型，及圖像密集型應(yīng)用程序的引擎。

兩者共有或結(jié)合后的優(yōu)點(diǎn)

賺錢(qián)——不管你采用兩者中哪種，你都可以設(shè)計(jì)出付費(fèi)訂閱，然后通過(guò)應(yīng)用程序來(lái)賺錢(qián)。想讓用戶(hù)每人每月付5美元？或者付一次性15美元的費(fèi)用？沒(méi)問(wèn)題。就算你想要它變成消耗品（在應(yīng)用內(nèi)下載所付的錢(qián)），這兩種平臺(tái)都可以幫你達(dá)到。

結(jié)合——這兩種技術(shù)都可以保證你可以從手機(jī)上得到想要的信息。但是，取決于你想讓你的應(yīng)用干什么，你甚至可以考慮設(shè)計(jì)一個(gè)混合型的應(yīng)用，把網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)和移動(dòng)應(yīng)用開(kāi)發(fā)相結(jié)合。

我應(yīng)該如何決定？

做出一個(gè)明智決定的最好方法是咨詢(xún)專(zhuān)家。你的開(kāi)發(fā)者將會(huì)問(wèn)你許多問(wèn)題，甚至比上述提到的概念還要多，為了理解你的應(yīng)用如何才能最好地執(zhí)行，以及建立 在什么樣的平臺(tái)和技術(shù)之上。當(dāng)然你可以同時(shí)咨詢(xún)多個(gè)開(kāi)發(fā)者，但是要記?。簯?yīng)用開(kāi)發(fā)是一半藝術(shù)一半科學(xué)。開(kāi)發(fā)者們可能在如何實(shí)施你的想法上有不同的看法，并 且可能會(huì)往自己的方向上思考，從而可以在他們的專(zhuān)長(zhǎng)領(lǐng)域來(lái)為你提供更多的價(jià)值。

不管用哪種方式，應(yīng)用開(kāi)發(fā)是一個(gè)漫長(zhǎng)的過(guò)程，需要合理的預(yù)算。準(zhǔn)備好接受五位數(shù)的報(bào)價(jià)，并且在開(kāi)始開(kāi)發(fā)前弄清楚投資回報(bào)率和對(duì)用戶(hù)的價(jià)值，以決定應(yīng)用程序是否可行。