做Material Design風格的原型，首先是你對它的設計風格喜歡并且熱愛，這里就不解釋什么是Material Design了。如果對設計規范不了解，也可以先看一下 Material Design的設計規范中文版 。熟讀，最好是爛熟于心。

原型目的，也可以說要解決的問題：

1. 降低與設計方面溝通成本。
2. 需求階段能讓開發預知技術難度。
3. 提高原型可讀性和可操作性。

元件庫

好的元件庫能讓原型制作的效率事半功倍，最好用的元件庫是自己做的元件庫。當然，如果懶得做也可以用我的（文末有下載）。

圖里展示的是一些常用的元件。樣式、尺寸和交互效果已經設置好了屬于那種改改文字就可以用的傻瓜式元件庫，即使完全不了解Material Design的設計規范也能比劃個差不多。

舉個栗子，從這里隨手拉出來幾個元件就能拼成一個頁面。

經過Markman標注之后，對照設計規范來看更清晰。

我自己手里的項目也是用這個元件庫來畫的，這里就不展示了。

制作技巧

1. 網格設置中，把間距設定為8px。Material Design中，8px是比較常見的距離和尺寸單位。這樣在拖動或放大元件時，方便控制元件的間距和尺寸。

2. 母版的運用：可以將一些全局功能，比如搜索、抽屜欄、設置按鈕、做成母版。哪個頁面需要就直接把做好的母版拖進去。比如這個搜索：

[點擊前]

?

[點擊后]

這個搜索的母版范圍是整個頁面。這樣的話，原型制作完畢，哪個頁面需要搜索，直接把搜索母版拖進去。再更新原型文檔時，注意設置好面板層級順序。當然也有其他方法，比如點擊了搜索按鈕直接進入全新的搜索頁面，這需要由產品的交互來確定。

3. 有意識的控制一個頁面中動態面板的是用數量。一個頁面中的動態面板不要太多，過多的動態面板會使原型制作效率降低，對原型的更新和再次維護的難度也在增加。

4. 統一交互的動效時間。在我的原型中，有兩個固定動效時間300ms和500ms。300ms作為短動效時間，如列表的展開收起，snackbars的顯示/隱藏等。500ms作為長動效，用在提示框的顯示/隱藏等。合理的動效能讓原型更完整，合理的動效時間能讓原型更優雅。這是加分項，沒有也無所謂。

這篇就先這樣，之后如果想到什么再補充。

對了，我不是交互設計師，如果有不足之處歡迎批評指正。

元件庫： http://pan.baidu.com/s/1mgSwiiG 密碼：ske8

官方下載： http://pan.baidu.com/s/1skPTkXf

?

作者：王也（QQ/微信：867611672），廈門4399產品經理，2年運營，1年產品工作經驗，獨立負責過1款移動端項目。求職上海/廈門產品經理

本文由 @王也 原創發布于人人都是產品經理。未經許可，禁止轉載。