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

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

一、最終結果展示

體驗地址：。

交互說明：

• 點擊開始秒表即開始計時；
• 點擊暫停的時候秒表計時暫停；
• 點擊記錄後記錄當前的秒表數據；
• 點擊重置恢複初始狀态；
• 上方的當前時間随時獲取當前時間。

二、制作方式

1. 繪制所需要的元件

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

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

2. 全局變量的設計

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

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

3. 計時面闆的設置

計時面闆的狀态改變速度設置為1毫秒，然後狀态改變後的操作如上所示進行設置，則可以完成最小一位sa的遞增，同時将秒表的讀書進行設置為[[h]][[ha]]：[[m]][[ma]]：[[s]][[sa]]。

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

4. 進位面闆的設置

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

5. 記錄功能

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

6. 暫停功能以及重置

重置功能包括暫停在内，暫停的實現原理很簡單，即将動态面闆的狀态設置為state1，這樣動态面闆将不會繼續實現循環，整個程序運行停止。

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

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

總結

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

#專欄作家#

馬璐，人人都是産品經理專欄作家。關注産品設計以及用戶體驗，力求在技術一定的情況下将産品做到極緻，充分發揮技術的潛能。

本文原創發布于人人都是産品經理。未經許可，禁止轉載

題圖作者提供

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部