1.1目的

基于現(xiàn)在的開發(fā)流程中缺少的環(huán)節(jié)進行補足,，使得開發(fā)流程更加的流暢和正規(guī)化，以便以后的查閱與歸檔使用,。面對互聯(lián)網(wǎng)行業(yè)中激烈的競爭,，讓我們的開發(fā)流程更完整,、更有效率，產(chǎn)品才能脫穎而出,。

1.2范圍

本文檔適用于產(chǎn)品的研發(fā),，主要流程包括：產(chǎn)品需求、交互原型,、視覺設計,、資源輸出、前端開發(fā),、后臺開發(fā),、測試等環(huán)節(jié)。以后的產(chǎn)品開發(fā)流程也可以參考此文檔的環(huán)節(jié)進行開發(fā),。

1.3 讀者對象

本文檔的目標讀者對象包括：

需求工程師：主要根據(jù)文檔來提供給相關人員需要的文案,，給出相應文檔。

交互設計師：根據(jù)文檔設計原型圖,，并查看需要產(chǎn)出的資源有哪些,，怎樣與產(chǎn)品、 開發(fā)人員合作,。

視覺設計師：根據(jù)詳細設計文檔作為視覺設計的步驟和資源產(chǎn)出的依據(jù),。

前端工程師：根據(jù)詳細設計文檔中提供的資源編寫代碼。

測試工程師：根據(jù)詳細設計文檔來核實頁面內(nèi)容與軟件實現(xiàn)效果是否一致。

2 需求整理

需求文檔由產(chǎn)品經(jīng)理負責編寫,，應整理完需求輸出一份《產(chǎn)品需求文檔》和《設計文檔》,。

2.1人員評估

2.1.1 參與人員

產(chǎn)品經(jīng)理

2.1.2 時間節(jié)點

由產(chǎn)品負責人規(guī)范產(chǎn)品功能需求文檔產(chǎn)出的時間節(jié)點。

2.1.3 預估工作量

由產(chǎn)品負責人規(guī)范產(chǎn)品功能需求文檔產(chǎn)出的工作量,。

2.2 確定產(chǎn)品功能

在拿到一個新的產(chǎn)品以前,，產(chǎn)品經(jīng)理應該把需求進行一次整理，看哪些是真需求,？哪些是邊緣需求,？哪些是偽需求？進而把功能點,、產(chǎn)品賣點思路整理清晰,，再有條件的情況下做一份《市場需求文檔MRD》。

2.3 編寫需求文檔PRD

編寫需求文檔的時候給不同的人看,，具體的內(nèi)容由產(chǎn)品經(jīng)理產(chǎn)出,，產(chǎn)品需求文檔主要給軟件開發(fā)、測試人員,、外部人員查看,。

2.4 編寫設計文檔

設計文檔主要是用于設計人員在畫圖之前對整個產(chǎn)品的把握。設計文檔由產(chǎn)品經(jīng)理主寫,，交互人員輔助,。因為產(chǎn)品在寫文檔時候的角度是在站在寫程序的方向?qū)懙模O計人員要把交互原型所需要的東西提交于產(chǎn)品經(jīng)理,，輔助完成設計文檔,，PC端和移動端的設計文檔要分開來編寫。

設計人員需要做：

把產(chǎn)品原型圖需要的內(nèi)容提交給產(chǎn)品經(jīng)理,，并輔助產(chǎn)品經(jīng)理完成編寫,。

產(chǎn)品經(jīng)理根據(jù)設計人員提供的要求需要提供以下內(nèi)容：

功能類：功能流程圖 、產(chǎn)品的功能點,、主要功能賣點,。

模塊的內(nèi)容：文字文案、各功能描述,、彈出框內(nèi)容文案,，各模塊之間關系。

邏輯類：各模塊業(yè)務邏輯,、結構框架圖,。

功能流程圖示例：

在有一些比較復雜的流程的時候，怕開發(fā)人員或是設計人員不是能理解的情況下,，要把流程圖畫出來,。但是一個完整的項目只用一個流程圖是不可能完成的,，所以需要按照模塊的流程逐個進行分類，分類以后按照功能的不同,、簡易程度,，分別畫出流程。

3 交互原型

交互原型是在設計文檔評審通過后,，安排頁面上每個功能的具體位置,，交互方式和跳轉(zhuǎn)方式，由產(chǎn)品經(jīng)理輸出全部交互原型圖,、原型圖解釋文案,，如沒有產(chǎn)品經(jīng)理由設計部門完成。

3.1 人員評估

3.1.1 參與人員

由產(chǎn)品經(jīng)理完成,，如沒有產(chǎn)品經(jīng)理可由設計部門完成,。

3.1.2 時間節(jié)點

在設計文檔評審沒有問題的前提下，開始交互設計,，然后根據(jù)時間具體安排

3.1.3 預估工作量

按照不同平臺和具體完成的時間來評估工作量,。

3.2 制作交互原型圖

目標觀看人員：測試人員、視覺設計人員,、前端設計人員等,。

交互原型圖具體要求：

不要加入視覺設計的元素,。著眼于大局,，不要糾結細枝末節(jié)。

工具不限,，產(chǎn)品經(jīng)理最好用axure完成動態(tài),，如沒有，需設計人員用AI或ps完成,。

按照頁面流程中所考慮的交互過程,，體現(xiàn)在原型上面。出錯,，提示等交互細節(jié)也應有體現(xiàn),。

3.3 原型圖解釋文案

在畫交互圖的開始就要記錄下來。

解釋文字具體要求：

每個頁面之間的聯(lián)系,，承接關系,。

頁面當中的細節(jié)跳轉(zhuǎn)，按鈕的不同狀態(tài),，彈框的提示文字,，日歷的跨年跨越顯示效果，小數(shù)點是否保留(若保留,，保留到后幾位數(shù)字）等,。

或是在不同情況下按鈕的使用情況,。

4視覺設計

在交互評審通過后，負責把控UI整體風格和所有視覺效果的設計,，主要輸出：VI選擇的方案,、所有視覺效果圖、資源包等,。

4.1人員評估

4.1.1 參與人員

UI設計人員

4.1.2 時間節(jié)點

在交互原圖評審通過后,，按照項目復雜程度在來具體安排時間節(jié)點

4.1.3 預估工作量

按照不項目復雜程度和具體完成的時間來評估工作量。

4.2 視覺識別系統(tǒng)

在一個項目開始之前,，這是任務是必須要做的,，除了延續(xù)性的項目，以后給每一個項目都要做這個視覺識別,，不是設計師腦中的印象而是要落實到文檔與圖片展示,。

由UI設計人員做3套以上UI設計方案，方案包括:顏色,、logo,、整體風格、icon等效果圖,，然后開會評審確認其中一套風格,，評估確認后方可進行接下來整體的界面設計，這樣避免了一個人接受項目以后交接給別人視覺上會有偏差的問題,。另一個是解決了項目后期的問題,，比如以后宣傳單、手冊設計或是名片設計,，都是一種風格一種顏色,。

4.2.1 顏色的設定

顏色的設定要有理有據(jù)，開會的時候會有很多人會問你為什么要用這個顏色,，這個顏色代表什么,，這些最好在做設計的時候就要想好。

舉個例子：

當我們拿到一個項目的時候交互是已經(jīng)完成一小部分了,，我們可以拿著這一小部分進行設計定位,，這時候我們需要了解的是：這是一個什么類型產(chǎn)品？這個產(chǎn)品的目標人群是哪些,？這個產(chǎn)品的年齡段是哪些,？這個產(chǎn)品的生命周期是多久？

4.2.2 LOGO的設定

一般情況下我們公司不需要做logo,，但是如果有需要的話就要按照logo的制作流程進行設計,。

主要內(nèi)容有：logo的設計思路，logo的顏色,、logo的應用場景等,。

4.2.3 整體風格的設定

整理風格設計是需要做顏色,、板式、icon等系列的設計,。在整體風格確定前不需要做其頁面的視覺設計,。

4.2.4 icon的設定

俗話說細節(jié)決定成敗，icon在設計中就占有細節(jié)這個位置,。

每一個icon的設計要跟整體頁面的風格保持一致,，這樣才能保證所有頁面設計完成以后風格是保持統(tǒng)一的。

4.3 視覺頁面設計

4.3.1 主要頁面的評審

主要頁面的評審對于設計開展后面的工作十分重要,，設計師需要在評審的時候講述自己的設計思路,，包括顏色的設計理由，風格的設計理由等,，講述清楚,，要讓參與人員了解到你在做設計的時候思考的內(nèi)容，而不單單是制作圖,。

4.3.2 整體頁面的設計

具體要求如下：

在基于視覺風格已確定的情況下,，按照交互原型圖逐個頁面進行設計。

在設計中對于細節(jié)的把握要準確,。

在視覺設計中我們要考慮到不同平臺的特性,，根據(jù)不同平臺進行設計，切勿混淆各平臺的控件,。

在某些需要適配的移動端上面,，或是H5的設計中，要考慮到尺寸的問題,。

在設計中一些容易忽視的頁面也要做出來,，比如：斷網(wǎng)頁面、連不上wifi頁面,、404頁面、正在加載 等展示效果,。

4.4 資源輸出

我們在設計評審通過后,，接下來會進行一項比較重要環(huán)節(jié)，跟前端開發(fā)合作實現(xiàn)效果,。

這個時候我們需要輸出5個文件資源,，具體資源包分別是：

視覺效果圖的尺寸標注、所有尺寸的切圖資源包,、解釋文案,、效果圖源文件、全部視覺效果圖,。

4.4.4 編寫總結規(guī)范

在一款產(chǎn)品結束后,，設計人員需要做一份設計總結,，就是對現(xiàn)在這一版本進行視覺規(guī)范，這也是對設計師工作的一個總結,。

在對下一版的開發(fā)也是很有幫助的,，大大增加了開發(fā)者的效率。

5優(yōu)化體驗點的編寫

這個是在項目已經(jīng)成功上線后,，第二版還沒開始前,，我們要對現(xiàn)有的一個版本的體驗點進行優(yōu)化。

這部分內(nèi)容,，開發(fā)人員和用戶研究人員一起參與,。