手把手教你寫需求文檔

時間：2023-05-24 01:45:02 | 來源：網(wǎng)站運營

時間：2023-05-24 01:45:02 來源：網(wǎng)站運營

手把手教你寫需求文檔：

一、需求文檔的作用

之前提到過『結(jié)構(gòu)流程圖』是產(chǎn)品的骨架，非常重要，但團隊中很多成員對其實無感的，因為產(chǎn)品本身就是一個故事，僅僅有故事的構(gòu)思是遠遠不夠的，要想把故事講好，還需要賦予故事更多的細節(jié)與血肉，這就是需求文檔的作用！

二、好故事的組成要素

童話書里最吸引眼球的是插圖，而非文字。甚至只看插圖，就能把情節(jié)完整的串聯(lián)起來。而原型圖就是需求文檔中的插圖，是產(chǎn)品方案最直接的體現(xiàn)，

故事書中除了插圖，還有對應的描述，以便讀者能夠更好地理解細節(jié)。需求文檔也是如此，只是需求文檔的讀者可以明確劃分為：開發(fā)、設計與測試。不同讀者想從中獲取的信息也有所不同，開發(fā)想了解產(chǎn)品的功能邏輯；設計想確定交互與布局，而測試則想知道具體的測試點。所以需要針對以上三類人群，需求文檔要進行三種不同的描述，分別為：開發(fā)注意事項、設計注意事項、測試注意事項。而實際的操作中，測試注意事項多數(shù)會被開發(fā)與設計注意事項所涵蓋，所以測試注意事項多數(shù)可以不寫。

另外，方案背后的理由解釋也很重要，這樣能夠讓開發(fā)、設計、測試對產(chǎn)品方案的理解更加深刻，與產(chǎn)品經(jīng)理在方案理解上達成最大的公約數(shù)。同時在陳述產(chǎn)品解釋的過程中，也是產(chǎn)品經(jīng)理二次檢驗與自我質(zhì)疑，對于方案的嚴謹性與完善性有很大的益處。

三、需求文檔的編寫

3.1 原型圖

原型圖是需求文檔中最核心的部分，所有的解釋說明，都以原型圖為基礎而展開，合格的原型圖應該滿足清晰的表達出以下信息

1. 頁面包含的組件與布局；

這一點是最基礎，同時也相對簡單，因為只要產(chǎn)品骨架確定下來，通過參考大量的競品，確定頁面內(nèi)相關的組件與布局，往往是水到渠成的事情。

1. 組件的展示優(yōu)先級；

原型圖中的各個組件一般會通過大小，布局，顏色深淺的形式來傳達相應的優(yōu)先級。一般來說，顏色越深，優(yōu)先級越高；組件越大，優(yōu)先級越高；組件越靠近頁面的視覺中心，優(yōu)先級越高。

1. 展示出組件的不同狀態(tài)；

很多組件會因場景的不同，而展示不同的狀態(tài)，下面的頁面是某個音頻播放器的主頁，主頁下方是音頻列表，列表中每個音頻通過顏色深淺的方式，區(qū)分了『選中』與『未選中』兩種狀態(tài)。

1. 展示組件在頁面內(nèi)的響應結(jié)果；

如果組件的響應結(jié)果就在本頁展示，則需要將響應結(jié)果也展示在原型圖中，如果響應結(jié)果是另外一個頁面，則需要通過文字的形式說清楚跳轉(zhuǎn)關系，下面的案例中，點擊『開始睡覺』的按鈕之后，會判斷起床時間距離當前是否超過90分鐘，如果沒超過，則彈出『睡前確認彈窗1』否則彈出『睡前提醒彈窗2』







3.2 開發(fā)注意事項

對于開發(fā)的同學來說，『開發(fā)注意事項』的地位和和原型圖同樣重要，因為原型圖只展示靜態(tài)的結(jié)果，但背后的觸發(fā)條件、觸發(fā)時機、動態(tài)效果等關鍵信息無法體現(xiàn)，需要大量的描述將上述信息說清楚。所以『開發(fā)注意事項』需要將以下信息說明白

1. 組件狀態(tài)變化的觸發(fā)條件與時機；

由于多數(shù)的觸發(fā)條件與時機都是抽象不可見的，所以僅參考原型圖，開發(fā)無法完成預期的業(yè)務邏輯，需要通過文字將背后的邏輯說清楚，以插屏廣告請求與展示為例

原型圖只表明了廣告展示的流程，并沒有涉及廣告請求與展示邏輯，所以需要在『開發(fā)注意事項』中添加如下描述

點擊上鎖的音頻，進入廣告加載頁面，同時請求廣告，若在8秒內(nèi)請求到廣告，則進行展示，廣告展示后，『廣告加載提示頁面』消失，用戶可以手動關閉廣告；如果8秒內(nèi)沒有請求到廣告，則不再請求廣告，『廣告加載提示頁面』消失。

1. 組件的交互結(jié)果

雖然多數(shù)組件的交互結(jié)果都能通過原型圖表現(xiàn)出來，但也有一些場景需要文字描述的形式才能解釋清楚。

下面的原型圖展示的是某音頻播放器的首頁，點擊『右上角』的隨機播放按鈕，會隨機播放4首免費的音頻。但隨機二字顯然很難通過原型圖表達，所以需要在『開發(fā)注意事項』中詳細說明

1. 頁面間的跳轉(zhuǎn)邏輯；

在一張Axure畫板中，通常只展示一個頁面的邏輯，如果該頁面中某些組件的交互結(jié)果是跳轉(zhuǎn)到其他頁面，建議使用文字將涉及的跳轉(zhuǎn)邏輯表達清楚。

1. 組件與頁面的動態(tài)過程；

雖然Axure也能實現(xiàn)一些動態(tài)效果，但制作成本較高，動態(tài)表達也很單一，通過文字描述的形式，很容易將邏輯說明白。

下圖案例中，點擊自定義按鈕，底部會出現(xiàn)自定義計時器面板，僅靠原型圖，開發(fā)同學無法得知『計時器面板』的出現(xiàn)效果，直接展示？還是淡入淡出？所以需要在『開發(fā)注意事項』中添加如下描述

點擊『自定義』按鈕，『計時器面板』自下向上彈出

1. 必要的流程圖

所謂一圖勝千言，上面提到的4個開發(fā)注意事項如果能用流程圖表達，則建議盡量使用流程圖，這樣不僅邏輯清晰，而且簡練明快，如下圖展示的是某個睡眠鬧鐘首頁







若用文字描述上面的邏輯，會吧啦吧啦寫出下面一段

點擊首頁的『開始睡眠按鈕』，判斷右上角的『起床提醒開關』的狀態(tài)，若為關閉，直接彈出『睡前狀態(tài)彈窗』，若為開啟，則判斷提醒時間距當前時間是否大于90分鐘，若大于90分鐘，則彈出『睡眠狀態(tài)彈窗』，否則彈出『睡前確認彈窗』。

上述文字不僅表達啰嗦，而且很容易將人弄糊涂，若用流程圖，則會變的清晰很多







3.3 設計注意事項

對于設計同學，重要的信息包含『頁面布局』『組件展示優(yōu)先級』『組件的不同狀態(tài)』與『交互/展示動畫』，這些信息絕大多數(shù)都可以通過原型圖直接表現(xiàn)，所以相較于『開發(fā)注意事項』，『設計注意事項』要簡單很多，僅僅起到輔助說明的作用

1. 組件優(yōu)先級

在原型圖中，雖然會通過大小與顏色等不同因素區(qū)分不同組件的優(yōu)先級，但這些因素組合起來，依然會令人困惑，顏色深、形狀小的組件與顏色淺但形狀大的組件，哪個優(yōu)先級更高？所以仍需要文字說明。在下面的原型圖中，需要在『設計注意事項』中添加如下描述

頁面組件展示優(yōu)先級：開始睡覺按鈕 > 起床提醒卡片 = 就寢提醒卡片

1. 組件的不同狀態(tài)

如果組件存在不同狀態(tài)，除了要在原型圖中進行展示，也要在『設計注意事項』中再次強調(diào)，例如之前提到的音頻圖標分為選中狀態(tài)與未選中狀態(tài)。

1. 展示/交互動畫

如前面所說，原型圖很難展示動態(tài)效果，所以如果牽扯到一些復雜的動畫效果，也需要額外說明，這里不再詳述。

3.4 產(chǎn)品解釋

產(chǎn)品解釋主要說明方案背后的原因，通過闡述產(chǎn)品方案的內(nèi)因，能夠讓開發(fā)與設計更好地理解產(chǎn)品，使得產(chǎn)品、開發(fā)與設計能在方案認知上取得最大的公約數(shù)。從而減少溝通成本，提高整個團隊的運作效率。

這里繼續(xù)以插屏廣告的請求與展示為例。







如果對于不熟悉業(yè)務的開發(fā)與設計，可能會對『廣告加載提示』頁面充滿疑惑，點擊上鎖的音頻icon之后，直接彈出一個toast提示豈不是更簡單有效？為何要多此一舉？

所以這里需要使用產(chǎn)品解釋

因為在插屏廣告政策中，不允許插屏廣告出現(xiàn)前后是同一個頁面，所以需要額外添加一個『廣告加載提示』頁面，使得廣告展示前用戶看到的是『廣告加載提示頁面』，廣告關閉后，用戶看到的是『首頁』

有了上述文字解釋，開發(fā)與設計在執(zhí)行的時候，會減少困惑，避免了不必要的溝通或撕逼。

四. 完整示例

這是某睡眠鬧鐘軟件的首頁需求文檔，包含了『原型圖』『流程圖』『開發(fā)注意事項』『設計注意事項』『產(chǎn)品解釋』僅供大家參考，也歡迎大家吐槽

五. 其他

最后給大家推薦一些設計組件的說明與工具，原型圖作為需求文檔中最重要的組成部分，是對設計師最直觀的產(chǎn)品表達，在正式開始著手原型圖，強烈建議熟悉并使用標準的組件原型，具體鏈接如下

谷歌設計組件說明

蘋果設計組件說明

阿里設計組件說明

谷歌設計組件下載（Axure9版本） 阿里設計組件下載（Axure版本）

同時也強烈推薦將原型圖/需求文檔上傳至統(tǒng)一的協(xié)作平臺中，例如

藍湖 藍湖Axure插件

更多精彩，請關注公眾號：MING的大航海