Axure 8.0實例 | APP新版本下載

4 評論 7629 瀏覽 16 收藏 5 分鐘

APP新版本更新是常見的事,本文就和大家探討新版本的下載在Axure中是如何實現的。

預覽:

元件準備

  1. 全局變量:添加全局變量number,用于模擬隨機下載;
  2. 添加三個矩形框,分別取名“下載大小”、“版本大小1”、“版本大小”,其中“版本大小1”和“版本大小”重合放在一起,且隱藏“版本大小”;
  3. 添加一個矩形框,作為更新按鈕,取名“立即更新”,元件文字為“立即更新”,;
  4. 動態面一個,取名“下載進度”,動態面板中放置一個與立即更新大小一樣的矩形框(顏色不一致);
  5. 添加一個矩形框,作為進度總長度,取名“進度總長度”,顏色大小和“立即更新”一致,并隱藏;
  6. 檢查更新功能,發現新版本增加熱區,用以更新操作;
  7. 添加一個矩形框,用于其他部件,如:最新版本、新版特性等,自行根據需要準備;“立即更新”、“下載大小”、“下載進度”、“進度總長度”四者重合放置,“立即更新”放在最上層,“下載大小”和“進度總長度”隱藏,備用。

添加用例

(1)發現新版本熱區添加用例,在點擊熱區時,通過隨機函數random()生成一個數值作為本次更新的版本大小,?然后將random()生成的數值賦給“版本大小”。

接著設置“版本大小1”的文字為“版本大小”的數值加上M。

然后顯示版本更新的彈框。

(2)立即更新添加用例

case1:

①設置全局變量number

②設置“下載大小”文本

③設置“下載進度”的尺寸,主要是寬度,高度保持不變即可

④隱藏“立即更新”,并顯示“進度總長度”、“下載大小”、“下載進度”

case2:

判斷全局變量number的值是否小于“版本大小”的值,如果小于則再次出發“立即更新”的事件。

否則結束觸發“立即更新”的用例,設置“下載大小”的文字為下載完成后的樣式,及下載大小/版本大小M。

預覽

至此,APP升級原型已完成。

 

作者:無淚,個人公眾號:楊小貝,一起探討原型設計

本文由 @無淚 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 為什么我做出來之后,只有0.幾M…..

    來自山東 回復
    1. 這個我已經做出來了,我只是想了解一下,他為什么數值會那莫小

      來自山東 回復
  2. 太棒了,能分享一下原型文件嗎?

    來自北京 回復
    1. 感謝,已下載

      來自北京 回復