作為產(chǎn)品經(jīng)理，日常接觸最多的工作之一就是設(shè)計(jì)文檔了。每個(gè)產(chǎn)品經(jīng)理有自己的設(shè)計(jì)文檔的寫法，各個(gè)公司也有各自的設(shè)計(jì)文檔的要求，所以大家平時(shí)看到的設(shè)計(jì)文檔幾乎沒有一模一樣的。

?

一份設(shè)計(jì)文檔的結(jié)構(gòu)大概包括一下幾部分的內(nèi)容：項(xiàng)目背景、項(xiàng)目排期、版本歷史、信息架構(gòu)分析（包括站點(diǎn)地圖、體驗(yàn)地圖、流程圖等）、產(chǎn)品框架設(shè)計(jì)、線框圖和視覺稿等。

?

具體在設(shè)計(jì)文檔中要展示哪些內(nèi)容，取決于實(shí)際項(xiàng)目的情況，公司的具體規(guī)定、產(chǎn)品經(jīng)理的個(gè)人工作習(xí)慣等，可能刪減一些內(nèi)容，也可能增加一些內(nèi)容。

?想

每個(gè)部分拆分開來，我們一起來看看具體是如何的。

?

》》

項(xiàng)目背景

這一部分的內(nèi)容在充分溝通需求之后完成。產(chǎn)品經(jīng)理充分了解要設(shè)計(jì)的產(chǎn)品是什么，是什么平臺(tái)上發(fā)布的，產(chǎn)品的用戶群體是哪些類型，使用場(chǎng)景有什么，他們想通過這個(gè)產(chǎn)品解決什么問題，業(yè)務(wù)/產(chǎn)品現(xiàn)狀，關(guān)鍵痛點(diǎn)是什么。把需要和需求方了解清楚之后，能夠明確產(chǎn)品設(shè)計(jì)目標(biāo)，要解決的需求是什么，根據(jù)這些需求，需要設(shè)計(jì)什么樣的功能或者如何優(yōu)化現(xiàn)有的功能，最終達(dá)到怎樣的業(yè)務(wù)目標(biāo)。

》》

項(xiàng)目排期

和需求方確認(rèn)各階段交付物的時(shí)間節(jié)點(diǎn)，知道什么階段要完成什么工作，達(dá)成什么目標(biāo)。根據(jù)時(shí)間節(jié)點(diǎn)制定完成設(shè)計(jì)的具體計(jì)劃，根據(jù)這個(gè)計(jì)劃有節(jié)奏、有方向地展開工作，以較高的質(zhì)量按時(shí)交付。

》》

版本歷史

每發(fā)生一次比較大的迭代更新，都要記錄在版本歷史記錄里。這樣做的好處是，可以清晰地展現(xiàn)設(shè)計(jì)稿的迭代歷程，做了哪些需求的改動(dòng)，設(shè)計(jì)思路發(fā)生什么樣的變化，哪個(gè)部分是什么時(shí)候什么人負(fù)責(zé)的。對(duì)于產(chǎn)品設(shè)計(jì)的回溯，提供了極大的便利。相比一個(gè)個(gè)去翻以前的設(shè)計(jì)稿，查看版本歷史記錄更清晰，項(xiàng)目結(jié)束后瀏覽這一部分，也可以看到自己的設(shè)計(jì)在哪些方面哪個(gè)階段存在不足，是如何被發(fā)現(xiàn)、改進(jìn)和提升的，下一次設(shè)計(jì)的時(shí)候是否可以更早地思考到和回避掉。

》》

信息架構(gòu)分析

根據(jù)具體項(xiàng)目性質(zhì)的不同，這一塊的分析工具也有較大的差異，具體的選擇和使用要按照實(shí)際場(chǎng)景來，而非機(jī)械進(jìn)行套用。

如果是設(shè)計(jì)一整套網(wǎng)站系統(tǒng)，站點(diǎn)地圖必不可少。站點(diǎn)地圖可以對(duì)整個(gè)網(wǎng)站的架構(gòu)可以構(gòu)建起一個(gè)初步的印象，像架構(gòu)層級(jí)過深、頁面內(nèi)容重復(fù)等問題都可以通過站點(diǎn)地圖發(fā)現(xiàn)，以全局的角度去觀察整個(gè)產(chǎn)品，而不是單一的某個(gè)功能、某個(gè)頁面。

體驗(yàn)地圖可以把產(chǎn)品在不同使用場(chǎng)景、流程下的體驗(yàn)問題直觀地呈現(xiàn)出來，我們通過調(diào)研，會(huì)得到一些用戶的體驗(yàn)反饋，但是通常比較雜亂、沒有邏輯性。通過體驗(yàn)地圖可以整理出用戶使用產(chǎn)品大概有哪些場(chǎng)景和環(huán)節(jié)，各場(chǎng)景和環(huán)節(jié)下都遇到過什么樣的問題，哪些問題出現(xiàn)的頻率較高等，讓產(chǎn)品經(jīng)理能夠更貼近用戶，沉浸到使用產(chǎn)品的實(shí)際體驗(yàn)過程中去，進(jìn)而思考各場(chǎng)景、環(huán)節(jié)下都可以進(jìn)行怎樣的設(shè)計(jì)目標(biāo)拆解與設(shè)計(jì)優(yōu)化、最終幫助完成產(chǎn)品的整體目標(biāo)。

流程圖也是一個(gè)常用工具，明確展示出用戶使用產(chǎn)品的流程和步驟是怎樣的。通過它可以查找步驟是否可以合并優(yōu)化，能否抽象出通用的流程來構(gòu)建框架設(shè)計(jì)等。

》》

產(chǎn)品框架設(shè)計(jì)

產(chǎn)品框架設(shè)計(jì)構(gòu)建起產(chǎn)品的輪廓，抽象出通用的布局原則，頁面上大概有哪些模塊，這些模塊之間的主次、優(yōu)先級(jí)關(guān)系是怎樣的。整體規(guī)劃把握界面的結(jié)構(gòu)、模塊之間的關(guān)系呈現(xiàn)等，而不是糾結(jié)于一些細(xì)枝末節(jié)和不重要的內(nèi)容上。

》》

線框圖

線框圖在產(chǎn)品框架設(shè)計(jì)的基礎(chǔ)上具化出了產(chǎn)品的完整骨架。在繪制線框圖的時(shí)候需要仔細(xì)考慮到每一個(gè)可能的使用場(chǎng)景，包括負(fù)面、誤用等特殊情況都要包括在內(nèi)。

Axure是繪制產(chǎn)品經(jīng)理繪制線框圖的常用的工具。在Axure中，通過命名頁面和調(diào)整層級(jí)關(guān)系，建立站點(diǎn)地圖。在每個(gè)頁面中根據(jù)場(chǎng)景畫出線框圖，包括具體的功能及場(chǎng)景，可以加以文字說明，輔助以用例交互。

線框圖不是視覺設(shè)計(jì)稿，但在視覺效果呈現(xiàn)上卻馬虎不得。如果在繪制線框圖的時(shí)候不考慮如產(chǎn)品尺寸、頁面規(guī)范等，最終完成得會(huì)比較粗糙，也容易對(duì)內(nèi)容的編排產(chǎn)生影響，導(dǎo)致整個(gè)頁面結(jié)構(gòu)都要被迫調(diào)整之類的情況，只能增加產(chǎn)品設(shè)計(jì)成本，而在最開始就注意這方面的問題，就可以盡可能地避免類似的情況發(fā)生。

》》

視覺稿

視覺稿作為產(chǎn)品設(shè)計(jì)的最終產(chǎn)出，在線框圖的基礎(chǔ)上完成配色、圖標(biāo)繪制等視覺細(xì)節(jié)，為產(chǎn)品“涂脂抹粉”。視覺稿選擇關(guān)鍵場(chǎng)景的界面進(jìn)行繪制表現(xiàn)，注意一些Hover/Active之類的狀態(tài)表現(xiàn)，然后就可以標(biāo)注交付前端了。

?

這是產(chǎn)品設(shè)計(jì)文檔中比較常見也比較重要的的幾部分內(nèi)容，根據(jù)你自己的需要和公司的規(guī)定、項(xiàng)目的具體情況，選擇需要重點(diǎn)體現(xiàn)的內(nèi)容，也可以有所增刪，并不是一成不變的。

?