Axure教程|使用中繼器制作可以保存記錄的秒表

9 評論 10654 瀏覽 28 收藏 6 分鐘

Axure中繼器是一個難點,但是其所帶來的好處也是很多的。雖然理論上通過各種功能的組合也可以實現中繼器的效果,但是制作過程要麻煩的多。本文將制作一個秒表實例,且通過中繼器來記錄秒表的數據。

秒表是手機中的常用軟件,其基本的功能有開始計時,暫停計時,重置以及保存記錄。本文將通過axure實現上述功能,該實例還是比較簡單的,其中最復雜的部分就是中繼器的使用。

一、最終結果展示

體驗地址:點擊此處。

交互說明:

  • 點擊開始秒表即開始計時;
  • 點擊暫停的時候秒表計時暫停;
  • 點擊記錄后記錄當前的秒表數據;
  • 點擊重置恢復初始狀態(tài);
  • 上方的當前時間隨時獲取當前時間。

二、制作方式

1. 繪制所需要的元件

本實例中沒有對制作的結果進行美化,力求制作的簡潔性。所以所有的元件都是直接繪制的,大致的繪制結果如下圖所示:

繪制中間的時間面板以及上方的當前時間,此外用小圓圈代表4個按鍵,下方的中繼器則是用來進行數據記錄的,當然此處的中繼器是0行,即不可見。這樣一個簡單的框架便得到了。

2. 全局變量的設計

如上圖所示定義全局變量,其中h以及ha表示分鐘的兩個位數。m以及ma表示秒鐘的兩個位數,s以及sa表示毫秒的兩個位數,l則是中繼器中的行數。

除了行數初始值為1行之外,所有的全局變量初始值全部設置為0。

3. 計時面板的設置

計時面板的狀態(tài)改變速度設置為1毫秒,然后狀態(tài)改變后的操作如上所示進行設置,則可以完成最小一位sa的遞增,同時將秒表的讀書進行設置為[[h]][[ha]]:[[m]][[ma]]:[[s]][[sa]]。

當然如果僅是如此,將會出現除去sa會進行改變之外其它位數不會發(fā)生變化的情況,因此還需要設置其進一位的規(guī)則。

4. 進位面板的設置

進位面板的設置如上圖所示,即通過條件判定的方式讓數據進位。比如:當sa達到9的時候歸于0且s加1,依次類推即可以得到最終結果。

5. 記錄功能

當點擊記錄之后的設置如上所示,首先添加一行,其中c0等于全局變量l而c1為計時器的數據,之后再給全局變量加1即可以實現目的。

6. 暫停功能以及重置

重置功能包括暫停在內,暫停的實現原理很簡單,即將動態(tài)面板的狀態(tài)設置為state1,這樣動態(tài)面板將不會繼續(xù)實現循環(huán),整個程序運行停止。

重置還需要將中繼器中的數據全部清除,此外將所有的全局變量恢復初始值。這樣就可以進行下一次的使用了。

至于當前時間的獲取則是時間函數的直接使用,當前時間等于“當前時間:[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]”。

總結

該實例的難度相對比較低,主要是對中繼器使用的練習以及條件判斷的學習。axure雖然僅僅是原型工具,但是如果靈活使用,可以完成很多的事情,從小游戲的制作到各種效果的實現都可以完成。

#專欄作家#

馬璐,人人都是產品經理專欄作家。關注產品設計以及用戶體驗,力求在技術一定的情況下將產品做到極致,充分發(fā)揮技術的潛能。

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

題圖作者提供

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 進位面板設置了動態(tài)面板嗎,為什么是方框狀態(tài)時沒找到狀態(tài)改變時的用例添加

    來自湖南 回復
  2. 這種視頻確實很多,常見的還有小樓一夜聽春雨。不過缺點是耗時挺久的,一個系列估計有幾十節(jié)課

    來自浙江 回復
  3. 為什么會有00:06:610這種時間 ?

    來自廣東 回復
    1. 大概,不,肯定是邏輯bug,其實挺容易理解的,就是sa變成了10。

      來自浙江 回復
  4. 發(fā)現你這個秒表有點問題,在9秒的時候,突然就蹦到十秒多了,中間有一秒貌似丟了

    來自廣東 回復
    1. 我剛想說,你就說了。

      來自廣東 回復
    2. 看了下,其實就是應該將進一的條件設置為大于等于10,嗯,這樣就ok了

      來自浙江 回復
    3. 嗯嗯,這樣啊,那可以多思考啊。

      來自浙江 回復