用Axure制作Material Design的APP原型（附元件庫下載）

27 評論 137745 瀏覽 572 收藏 5 分鐘

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

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

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

元件庫

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

3

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

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

1

2

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

4

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

制作技巧

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

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

搜索1

[點擊前]

 

搜索2

[點擊后]

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

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

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

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

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

元件庫：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)載。

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
王也
PM UI/UX
4篇作品 178827總閱讀量
11-133672 瀏覽
停止無腦群發(fā)！私域經(jīng)不起折騰（群發(fā)4要素）
11-291340 瀏覽
“雙十二”落幕、“好價節(jié)”開啟，淘天在想什么？
08-171624 瀏覽
一場中小商家爭奪戰(zhàn)，再次打響
08-148645 瀏覽
我用了1個月，深度拆解了這款物流與供應(yīng)鏈aPaaS產(chǎn)品，收獲滿滿！
06-066535 瀏覽
以電池產(chǎn)品為例，聊聊新能源行業(yè)產(chǎn)品經(jīng)理的需求分析怎么做
評論
評論請登錄

  1. 你的原型比例有問題

    來自廣東 回復(fù)

  2. 為啥我的一直提示”Axure is having trouble with….”,而且元件庫完全沒有更新。。。。。。產(chǎn)品小白求指導(dǎo)。

    來自廣東 回復(fù)

  3. 你好，能麻煩再發(fā)一份嗎

    來自湖南 回復(fù)

  4. 多謝你的分享 正好畫作品集的原型

    來自北京 回復(fù)

  5. 不錯，收藏了

    回復(fù)

  6. 樓主并沒有熟讀MD規(guī)范吧。好多地方都有問題。

    來自廣東 回復(fù)

    1. 求指導(dǎo) ??

      來自上海 回復(fù)

  7. 居然還標(biāo)注了尺寸，UI看到不打你么

    來自江蘇 回復(fù)

    1. 標(biāo)注尺寸只是為了說明這套元件庫是按照規(guī)范尺寸來做的。給UI的原型是沒有尺寸的，都是灰模原型

      來自福建 回復(fù)

  8. 謝謝分享，幫助很大

    來自福建 回復(fù)

  9. 你居然也做產(chǎn)品了，不錯哦

    來自廣東 回復(fù)

    1. :mrgreen: :mrgreen:

      來自福建 回復(fù)

    2. 這是個坑 你運營做的好好的不是 哎 ?? ?? ??

      來自廣東 回復(fù)

  10. Material Design的精髓在于動畫

    來自福建 回復(fù)

    1. 贊同，除了靜態(tài)下的陰影，只有動畫可以清晰地反映出MD中層與層的關(guān)系

      來自陜西 回復(fù)

    2. 基本動畫效果肯定是要做的，而且也不難。像一些比如waves、ripple這種效果，用axure實現(xiàn)成本太高，而且也不顯示。這種動畫效果用keynote會更適合

      來自福建 回復(fù)

  11. ?? 元件不錯！

    來自福建 回復(fù)

    1. 怪獸是你嗎？哈哈

      來自福建 回復(fù)

    2. 還有誰！ :mrgreen:

      來自福建 回復(fù)

    3. 哈哈，這回這頭像才想你嘛

      來自福建 回復(fù)

    4. 我只是電腦里面沒有頭像而已，哈哈！

      來自福建 回復(fù)

  12. pm需要把原型做到這種程度嗎？

    來自北京 回復(fù)

    1. 看個人和項目環(huán)境吧。團隊配置比較完善的應(yīng)該不需要

      來自福建 回復(fù)

  13. 感謝分享，很好

    來自江蘇 回復(fù)

  14. 感謝樓主整理分享，幫助很大~

    來自北京 回復(fù)

    1. 謝謝，希望可以幫到你

      來自福建 回復(fù)