產(chǎn)品開發(fā)流程

1、產(chǎn)品開發(fā)流程1引言目的基于現(xiàn)在的開發(fā)流程中缺少的環(huán)節(jié)進(jìn)行補(bǔ)足， 使得開發(fā)流程更加的流暢和正規(guī)化，以便以后的查閱與 歸檔使用。面對(duì)互聯(lián)網(wǎng)行業(yè)中激烈的競(jìng)爭(zhēng)， 讓我們的開發(fā)流程更完整、更有效率，產(chǎn)品才能脫穎而出。范圍本文檔適用于產(chǎn)品的研發(fā)，主要流程包括：產(chǎn)品需求、交互原型、視覺設(shè)計(jì)、資源輸出、前端開發(fā)、后臺(tái)開發(fā)、測(cè)試等環(huán)節(jié)。以后的產(chǎn)品開發(fā)流程也可以參考此文檔的環(huán)節(jié)進(jìn)行開發(fā)。讀者對(duì)象本文檔的目標(biāo)讀者對(duì)象包括：需求工程師：主要根據(jù)文檔來提供給相關(guān)人員需要的文案，給出相應(yīng)文檔。交互設(shè)計(jì)師：根據(jù)文檔設(shè)計(jì)原型圖，并查看需要產(chǎn)出的資源有哪些，怎樣與產(chǎn)品、開發(fā)人員合作。視覺設(shè)計(jì)師：根據(jù)詳細(xì)設(shè)計(jì)文檔作為視覺設(shè)計(jì)的步

2、驟和資源產(chǎn)出的依據(jù)。前端工程師：根據(jù)詳細(xì)設(shè)計(jì)文檔中提供的資源編寫代碼。測(cè)試工程師：根據(jù)詳細(xì)設(shè)計(jì)文檔來核實(shí)頁面內(nèi)容與軟件實(shí)現(xiàn)效果是否一致。2需求整理需求文檔由產(chǎn)品經(jīng)理負(fù)責(zé)編寫，應(yīng)整理完需求輸出一份產(chǎn)品需求文檔和設(shè)計(jì)文檔。人員評(píng)估參與人員產(chǎn)品經(jīng)理時(shí)間節(jié)點(diǎn)由產(chǎn)品負(fù)責(zé)人規(guī)范產(chǎn)品功能需求文檔產(chǎn)出的時(shí)間節(jié)點(diǎn)。預(yù)估工作量由產(chǎn)品負(fù)責(zé)人規(guī)范產(chǎn)品功能需求文檔產(chǎn)出的工作量。確定產(chǎn)品功能在拿到一個(gè)新的產(chǎn)品以前， 產(chǎn)品經(jīng)理應(yīng)該把需求進(jìn)行一次整理，看哪些是真需求？哪些是邊緣需求？哪些是偽需求？進(jìn)而把功能點(diǎn)、產(chǎn)品賣點(diǎn)思路整理清晰，再有條件的情況下做一份市場(chǎng)需求文檔MRD。編寫需求文檔PRD編寫需求文檔的時(shí)候給不同的人看，具

3、體的內(nèi)容由產(chǎn)品經(jīng)理產(chǎn)出，產(chǎn)品需求文檔主要給軟件開發(fā)、測(cè)試人員、外部人員查看。編寫設(shè)計(jì)文檔設(shè)計(jì)文檔主要是用于設(shè)計(jì)人員在畫圖之前對(duì)整個(gè)產(chǎn)品的把握。設(shè)計(jì)文檔由產(chǎn)品經(jīng)理主寫，交互人員輔助。因?yàn)楫a(chǎn)品在寫文檔時(shí)候的角度是在站在寫程序的方向?qū)懙?，設(shè)計(jì)人員要把交互原型所需要的東西提交于產(chǎn)品經(jīng)理，輔助完成設(shè)計(jì)文檔，PC端和移動(dòng)端的設(shè)計(jì)文檔要分開來編寫。設(shè)計(jì)人員需要做：把產(chǎn)品原型圖需要的內(nèi)容提交給產(chǎn)品經(jīng)理，并輔助產(chǎn)品經(jīng)理完成編寫。產(chǎn)品經(jīng)理根據(jù)設(shè)計(jì)人員提供的要求需要提供以下內(nèi)容:功能類：功能流程圖、產(chǎn)品的功能點(diǎn)、主要功能賣點(diǎn)模塊的內(nèi)容：文字文案、各功能描述、彈出框內(nèi)容文案，各模塊之間關(guān)系邏輯類：各模塊業(yè)務(wù)邏輯、結(jié)構(gòu)

4、框架圖。功能流程圖示例:在有一些比較復(fù)雜的流程的時(shí)候，怕開發(fā)人員或是設(shè)計(jì)人員不是能理解的情況下，要把流程圖畫出來。但是一個(gè)完整的項(xiàng)目只用一個(gè)流程圖是不可能完成的，所以需要按照模塊的流程逐個(gè)進(jìn)行分類，分類 以后按照功能的不同、簡(jiǎn)易程度，分別畫出流程。3交互原型交互原型是在設(shè)計(jì)文檔評(píng)審?fù)ㄟ^后，安排頁面上每個(gè)功能的具體位置，交互方式和跳轉(zhuǎn)方式，由產(chǎn)品 經(jīng)理輸出全部交互原型圖、原型圖解釋文案，如沒有產(chǎn)品經(jīng)理由設(shè)計(jì)部門完成。人員評(píng)估參與人員由產(chǎn)品經(jīng)理完成，如沒有產(chǎn)品經(jīng)理可由設(shè)計(jì)部門完成。時(shí)間節(jié)點(diǎn)在設(shè)計(jì)文檔評(píng)審沒有問題的前提下，開始交互設(shè)計(jì)，然后根據(jù)時(shí)間具體安排預(yù)估工作量按照不同平臺(tái)和具體完成的時(shí)間來評(píng)估

5、工作量。制作交互原型圖目標(biāo)觀看人員：測(cè)試人員、視覺設(shè)計(jì)人員、前端設(shè)計(jì)人員等。交互原型圖具體要求：1不要加入視覺設(shè)計(jì)的元素。著眼于大局，不要糾結(jié)細(xì)枝末節(jié)。2 工具不限，產(chǎn)品經(jīng)理最好用 axure完成動(dòng)態(tài)，如沒有，需設(shè)計(jì)人員用 AI或ps完成。按照頁面流程中所考慮的交互過程，體現(xiàn)在原型上面。出錯(cuò)，提示等交互細(xì)節(jié)也應(yīng)有體現(xiàn)。3.3原型圖解釋文案在畫交互圖的開始就要記錄下來。解釋文字具體要求：每個(gè)頁面之間的聯(lián)系，承接關(guān)系。頁面當(dāng)中的細(xì)節(jié)跳轉(zhuǎn)，按鈕的不同狀態(tài)，彈框的提示文字，日歷的跨年跨越顯示效果，小數(shù)點(diǎn)是否保 留（若保留，保留到后幾位數(shù)字）等?；蚴窃诓煌闆r下按鈕的使用情況。* mlil * r *w

6、iIW4-日- T 哂修.90分E 兩對(duì)代用的85 if 上fl中%!.用tf中1則代廣昵號(hào)懵97片二用性里1商電即t.H起bim代rm81唇二碼0常需阡白醇:日AH斜曲|一景;科一*-也50Km日內(nèi)建11（如=要加白14曰-Bi.S：加月口目 a布干爭(zhēng)立埠工 KE1BIB H D RK腫， + m Id 口 刖FIIB*餐品 息幣*fl.4號(hào)，IMt手口內(nèi)耳小 “：?jiǎn)?f E 事事、事 W甫 J-P + lV-且明，三日靠槽毋任0寸.7H 肝曲，n： 里，了血一五方 mt _ 9 it%”向的今日1T/，1管 Im小 4 吶S中號(hào)M幡4視覺設(shè)計(jì)在交互評(píng)審?fù)ㄟ^后，負(fù)責(zé)把控 UI整體風(fēng)格和所有視

7、覺效果的設(shè)計(jì)，主要輸出： VI選擇的方案、所有 視覺效果圖、資源包等。人員評(píng)估參與人員UI設(shè)計(jì)人員時(shí)間節(jié)點(diǎn)在交互原圖評(píng)審?fù)ㄟ^后，按照項(xiàng)目復(fù)雜程度在來具體安排時(shí)間節(jié)點(diǎn)預(yù)估工作量按照不項(xiàng)目復(fù)雜程度和具體完成的時(shí)間來評(píng)估工作量。視覺識(shí)別系統(tǒng)在一個(gè)項(xiàng)目開始之前，這是任務(wù)是必須要做的，除了延續(xù)性的項(xiàng)目，以后給每一個(gè)項(xiàng)目都要做這個(gè)視覺識(shí)別，不是設(shè)計(jì)師腦中的印象而是要落實(shí)到文檔與圖片展示。由UI設(shè)計(jì)人員做3套以上UI設(shè)計(jì)方案，方案包括：顏色、10go、整體風(fēng)格、icon等效果圖，然后開會(huì)評(píng)審確認(rèn)其中一套風(fēng)格，評(píng)估確認(rèn)后方可進(jìn)行接下來整體的界面設(shè)計(jì)，這樣避免了一個(gè)人接受項(xiàng)目以后交接給別人視覺上會(huì)有偏差的問題。

8、另一個(gè)是解決了項(xiàng)目后期的問題，比如以后宣傳單、手冊(cè)設(shè)計(jì)或是名片設(shè)計(jì)，都是一種風(fēng)格一種顏色。顏色的設(shè)定顏色的設(shè)定要有理有據(jù)，開會(huì)的時(shí)候會(huì)有很多人會(huì)問你為什么要用這個(gè)顏色，這個(gè)顏色代表什么，這些最好在做設(shè)計(jì)的時(shí)候就要想好。舉個(gè)例子：當(dāng)我們拿到一個(gè)項(xiàng)目的時(shí)候交互是已經(jīng)完成一小部分了，我們可以拿著這一小部分進(jìn)行設(shè)計(jì)定位，這時(shí)候我們需要了解的是：這是一個(gè)什么類型產(chǎn)品？這個(gè)產(chǎn)品的目標(biāo)人群是哪些？這個(gè)產(chǎn)品的年齡段是哪些？這個(gè)產(chǎn)品的生命周期是多久？LOGO的設(shè)定一般情況下我們公司不需要做logo ,但是如果有需要的話就要按照logo的制作流程進(jìn)行設(shè)計(jì)。主要內(nèi)容有：logo的設(shè)計(jì)思路，logo的顏色、logo的

9、應(yīng)用場(chǎng)景等。整體風(fēng)格的設(shè)定整理風(fēng)格設(shè)計(jì)是需要做顏色、板式、icon等系列的設(shè)計(jì)。在整體風(fēng)格確定前不需要做其頁面的視覺設(shè)計(jì)。icon的設(shè)定俗話說細(xì)節(jié)決定成敗，icon在設(shè)計(jì)中就占有細(xì)節(jié)這個(gè)位置。每一個(gè)icon的設(shè)計(jì)要跟整體頁面的風(fēng)格保持一致，這樣才能保證所有頁面設(shè)計(jì)完成以后風(fēng)格是保持 統(tǒng)一的。視覺頁面設(shè)計(jì)主要頁面的評(píng)審主要頁面的評(píng)審對(duì)于設(shè)計(jì)開展后面的工作十分重要，設(shè)計(jì)師需要在評(píng)審的時(shí)候講述自己的設(shè)計(jì)思路，包括顏色的設(shè)計(jì)理由，風(fēng)格的設(shè)計(jì)理由等，講述清楚，要讓參與人員了解到你在做設(shè)計(jì)的時(shí)候思考的內(nèi)容，而不單單是制作圖。整體頁面的設(shè)計(jì)具體要求如下：在基于視覺風(fēng)格已確定的情況下，按照交互原型圖逐個(gè)頁面進(jìn)

10、行設(shè)計(jì)。在設(shè)計(jì)中對(duì)于細(xì)節(jié)的把握要準(zhǔn)確。在視覺設(shè)計(jì)中我們要考慮到不同平臺(tái)的特性，根據(jù)不同平臺(tái)進(jìn)行設(shè)計(jì)，切勿混淆各平臺(tái)的控件。在某些需要適配的移動(dòng)端上面，或是 H5的設(shè)計(jì)中，要考慮到尺寸的問題。在設(shè)計(jì)中一些容易忽視的頁面也要做出來，比如：斷網(wǎng)頁面、連不上 wifi頁面、404頁面、正在加載等展示效果4.4資源輸出我們?cè)谠O(shè)計(jì)評(píng)審?fù)ㄟ^后，接下來會(huì)進(jìn)行一項(xiàng)比較重要環(huán)節(jié)，跟前端開發(fā)合作實(shí)現(xiàn)效果。這個(gè)時(shí)候我們需要輸出5個(gè)文件資源，具體資源包分別是：視覺效果圖的尺寸標(biāo)注、所有尺寸的切圖資源包、解釋文案、效果圖源文件、全部視覺效果圖。4.4.4 編寫總結(jié)規(guī)范在一款產(chǎn)品結(jié)束后，設(shè)計(jì)人員需要做一份設(shè)計(jì)總結(jié)，就是對(duì)現(xiàn)在這一版本進(jìn)行視覺規(guī)范，這也是對(duì)設(shè) 計(jì)師工作的一個(gè)總結(jié)。在對(duì)下一版的開發(fā)也是很有幫助的，大大增加了開