作為設(shè)計(jì)師，我們是應(yīng)該努力把客戶端的體驗(yàn)提升到最優(yōu)，還是在網(wǎng)頁應(yīng)用層面上做更多的設(shè)計(jì)？app開發(fā)一直是大家關(guān)心的話題。那么，我們首先應(yīng)該立體的認(rèn)識(shí)一下WebApp和NativeApp。

下面先是根據(jù)RAHulVARSHNEYA的文章翻譯寫出的原生app的制作教程。你可以選取教程中與你戰(zhàn)略最契合的內(nèi)容，也可以完全遵循它。但最重要的是你必須開始工作起來。

第一步：找到一個(gè)想法或問題。

如果你已經(jīng)有了一個(gè)App大致想法，請(qǐng)直接前往第二步。如果沒有的話，請(qǐng)繼續(xù)閱讀。想要做一款A(yù)pp卻毫無頭緒？這時(shí)候你真正需要的是問題，而且這些問題實(shí)際上隨處可見。

成功的創(chuàng)業(yè)者們會(huì)用我們從未想象過的方式去解決問題。當(dāng)你環(huán)顧四周，每一件你在使用的產(chǎn)品與服務(wù)都是為了解決問題而創(chuàng)造出來的，你有輛轎車是因?yàn)槟阆胍獜囊粋€(gè)地方快速去到另一個(gè)地方，你有架飛機(jī)是因?yàn)槟阆胍酶斓乃俣葟囊粋€(gè)國家去到另一個(gè)國家。

所以，多觀察你日常生活中的問題并將他們一一記錄出來。一但你有了一個(gè)詳盡的清單，就可以開始去思考你該如何解決問題，并把最可能實(shí)現(xiàn)的那些問題作為備選名單。

第二步：確定需求。

確認(rèn)過程會(huì)證明你的App是否存在需求。你可以使用GoogleKeywordPlannerTool(谷歌關(guān)鍵詞工具)或者百度關(guān)鍵詞規(guī)劃師去查找有多少人在搜索你想要嘗試去做的事情，這可以驗(yàn)證你的想法。你也可以建立一個(gè)著陸頁去大范圍地宣傳你的App想法，并通過郵件注冊(cè)來找尋用戶興趣。

第三步：展示流程與功能。

確認(rèn)好了你的App想法意味著你已經(jīng)了解到人們想要使用的某樣?xùn)|西?，F(xiàn)在是時(shí)候用一份文檔詳細(xì)地記下你的產(chǎn)品特點(diǎn)，或者如果你打算做得更多更具體，可以使用線框圖工具。

當(dāng)你把想法寫在紙上時(shí)，記得要盡可能詳細(xì)。包括用戶會(huì)如何瀏覽App以及可以預(yù)見的所有功能。這樣做能幫助你的開發(fā)者清楚地理解你的期望。

第四步：砍掉非核心的功能。

在準(zhǔn)備好的流程圖與功能文檔里，你要開始去思考有哪些功能你是可以摒棄的，只保留App的核心價(jià)值。不要在第一個(gè)版本里創(chuàng)建一些“如果有還不錯(cuò)”的功能，因?yàn)樗麄兡軌蛟谥箅S時(shí)作為更新被添加上去。這樣做會(huì)幫助你減少初期的開發(fā)支出并使你更快地進(jìn)入市場(chǎng)。

第五步：把設(shè)計(jì)放在第一位。

我聽過不少的創(chuàng)業(yè)者說他們只想要一個(gè)非?；A(chǔ)的設(shè)計(jì)，以便把精力都放在技術(shù)開發(fā)上面。他們錯(cuò)了！設(shè)計(jì)不僅關(guān)乎于你的App外觀，更會(huì)影響用戶會(huì)如何使用你的產(chǎn)品。Khosla風(fēng)投公司的創(chuàng)始人VinodKhosla將設(shè)計(jì)一詞闡釋得好，他說：“設(shè)計(jì)，讓科技更有效?！彼?，去找一位能把設(shè)計(jì)（用戶體驗(yàn)和圖形設(shè)計(jì)）放在首位的開發(fā)者吧。

第六步：聘請(qǐng)?jiān)O(shè)計(jì)師/開發(fā)者。

尋找一個(gè)擁有極佳設(shè)計(jì)才能和靠譜開發(fā)團(tuán)隊(duì)的開發(fā)公司。在聘請(qǐng)開發(fā)者的時(shí)候，上網(wǎng)去查一下他的信譽(yù)以及他開發(fā)過的App。如果你在他的作品集里，能夠找到一個(gè)真正喜歡的作品的話，那么他就很有可能是你的好人選。

第七步：建立開發(fā)者賬戶。

你必須要注冊(cè)一個(gè)開發(fā)者賬戶，這樣就能在不同的App商店上分發(fā)銷售你的app。谷歌的Android系統(tǒng)收費(fèi)每年25美元、Apple每年收取99美元。你可以選擇以個(gè)人身份或者已有的公司注冊(cè)。

(注：其實(shí)在第七步和第八步之間，還有很重要的一步：開發(fā)-測(cè)試-上線。在App發(fā)布之前，一定要做好測(cè)試，以一個(gè)新手用戶的身份來使用自己的產(chǎn)品，讓那些上線后將會(huì)出現(xiàn)在真正用戶面前的隱患提前暴露出來，可以有效減少將來用戶的抱怨。國內(nèi)的應(yīng)用測(cè)試托管工具有：云測(cè)Testin、FIR.im、BugHD)

第八步：集成分析。

分析方法能夠幫助你的App追蹤其下載量，用戶參與情況，以及用戶留存情況。確保你使用例如Flurry這類免費(fèi)易得的工具，或者是Localytics,它同時(shí)提供免費(fèi)與收費(fèi)的版本。

第九步：快速及時(shí)地獲取反饋。

一旦你的App在應(yīng)用商店上線，第一批的用戶使用情況以及他們的行為，會(huì)讓你了解到應(yīng)該如何去改進(jìn)和提升你的App。改進(jìn)是長期且無止境的，所以，一定要持續(xù)關(guān)注用戶反饋并不斷進(jìn)行改進(jìn)。

第十步：引入新功能。

你已經(jīng)創(chuàng)建了只有核心功能的第一版App。(譯者注：還記得上文提到的第四步吧)現(xiàn)在是時(shí)候評(píng)估和引入在初期設(shè)計(jì)時(shí)未加入的功能特點(diǎn)。你將從分析結(jié)果和用戶反饋中知道當(dāng)初的那些功能是否還有必要加入。

當(dāng)然，這些步驟并不是完全不可修改的，它們只是一份基于經(jīng)驗(yàn)總結(jié)的教程，可以指導(dǎo)你如何最高效地創(chuàng)建自己第一個(gè)App。當(dāng)你準(zhǔn)備好開始工作了，你也一定會(huì)意識(shí)到：做一個(gè)App是最簡單的部分，能在App上線后吸引到源源不斷的用戶才是最具有挑戰(zhàn)之處。

NativeApp的優(yōu)勢(shì)：

1.提供好的用戶體驗(yàn)，最優(yōu)質(zhì)的用戶界面，最華麗的交互

2.針對(duì)不同平臺(tái)提供不同體驗(yàn)

3.可節(jié)省帶寬成本

4.可訪問本地資源

5.盈利模式明朗

NativeApp的劣勢(shì)：

1.移植到不同平臺(tái)上比較麻煩

2.維持多個(gè)版本的成本比較高

3.需要通過store或market的確認(rèn)

4.盈利需要與第三方分成

下面則是我在做WebApp的一些心得，希望對(duì)做WebApp的朋友有點(diǎn)啟發(fā)，推薦使用咫尺即速應(yīng)用工具。

1、分析目標(biāo)人群，確定WebApp的定位：

首先我們應(yīng)該以解決客戶需求為出發(fā)點(diǎn)，再根據(jù)需求分析總結(jié)出用戶需要的應(yīng)用內(nèi)容，確定功能清單，之后就可以著手準(zhǔn)備制作了。比方做我想做一個(gè)微商城的WebApp，我希望用戶不需要通過其他軟件就可以在我的微商城購買物品，而且我只需要我的WebApp簡單易用，用戶不會(huì)因?yàn)楣δ苓^于繁多而無從下手。

【重點(diǎn)：定位好目標(biāo)人群】

2.開始WebApp的開發(fā)制作

【重點(diǎn)：熟悉布局功能組件，拉動(dòng)組件到對(duì)應(yīng)的面板，設(shè)置好顏色，跳轉(zhuǎn)頁面及連接】

即速應(yīng)用在很大程度上參考了原生App的功能，所以提供了非常豐富的功能組件，比如導(dǎo)航組件，輪播圖組件，分類組件，視頻組件，音頻組件，按鈕組件，自定義組件，選項(xiàng)投票等等組件。確實(shí)可以不需要編寫代碼，只需把想要的組件拖動(dòng)到對(duì)應(yīng)的面板里，完成頁面布局、顏色、字體設(shè)定，鏈接跳轉(zhuǎn)等，即可一鍵生成WebApp。當(dāng)然這也是我們只做WebApp過程中，最花時(shí)間的步驟，我們需要不斷的創(chuàng)建版塊和頁面布局，我們也需要時(shí)刻記得每塊模板都應(yīng)跳轉(zhuǎn)到對(duì)應(yīng)的頁面。

我是選擇空白模板，自己建模板。自己沒UI的，如果你們想省時(shí)間，我覺得可以套用模板，可以比較快的生成自己想要的WebApp，畢竟能快就快，能省就省才是王道嘛。

來看看我大致的首頁布局吧！

首頁布局

看不懂組件名稱，不懂組件怎么用？看看《幫助》咯！《幫助》都已經(jīng)把大致的布局進(jìn)行了粗略的介紹。至少不會(huì)讓自己對(duì)功能模模糊糊。如果對(duì)某個(gè)組件還是不清楚，那么可以點(diǎn)擊那個(gè)組件的右上角的小問號(hào)圖標(biāo)，會(huì)有一個(gè)詳細(xì)的介紹。

看完組件說明就直接創(chuàng)建一個(gè)空白模板開始制作WebApp

制作第一步：我先插入一個(gè)頂部導(dǎo)航組件，作為首頁，頂部導(dǎo)航的標(biāo)題我建議都是大家的公司或者商城名稱。

制作第二步：然后我創(chuàng)建了一個(gè)輪播圖組件做Banner，因?yàn)槲易龅氖俏⑸坛?，我仿照了TB，用輪播的方式播放一些我修好的商品圖片。然后在右邊的組件內(nèi)容中對(duì)每個(gè)輪播圖片逐一添加相對(duì)應(yīng)頁面鏈接去向。

制作第三步：接著我創(chuàng)建了一個(gè)圖片列表，并在頁面屬性中把行列設(shè)置成了4列1行，我再修改圖片高度直接設(shè)置為圓形，系統(tǒng)就自動(dòng)調(diào)整圖片高低了。接著我更換了圖片，替換成按鈕圖片，并在點(diǎn)擊事件中的頁面鏈接至相對(duì)應(yīng)的頁面。如下圖

制作第四步：因?yàn)槲蚁朐谶@一行左右分開，并且是做成左邊是大圖，右邊是上下分開的小圖加標(biāo)題。

所以我先插入一個(gè)雙欄組件，再在右邊的欄里再插入一個(gè)雙欄，這樣就實(shí)現(xiàn)了欄目的劃分。接著在最左邊的雙欄位置插入一個(gè)大圖，并且對(duì)它的寬度和高度調(diào)節(jié)。然后對(duì)最右邊的雙欄也插入一個(gè)圖片組件，并且右鍵復(fù)制一個(gè)圖片組件到下面（小技巧），如下圖，接著拖入文本插件，這里需要注意，拖入第三文本框后，需要先對(duì)它的上間距進(jìn)行調(diào)整，再拖入第四個(gè)文本框，這樣才可以做到上下圖片對(duì)應(yīng)文字的標(biāo)題與內(nèi)容。（小技巧）

制作第五步：插入底部導(dǎo)航組件，任何的App都有底部導(dǎo)航，所以我這里需要提醒，每個(gè)頁面的編輯完后，都需要插入一個(gè)底部導(dǎo)航。我自己一般是先編輯一個(gè)純底部導(dǎo)航的頁面，然后編輯其他頁面的時(shí)候，我先復(fù)制這個(gè)純底部導(dǎo)航的頁面再編輯，這樣能省下我不少時(shí)間。（小技巧）

基本上的頁面編輯和布局大致是這樣的，編輯過一次之后就會(huì)你發(fā)現(xiàn)這個(gè)WebApp的制作并不難。

接下來我想講的是高級(jí)組件中的商品列表組件。這功能滿方便的，這個(gè)組件添加到你商品頁面之后，你在前端的App制作只需要編輯一下這個(gè)版塊的分布和排版就好。因?yàn)樗械纳唐窋?shù)據(jù)和圖片都是在后臺(tái)中上架和調(diào)整價(jià)錢的，這也是方便后臺(tái)的數(shù)據(jù)管理吧。不過我想吐糟一下，后臺(tái)的數(shù)據(jù)整理和圖片上傳后，前端制作也看不到圖片，需要自己預(yù)覽App才能看見。

進(jìn)入后臺(tái)管理，我們就看到商品管理這個(gè)選項(xiàng)。我們先添加分類，保證自己上架的物品不會(huì)混亂難以管理。分類好后再在每個(gè)對(duì)應(yīng)的分類中添加商品和填寫商品的信息即可。如下圖

在商品管理后臺(tái)上傳了所有的商品數(shù)據(jù)后，現(xiàn)在只需要回到前端制作App的頁面，在商品頁面給每個(gè)商品填上對(duì)應(yīng)后臺(tái)的鏈接就可以了。非常方便快捷。

既然商品都上架，并且讓自己的商品在售了，那就需要學(xué)會(huì)管理后臺(tái)的訂單和查看訂單，即速應(yīng)用這個(gè)也是仿照了TB做出了這樣一個(gè)后臺(tái)管理，著實(shí)讓我這個(gè)小白也會(huì)用這個(gè)來管理訂單，下面po一個(gè)我朋友的訂單管理頁面。

好啦，我大概的制作過程和心得也差不多是這樣啦！雖然即速應(yīng)用有著蠻多的高級(jí)功能組件，其中商品列表組件（電商支付功能），BBS組件（社交娛樂功能），自定義表單組件（數(shù)據(jù)統(tǒng)計(jì)功能），個(gè)人中心組件等等是每位WebApp作者都愿意去制作和研究的。但是我只用過商品列表組件，所以只能寫一下商品列表的組件內(nèi)容與情況啦，如果有其他的朋友也用過這款工具，有機(jī)會(huì)大家可以多多交流。

WebApp的優(yōu)勢(shì)：

1.開發(fā)成本低

2.適配多種移動(dòng)設(shè)備成本低

3.跨平臺(tái)和終端

4.迭代更新容易

5.無需安裝成本

WebApp的劣勢(shì)：

1.瀏覽的體驗(yàn)短期內(nèi)還無法超越原生應(yīng)用

2.消息推送不夠及時(shí)

3.調(diào)用本地文件系統(tǒng)的能力弱

總結(jié)心得：引用來自豆瓣的（達(dá)眾網(wǎng)絡(luò)）

業(yè)界精神領(lǐng)袖喬布斯創(chuàng)建了應(yīng)用商店(AppStore)，但他卻極富遠(yuǎn)見地告誡開發(fā)者，“雖然現(xiàn)階段NativeApp給了用戶更好的體驗(yàn)，但Web才是未來。如果現(xiàn)在的開發(fā)者不有效利用Web技術(shù)，那他就落伍了?！?原載：infotoall網(wǎng))

在很多開發(fā)者眼里，WebApp開發(fā)成本低，輕松實(shí)現(xiàn)跨平臺(tái)，保證體驗(yàn)的一致性；同時(shí)，迭代更新更加容易，用戶使用成本和門檻較低。但WebApp目前的不足也十分明顯，如瀏覽體驗(yàn)短期內(nèi)無法超越NativeApp、調(diào)用本地文件系統(tǒng)的能力有待提高等。

對(duì)于NativeApp，有開發(fā)者認(rèn)為，原生應(yīng)用有更好的交互界面和交互體驗(yàn)，收費(fèi)的盈利模式明朗，可更好的訪問本地資源等。當(dāng)然NativeApp移植成本高、上線需要應(yīng)用市場(chǎng)確認(rèn)等劣勢(shì)也不能忽視。

“WebApp和NtiveApp各有長短，互相補(bǔ)充，WebApp不能取代傳統(tǒng)App?！比f維網(wǎng)聯(lián)盟中國區(qū)代表李安琪表示，當(dāng)前WebApp與NativeApp仍然無法相互替代，兩者是相互學(xué)習(xí)、相互促進(jìn)的關(guān)系。當(dāng)Web的體驗(yàn)與Native相近的時(shí)候，用戶更愿意把精力集中在內(nèi)容上，而并非是交互界面，在這種情形下，WebApp的優(yōu)勢(shì)將更加明顯。

“WebApp代表未來，NativeApp只是過去，這也為蘋果、谷歌、微軟等公司所公認(rèn)?！彬v訊無線瀏覽器產(chǎn)品部工程師夏李表示，用戶期待著WebApp所帶來的那種跨平臺(tái)同步的無縫體驗(yàn)，所有的WebApp將不再是一個(gè)個(gè)孤島，而是達(dá)到資源的充分互補(bǔ)，從而加快手機(jī)瀏覽器商業(yè)模式成熟的步伐。除了相對(duì)成熟的廣告模式外，云服務(wù)會(huì)在HTML5的基礎(chǔ)上讓W(xué)eb凸顯更大的價(jià)值。

名稱欄目：手機(jī)app開發(fā)如何思考理念？
文章轉(zhuǎn)載：http://redsoil1982.com.cn/news/213848.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有App開發(fā)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)