用axure可以製作出符合Material Design的APP高保真原型嗎？

12-21

GitHub 地址：wangye1989/Material_Design_Axure_Library

（文章最後也有下載地址）

-----

原回答：

說的是這樣的么？下班前臨時擼兩張圖，先挖坑，有時間再填。

------------我來填坑--------
先回答題主，可以。

之所以畫上面兩張圖，是因為這兩張圖包含了MD設計的一些經典控制項。比如導航欄按鈕、卡片、按鈕、snackbars、抽屜導航、以及用來表現Z軸的陰影。

高保真原型是無限接近最終實物產出的原型。它的的好處在於，降低溝通成本。我要做的就是這麼個東西，拿去照著做吧。高保真原型在產品開發前，比較重要的作用就是體驗功能，用最低的成本，最短的時間滿足新功能體驗。如果以這些要求作為MD風格app的高保真原型，Axure完全可以做到。
至於MD中的各種動畫，比如點擊時候的水波紋效果；導航按鈕有過度動效；圖片載入黑白灰變為彩色；最好是拿到做動畫或動效軟體上實現。用Axure做這些成本太高，相信實際項目中也沒人這樣做。

這個高保真要做到什麼樣的程度呢？
可以參考一下這個問題設計師做高保真原型時，應保真到什麼程度？ - 產品設計師
總之不要盲目的為了高保真而忘記原型的初衷

然後說說怎麼做

首先肯定是要了解（是了解，不是熟悉）MD的設計規範啦，這裡提供一個Material Design中文版（有條件的可以猛戳設計指南官網，需翻牆）。根據規範中所有的組件，和項目中常用的元件，在Axure裡面製作自己的元件庫。下載的始終沒有自己做的好用，主要是我覺得下載的太爛了，都是拿圖片改的，中看不中用。包括谷歌和Axure合作搞出的那套，拿到手很驚艷，但項目中好多元件根本沒法用。

下面是我的元件庫中的一些元件。看著不少，但常用的就那幾個。常用的一定要好用，不常用的效果要做好。

具體製作上的東西太多，一時半會說不完，主要是靠經驗吧。說幾個需要注意的，想到再補充
網格設置，網格選擇8px（默認是10px），MD中好多尺寸都是8的倍數。比如頂部導航的高度是56，tab的高度是48，卡片之間的距離是8等等。
不要過分追求高保真！！！！該跳頁就跳頁，的確動態面板的體驗更好，但一個頁面動態面板多的自己都數不清的時候，總有一天會改哭你。

最後對照規範再看下這個圖

---------

中午抽空做了一個MD設計規範版的微信。主要功能按鈕可一點擊，表達的是這麼個意思。「通訊錄」和「發現」也是可以放到抽屜欄的。

加入顏色和各種icon就是我理解的高保真，高級的動效不需要用Axure來展示。

---------
最後附上我的安卓元件庫。鏈接:MaterialDesign移動端元件庫 | 產品大牛

（各種雲盤都試過了，最後還是放在朋友的網站上吧）

---2016-3-16 更新---

下面的鏈接是新版元件庫，已經下載過上面的，可以不用更新。

增加了toasts、調整了元件庫裡面的結構，調整了陰影，把手機模型改成了nexus 6P，並且增加了安卓實體按鈕的點擊效果。

如果只是靜態 UI 設計，花點時間做出高保真的 UI 是可行的，只不過效果不如 PS、Sketch 這樣的工具來得好，比如多層投影疊加無法實現（除非疊多個同樣的元素然後設置不同的投影，就是略蛋疼 - -），比如字體渲染，尤其是 Windows 上，瀏覽器的字體渲染完全不能還原移動設備上的真實面貌。

如果是 UI 動效，正好最近在嘗試用 Axure 8.0 Beta 看能把動畫做到什麼程度，於是做了兩個簡單的 MD 動效來練手，演示效果戳 &> http://43wsb1.axshare.com/

示例 1，FAB 展開二級功能菜單：

示例 2，FAB 漸變為 App bar 的背景色（純粹是嘗試動畫效果，不要在意功能邏輯的細節）：

感受

由於 Axure 這款工具的定位是快速製作原型，而非製作精美的 UI 動效，尤其是移動端的動效，因此只能實現很基礎的動畫，無法精確還原官方設計規範中指定的動畫曲線。
動畫設置倒是沒有難度，預設的幾種動畫形式改改參數就行。可能是因為有 Flash 動畫的製作經驗，所以儘管 Axure 的動畫設置不是時間軸這樣的方式，我對動畫的節奏基本還是能有把握的，當然反覆修改也是不可避免的。不過大量重複操作有點低效，以第一個 FAB 展開二級菜單為例，動作設置如圖（收起則是逆向再來一遍...）：
預覽方式依舊是生成 HTML 在瀏覽器中預覽，儘管移動端有 AxShare 這個 app 但目前實在很弱，因此對於真實移動設備的預覽支持不好，這一點是相比 PS、Sketch、Pixate、Quartz Composer、Form 等靜態或動態設計工具最大的劣勢。

Tools don"t matter, what does matter is what you"re capable of creating with them.

以上。

google和Axure合作出了一套UI Kit "Material Design UI Kit for Axure RP"

網址：Home

cheiron1990/Axure-MaterialDesign-Stickersheets · GitHub

我自己照著 Google的sticker sheets 畫的。。。

可以，但是非常耗工。你可以感受到Material Design里有非常多的動畫及移動。包括一個點擊都會產生動畫。
你應該知道在axure里做出各種動畫有多辛苦。

首先正面回答：完全可以！Axure的功能強大，能製作出高保真原型。在和開發設計師等溝通的時候發揮很大的作用。現在送上案例Axure做完跑酷遊戲可以狗帶了_axure吧

設計原型做那麼精緻幹嘛？？

產品大牛是一個服務於產品團隊的工具+社區的平台,旨在幫助產品經理,交互設計師在線託管自己設計的產品原型
Axure原型，可以像網盤一樣管理，現在只需要一個短鏈接群發過去，方便高效。

Axure目前的功能已經很強大了。並且在一定程度上是可以做出來相對高還原的設計原型的。
而且Axure目前的版本里還可以進行responsible design，可以直接設置幾個不同尺寸的設計界面。其實還是很好用的。如果想讓原型還原度達到最高，當然最好是配合其他圖片處理軟體去進行美化和包裝。

完全可以。
而且試用axure進行排版，Photoshop輔助，效率可以高出很多倍。同時可以在高保真原型中加上交互動作，可以輔助設計說明，幫助開發理解。
axure的文字工具比Photoshop好用很多，當然sketch也可以做到，看你習慣試用哪種了。

如果題主指的高保真不是指Material Design中的動畫，而指可交付給視覺設計師還原成最終效果圖的話。
那麼可以不用Axure也行，Axure沒有一定的控制項庫的話，操作起來還是有點麻煩的。
可以試一下墨刀。
控制項多，方便。有一點不好的就是在線工具。
剛才畫了兩張。

墨刀操作頁面。

常見的控制項、圖標都有。基本滿足需求。

包括Material Design中常用的陰影。添加起來是很方便的。

————————————————————————分割線————————————————
如果從原型的角度，上圖或者 @王也的原型已經夠用了。已經可以很大的降低了你和設計師之間的溝通成本。但是還是需要你和設計師之間對Material Design的理解，包括控制項的使用(現在大部分的app不要說交互、控制項都是直接抄IOS，導致安卓開發這邊增加開發成本)、包括Z軸的概念，包括動效等等。
但是，原型不要也不需要去過分的設計，如Z軸陰影、按鈕水波紋效果，對於安卓開發來說，就是一個控制項上面的一個屬性，簡單的溝通溝通或者拿其他市面上優秀的產品演示一遍可以很快懂。無需大費周章的去Axure做出動效。

你的原型主要是承載你對交互上的理解即可。