Axure入門案例系列——Axure制作氣泡閃動圖

3 評論 7048 瀏覽 6 收藏 6 分鐘

編輯導(dǎo)讀:閃動的氣泡在產(chǎn)品中是很常見的功能,用以動態(tài)的提示。本文作者用Axure進行案例演示,分析如何用Axure制作氣泡閃動圖,希望對你有幫助。

在一些常見的大屏可視化中,均會以閃動的氣泡作為一些提示符,進行動態(tài)的提示。

一、準(zhǔn)備

  • Axure 9(或Axure 8、10)軟件已安裝。
  • 掌握基本的軟件使用。

二、本教程知識點

  • 交互動效延時
  • 填充的漸變樣式
  • 連續(xù)動態(tài)的交互實現(xiàn)

三、詳細(xì)教程

1. 功能

實現(xiàn)目標(biāo)元件在界面中持續(xù)的動態(tài)變化。

2. 制作方式(以均勻變化為例)

1)利用元件的載入交互,設(shè)定元件的尺寸變化

  • 尺寸的設(shè)置,相對于原始的尺寸進行變化。例如設(shè)置尺寸比原始尺寸小,則先進行變小的動效。
  • 中心點選擇,中心點絕對了以什么為中心進行縮放(放大),常規(guī)選擇中心。
  • 動畫時長,若不進行動畫時長的設(shè)置,將會以很快的速度進行加載?;驹陬A(yù)覽界面出來時已經(jīng)加載完成。此處為了又相對縮放(放大)的效果,需設(shè)定時長。

注:1秒為1000毫秒。通過設(shè)置300-500毫秒,時間越短,交互的動銷變化越快。

2)利用元件的尺寸改變時交互,進行持續(xù)的交互延續(xù)

整體的交互效果就是為“ 大(原始狀態(tài))– 小 — 大 — 小 ”的循環(huán),在此處可以借助元件的尺寸改變進行連續(xù)的觸發(fā)交互。

首先設(shè)定對應(yīng)尺寸恢復(fù)至原始大小(或差不多的尺寸)。設(shè)置同等的動畫時長。

  • 重點:為了保證交互的連續(xù),此處的動畫時長應(yīng)該于載入時的交互一致,才可達到勻速收縮。若想實現(xiàn)縮放非勻速可進行時間的差異化設(shè)定。
  • 關(guān)于尺寸,尺寸恢復(fù)至原始大小,若涉及漸變可以少或多幾個像素,這樣看起來交互能夠自然。

恢復(fù)至原始大小后,再重復(fù)設(shè)定縮小的交互。設(shè)置縮小的屬性通載入時縮小的屬性即可。

3. 其它相關(guān)知識點

1)如何設(shè)置連續(xù)持續(xù)由小變大

只需在“ 大(原始狀態(tài))– 小 — 大 — 小 ”的狀態(tài)中的最后一個環(huán)節(jié)(“ 大(原始狀態(tài))– 小 — 大 — 小 ”)中移除動畫時長即可。移除動畫時長,對應(yīng)元件會瞬間變小進行后續(xù)的循環(huán)。

2)如何處理漸變效果

此處案例的漸變是通過元件填充的顏色中的徑向?qū)崿F(xiàn)。

  • 可以進行畫布放大進行調(diào)整徑向細(xì)節(jié)。
  • 顏色多重過渡時主要過渡的自然。
  • 每個關(guān)鍵點可以進行單獨的透明度調(diào)整,可以通過透明度進行相關(guān)效果的調(diào)整。

3)如何設(shè)置圖標(biāo)的變化

圖標(biāo)的效果變化其實和上述案例的設(shè)置一致,只需將對應(yīng)的交互效果設(shè)定在圖標(biāo)上即可。

四、總結(jié)

部分交互效果無法一次性實現(xiàn),可以適用交互動作的嵌套進行實現(xiàn)。

#專欄作家#

Brose,微信公眾號:PMYX,人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注廣告營銷、K12教育、智慧零售。擅長系統(tǒng)需求挖掘與功能設(shè)計。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 做了三個交互后怎么循環(huán)呀

    來自四川 回復(fù)
  2. 不反對搬運,可以這圖那么糊咋看啊

    來自江蘇 回復(fù)
    1. 1、文章為原創(chuàng)
      2、利用了官方的知乎文章直接導(dǎo)入,過來的圖就是這樣,下次我直接上傳原圖,不使用導(dǎo)入吧

      來自四川 回復(fù)