做Material Design風格的原型，首先是你對它的設計風格喜歡並且熱愛，這裡就不解釋什麼是Material Design了。如果對設計規範不了解，也可以先看一下Material Design的設計規範中文版。熟讀，最好是爛熟於心。
原型目的，也可以說要解決的問題：
降低與設計方面溝通成本。需求階段能讓開發預知技術難度。提高原型可讀性和可操作性。元件庫好的元件庫能讓原型製作的效率事半功倍，最好用的元件庫是自己做的元件庫。當然，如果懶得做也可以用我的（文末有下載）。
圖裡展示的是一些常用的元件。樣式、尺寸和交互效果已經設置好了屬於那種改改文字就可以用的傻瓜式元件庫，即使完全不了解Material Design的設計規範也能比劃個差不多。
舉個慄子，從這裡隨手拉出來幾個元件就能拼成一個頁面。
經過Markman標註之後，對照設計規範來看更清晰。
我自己手裡的項目也是用這個元件庫來畫的，這裡就不展示了。
製作技巧1. 網格設置中，把間距設定為8px。Material Design中，8px是比較常見的距離和尺寸單位。這樣在拖動或放大元件時，方便控制元件的間距和尺寸。
2. 母版的運用：可以將一些全局功能，比如搜索、抽屜欄、設置按鈕、做成母版。哪個頁面需要就直接把做好的母版拖進去。比如這個搜索：
[點擊前]
[點擊後]
這個搜索的母版範圍是整個頁面。這樣的話，原型製作完畢，哪個頁面需要搜索，直接把搜索母版拖進去。再更新原型文檔時，注意設置好面板層級順序。當然也有其他方法，比如點擊了搜索按鈕直接進入全新的搜索頁面，這需要由產品的交互來確定。
3. 有意識的控制一個頁面中動態面板的是用數量。一個頁面中的動態面板不要太多，過多的動態面板會使原型製作效率降低，對原型的更新和再次維護的難度也在增加。
4. 統一交互的動效時間。在我的原型中，有兩個固定動效時間300ms和500ms。300ms作為短動效時間，如列表的展開收起，snackbars的顯示/隱藏等。500ms作為長動效，用在提示框的顯示/隱藏等。合理的動效能讓原型更完整，合理的動效時間能讓原型更優雅。這是加分項，沒有也無所謂。
這篇就先這樣，之後如果想到什麼再補充。
對了，我不是互動設計師，如果有不足之處歡迎批評指正。
元件庫：http://www.pmdaniu.com/rplib/detail/849
更新：在 GitHub 上也提交了，感興趣咱們可以一起更新呀
https://github.com/wangye1989/Material_Design_Axure_Library
本文由 @王也 原創發布於人人都是產品經理。未經許可，禁止轉載。
收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}