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

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

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

元件庫

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

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

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

經(jīng)過Markman標(biāo)注之后，對照設(shè)計(jì)規(guī)范來看更清晰。

我自己手里的項(xiàng)目也是用這個(gè)元件庫來畫的，這里就不展示了。

制作技巧

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

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

[點(diǎn)擊前]

[點(diǎn)擊后]

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

3. 有意識的控制一個(gè)頁面中動(dòng)態(tài)面板的是用數(shù)量。一個(gè)頁面中的動(dòng)態(tài)面板不要太多，過多的動(dòng)態(tài)面板會(huì)使原型制作效率降低，對原型的更新和再次維護(hù)的難度也在增加。

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

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

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

元件庫：http://www.pmdaniu.com/rplib/detail/849

更新：在 GitHub 上也提交了，感興趣咱們可以一起更新呀

https://github.com/wangye1989/Material_Design_Axure_Library

本文由 @王也 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。