Here we go.

作為一個(gè)交互設(shè)計(jì)師，我們要全局掌握產(chǎn)品的背景，邏輯，用戶體驗(yàn)。但是，我們不能忽略設(shè)計(jì)過(guò)程中一個(gè)很關(guān)鍵的步驟，設(shè)計(jì)輸出。

如果我們用email或者其他大海報(bào)的方式來(lái)輸出設(shè)計(jì)文檔，有沒(méi)有產(chǎn)品經(jīng)理會(huì)抱怨說(shuō)看不懂？有沒(méi)有開(kāi)發(fā)抱怨使用過(guò)程中效率低？在我之前的工作經(jīng)驗(yàn)中，我一直保持用一種方式來(lái)輸出設(shè)計(jì)文檔，InDesign + PDF，在之前的產(chǎn)品同事與開(kāi)發(fā)同事得到的反饋是好的，這里也希望分享并討論這個(gè)方式是不是適合我們騰訊的產(chǎn)品開(kāi)發(fā)節(jié)奏。

用InDesign輸出PDF設(shè)計(jì)文檔的好處有不少，我這里先列舉幾點(diǎn)：

1，設(shè)計(jì)文檔規(guī)整，閱讀效率提高。
2，設(shè)計(jì)文檔適合打印，在很多評(píng)審場(chǎng)合閱讀紙張更有效。（同時(shí)請(qǐng)注意環(huán)保）
3，一個(gè)部分講一個(gè)故事，清晰明確，而不是把所有場(chǎng)景都集中在一頁(yè)上。
4，InDesign可以設(shè)置文字，圖片格式，通過(guò)style來(lái)管理，大大提高修改設(shè)計(jì)文檔的效率。
5，設(shè)計(jì)文檔簡(jiǎn)潔美觀，讓閱讀者輕松愉快。
6，筆記，交互形式，配合設(shè)計(jì)圖的方式，全面，內(nèi)容集中，不需要額外注解。
7，可以配合視覺(jué)設(shè)計(jì)進(jìn)行文檔輸出，作為一個(gè)完整的reference。
8，有助于知識(shí)保存，知識(shí)傳播。
9，設(shè)計(jì)師創(chuàng)建并維護(hù)設(shè)計(jì)文檔貫穿整個(gè)產(chǎn)品設(shè)計(jì)過(guò)程，主人感，成就感強(qiáng)。

最后強(qiáng)調(diào)一下，這里指的設(shè)計(jì)文檔是唯一輸出，貫穿設(shè)計(jì)師所有工作過(guò)程中，而不是產(chǎn)品設(shè)計(jì)完成后的總結(jié)沉淀。

這個(gè)設(shè)計(jì)文檔模版也是多變的，設(shè)計(jì)師可以根據(jù)自己產(chǎn)品的需求靈活變動(dòng)，請(qǐng)不要拘泥于模版。

Now let’s start digging.

這是第一頁(yè)：文檔封面，文檔封面是每一個(gè)文檔的第一個(gè)展示，我們應(yīng)該清晰的傳達(dá)這個(gè)設(shè)計(jì)文檔的基本信息。在InDesign中，這頁(yè)的頂部可以設(shè)立為主模版，支持整個(gè)文檔。

A.?文檔生產(chǎn)方logo，展示設(shè)計(jì)文檔來(lái)自哪個(gè)團(tuán)隊(duì)。
B. 團(tuán)隊(duì)或者項(xiàng)目名稱，再次展示文檔信息。
C. 主標(biāo)題，這個(gè)標(biāo)題是產(chǎn)品的名稱，應(yīng)該貫穿整個(gè)文檔。
D. 版本號(hào)很關(guān)鍵，設(shè)計(jì)文檔需要有嚴(yán)格的版本控制；修改時(shí)間可以告訴讀者，這個(gè)文檔的最近更新情況；當(dāng)然，這里還可以根據(jù)需要加入設(shè)計(jì)師名稱，ID，Email信息等。
E. 頁(yè)碼需要在一個(gè)顯眼的位置，特別是在遠(yuǎn)程會(huì)議的時(shí)候，頁(yè)碼會(huì)是一個(gè)重要的定位信息。
F. 第一頁(yè)不要太多信息了，要讓讀者集中注意力，只放一個(gè)標(biāo)題是好主意，有時(shí)F與C會(huì)是一樣的。

這是第二頁(yè)：修改記錄，修改記錄對(duì)于持續(xù)更新的產(chǎn)品設(shè)計(jì)文檔是不可或缺的，開(kāi)發(fā)，產(chǎn)品經(jīng)理，與設(shè)計(jì)師能根據(jù)修改記錄快速了解每個(gè)版本修改的內(nèi)容。例如例子中，7月12日修改了6個(gè)點(diǎn)，如果沒(méi)有修改記錄，開(kāi)發(fā)可能需要1個(gè)小時(shí)看完100頁(yè)的文檔才能了解哪些地方被修改過(guò)。

A.?修改記錄應(yīng)該為文檔的第二頁(yè)，關(guān)鍵，價(jià)值大。
B.?內(nèi)容區(qū)重點(diǎn)為修改日期，與簡(jiǎn)短的修改內(nèi)容，修改內(nèi)容應(yīng)該首先點(diǎn)明版本號(hào)，然后把修改的部分與頁(yè)碼寫(xiě)出方便讀者查閱。

這是第三頁(yè)：內(nèi)容目錄。

A. 內(nèi)容目錄是整個(gè)設(shè)計(jì)文檔的索引，放在第三頁(yè)的重要位置。
B. 在用InDesign生成PDF后，請(qǐng)使用PDF把這頁(yè)的每個(gè)索引編輯為鏈接，這樣讀者就可以方便在這頁(yè)直接跳轉(zhuǎn)到需要閱讀的頁(yè)面。

這是第四頁(yè)：分段。在完整展開(kāi)設(shè)計(jì)文檔前，要構(gòu)思好每個(gè)段落應(yīng)該講一個(gè)什么故事。無(wú)論多么復(fù)雜的產(chǎn)品，都可以根據(jù)功能，場(chǎng)景，用戶群體等因素劃分為數(shù)個(gè)故事。在每個(gè)設(shè)計(jì)文檔中，我們都應(yīng)該思考怎樣劃分故事情節(jié)給到我們的產(chǎn)品經(jīng)理，開(kāi)發(fā)，設(shè)計(jì)師，管理者，以及適應(yīng)用戶群體，理想狀態(tài)，故事的劃分是通用應(yīng)對(duì)所有人群的。

A. 就像模版中所說(shuō)一樣，一次只說(shuō)一個(gè)故事。

這是第五頁(yè)，內(nèi)容。內(nèi)容區(qū)展示的內(nèi)容豐富多樣。這里我只給出了款式，分析了款式后，再補(bǔ)充一些可以在文檔中加入的內(nèi)容。

A. 副標(biāo)題，也是故事名稱。例如一個(gè)面向用戶的產(chǎn)品的總標(biāo)題為QQ美好生活，副標(biāo)題會(huì)是一個(gè)清晰的故事子集，例如美好生活之夏日健康飲品。
B. 每個(gè)設(shè)計(jì)圖需要配標(biāo)題，在遠(yuǎn)程會(huì)議中，這個(gè)標(biāo)題配合數(shù)字的方式可以極大提高交流效率。
C. 在InDesign中，我主要使用兩種設(shè)計(jì)圖方式，一種是在InDesign中直接生成設(shè)計(jì)圖，一種是把PSD源圖直接放入InDesign。第一種的好處是，所有設(shè)計(jì)圖在InDesign中，可以統(tǒng)一設(shè)定風(fēng)格，統(tǒng)一修改。第二種的好處是，PSD可以輸出更清晰的交互，視覺(jué)圖，而且InDesign可以記錄路徑，以后的修改中，可以直接修改源PSD，然后刷新InDesign文檔就可以刷新所有文檔內(nèi)PSD圖。
D. 筆記區(qū)適應(yīng)在每個(gè)需要筆記的頁(yè)面，非常重要，可以極大減少產(chǎn)品經(jīng)理，開(kāi)發(fā)，設(shè)計(jì)師持續(xù)互相問(wèn)問(wèn)題的時(shí)間。
E. 筆記中也可以錄入對(duì)產(chǎn)品經(jīng)理，或者開(kāi)發(fā)的問(wèn)題。在每次評(píng)審的時(shí)候，我會(huì)在文檔中直接標(biāo)記需要注意的點(diǎn)，這樣會(huì)后設(shè)計(jì)方的修改記錄就直接產(chǎn)出。例如：“這６個(gè)圖需要在２秒內(nèi)拉出來(lái)，需要與開(kāi)發(fā)確定”。

Wrap up – – – – – – –

今天只給出了基本的模版和InDesign設(shè)計(jì)經(jīng)驗(yàn)。設(shè)計(jì)文檔還有很多功能。例如，可以和視覺(jué)設(shè)計(jì)師配合，在一個(gè)文檔內(nèi)同時(shí)記錄交互和視覺(jué)設(shè)計(jì)。甚至可以在一個(gè)文檔內(nèi)同時(shí)記錄交互，視覺(jué)，前端開(kāi)發(fā)code做整體文檔。

生成PDF后，可以放入iPad等移動(dòng)設(shè)備，可以幫助你在5分鐘內(nèi)，與老板散步中描述幾個(gè)好點(diǎn)子。

設(shè)計(jì)文檔的難點(diǎn)是開(kāi)始建立所需的細(xì)致時(shí)間較多，但是文檔架構(gòu)一旦搭好，維護(hù)的精力小于預(yù)期，以后的每次輸出，制作的設(shè)計(jì)師以及閱讀的產(chǎn)品經(jīng)理和開(kāi)發(fā)，都應(yīng)該是心情愉悅的。：）

Wrap up – – – – – – –

以下是以前我工作中產(chǎn)出的設(shè)計(jì)文檔案例，請(qǐng)參閱 ：）

來(lái)源：CDC