新聞中心

1POP：10分鍾教會你開發手機App

你可能一(yī / yì ／yí)行代碼都不(bù)會寫，但每天接觸這(zhè)麽多手機App心裏總會有些癢癢，如何在(zài)沒有任何編程基礎上(shàng)開發一(yī / yì ／yí)款邏輯分明、架構完善的(de)手機應用程序？其實借助一(yī / yì ／yí)些工具，無需任何計算機理論我們也(yě)可以(yǐ)輕松完成這(zhè)一(yī / yì ／yí)使命。接下來(lái)我們就(jiù)爲(wéi / wèi)大(dà)家介紹一(yī / yì ／yí)種簡單的(de)開發途徑，你隻需要(yào / yāo)準備筆紙或者簡單的(de)PS技巧，隻需10分鍾，一(yī / yì ／yí)款優秀的(de)手機App就(jiù)誕生了(le／liǎo)。

不(bù)會編程也(yě)能做 10分鍾學會開發手機Ap

首先我們需要(yào / yāo)借助這(zhè)款開發神器——POP-Prototyping on Paper，這(zhè)款App旨在(zài)幫助我們僅僅通過手繪來(lái)完成手機應用的(de)界面、UI設計、框架搭建和(hé / huò)開發。你隻需要(yào / yāo)把想要(yào / yāo)開發的(de)界面原型畫出(chū)來(lái)，通過手機拍照和(hé / huò)熱點互鏈完成交互，就(jiù)能将一(yī / yì ／yí)個(gè)App畫出(chū)來(lái)。

手繪制作的(de)App

爲(wéi / wèi)了(le／liǎo)更好的(de)演示POP開發手機App的(de)過程，我們決定爲(wéi / wèi)大(dà)家重新開發一(yī / yì ／yí)款手繪闆“中關村在(zài)線”App，詳細向大(dà)家手機App是(shì)如何通過鉛筆畫出(chū)來(lái)的(de)。

2筆紙結合 手工繪制界面圖形

筆紙結合 手工繪制界面圖形

在(zài)開發手機App之(zhī)前，我們必須有完成的(de)交互規劃，比如什麽地(dì / de)方放什麽東西，兩個(gè)頁面之(zhī)間怎樣實現交互，不(bù)同的(de)内容之(zhī)間怎麽形成溝通，是(shì)不(bù)是(shì)需要(yào / yāo)添加新的(de)功能等。在(zài)規劃App時(shí)你需要(yào / yāo)把自己當做一(yī / yì ／yí)名産品經理，既要(yào / yāo)完善功能、用戶體驗還要(yào / yāo)兼顧美觀實用。

中關村在(zài)線App的(de)界面設計

鑒于(yú)ZOL技術部和(hé / huò)設計部的(de)大(dà)大(dà)們已經完成了(le／liǎo)所有成型的(de)規劃，我們隻需要(yào / yāo)照抄就(jiù)行，下面就(jiù)是(shì)我們爲(wéi / wèi)手繪版“中關村在(zài)線”App設計的(de)各個(gè)界面的(de)草圖（畫的(de)不(bù)好，ZOL技術部和(hé / huò)設計部的(de)大(dà)大(dà)們請多多見諒）。

手繪版框架搭建

手繪版框架搭建

前面我們已經打好了(le／liǎo)框架，因此在(zài)畫草圖的(de)時(shí)候每一(yī / yì ／yí)個(gè)能夠打開的(de)頁面都需要(yào / yāo)我們手工畫出(chū)來(lái)，工作量比較大(dà)。當然如果你想追求美觀和(hé / huò)效率，也(yě)可以(yǐ)直接使用PS完成。（注意，POP根據不(bù)同的(de)手機設置有不(bù)同的(de)分辨率，所以(yǐ)我們在(zài)畫草稿時(shí)一(yī / yì ／yí)定要(yào / yāo)注意屏幕的(de)比例，蘋果的(de)開發優勢這(zhè)個(gè)時(shí)候就(jiù)顯現出(chū)來(lái)了(le／liǎo)）。

繪制時(shí)一(yī / yì ／yí)定要(yào / yāo)注意比例

3添加交互 讓手機App動起來(lái)

添加交互 讓手機App動起來(lái)

接下來(lái)我們要(yào / yāo)在(zài)POP新建項目，和(hé / huò)頭像上(shàng)傳的(de)方式一(yī / yì ／yí)樣，手機App也(yě)可以(yǐ)通過圖片或者手繪一(yī / yì ／yí)個(gè)圓角icon，現在(zài)是(shì)展示大(dà)家繪畫功底的(de)時(shí)候了(le／liǎo)（筆者手繪功底垃圾，這(zhè)裏盜一(yī / yì ／yí)張設計部設計的(de)圖标）。

開發App界面

依次将已經繪好的(de)草圖上(shàng)傳上(shàng)來(lái)，點擊左下角的(de)相機标志即可錄入剛才我們手繪的(de)界面，這(zhè)裏還有簡單的(de)編輯功能，比如裁圖，翻轉角度、高亮等，彌補拍攝的(de)缺陷。

上(shàng)傳手繪頁面

添加鏈接

接下來(lái)我們要(yào / yāo)做的(de)就(jiù)是(shì)将所有的(de)頁面進行熱區互鏈，比如在(zài)首頁中有很多鏈接，包括組圖、新聞鏈接以(yǐ)及各種功能按鈕，現在(zài)我們隻需要(yào / yāo)給每一(yī / yì ／yí)個(gè)區域添加交互鏈接即可。

添加各種操作動作

點擊左下角界面中間出(chū)現一(yī / yì ／yí)個(gè)紅色的(de)伸縮框，把它拖動到(dào)我們需要(yào / yāo)鏈接的(de)區域并進行縮放，然後就(jiù)能鏈接到(dào)其他(tā)頁面，比如點擊下方的(de)圖賞按鈕即可轉換到(dào)圖賞頁。POP提供多樣性的(de)點觸和(hé / huò)手勢滑動動作，轉場動作也(yě)有幾個(gè)可以(yǐ)選擇，完成的(de)鏈接會顯示綠色。

4視頻演示 看一(yī / yì ／yí)看我們做的(de)App

視頻演示 看一(yī / yì ／yí)看我們做的(de)App

按照前面的(de)規劃，我們需要(yào / yāo)在(zài)每個(gè)頁面添加各種鏈接，你可以(yǐ)選擇點觸、滑動、捏合和(hé / huò)雙擊等動作，基本上(shàng)覆蓋了(le／liǎo)目前所有App開發所需要(yào / yāo)的(de)動作。完成以(yǐ)上(shàng)操作之(zhī)後一(yī / yì ／yí)個(gè)完整的(de)App就(jiù)做好了(le／liǎo)。

正式版和(hé / huò)手繪闆對比

視頻演示

以(yǐ)下就(jiù)是(shì)我們已經完成的(de)手繪闆中關村在(zài)線手機App，除了(le／liǎo)繪畫有些粗糙之(zhī)外，操作體驗的(de)流暢度和(hé / huò)原版沒有太多區别，你也(yě)可以(yǐ)感受一(yī / yì ／yí)下自己設計手機應用程序的(de)快感。不(bù)過POP也(yě)有一(yī / yì ／yí)些缺陷，比如無法添加外鏈，添加的(de)所有鏈接必須要(yào / yāo)我們一(yī / yì ／yí)一(yī / yì ／yí)繪制出(chū)來(lái)。但對于(yú)那些學習産品開發的(de)初學者來(lái)說(shuō)使用有用，你可以(yǐ)通過POP來(lái)體驗整個(gè)App的(de)開發流程，并實現各種動作的(de)演示，進而(ér)能夠了(le／liǎo)解其中出(chū)現的(de)問題，幫助我們快速發現。如果你有興趣，不(bù)妨也(yě)來(lái)嘗試做出(chū)一(yī / yì ／yí)個(gè)來(lái)。