手把手教你制作實用美觀的交互設計文檔

Here we go.

　　作為一個交互設計師，我們要全局掌握產品的背景，邏輯，用戶體驗。但是，我們不能忽略設計過程中一個很關鍵的步驟，設計輸出。

　　如果我們用email或者其他大海報的方式來輸出設計文檔，有沒有產品經理會抱怨說看不懂?有沒有開發抱怨使用過程中效率低?在我之前的工作經驗中，我一直保持用一種方式來輸出設計文檔，

　　InDesign + PDF，在之前的產品同事與開發同事得到的反饋是好的，這里也希望分享并討論這個方式是不是適合我們騰訊的產品開發節奏。

　　用InDesign輸出PDF設計文檔的好處有不少，我這里先列舉幾點：

　　1，設計文檔規整，閱讀效率提高。

　　2，設計文檔適合打印，在很多評審場合閱讀紙張更有效。(同時請注意環保)

　　3，一個部分講一個故事，清晰明確，而不是把所有場景都集中在一頁上。

　　4，InDesign可以設置文字，圖片格式，通過style來管理，大大提高修改設計文檔的效率。

　　5，設計文檔簡潔美觀，讓閱讀者輕松愉快。

　　6，筆記，交互形式，配合設計圖的方式，全面，內容集中，不需要額外注解。

　　7，可以配合視覺設計進行文檔輸出，作為一個完整的reference。

　　8，有助于知識保存，知識傳播。

　　9，設計師創建并維護設計文檔貫穿整個產品設計過程，主人感，成就感強。

　　最后強調一下，這里指的設計文檔是唯一輸出，貫穿設計師所有工作過程中，而不是產品設計完成后的總結沉淀。

　　這個設計文檔模版也是多變的，設計師可以根據自己產品的需求靈活變動，請不要拘泥于模版。

Now let’s start digging.

　　這是第一頁：文檔封面，文檔封面是每一個文檔的第一個展示，我們應該清晰的傳達這個設計文檔的基本信息。在InDesign中，這頁的頂部可以設立為主模版，支持整個文檔。

　　A. 文檔生產方logo，展示設計文檔來自哪個團隊。

　　B. 團隊或者項目名稱，再次展示文檔信息。

　　C. 主標題，這個標題是產品的名稱，應該貫穿整個文檔。

　　D. 版本號很關鍵，設計文檔需要有嚴格的版本控制;修改時間可以告訴讀者，這個文檔的最近更新情況;當然，這里還可以根據需要加入設計師名稱，ID，Email信息等。

　　E. 頁碼需要在一個顯眼的位置，特別是在遠程會議的時候，頁碼會是一個重要的定位信息。

　　F. 第一頁不要太多信息了，要讓讀者集中注意力，只放一個標題是好主意，有時F與C會是一樣的。

　　這是第二頁：修改記錄，修改記錄對于持續更新的產品設計文檔是不可或缺的，開發，產品經理，與設計師能根據修改記錄快速了解每個版本修改的內容。例如例子中，7月12日修改了6個點，如果沒有修改記錄，開發可能需要1個小時看完100頁的文檔才能了解哪些地方被修改過。

　　A. 修改記錄應該為文檔的第二頁，關鍵，價值大。

　　B. 內容區重點為修改日期，與簡短的修改內容，修改內容應該首先點明版本號，然后把修改的部分與頁碼寫出方便讀者查閱。

　　這是第三頁：內容目錄。

　　A. 內容目錄是整個設計文檔的索引，放在第三頁的重要位置。

　　B. 在用InDesign生成PDF后，請使用PDF把這頁的每個索引編輯為鏈接，這樣讀者就可以方便在這頁直接跳轉到需要閱讀的頁面。

　　這是第四頁：分段。在完整展開設計文檔前，要構思好每個段落應該講一個什么故事。無論多么復雜的產品，都可以根據功能，場景，用戶群體等因素劃分為數個故事。在每個設計文檔中，我們都應該思考怎樣劃分故事情節給到我們的產品經理，開發，設計師，管理者，以及適應用戶群體，理想狀態，故事的劃分是通用應對所有人群的。

　　A. 就像模版中所說一樣，一次只說一個故事。

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

　　A. 副標題，也是故事名稱。例如一個面向用戶的產品的總標題為QQ美好生活，副標題會是一個清晰的故事子集，例如美好生活之夏日健康飲品。

　　B. 每個設計圖需要配標題，在遠程會議中，這個標題配合數字的方式可以極大提高交流效率。

　　C. 在InDesign中，我主要使用兩種設計圖方式，一種是在InDesign中直接生成設計圖，一種是把PSD源圖直接放入InDesign。第一種的好處是，所有設計圖在InDesign中，可以統一設定風格，統一修

　　改。第二種的好處是，PSD可以輸出更清晰的交互，視覺圖，而且InDesign可以記錄路徑，以后的修改中，可以直接修改源PSD，然后刷新InDesign文檔就可以刷新所有文檔內PSD圖。

　　D. 筆記區適應在每個需要筆記的頁面，非常重要，可以極大減少產品經理，開發，設計師持續互相問問題的時間。

　　E. 筆記中也可以錄入對產品經理，或者開發的問題。在每次評審的時候，我會在文檔中直接標記需要注意的點，這樣會后設計方的修改記錄就直接產出。例如：“這6個圖需要在2秒內拉出來，需要與開發確定”。

Wrap up – – – – – – –

　　今天只給出了基本的模版和InDesign設計經驗。設計文檔還有很多功能。例如，可以和視覺設計師配合，在一個文檔內同時記錄交互和視覺設計。甚至可以在一個文檔內同時記錄交互，視覺，前端開發code做整體文檔。

　　生成PDF后，可以放入iPad等移動設備，可以幫助你在5分鐘內，與老板散步中描述幾個好點子。

　　設計文檔的難點是開始建立所需的細致時間較多，但是文檔架構一旦搭好，維護的精力小于預期，以后的每次輸出，制作的設計師以及閱讀的產品經理和開發，都應該是心情愉悅的。：)

Wrap up – – – – – – –

　　以下是以前我工作中產出的設計文檔案例，請參閱 ：)

網頁題目：手把手教你制作實用美觀的交互設計文檔
當前路徑：http://m.kartarina.com/news/160789.html

成都網站建設公司_創新互聯，為您提供ChatGPT、Google、服務器托管、云服務器、建站公司、App設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯