如何製作實用美觀的設計文件

發表於2012-07-19

來源:騰訊CDC

前言:最近準備做一個設計文件的分享,但是一直沒有時間整理好keynote,這裡先分享一個設計文件模版,以及模版中每個元素的使用理由與方法。之後的設計文件分享中,會加入更多的設計文件案例來分析討論。

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 – – – – – – – 

以下是以前我工作中產出的設計文件案例,請參閱 :)

 如何製作實用美觀的設計文件

如何製作實用美觀的設計文件

 如何製作實用美觀的設計文件

 

 如何製作實用美觀的設計文件

 如何製作實用美觀的設計文件

如何製作實用美觀的設計文件

謝謝閱讀 :)

 

相關文章