最近在寫一個(gè)谷歌材料設(shè)計(jì) Material Design風(fēng)格的WEB產(chǎn)品，在開發(fā)過程中將產(chǎn)品原型做成了Axure元件庫，當(dāng)然目前沒有完全完成。本文將以實(shí)現(xiàn)谷歌材料設(shè)計(jì)按鈕的波浪特效為例，提供一種新的自定義Axure元件樣式的方法。

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

一、效果預(yù)覽

（1）視頻預(yù)覽

點(diǎn)擊查看視頻

（2）網(wǎng)頁預(yù)覽

在線預(yù)覽

二、實(shí)現(xiàn)原理

（1）波浪效果的實(shí)現(xiàn)需要特定的CSS和JS文件，但是在Axure里我們并不能直接Code。

（2）Axure提供了【當(dāng)前窗口打開鏈】的接口，通過這個(gè)接口可以直接加載Javascript，它提供了Axure和前端代碼直接交互的能力，正因?yàn)檫@樣，Axure在前端樣式和交互上有了更加廣闊的擴(kuò)展空間。

所以我們可以將外部CSS或JS文件放到Javascript中，通過在【頁面載入】的時(shí)候，添加用例【當(dāng)前窗口打開鏈接】來加載外部CSS或JS實(shí)現(xiàn)自己想要的樣式或效果：

在打開鏈接處JS代碼格式為：

?javascript:需要執(zhí)行的代碼;

三、最終實(shí)現(xiàn)

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

如果你會(huì)Code可以把JS和CSS文件下載下來根據(jù)需要實(shí)現(xiàn)不同的效果…

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向頁面引入了兩個(gè)CSS文件和一個(gè)JS文件其中：

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

為預(yù)覽Demo網(wǎng)頁中所使用的圖標(biāo)字體CSS，在實(shí)際項(xiàng)目中你可以刪掉，只保留第一行的javascript:和第三行及以后的代碼。

第三行及以后的代碼為材料設(shè)計(jì)按鈕波浪效果的核心CSS和JS文件。

這樣就實(shí)現(xiàn)了在Axure生成的HTML文件中自動(dòng)加載外部的JS或CSS文件，接下來只需要在Axure軟件中進(jìn)行簡單的按鈕添加或修改設(shè)置即可。

（2）按鈕設(shè)置：如下圖所示，在Axure中請?jiān)谧笊辖窃O(shè)置按鈕的類別：Primary Button和Button。

1. Primary Button建議設(shè)置為方形按鈕，圓角不要太大，在方形按鈕下太大的圓角將會(huì)影響波浪效果，這也是目前的一個(gè)不完美的地方，后面應(yīng)該會(huì)改進(jìn)。
2. Button建議設(shè)置為圓形按鈕。

如果你是直接在元件庫中拖動(dòng)的按鈕就無需設(shè)置，只需要注意兩種Button所對(duì)應(yīng)的圓角樣式。

四、注意事項(xiàng)

文中代碼可能由于轉(zhuǎn)義的原因顯示不全，請以圖片中所示代碼為準(zhǔn)，你也可以參考附件的rp文件。

五、原型RP下載

rp下載鏈接

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

題圖來自Unsplash，基于CC0協(xié)議