Axure教程:進(jìn)階版倒計(jì)時(shí)

2 評(píng)論 4909 瀏覽 10 收藏 6 分鐘

這個(gè)原型是作者根據(jù)上一篇文章《Axure教程:獲取驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)》,發(fā)散思維想到去做的一個(gè)原型案例,在這里分享出來,希望可以幫助到一樣剛起步的產(chǎn)品小白。

如果該教程較難,建議先觀看我做的第一個(gè)倒計(jì)時(shí)(簡單版),操作步驟更為詳細(xì):http://theventurebank.com/rp/3133460.html。

開門見山,我們先來看看效果↓

預(yù)覽圖:

預(yù)覽網(wǎng)址:https://jxvo3f.axshare.com

所需元件

一個(gè)命名為“觸發(fā)器”的動(dòng)態(tài)面板(兩個(gè)面板狀態(tài))、一個(gè)命名為“秒”的矩形,并填入文字“10”、一個(gè)命名為“分”的矩形,并填入文字“01”、一個(gè)命名為“時(shí)”的矩形,并填入文字“01”、兩個(gè)“:”矩形、一個(gè)填充色為黃色的背景矩形。

操作步驟

(1)設(shè)置動(dòng)態(tài)面板交互——載入時(shí)

這個(gè)交互的作用是一直觸發(fā)動(dòng)態(tài)面板的下一個(gè)交互——狀態(tài)改變時(shí)。

(2)設(shè)置動(dòng)態(tài)面板第二個(gè)交互——狀態(tài)改變時(shí)(Case 1)

這里就不列舉詳細(xì)操作步驟了,較為詳細(xì)的步驟就在我的開頭的文章里面有介紹。

Case1的作用是:“當(dāng)“秒”矩形內(nèi)的數(shù)值大于0時(shí)則自減1”。

(3)設(shè)置動(dòng)態(tài)面板第三個(gè)交互——狀態(tài)改變時(shí)(Case 2)

Case2里多了一個(gè)條件,那么Axure如何設(shè)置多個(gè)條件呢?只需要在“編輯條件”里面再點(diǎn)擊一下紅圈里面的加號(hào)即可添加多一個(gè)條件了。

Case2的作用是:“當(dāng)“秒”矩形內(nèi)數(shù)值為0時(shí),“分”矩形內(nèi)數(shù)值減1,“秒”矩形內(nèi)數(shù)值設(shè)為59”。

(4)設(shè)置動(dòng)態(tài)面板第四個(gè)交互——狀態(tài)改變時(shí)(Case 3)

Case3的作用是:“當(dāng)“秒”矩形內(nèi)數(shù)值為0且“分”矩形內(nèi)數(shù)值也為0時(shí),則“時(shí)”矩形內(nèi)數(shù)值減1,且“分”矩形數(shù)值設(shè)為59,“秒”矩形數(shù)值設(shè)為59”

(5)大功告成,按F5預(yù)覽看看效果

小記

(1)如果預(yù)覽時(shí)覺得看數(shù)值變化太慢了,可以把動(dòng)態(tài)面板的交互——載入時(shí)的循環(huán)間隔時(shí)間設(shè)置為1ms。

(2)這個(gè)原型有一個(gè)缺陷,就是當(dāng)?shù)褂?jì)時(shí)倒數(shù)到個(gè)位數(shù)時(shí),無法顯示為“09、08、07”這樣子,在個(gè)位數(shù)前面補(bǔ)0,當(dāng)然簡單的替換方案就是在“時(shí)”“分”“秒”矩形前面加一個(gè)隱藏的0,并設(shè)置顯示時(shí)的條件為:“當(dāng)“時(shí)”“分”“秒”矩形內(nèi)的數(shù)值低于10時(shí)顯示并在大于10時(shí)隱藏即可”。但是如何通過函數(shù)實(shí)現(xiàn),期望有大佬可以來講解一下。

(3)該原型的適用場(chǎng)景有很多,比如說現(xiàn)在許多商城的限時(shí)搶購都會(huì)用到時(shí)分秒的倒計(jì)時(shí)。學(xué)會(huì)了就可以應(yīng)用在這些場(chǎng)景里面了(??????)??

(4)正式使用時(shí),記得要將僅僅用來實(shí)現(xiàn)倒計(jì)時(shí)功能的動(dòng)態(tài)面板隱藏掉。這里我為了展示效果所以沒有隱藏。

(5)這個(gè)原型是根據(jù)我的上一篇文章《Axure教程:獲取驗(yàn)證碼倒計(jì)時(shí)的實(shí)現(xiàn)》,發(fā)散思維想到去做的一個(gè)原型案例,在這里分享出來,希望可以幫助到和我一樣剛起步的產(chǎn)品小白。

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 照著步驟倒是做出來了,與你不同的是,計(jì)時(shí)器部分在閃爍,并非state1中的矩形

    來自福建 回復(fù)
    1. 為何你的計(jì)時(shí)器會(huì)閃爍

      來自廣東 回復(fù)