每個人都有自己的見解，眾說紛紜，寫長篇大論的人，都說得蠻有道理，與別人觀點不同的地方也就是些細(xì)節(jié)。

在網(wǎng)上看了很多產(chǎn)品工作流程里寫文檔的方法分享，大多講的都是方法和思路，總結(jié)下來大概也就是文檔內(nèi)容要求：清晰、高效、準(zhǔn)確、不漏，寫作形式分為word版（已經(jīng)被各種經(jīng)驗分享所淘汰）、圖片版兩種。通過網(wǎng)上大牛分享的東西，和自己工作中各種嘗試下來，總結(jié)了自己的一套實在的東西分享給大家。

直接開始吧。

以產(chǎn)品核心需求出發(fā)設(shè)計產(chǎn)品

任何一個產(chǎn)品的誕生都是為了滿足某種需求的，沒有哪個產(chǎn)品是先做好了產(chǎn)品，再去想它要滿足什么需求，最多也就誤打誤撞解決了某些需求。所以在設(shè)計產(chǎn)品的時候應(yīng)該圍繞核心需求開始構(gòu)思整個產(chǎn)品，而不是從產(chǎn)品的第一個頁面或者一些基礎(chǔ)功能開始。

例如要做一個同行社交APP，應(yīng)該先著重構(gòu)思“同行”如何設(shè)計，就應(yīng)該想到“怎么強(qiáng)化同行的概念”，而不是先想如何去做好聊天功能。

一般我會用腦圖先梳理一下產(chǎn)品的要點、出發(fā)點，這個圖只是幫助你邊梳理邊記錄的作用，格式上只要自己能看懂就OK了。是為了接下來的產(chǎn)品結(jié)構(gòu)圖做鋪墊，如果直接從結(jié)構(gòu)圖開始，你的思維就會受制于結(jié)構(gòu)化的模式。

確定功能點，畫結(jié)構(gòu)圖

這個階段，首先是經(jīng)過討論，已經(jīng)明確了頭腦風(fēng)暴圖里要做哪些功能，想法是無窮的，能做的只是有限的，現(xiàn)在要做的事就是把功能點分類，讓所有想法能合理的落在你腦海里的產(chǎn)品界面上，此時直接開始畫產(chǎn)品原型圖還尚早，可以先把功能結(jié)構(gòu)用腦圖列出來。

每一級包括菜單（有下級頁面）、模塊（列表、功能區(qū)…）、操作（按鈕、刪除、排序…）。

做這一步的過程你會發(fā)現(xiàn)之前的腦圖有些地方?jīng)]想到，其實很正常，做這些流程就是為了盡可能避免遺漏的點，要是直接畫原型遺漏的會更多。為了讓每個環(huán)節(jié)更加完整，可以在下一個環(huán)節(jié)發(fā)現(xiàn)遺漏點的時候，及時在上一個環(huán)節(jié)的相應(yīng)地方進(jìn)行補充。

按照結(jié)構(gòu)圖順序開始畫原型圖

結(jié)構(gòu)圖畫好之后首先是進(jìn)行排序，最好從上到下開始排，順序確定后就盡量避免更改（之后畫原型的時候發(fā)現(xiàn)有遺漏的項，補充時在其后追加，而非插入）。然后給每一個包含下級頁面的項加一個標(biāo)記。

這樣做的好處是在畫原型圖之前就知道一共有多少個頁面（假如第4層的某個頁面可以跳轉(zhuǎn)至第2層的某個頁面，那么只需寫目標(biāo)頁面名稱，不做向后延伸，也就不做標(biāo)記），并且原型圖目錄也能很好的分清層級關(guān)系，導(dǎo)出的原型圖文件夾里面的各頁面縮略圖展示也不會混亂排列。通過工作中發(fā)現(xiàn)帶有頁面跳轉(zhuǎn)的原型圖畫起來費時間、且表達(dá)也不夠直觀，所以我習(xí)慣一個原型頁面對應(yīng)一個層級的產(chǎn)品界面，怎么表達(dá)頁面跳轉(zhuǎn)關(guān)系呢？后面會介紹一種方法。

下面就開始畫原型圖了，首先我會創(chuàng)建一個頁面模板，讓每個頁面看起來布局統(tǒng)一，頁面上包括頁眉、原型、跳轉(zhuǎn)關(guān)系、原型說明。

跳轉(zhuǎn)關(guān)系表明了該頁面上所有可跳轉(zhuǎn)的目標(biāo)頁面，就能通過頁面名稱很快的進(jìn)行切換查看，如果畫全局的頁面跳轉(zhuǎn)關(guān)系圖，畫起來復(fù)雜，并且看的人也沒耐心去研究里面的各種流程線路。原型頁面上只展示頁面要素，一些細(xì)節(jié)可能由交互設(shè)計師來完成，所以這樣的一套原型圖產(chǎn)出速度還是很快的，當(dāng)然前提是你的下游有一個交互設(shè)計師，如果下游沒有交互設(shè)計師，可能要跟后面要說的交互設(shè)計文檔進(jìn)行融合了，或者把兩件事都做了。

快速出圖——創(chuàng)建自己的控件庫

想要快速畫這樣的原型圖，就得建立自己的一套控件庫，當(dāng)然不用刻意抽時間去建，只需要平時工作中在畫原型圖的時候同時打開一個自己的元件庫，庫里有直接用，庫里沒有在原型圖上做好之后復(fù)制到自己的庫里即可。像上面這種程度的原型圖不需要太多控件就可以畫了，要是保真度高一點的，可能就要積累足夠多的控件了。誰還說自己用手畫原型圖來得最快，我跟誰急。

交互設(shè)計圖——只做交互相關(guān)解釋

大部分公司都是沒有交互設(shè)計師的崗位的，所以在這里介紹一下自己寫交互設(shè)計文檔的方法吧。交互設(shè)計文檔主要是給前端和UI看的文檔，所以文檔的說明應(yīng)不包含業(yè)務(wù)解釋、規(guī)則說明相關(guān)的內(nèi)容?？梢越栌眯枨笪臋n的思路，還是先排版，頁面分為“準(zhǔn)高保證原型圖”、“注釋說明”、“交互”、“其他補充內(nèi)容”。

“注釋說明”應(yīng)該包括：輸入檢測標(biāo)準(zhǔn)、缺省值、界面元素變化、顯示上限等情景的說明。

“交互”包括：提示彈框樣式、功能實現(xiàn)方式、提示內(nèi)容等響應(yīng)用戶物理操作的反饋畫面。

某些頁面可能根據(jù)不同的情景展示效果會有所不同，可以在補充里描述不同場景下的界面樣式。

當(dāng)然你還需要在文檔的開始增加一個閱讀說明，進(jìn)行全局的交互說明，讓看文檔的人能夠很清楚的知道你在圖上做的標(biāo)記表示何種操作。

“通用說明”就是這種風(fēng)格交互文檔都會有的說明，可以保存為模板，以后套用即可，“特別說明”是針對此文檔中的一些細(xì)節(jié)進(jìn)行的說明。

估計有人會說這樣的圖做起來復(fù)雜，一些技巧的東西可以去網(wǎng)上看一些工具使用的教程，熟練了就知道如何便捷的產(chǎn)出這樣的圖了。我這里只是講我個人總結(jié)的如何快速寫出清晰直觀的產(chǎn)品文檔，一些技巧的東西說來話長了。

本文由 @吳某某 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。