中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

最近在寫一個谷歌材料設計 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協議