手把手教你寫需求文件
一、需求文件的作用
之前提到過『結構流程圖』是產品的骨架，非常重要，但團隊中很多成員對其實無感的，因為產品本身就是一個故事，僅僅有故事的構思是遠遠不夠的，要想把故事講好，還需要賦予故事更多的細節與血肉，這就是需求文件的作用！
二、好故事的組成要素
童話書裡最吸引眼球的是插圖，而非文字。甚至只看插圖，就能把情節完整的串聯起來。而
原型圖
就是需求文件中的插圖，是產品方案最直接的體現，
故事書中除了插圖，還有對應的描述，以便讀者能夠更好地理解細節。需求文件也是如此，只是需求文件的讀者可以明確劃分為：開發、設計與測試。不同讀者想從中獲取的資訊也有所不同，開發想了解產品的功能邏輯；設計想確定互動與佈局，而測試則想知道具體的測試點。所以需要針對以上三類人群，需求文件要進行三種不同的描述，分別為：
開發注意事項
、
設計注意事項
、
測試注意事項
。而實際的操作中，測試注意事項多數會被開發與設計注意事項所涵蓋，所以測試注意事項多數可以不寫。
另外，方案背後的理由解釋也很重要，這樣能夠讓開發、設計、測試對產品方案的理解更加深刻，與產品經理在方案理解上達成最大的公約數。同時在陳述
產品解釋
的過程中，也是產品經理二次檢驗與自我質疑，對於方案的嚴謹性與完善性有很大的益處。
三、需求文件的編寫
3.1 原型圖
原型圖是需求文件中最核心的部分，所有的解釋說明，都以原型圖為基礎而展開，合格的原型圖應該滿足清晰的表達出以下資訊
頁面包含的元件與佈局；
這一點是最基礎，同時也相對簡單，因為只要產品骨架確定下來，透過參考大量的競品，確定頁面內相關的元件與佈局，往往是水到渠成的事情。
元件的展示優先順序；
原型圖中的各個元件一般會透過大小，佈局，顏色深淺的形式來傳達相應的優先順序。一般來說，顏色越深，優先順序越高；元件越大，優先順序越高；元件越靠近頁面的視覺中心，優先順序越高。
展示出元件的不同狀態；
很多元件會因場景的不同，而展示不同的狀態，下面的頁面是某個音訊播放器的主頁，主頁下方是音訊列表，列表中每個音訊透過顏色深淺的方式，區分了『選中』與『未選中』兩種狀態。
展示元件在頁面內的響應結果；
如果元件的響應結果就在本頁展示，則需要將響應結果也展示在原型圖中，如果響應結果是另外一個頁面，則需要透過文字的形式說清楚跳轉關係，下面的案例中，點選『開始睡覺』的按鈕之後，會判斷起床時間距離當前是否超過90分鐘，如果沒超過，則彈出『睡前確認彈窗1』否則彈出『睡前提醒彈窗2』
3.2 開發注意事項
對於開發的同學來說，『開發注意事項』的地位和和原型圖同樣重要，因為原型圖只展示靜態的結果，但背後的觸發條件、觸發時機、動態效果等關鍵資訊無法體現，需要大量的描述將上述資訊說清楚。所以『開發注意事項』需要將以下資訊說明白
元件狀態變化的觸發條件與時機；
由於多數的觸發條件與時機都是抽象不可見的，所以僅參考原型圖，開發無法完成預期的業務邏輯，需要透過文字將背後的邏輯說清楚，以插屏廣告請求與展示為例
原型圖只表明了廣告展示的流程，並沒有涉及廣告請求與展示邏輯，所以需要在『開發注意事項』中新增如下描述
點選上鎖的音訊，進入廣告載入頁面，同時請求廣告，若在8秒內請求到廣告，則進行展示，廣告展示後，『廣告載入提示頁面』消失，使用者可以手動關閉廣告；如果8秒內沒有請求到廣告，則不再請求廣告，『廣告載入提示頁面』消失。
元件的互動結果
雖然多陣列件的互動結果都能透過原型圖表現出來，但也有一些場景需要文字描述的形式才能解釋清楚。
下面的原型圖展示的是某音訊播放器的首頁，點選『右上角』的隨機播放按鈕，會
隨機
播放4首免費的音訊。但
隨機
二字顯然很難透過原型圖表達，所以需要在『開發注意事項』中詳細說明
頁面間的跳轉邏輯；
在一張Axure畫板中，通常只展示一個頁面的邏輯，如果該頁面中某些元件的互動結果是跳轉到其他頁面，建議使用文字將涉及的跳轉邏輯表達清楚。
元件與頁面的動態過程；
雖然Axure也能實現一些動態效果，但製作成本較高，動態表達也很單一，透過文字描述的形式，很容易將邏輯說明白。
下圖案例中，點選自定義按鈕，底部會出現自定義計時器面板，僅靠原型圖，開發同學無法得知『計時器面板』的出現效果，直接展示？還是淡入淡出？所以需要在『開發注意事項』中新增如下描述
點選『自定義』按鈕，『計時器面板』自下向上彈出
必要的流程圖
所謂一圖勝千言，上面提到的4個開發注意事項如果能用流程圖表達，則建議儘量使用流程圖，這樣不僅邏輯清晰，而且簡練明快，如下圖展示的是某個睡眠鬧鐘首頁
若用文字描述上面的邏輯，會吧啦吧啦寫出下面一段
點選首頁的『開始睡眠按鈕』，判斷右上角的『起床提醒開關』的狀態，若為關閉，直接彈出『睡前狀態彈窗』，若為開啟，則判斷提醒時間距當前時間是否大於90分鐘，若大於90分鐘，則彈出『睡眠狀態彈窗』，否則彈出『睡前確認彈窗』。
上述文字不僅表達囉嗦，而且很容易將人弄糊塗，若用流程圖，則會變的清晰很多
3.3 設計注意事項
對於設計同學，重要的資訊包含『頁面佈局』『元件展示優先順序』『元件的不同狀態』與『互動/展示動畫』，這些資訊絕大多數都可以透過原型圖直接表現，所以相較於『開發注意事項』，『設計注意事項』要簡單很多，僅僅起到輔助說明的作用
元件優先順序
在原型圖中，雖然會透過大小與顏色等不同因素區分不同元件的優先順序，但這些因素組合起來，依然會令人困惑，顏色深、形狀小的元件與顏色淺但形狀大的元件，哪個優先順序更高？所以仍需要文字說明。在下面的原型圖中，需要在『設計注意事項』中新增如下描述
頁面元件展示優先順序：開始睡覺按鈕 > 起床提醒卡片 = 就寢提醒卡片
元件的不同狀態
如果元件存在不同狀態，除了要在原型圖中進行展示，也要在『設計注意事項』中再次強調，例如之前提到的音訊圖示分為選中狀態與未選中狀態。
展示/互動動畫
如前面所說，原型圖很難展示動態效果，所以如果牽扯到一些複雜的動畫效果，也需要額外說明，這裡不再詳述。
3.4 產品解釋
產品解釋主要說明方案背後的原因，透過闡述產品方案的內因，能夠讓開發與設計更好地理解產品，使得產品、開發與設計能在方案認知上取得最大的公約數。從而減少溝通成本，提高整個團隊的運作效率。
這裡繼續以插屏廣告的請求與展示為例。
如果對於不熟悉業務的開發與設計，可能會對『廣告載入提示』頁面充滿疑惑，點選上鎖的音訊icon之後，直接彈出一個toast提示豈不是更簡單有效？為何要多此一舉？
所以這裡需要使用
產品解釋
因為在插屏廣告政策中，不允許插屏廣告出現前後是同一個頁面，所以需要額外新增一個『廣告載入提示』頁面，使得廣告展示前使用者看到的是『廣告載入提示頁面』，廣告關閉後，使用者看到的是『首頁』
有了上述文字解釋，開發與設計在執行的時候，會減少困惑，避免了不必要的溝通或撕逼。
四。 完整示例
這是某睡眠鬧鐘軟體的首頁需求文件，包含了『原型圖』『流程圖』『開發注意事項』『設計注意事項』『產品解釋』僅供大家參考，也歡迎大家吐槽
五。 其他
最後給大家推薦一些設計元件的說明與工具，原型圖作為需求文件中最重要的組成部分，是對設計師最直觀的產品表達，在正式開始著手原型圖，強烈建議熟悉並使用標準的元件原型，具體連結如下
谷歌設計元件說明
蘋果設計元件說明
阿里設計元件說明
谷歌設計元件下載（Axure9版本） 阿里設計元件下載（Axure版本）
同時也強烈推薦將原型圖/需求文件上傳至統一的協作平臺中，例如
藍湖 藍湖Axure外掛
更多精彩，請關注公眾號：MING的大航海