Axure實(shí)現(xiàn)Material Design的按鈕波浪特效

lylares
15 評(píng)論 9949 瀏覽 28 收藏 6 分鐘

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

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

一、效果預(yù)覽

(1)視頻預(yù)覽

點(diǎn)擊查看視頻

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

在線預(yù)覽

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

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

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

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

在打開(kāi)鏈接處JS代碼格式為:

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

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

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

如果你會(huì)Code可以把JS和CSS文件下載下來(lái)根據(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”);

這段代碼通過(guò)Jquery向頁(yè)面引入了兩個(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)頁(yè)中所使用的圖標(biāo)字體CSS,在實(shí)際項(xiàng)目中你可以刪掉,只保留第一行的javascript:和第三行及以后的代碼。

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

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

(2)按鈕設(shè)置:如下圖所示,在Axure中請(qǐng)?jiān)谧笊辖窃O(shè)置按鈕的類別:Primary Button和Button。

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

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

四、注意事項(xiàng)

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

五、原型RP下載

rp下載鏈接

 

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 厲害,感謝分享!

    來(lái)自北京 回復(fù)
  2. 點(diǎn)擊動(dòng)作都沒(méi) 也不知道你們是怎么學(xué)會(huì)的

    來(lái)自北京 回復(fù)
    1. 如果還需要設(shè)置點(diǎn)擊動(dòng)作,那還加載那個(gè)外部js干什么呢。。。做這個(gè)的初衷就是為了最簡(jiǎn)單化修改按鈕的初始點(diǎn)擊效果。

      來(lái)自重慶 回復(fù)
  3. 學(xué)習(xí)了,感謝

    來(lái)自北京 回復(fù)
  4. 厲害了學(xué)習(xí),學(xué)習(xí)。

    來(lái)自浙江 回復(fù)
  5. 下載的源文件也沒(méi)有效果啊,點(diǎn)了也沒(méi)反應(yīng)

    來(lái)自上海 回復(fù)
  6. 厲害了我的哥

    來(lái)自江蘇 回復(fù)
  7. 實(shí)在是在震撼了,原來(lái)Axure還可以做到點(diǎn)呢?。?!

    來(lái)自上海 回復(fù)
  8. 密碼呢

    回復(fù)
  9. 厲害,學(xué)習(xí)一下

    回復(fù)
  10. 為何跟著操作做還沒(méi)有效果?代碼沒(méi)問(wèn)題呀

    來(lái)自廣東 回復(fù)
    1. 姿勢(shì)不對(duì)?F5 預(yù)覽不行的,效果只能生成html后才能看到??。

      回復(fù)
  11. ??

    來(lái)自廣東 回復(fù)
  12. 多謝分享

    來(lái)自上海 回復(fù)