1.1目的

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

1.2范圍

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

1.3 讀者對(duì)象

本文檔的目標(biāo)讀者對(duì)象包括：

需求工程師：主要根據(jù)文檔來(lái)提供給相關(guān)人員需要的文案，給出相應(yīng)文檔,。

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

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

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

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

2 需求整理

需求文檔由產(chǎn)品經(jīng)理負(fù)責(zé)編寫(xiě)，應(yīng)整理完需求輸出一份《產(chǎn)品需求文檔》和《設(shè)計(jì)文檔》,。

2.1人員評(píng)估

2.1.1 參與人員

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

2.1.2 時(shí)間節(jié)點(diǎn)

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

2.1.3 預(yù)估工作量

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

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

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

2.3 編寫(xiě)需求文檔PRD

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

2.4 編寫(xiě)設(shè)計(jì)文檔

設(shè)計(jì)文檔主要是用于設(shè)計(jì)人員在畫(huà)圖之前對(duì)整個(gè)產(chǎn)品的把握,。設(shè)計(jì)文檔由產(chǎn)品經(jīng)理主寫(xiě)，交互人員輔助,。因?yàn)楫a(chǎn)品在寫(xiě)文檔時(shí)候的角度是在站在寫(xiě)程序的方向?qū)懙?，設(shè)計(jì)人員要把交互原型所需要的東西提交于產(chǎn)品經(jīng)理，輔助完成設(shè)計(jì)文檔,，PC端和移動(dòng)端的設(shè)計(jì)文檔要分開(kāi)來(lái)編寫(xiě),。

設(shè)計(jì)人員需要做：

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

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

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

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

邏輯類：各模塊業(yè)務(wù)邏輯,、結(jié)構(gòu)框架圖。

功能流程圖示例：

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

3 交互原型

交互原型是在設(shè)計(jì)文檔評(píng)審?fù)ㄟ^(guò)后，安排頁(yè)面上每個(gè)功能的具體位置,，交互方式和跳轉(zhuǎn)方式,，由產(chǎn)品經(jīng)理輸出全部交互原型圖,、原型圖解釋文案,，如沒(méi)有產(chǎn)品經(jīng)理由設(shè)計(jì)部門(mén)完成。

3.1 人員評(píng)估

3.1.1 參與人員

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

3.1.2 時(shí)間節(jié)點(diǎn)

在設(shè)計(jì)文檔評(píng)審沒(méi)有問(wèn)題的前提下，開(kāi)始交互設(shè)計(jì),，然后根據(jù)時(shí)間具體安排

3.1.3 預(yù)估工作量

按照不同平臺(tái)和具體完成的時(shí)間來(lái)評(píng)估工作量,。

3.2 制作交互原型圖

目標(biāo)觀看人員：測(cè)試人員、視覺(jué)設(shè)計(jì)人員,、前端設(shè)計(jì)人員等,。

交互原型圖具體要求：

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

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

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

3.3 原型圖解釋文案

在畫(huà)交互圖的開(kāi)始就要記錄下來(lái),。

解釋文字具體要求：

每個(gè)頁(yè)面之間的聯(lián)系，承接關(guān)系。

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

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

4視覺(jué)設(shè)計(jì)

在交互評(píng)審?fù)ㄟ^(guò)后,，負(fù)責(zé)把控UI整體風(fēng)格和所有視覺(jué)效果的設(shè)計(jì)，主要輸出：VI選擇的方案,、所有視覺(jué)效果圖,、資源包等。

4.1人員評(píng)估

4.1.1 參與人員

UI設(shè)計(jì)人員

4.1.2 時(shí)間節(jié)點(diǎn)

在交互原圖評(píng)審?fù)ㄟ^(guò)后,，按照項(xiàng)目復(fù)雜程度在來(lái)具體安排時(shí)間節(jié)點(diǎn)

4.1.3 預(yù)估工作量

按照不項(xiàng)目復(fù)雜程度和具體完成的時(shí)間來(lái)評(píng)估工作量,。

4.2 視覺(jué)識(shí)別系統(tǒng)

在一個(gè)項(xiàng)目開(kāi)始之前，這是任務(wù)是必須要做的,，除了延續(xù)性的項(xiàng)目,，以后給每一個(gè)項(xiàng)目都要做這個(gè)視覺(jué)識(shí)別，不是設(shè)計(jì)師腦中的印象而是要落實(shí)到文檔與圖片展示,。

由UI設(shè)計(jì)人員做3套以上UI設(shè)計(jì)方案,，方案包括:顏色、logo,、整體風(fēng)格,、icon等效果圖，然后開(kāi)會(huì)評(píng)審確認(rèn)其中一套風(fēng)格,，評(píng)估確認(rèn)后方可進(jìn)行接下來(lái)整體的界面設(shè)計(jì),，這樣避免了一個(gè)人接受項(xiàng)目以后交接給別人視覺(jué)上會(huì)有偏差的問(wèn)題。另一個(gè)是解決了項(xiàng)目后期的問(wèn)題,，比如以后宣傳單,、手冊(cè)設(shè)計(jì)或是名片設(shè)計(jì)，都是一種風(fēng)格一種顏色,。

4.2.1 顏色的設(shè)定

顏色的設(shè)定要有理有據(jù),，開(kāi)會(huì)的時(shí)候會(huì)有很多人會(huì)問(wèn)你為什么要用這個(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)品的生命周期是多久,？

4.2.2 LOGO的設(shè)定

一般情況下我們公司不需要做logo,，但是如果有需要的話就要按照l(shuí)ogo的制作流程進(jìn)行設(shè)計(jì)。

主要內(nèi)容有：logo的設(shè)計(jì)思路,，logo的顏色,、logo的應(yīng)用場(chǎng)景等。

4.2.3 整體風(fēng)格的設(shè)定

整理風(fēng)格設(shè)計(jì)是需要做顏色,、板式,、icon等系列的設(shè)計(jì)。在整體風(fēng)格確定前不需要做其頁(yè)面的視覺(jué)設(shè)計(jì),。

4.2.4 icon的設(shè)定

俗話說(shuō)細(xì)節(jié)決定成敗,，icon在設(shè)計(jì)中就占有細(xì)節(jié)這個(gè)位置。

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

4.3 視覺(jué)頁(yè)面設(shè)計(jì)

4.3.1 主要頁(yè)面的評(píng)審

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

4.3.2 整體頁(yè)面的設(shè)計(jì)

具體要求如下：

在基于視覺(jué)風(fēng)格已確定的情況下,，按照交互原型圖逐個(gè)頁(yè)面進(jìn)行設(shè)計(jì)。

在設(shè)計(jì)中對(duì)于細(xì)節(jié)的把握要準(zhǔn)確,。

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

在某些需要適配的移動(dòng)端上面,，或是H5的設(shè)計(jì)中，要考慮到尺寸的問(wèn)題,。

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

4.4 資源輸出

我們?cè)谠O(shè)計(jì)評(píng)審?fù)ㄟ^(guò)后,，接下來(lái)會(huì)進(jìn)行一項(xiàng)比較重要環(huán)節(jié),，跟前端開(kāi)發(fā)合作實(shí)現(xiàn)效果,。

這個(gè)時(shí)候我們需要輸出5個(gè)文件資源，具體資源包分別是：

視覺(jué)效果圖的尺寸標(biāo)注,、所有尺寸的切圖資源包,、解釋文案、效果圖源文件,、全部視覺(jué)效果圖,。

4.4.4 編寫(xiě)總結(jié)規(guī)范

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

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

5優(yōu)化體驗(yàn)點(diǎn)的編寫(xiě)

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

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