精品必看，最完整的APP開(kāi)發(fā)完整流程，值得收藏

點(diǎn)擊數(shù)：202019-04-01 14:55:09　來(lái)源: 深圳網(wǎng)站建設(shè),微信APP開(kāi)發(fā),網(wǎng)店裝修,藝之都網(wǎng)絡(luò)公司官網(wǎng)

APP從產(chǎn)品籌劃到最后上線(xiàn)，會(huì)經(jīng)歷很多個(gè)步驟和過(guò)程，需要細(xì)致的計(jì)劃和執(zhí)行，對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，就需要有一個(gè) checklist，隨時(shí)來(lái)檢查不同階段和所需要完成的事項(xiàng)，以確保產(chǎn)品的順利誕生。

1.產(chǎn)品定義App definition

對(duì)產(chǎn)品（app）進(jìn)行定義，用一句話(huà)或者簡(jiǎn)短的一段話(huà)把產(chǎn)品清晰地說(shuō)明白是干什么用的、給用戶(hù)帶來(lái)的價(jià)值是什么。

產(chǎn)品定義

當(dāng)時(shí)做 Movie+ Windows app 時(shí)候?qū)@個(gè) app 的定義

2.用戶(hù)研究User study

針對(duì)用戶(hù)的研究，分析產(chǎn)品的目標(biāo)受眾，他們的特點(diǎn)，很多時(shí)候要建立 Persona（一個(gè)具體的用戶(hù)模型）來(lái)幫助進(jìn)行行為分析。

用戶(hù)研究

3.用戶(hù)使用流程圖User flow

一個(gè)產(chǎn)品的流程圖，用戶(hù)是怎樣在這個(gè) app 種完成使用過(guò)程的。有的產(chǎn)品經(jīng)理也會(huì)通過(guò)一些在在線(xiàn)的工具（如墨刀 Mobile App Prototyping Tool Without Headache ）把用戶(hù)操作和交互流程做出來(lái)。

流程圖

低精度手繪的流程。可以快速低成本地描述用戶(hù)行為和產(chǎn)品路徑

高精度的產(chǎn)品流程

4產(chǎn)品功能列表Feature list

產(chǎn)品功能羅列，要盡量詳細(xì)地規(guī)劃好有哪些功能，并且按照優(yōu)先級(jí)排序，以方便未來(lái)開(kāi)發(fā)的調(diào)整。

需求分析

5.容框架Content framework

這個(gè)文檔規(guī)劃了產(chǎn)品上呈現(xiàn)什么樣的內(nèi)容，內(nèi)容是怎樣在app各個(gè)界面分布的。對(duì)于以?xún)?nèi)容呈現(xiàn)為主要的 app／網(wǎng)站這個(gè)尤為重要。

內(nèi)容框架

6.原型圖Wireframe

根據(jù)產(chǎn)品流程圖、功能列表、內(nèi)容等制作的框線(xiàn)圖，確定了整個(gè)app的功能和內(nèi)容在各個(gè)界面的分布，確定了各個(gè)界面的 layout。

原型圖

低精度手繪的Wireframe

高精度的原型圖

7.設(shè)計(jì)風(fēng)格收集Mood board

在設(shè)計(jì)之前，設(shè)計(jì)師需要根據(jù)產(chǎn)品的定義和用戶(hù)群體來(lái)收集各種適合產(chǎn)品的設(shè)計(jì)參考，以便確定產(chǎn)品的風(fēng)格方向。

風(fēng)格參考

把各種好看的設(shè)計(jì)、插畫(huà)、別的app的界面集合在一起尋找靈感

比如icon的風(fēng)格，顏色的搭配、排版的布置等等

8.設(shè)計(jì)樣稿Design mockup

設(shè)計(jì)風(fēng)格稿，一般可以是 app 的首屏或者幾個(gè)主要的界面，來(lái)確定整體風(fēng)格。

風(fēng)格確定

一般確定幾個(gè)重要的頁(yè)面讓設(shè)計(jì)師出風(fēng)格稿，確定了再往下按照Wireframe進(jìn)行設(shè)計(jì)。

9.設(shè)計(jì)樣式集Style guide

根據(jù)風(fēng)格稿的定稿把確定的顏色方案、文字大小、間距、按鈕樣式、表單樣式、圖標(biāo)等 UI 元素全部歸納到一個(gè) PSD 或者 AI 等文檔中，方便以后其他界面設(shè)計(jì)的復(fù)用和統(tǒng)一。

設(shè)計(jì)規(guī)范

這里推薦一個(gè)做得很好的 Style Guide 供大家參考

Barricade Style Guide

10.界面設(shè)計(jì)Detail interface design

根據(jù) Wireframe 和設(shè)計(jì)樣式對(duì)余下界面進(jìn)行精確的設(shè)計(jì)。我們一般在 Sketch 這個(gè)適量 UI 設(shè)計(jì)軟件里進(jìn)行，不管設(shè)計(jì) iOS 或者是 Android 的 app，我們都建議從@1X（一倍大小進(jìn)行設(shè)計(jì)）。

UI設(shè)計(jì)

11.交互說(shuō)明Interaction document

結(jié)合了最終的設(shè)計(jì)界面來(lái)描述整個(gè) app 的操作、狀態(tài)變化等交互過(guò)程。當(dāng)然對(duì)于動(dòng)態(tài)效果來(lái)說(shuō)，語(yǔ)言的描述是很有限的

交互文檔

12.尺寸標(biāo)注說(shuō)明Dimension marking

在主要界面上對(duì)文字、圖片、按鈕和表單等的大小、位置、間距進(jìn)行標(biāo)注，以方便開(kāi)發(fā)人員編寫(xiě)代碼。

尺寸標(biāo)注

實(shí)例“馬克鰻”進(jìn)行標(biāo)注

13.界面切圖Images slicing for development

按照開(kāi)發(fā)需求對(duì)界面圖片和元素進(jìn)行切圖。一個(gè)小小的 tips，為 iOS app UI 切圖的時(shí)候，我們可以在 Sketch 里直接輸出一倍大小（@1X）的 PDF 格式的素材，放到 Xcode 里，系統(tǒng)會(huì)自動(dòng)根據(jù) PDF 文件生成2倍和3倍的圖，非常方便。

界面截圖

大多數(shù)情況下，輸出1倍大小的PDF文件即可

14.開(kāi)發(fā)Development

產(chǎn)品開(kāi)發(fā)過(guò)程中通常會(huì)包括功能或者效果的修改，從而需要調(diào)整設(shè)計(jì)和內(nèi)容的情況。如果你對(duì)技術(shù)一點(diǎn)也懂，那就需要你信賴(lài)你的技術(shù)團(tuán)隊(duì)，如果你想要了解更多他們的工作，你不妨開(kāi)始學(xué)習(xí)一下開(kāi)發(fā)，懂得一些基本原理，要不然溝通起來(lái)確實(shí)會(huì)是個(gè)問(wèn)題。

開(kāi)發(fā)

15.測(cè)試Bug report Bug

開(kāi)發(fā)基本完成，提交內(nèi)部測(cè)試，并收集 bugs，進(jìn)行修改完善，并最終提交商店審核。

測(cè)試

雖然說(shuō)是一個(gè) Chekclist，但整個(gè)下來(lái)也可以看作是一個(gè)全面的過(guò)程了，最開(kāi)始的一些步驟可以簡(jiǎn)化甚至是省略，但是好的產(chǎn)品是需要一個(gè)嚴(yán)謹(jǐn)?shù)倪^(guò)程來(lái)確保的，希望對(duì)于要?jiǎng)?chuàng)造自己產(chǎn)品的朋友有所幫助，起碼可以熟悉一下一個(gè)產(chǎn)品從想法到真正實(shí)現(xiàn)需要哪些步驟。