Axure實現Material Design的按鈕波浪特效

最近在寫一個谷歌材料設計 Material Design風格的WEB產品，在開發過程中將產品原型做成了Axure元件庫，當然目前沒有完全完成。本文將以實現谷歌材料設計按鈕的波浪特效為例，提供一種新的自定義Axure元件樣式的方法。

需要說明的是：本文所提供的方法已經最大程度小白化，簡單易用，但是對於產品經理來說，本文的教程可能不具有實際的意義，僅提供給喜歡研究Axure Or Code的玩家。

一、效果預覽

（1）視頻預覽

點擊查看視頻

（2）網頁預覽

在線預覽

二、實現原理

（1）波浪效果的實現需要特定的CSS和JS文件，但是在Axure裡我們並不能直接Code。

（2）Axure提供了【當前窗口打開鏈】的接口，通過這個接口可以直接加載Javascript，它提供了Axure和前端代碼直接交互的能力，正因為這樣，Axure在前端樣式和交互上有了更加廣闊的擴展空間。

所以我們可以將外部CSS或JS文件放到Javascript中，通過在【頁面載入】的時候，添加用例【當前窗口打開連結】來加載外部CSS或JS實現自己想要的樣式或效果：

在打開連結處JS代碼格式為：

 javascript:需要執行的代碼;

三、最終實現

（1）波浪特效所需要的外部JS和CSS已經封裝在代碼中，你只需要將如下代碼添加到：【用例】-【頁面載入時】-【打開連結】-【當前窗口】-【連結到URL或文件】-【超連結】 處。

如果你會Code可以把JS和CSS文件下載下來根據需要實現不同的效果…

javascript:$(「<link>」).attr({ rel: 「stylesheet」,type: 「text/css」,href: 「https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css」}).appendTo(「head」);
$(「<link>」).attr({ rel: 「stylesheet」,type: 「text/css」,href: 「https://cdn.lylares.com/wave/static/waves.min.css」}).appendTo(「head」);
$.getScript(「https://cdn.lylares.com/wave/static/js/waves.min.js」);

這段代碼通過Jquery向頁面引入了兩個CSS文件和一個JS文件其中：

$(「<link>」).attr({ rel: 「stylesheet」,type: 「text/css」,href: 「https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css」}).appendTo(「head」);

為預覽Demo網頁中所使用的圖標字體CSS，在實際項目中你可以刪掉，只保留第一行的javascript:和第三行及以後的代碼。

第三行及以後的代碼為材料設計按鈕波浪效果的核心CSS和JS文件。

這樣就實現了在Axure生成的HTML文件中自動加載外部的JS或CSS文件，接下來只需要在Axure軟體中進行簡單的按鈕添加或修改設置即可。

（2）按鈕設置：如下圖所示，在Axure中請在左上角設置按鈕的類別：Primary Button和Button。

1. Primary Button建議設置為方形按鈕，圓角不要太大，在方形按鈕下太大的圓角將會影響波浪效果，這也是目前的一個不完美的地方，後面應該會改進。
2. Button建議設置為圓形按鈕。

如果你是直接在元件庫中拖動的按鈕就無需設置，只需要注意兩種Button所對應的圓角樣式。

四、注意事項

文中代碼可能由於轉義的原因顯示不全，請以圖片中所示代碼為準，你也可以參考附件的rp文件。

五、原型RP下載

rp下載連結

 

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

題圖來自Unsplash，基於CC0協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}