當前位置:首頁 > 新聞 > 不會(huì)編程也能(néng)做 10分鍾學(xué)會(huì)開(kāi)發(fā)手機App
不會(huì)編程也能(néng)做 10分鍾學(xué)會(huì)開(kāi)發(fā)手機App
1POP:10分鍾教會(huì)你開(kāi)發(fā)手機App
你可能(néng)一行代碼都(dōu)不會(huì)寫,但每天接觸這(zhè)麼(me)多手機App心裡(lǐ)總會(huì)有些癢癢,如何在沒(méi)有任何編程基礎上開(kāi)發(fā)一款邏輯分明、架構完善的手機應用程序?其實借助一些工具,無需任何計算機理論我們也可以輕松完成(chéng)這(zhè)一使命。接下來我們就(jiù)爲大家介紹一種(zhǒng)簡單的開(kāi)發(fā)途徑,你隻需要準備筆紙或者簡單的PS技巧,隻需10分鍾,一款優秀的手機App就(jiù)誕生了。
不會(huì)編程也能(néng)做 10分鍾學(xué)會(huì)開(kāi)發(fā)手機Ap
首先我們需要借助這(zhè)款開(kāi)發(fā)神器——POP-Prototyping on Paper,這(zhè)款App旨在幫助我們僅僅通過(guò)手繪來完成(chéng)手機應用的界面(miàn)、UI設計、框架搭建和開(kāi)發(fā)。你隻需要把想要開(kāi)發(fā)的界面(miàn)原型畫出來,通過(guò)手機拍照和熱點互鏈完成(chéng)交互,就(jiù)能(néng)將(jiāng)一個App畫出來。
手繪制作的App
爲了更好(hǎo)的演示POP開(kāi)發(fā)手機App的過(guò)程,我們決定爲大家重新開(kāi)發(fā)一款手繪闆“中關村在線”App,詳細向(xiàng)大家手機App是如何通過(guò)鉛筆畫出來的。
2筆紙結合 手工繪制界面(miàn)圖形
筆紙結合 手工繪制界面(miàn)圖形
在開(kāi)發(fā)手機App之前,我們必須有完成(chéng)的交互規劃,比如什麼(me)地方放什麼(me)東西,兩(liǎng)個頁面(miàn)之間怎樣實現交互,不同的内容之間怎麼(me)形成(chéng)溝通,是不是需要添加新的功能(néng)等。在規劃App時(shí)你需要把自己當做一名産品經(jīng)理,既要完善功能(néng)、用戶體驗還(hái)要兼顧美觀實用。
中關村在線App的界面(miàn)設計
鑒于ZOL技術部和設計部的大大們已經(jīng)完成(chéng)了所有成(chéng)型的規劃,我們隻需要照抄就(jiù)行,下面(miàn)就(jiù)是我們爲手繪版“中關村在線”App設計的各個界面(miàn)的草圖(畫的不好(hǎo),ZOL技術部和設計部的大大們請多多見諒)。
手繪版框架搭建
手繪版框架搭建
前面(miàn)我們已經(jīng)打好(hǎo)了框架,因此在畫草圖的時(shí)候每一個能(néng)夠打開(kāi)的頁面(miàn)都(dōu)需要我們手工畫出來,工作量比較大。當然如果你想追求美觀和效率,也可以直接使用PS完成(chéng)。(注意,POP根據不同的手機設置有不同的分辨率,所以我們在畫草稿時(shí)一定要注意屏幕的比例,蘋果的開(kāi)發(fā)優勢這(zhè)個時(shí)候就(jiù)顯現出來了)。
繪制時(shí)一定要注意比例
3添加交互 讓手機App動起(qǐ)來
添加交互 讓手機App動起(qǐ)來
接下來我們要在POP新建項目,和頭像上傳的方式一樣,手機App也可以通過(guò)圖片或者手繪一個圓角icon,現在是展示大家繪畫功底的時(shí)候了(筆者手繪功底垃圾,這(zhè)裡(lǐ)盜一張設計部設計的圖标)。
開(kāi)發(fā)App界面(miàn)
依次將(jiāng)已經(jīng)繪好(hǎo)的草圖上傳上來,點擊左下角的相機标志即可錄入剛才我們手繪的界面(miàn),這(zhè)裡(lǐ)還(hái)有簡單的編輯功能(néng),比如裁圖,翻轉角度、高亮等,彌補拍攝的缺陷。
上傳手繪頁面(miàn)
添加鏈接
接下來我們要做的就(jiù)是將(jiāng)所有的頁面(miàn)進(jìn)行熱區互鏈,比如在首頁中有很多鏈接,包括組圖、新聞鏈接以及各種(zhǒng)功能(néng)按鈕,現在我們隻需要給每一個區域添加交互鏈接即可。
添加各種(zhǒng)操作動作
點擊左下角界面(miàn)中間出現一個紅色的伸縮框,把它拖動到我們需要鏈接的區域并進(jìn)行縮放,然後(hòu)就(jiù)能(néng)鏈接到其他頁面(miàn),比如點擊下方的圖賞按鈕即可轉換到圖賞頁。POP提供多樣性的點觸和手勢滑動動作,轉場動作也有幾個可以選擇,完成(chéng)的鏈接會(huì)顯示綠色。
4視頻演示 看一看我們做的App
視頻演示 看一看我們做的App
按照前面(miàn)的規劃,我們需要在每個頁面(miàn)添加各種(zhǒng)鏈接,你可以選擇點觸、滑動、捏合和雙擊等動作,基本上覆蓋了目前所有App開(kāi)發(fā)所需要的動作。完成(chéng)以上操作之後(hòu)一個完整的App就(jiù)做好(hǎo)了。
正式版和手繪闆對(duì)比
視頻演示
以下就(jiù)是我們已經(jīng)完成(chéng)的手繪闆中關村在線手機App,除了繪畫有些粗糙之外,操作體驗的流暢度和原版沒(méi)有太多區别,你也可以感受一下自己設計手機應用程序的快感。不過(guò)POP也有一些缺陷,比如無法添加外鏈,添加的所有鏈接必須要我們一一繪制出來。但對(duì)于那些學(xué)習産品開(kāi)發(fā)的初學(xué)者來說(shuō)使用有用,你可以通過(guò)POP來體驗整個App的開(kāi)發(fā)流程,并實現各種(zhǒng)動作的演示,進(jìn)而能(néng)夠了解其中出現的問題,幫助我們快速發(fā)現。如果你有興趣,不妨也來嘗試做出一個來。