兔斯霽的產品設計文檔分享

很多產品新人（兔斯霽也是新人 — —||）經常會問起的一個問題就是「如何撰寫一個完成的產品（交互）設計文檔」，所以今天兔斯霽將目前工作中撰寫文檔的方式與大家分享一下，同時也算是對自己工作的一次總結。

兔斯霽在剛入行時，也遇到了如何寫文檔的問題，撰寫方式、工具的使用、文檔結構也是換了又換。後來看到@尤文文寫的博文《如何製作實用美觀的設計文檔》，讓人獲益匪淺，後來我也參照尤尤的文檔不斷模仿和改進，逐步養成自己撰寫文檔的方式。

作為團隊中的一員，你的工作產出物必定需要交給項目中的其他同事，他會是程序大哥、設計妹子，你必須對接手你文檔的同事負責。所以，你的文檔必須結構清晰、便於閱讀。

接下來主要從文檔結構、布局、線框圖繪製來介紹兔斯霽的產品設計文檔。需要注意的是，每個團隊都會有自己協作及溝通方式，本文中的設計文檔不可能完全適用你的團隊，請不要拘泥於模板。（請盡量根據自己的需求改變文檔設計）

兔斯霽使用的設計工具是 OmniGraffle，繪製流程框圖和界麵線框圖都非常不錯，同時也可以很好地輸出PDF及目錄，適合閱讀與分享，同時很方便其他同事對 PDF 進行標註。

Tip：OmniGraffle輸出的 PDF 文件會非常大（我曾輸出過500M 大小的），建議使用預覽打開重新導出 PDF，同時在 Quartz 濾鏡出選擇「 Reduce File Size 」，可大大減小文件的大小。

文檔結構說明

文檔主要分為四部分：封面、change log、功能模塊、模塊中的任務

其中比較重要的就是「功能模塊」與「模塊中的任務」，這兩者的關係就像小學寫作文的「先總再分」的形式，先以一個大「功能模塊」作為總起，之後對「模塊中的任務」進行一條條地拆分。這裡指的「任務」，更指的是用戶向的任務流程。

在OmniGraffle中以功能模塊或者任務來命名canvas，同時用數字標號來區分不同的功能模塊及任務。如「創建」是一個功能模塊，這個模塊會有「拍攝視頻」、「拍攝物料」、「合成」、「分享」4個任務。當你導出 PDF 時，PDF 會根據 canvas 的命名和順序來生成對應的目錄。

導出 PDF 後，可以顯示目錄來配合閱讀。如下圖

封面

一開始的時候，兔斯霽的文檔里沒有封面。但是後來有些文檔需要直接拿給團隊以外的人看，直接在封面告知一些信息是非常有必要的。同時也考慮到文檔的規範性和美觀性，就給加上了封面。

1. 項目名稱，文檔的每一頁都會有顯示，會貫穿整個文檔。

2. 頁碼，便於閱讀的定位，尤其是在多人同時閱讀討論時。

3. 最後更新時間，這是非常重要的一個數字，可以讓讀者明確是閱讀的哪個版本的文檔。兔斯霽目使用更新的時間來作為文檔版本更新的標識。

4. 文檔的標題

5. 團隊的 logo 或所屬部門，這裡也可以加上作者的信息等。目前的團隊中只有兔斯霽來出產品設計文檔，所以暫時就不寫大名了。

Tip：OmniGraffle 內置了便利的 stencil，頁碼和時間都可以自動更新。

change log

這是文檔中非常重要的部分，每次設計的變更你都需要隨時記錄並詳細地寫在文檔中，這樣方便讀者在拿到新的文檔後，馬上就知道改了什麼。

1. 更新時間及詳情，詳情中主要說明哪頁被修改和對應的修改內容。

功能模塊

「功能模塊」頁面作為一個總起，需要將這個模塊中的功能、流程等信息進行描述。你可以在這裡展示簡易流程、任務流程框圖、功能及任務描述等等。兔斯霽在這裡展示了整個創建流程的主要步驟。

1. 功能模塊標題，告知當前所處的功能模塊，它會貫穿屬於該模塊的所有頁面。

2. 頁面內容描述，描述頁面中展示的信息。

模塊中的任務

一個功能模塊中會有很多功能，需要進行任務拆分及分頁展示。兔斯霽在這裡會開始繪製界面的線框圖，並將任務的流程通過線框圖來表示。（複雜的流程需要配合流程框圖來說明）

1. 功能模塊標題，告知當前所處的功能模塊，它會貫穿屬於該模塊的所有頁面。

2. 任務的名稱，描述頁面中展示的信息，一般用任務名稱命名，如「拍攝視頻」、「註冊帳號」。

3. 線框圖編號及標題，描述線框圖代表的界面，同時也可以體現任務的步驟。多人討論時，也方便快速定位到一個線框圖。

4. 線框圖，兔斯霽一般直接在頁面上繪製線框圖。文章最後兔斯霽會分享如何繪製線框圖。
5. 點擊手勢及箭頭線指示，用來表示操作及界面跳轉等交互動作。

6. 標註說明，對重要的操作或界面元素進行註解說明。

到此，設計文檔的撰寫已經跟大家分享完畢了，謝謝各位看官的閱讀。

最後是殺必死的時間，也讓各位提提神！！殺必死！殺必死！

福利看完了，提神了，接下去兔斯霽簡單說一下線框圖的繪製。

兔斯霽是這樣繪製線框圖的

1.畫布的大小設置為1700pt x 1100pt，並將單位設置為1pt=1px。為什麼這麼設置，看第2步。

2.實際的界面設計中，iOS 會有單倍或雙倍的尺寸，Android 則會有多種屏幕密度。在繪製線框圖時，我們以單倍尺寸為基礎。如繪製 iPhone4尺寸的界面，可以直接用矩形工具畫480x320， topbar和 navigation tab 也按照iOS 標準的尺寸來繪製，這可以讓線框圖設計更加準確、也更接近真實的比例，不僅利於自身對界面的布局，產出的線框圖也更加美觀（請對 UI 設計師負責），便於查看和理解。

以320px 的寬度來繪製線框圖界面，按照目前頁面的設定，可以並排展示4個線框圖。你也許會問：我的產品流程步驟較多，4個界面完全不夠用，單頁無法完全展示，如何解決？當時我也有過此疑問，也私信過尤尤，他是這麼回答我的：

「任何複雜產品，除了少量ToB產品沒法，移動複雜產品都可以拆分成小故事的，我之前做的一個產品做了100多頁文檔，也是4-5個圖一頁，如果需要可以考慮把第一頁做個全景圖。」

Tips：

1. 在繪製線框圖時，請使用單一的顏色，避免影響 UI 設計師。

2. 一些常用的圖標或者 UI kit可以事先下載好，並導入到 OmniGraffle 中，繪製時可直接拖選。目前 OmniGraffle 中已經內置了很多素材，兔斯霽發現 Android Design 的圖標 pack 還是非常不錯的，點擊此前往下載。

3. 多個重複的內容，可採用一個母版。具體方式是「copy as pdf」，然後再複製即可。

最後一個 Tip：把產品想清楚了再寫！

PS：此文檔的 OmniGraffle 模板文件下載

https://dl.dropboxusercontent.com/u/60181116/Design1700x1100.gtemplate.zip

推薦閱讀：