Axure教程：隨機數字鍵盤

8 評論 3081 瀏覽 6 收藏 4 分鐘

文章講解了如何用Axure實現隨時數字鍵盤效果，一起來看看~

說到隨機數字鍵盤，我相信大家都不會覺得陌生，因為我們經常會碰到這種情況。

比如我們在買買買的時候，下單的最后一個節點就是輸入交易密碼（除非免密支付），細心的小伙伴可能會發現，有些電商平臺調出來的鍵盤就是隨機數字鍵盤，每次各個數字的位置都不固定并且每個數字都僅會顯示1次，不會重復。

今天呢，我就帶大家一起來看一下Axure中如何實現這種效果。

話不多說，還是按照我們以往的套路來講解。下文將從3個方面來展開。

01 需求分析

首先先來看一下這個具體的需求是什么？

需求也比較簡單：就是要做出一個隨機數字鍵盤，再加個小難度，其中清除和倒退2個按鍵位置固定，0-9數字位置隨機。

從上面的描述，我們看到關鍵詞“隨機”，小伙伴們會想到什么辦法來實現呢？

在Axure中實現這種效果的做法肯定不止一種，但比較簡單的一種方式就是用隨機函數random。

02 Axure關鍵點分析

1. 數字鍵盤

我們可以用前面章節講到的中繼器來搭建數字鍵盤，這里用到全局變量RandomNum

中繼器中有個字段Random，這個用來標識是否需要用到隨機函數，對于字母C和X該字段的值為1；0-9數字均為0，標識需要使用隨機函數來實現隨機排序

2. 隨機函數random

點擊獲取隨機鍵盤按鈕時 ，對0-9的數字使用隨機函數，并將結果寫入數字對應的Random字段中

這里用到數學函數random

按照Random字段的值從小到大排序（即升序），從而實現0-9數字的重新排序

03 效果展示

最后，我們來看一下最終效果，網址為：https://z87ajg.axshare.com

 

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

題圖來自Unsplash，基于CC0協議

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App
翠baby
9篇作品 54311總閱讀量
06-122266 瀏覽
這屆618，9塊9和1元購成主角
10-034764 瀏覽
關于一個數據概覽的復盤
10-161479 瀏覽
字節困在抖音里
10-202067 瀏覽
B2C-OMS產品總結（一）：策略管理
04-124955 瀏覽
兩種產品開發模式的底層邏輯
評論
評論請登錄

  1. 請問怎么固定C和X不動呢？似乎排序的時候C和X都會到末尾

    來自廣東 回復

  2. 你好，可以把這個原型分享一下嗎？看了上面的講述還是不明白，感謝

    來自廣東 回復

  3. 原型可以發我份參考嗎 小白做做練習 ??

    來自上海 回復

    1. 可以，注意有效期只有7天，需要的話及時下載。
      鏈接: https://pan.baidu.com/s/1Eta5QomlkmuV9xZUM4_Q8A 提取碼: k1te

      來自廣東 回復

    2. 文件剛上傳錯了，重新上傳了，注意有效期仍為7天。
      鏈接: https://pan.baidu.com/s/1kiMShyWEpiWkYSZ66XLblw 提取碼: 342w

      來自廣東 回復

    3. 感謝??

      來自上海 回復

    4. 總體的思想通過 中繼器對隨機數的排序實現隨機，不是很理解給index 10和11設置的步驟 如果不通過全局變量能做到嗎…

      來自上海 回復

    5. Axure很有趣的一個地方在于，同樣的交互效果可以用多種方式來實現。我這個案例用的是中繼器+全局變量來實現的，肯定還有其他實現方式的?？梢栽偎伎纪诰蛞幌?：）

      來自廣東 回復