產品人必備干貨:產品開發流程(完整版)

14 評論 222115 瀏覽 801 收藏 13 分鐘

產品開發流程涉及的人員從產品經理到設計師、前端、后端等等一系列人員,這篇文章主要關于產品開發的完整流程,希望對各個工作崗位上的人有借鑒意義。

1?引言

1.1目的

基于現在的開發流程中缺少的環節進行補足,使得開發流程更加的流暢和正規化,以便以后的查閱與歸檔使用。面對互聯網行業中激烈的競爭,讓我們的開發流程更完整、更有效率,產品才能脫穎而出。

1.2范圍

本文檔適用于產品的研發,主要流程包括:產品需求、交互原型、視覺設計、資源輸出、前端開發、后臺開發、測試等環節。以后的產品開發流程也可以參考此文檔的環節進行開發。

1.3?讀者對象

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

  • 需求工程師:主要根據文檔來提供給相關人員需要的文案,給出相應文檔。
  • 交互設計師:根據文檔設計原型圖,并查看需要產出的資源有哪些,怎樣與產品、 ?開發人員合作。
  • 視覺設計師:根據詳細設計文檔作為視覺設計的步驟和資源產出的依據。
  • 前端工程師:根據詳細設計文檔中提供的資源編寫代碼。
  • 測試工程師:根據詳細設計文檔來核實頁面內容與軟件實現效果是否一致。

2?需求整理

需求文檔由產品經理負責編寫,應整理完需求輸出一份《產品需求文檔》和《設計文檔》。

2.1人員評估

2.1.1 參與人員

產品經理

2.1.2 時間節點

由產品負責人規范產品功能需求文檔產出的時間節點。

2.1.3 預估工作量

由產品負責人規范產品功能需求文檔產出的工作量。

2.2 確定產品功能

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

2.3 編寫需求文檔PRD

編寫需求文檔的時候給不同的人看,具體的內容由產品經理產出,產品需求文檔主要給軟件開發、測試人員、外部人員查看。

2.4 編寫設計文檔

設計文檔主要是用于設計人員在畫圖之前對整個產品的把握。設計文檔由產品經理主寫,交互人員輔助。因為產品在寫文檔時候的角度是在站在寫程序的方向寫的,設計人員要把交互原型所需要的東西提交于產品經理,輔助完成設計文檔,PC端和移動端的設計文檔要分開來編寫。

設計人員需要做:

把產品原型圖需要的內容提交給產品經理,并輔助產品經理完成編寫。

產品經理根據設計人員提供的要求需要提供以下內容:

  • 功能類:功能流程圖 、產品的功能點、主要功能賣點。
  • 模塊的內容:文字文案、各功能描述、彈出框內容文案,各模塊之間關系。
  • 邏輯類:各模塊業務邏輯、結構框架圖。

功能流程圖示例:

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

3 交互原型

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

3.1 人員評估

3.1.1 參與人員

由產品經理完成,如沒有產品經理可由設計部門完成。

3.1.2 時間節點

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

3.1.3 預估工作量

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

3.2 制作交互原型圖

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

交互原型圖具體要求:

  1. 不要加入視覺設計的元素。著眼于大局,不要糾結細枝末節。
  2. 工具不限,產品經理最好用axure完成動態,如沒有,需設計人員用AI或ps完成。
  3. 按照頁面流程中所考慮的交互過程,體現在原型上面。出錯,提示等交互細節也應有體現。

    3.3 原型圖解釋文案

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

解釋文字具體要求:

每個頁面之間的聯系,承接關系。

頁面當中的細節跳轉,按鈕的不同狀態,彈框的提示文字,日歷的跨年跨越顯示效果,小數點是否保留(若保留,保留到后幾位數字)等。

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

4視覺設計

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

4.1人員評估

4.1.1 參與人員

UI設計人員

4.1.2 時間節點

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

4.1.3 預估工作量

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

4.2 視覺識別系統

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

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

4.2.1 ?顏色的設定

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

舉個例子:

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

4.2.2 ?LOGO的設定

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

主要內容有:logo的設計思路,logo的顏色、logo的應用場景等。

4.2.3 ?整體風格的設定

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

4.2.4 ?icon的設定

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

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

4.3 視覺頁面設計

4.3.1 主要頁面的評審

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

4.3.2 整體頁面的設計

具體要求如下:

  1. 在基于視覺風格已確定的情況下,按照交互原型圖逐個頁面進行設計。
  2. 在設計中對于細節的把握要準確。
  3. 在視覺設計中我們要考慮到不同平臺的特性,根據不同平臺進行設計,切勿混淆各平臺的控件。
  4. 在某些需要適配的移動端上面,或是H5的設計中,要考慮到尺寸的問題。
  5. 在設計中一些容易忽視的頁面也要做出來,比如:斷網頁面、連不上wifi頁面、404頁面、正在加載 等展示效果。

4.4 資源輸出

我們在設計評審通過后,接下來會進行一項比較重要環節,跟前端開發合作實現效果。

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

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

4.4.4 ?編寫總結規范

在一款產品結束后,設計人員需要做一份設計總結,就是對現在這一版本進行視覺規范,這也是對設計師工作的一個總結。

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

5優化體驗點的編寫

這個是在項目已經成功上線后,第二版還沒開始前,我們要對現有的一個版本的體驗點進行優化。

這部分內容,開發人員和用戶研究人員一起參與。

  • 具體內容有:
  • 對現有產品的一些功能需要優化的點的記錄,有哪些不足之處。
  • 基于用戶的反饋,哪些功能是可以省略的,哪些是要強調的。
  • 有哪些更好的想法可以用在下一個版本中的。

結束 謝謝觀看!

 

本文由 @ 李寧 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. mark

    回復
  2. “整理風格設計是需要做顏色、板式、icon等系列的設計。在整體風格確定前不需要做其頁面的視覺設計?!保覀€視覺同事來感受下!

    來自香港 回復
  3. 沒想到我干這么多活
    能把這么簡單的事情說的這么復雜而又有內涵,屈才了,考慮一下去從政吧。??????

    回復
  4. 非常感謝您的分享,我是著實學到了不少,整體思路是學到了,我猜測樓主應該是設計部門的吧 ??

    來自安徽 回復
    1. 真聰明,設計部分寫的比較多 ??

      來自河北 回復
  5. “設計人員要把交互原型所需要的東西提交于產品經理”,寫的什么玩意兒,角色混亂

    回復
    1. 你自己沒看懂,意思是產品經理出PRD和設計文檔,交互設計師出交互文檔,視覺設計師出視覺,在產品經理不專業的情況下,你要把交互中要的東西提交給產品經理,不是去主導產品經理,邏輯清晰,各有各的職責。況且每個公司的習慣不一樣,還有產品經理直接畫交互圖的,個人習慣問題。

      回復
    2. 你沒表述清楚在線先

      來自北京 回復
    3. 那能懂不就得了。。

      回復
  6. 部分內容可取,但是整體流程寫的有些不清晰,更偏向于設計流程。產品經理沒有統一的方法論,但是有統一的產物,PRD,MRD,文章通篇其實對這一塊的介紹較少。

    來自安徽 回復
    1. 對的,PRD MPD的寫的不夠細致,因為這里面門道太多了,需要一整篇文檔來解釋,這篇文章屬于流程性的東西偏設計的。

      來自河北 回復
  7. 用來掃盲都不夠

    來自上海 回復
  8. 文章寫得很好,想問一下,視覺設計時平臺適配問題應該怎么考慮?

    回復
    1. 一般情況下做兩套尺寸: IOS:750*1334px Android:1080*1920px 其他的pad的類的尺寸另外做, 在做設計圖之前要對各個平臺的規范熟悉,做出了兩套視覺以后根據不同的平臺調整出另外的尺寸,ios兩套尺寸;Android三套尺寸,調整好后分別切圖,做好切圖規范,適配就比較簡單了關于切圖規范和各個尺寸的大小可參考:http://huaban.com/pins/935643988/
      平時多看看資料,適配這個對于設計來說不是大問題,關鍵是看你對設計的感知和敏感度

      來自河北 回復