Axure教程:隨機(jī)數(shù)字鍵盤

8 評(píng)論 3312 瀏覽 6 收藏 4 分鐘

文章講解了如何用Axure實(shí)現(xiàn)隨時(shí)數(shù)字鍵盤效果,一起來(lái)看看~

說(shuō)到隨機(jī)數(shù)字鍵盤,我相信大家都不會(huì)覺得陌生,因?yàn)槲覀兘?jīng)常會(huì)碰到這種情況。

比如我們?cè)谫I買買的時(shí)候,下單的最后一個(gè)節(jié)點(diǎn)就是輸入交易密碼(除非免密支付),細(xì)心的小伙伴可能會(huì)發(fā)現(xiàn),有些電商平臺(tái)調(diào)出來(lái)的鍵盤就是隨機(jī)數(shù)字鍵盤,每次各個(gè)數(shù)字的位置都不固定并且每個(gè)數(shù)字都僅會(huì)顯示1次,不會(huì)重復(fù)。

今天呢,我就帶大家一起來(lái)看一下Axure中如何實(shí)現(xiàn)這種效果。

話不多說(shuō),還是按照我們以往的套路來(lái)講解。下文將從3個(gè)方面來(lái)展開。

01 需求分析

首先先來(lái)看一下這個(gè)具體的需求是什么?

需求也比較簡(jiǎn)單:就是要做出一個(gè)隨機(jī)數(shù)字鍵盤,再加個(gè)小難度,其中清除和倒退2個(gè)按鍵位置固定,0-9數(shù)字位置隨機(jī)。

從上面的描述,我們看到關(guān)鍵詞“隨機(jī)”,小伙伴們會(huì)想到什么辦法來(lái)實(shí)現(xiàn)呢?

在Axure中實(shí)現(xiàn)這種效果的做法肯定不止一種,但比較簡(jiǎn)單的一種方式就是用隨機(jī)函數(shù)random。

02 Axure關(guān)鍵點(diǎn)分析

1. 數(shù)字鍵盤

我們可以用前面章節(jié)講到的中繼器來(lái)搭建數(shù)字鍵盤,這里用到全局變量RandomNum

中繼器中有個(gè)字段Random,這個(gè)用來(lái)標(biāo)識(shí)是否需要用到隨機(jī)函數(shù),對(duì)于字母C和X該字段的值為1;0-9數(shù)字均為0,標(biāo)識(shí)需要使用隨機(jī)函數(shù)來(lái)實(shí)現(xiàn)隨機(jī)排序

2. 隨機(jī)函數(shù)random

點(diǎn)擊獲取隨機(jī)鍵盤按鈕時(shí) ,對(duì)0-9的數(shù)字使用隨機(jī)函數(shù),并將結(jié)果寫入數(shù)字對(duì)應(yīng)的Random字段中

這里用到數(shù)學(xué)函數(shù)random

按照Random字段的值從小到大排序(即升序),從而實(shí)現(xiàn)0-9數(shù)字的重新排序

03 效果展示

最后,我們來(lái)看一下最終效果,網(wǎng)址為:https://z87ajg.axshare.com

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問(wèn)怎么固定C和X不動(dòng)呢?似乎排序的時(shí)候C和X都會(huì)到末尾

    來(lái)自廣東 回復(fù)
  2. 你好,可以把這個(gè)原型分享一下嗎?看了上面的講述還是不明白,感謝

    來(lái)自廣東 回復(fù)
  3. 原型可以發(fā)我份參考嗎 小白做做練習(xí) ??

    來(lái)自上海 回復(fù)
    1. 可以,注意有效期只有7天,需要的話及時(shí)下載。
      鏈接: https://pan.baidu.com/s/1Eta5QomlkmuV9xZUM4_Q8A 提取碼: k1te

      來(lái)自廣東 回復(fù)
    2. 文件剛上傳錯(cuò)了,重新上傳了,注意有效期仍為7天。
      鏈接: https://pan.baidu.com/s/1kiMShyWEpiWkYSZ66XLblw 提取碼: 342w

      來(lái)自廣東 回復(fù)
    3. 感謝??

      來(lái)自上海 回復(fù)
    4. 總體的思想通過(guò) 中繼器對(duì)隨機(jī)數(shù)的排序?qū)崿F(xiàn)隨機(jī),不是很理解給index 10和11設(shè)置的步驟 如果不通過(guò)全局變量能做到嗎…

      來(lái)自上海 回復(fù)
    5. Axure很有趣的一個(gè)地方在于,同樣的交互效果可以用多種方式來(lái)實(shí)現(xiàn)。我這個(gè)案例用的是中繼器+全局變量來(lái)實(shí)現(xiàn)的,肯定還有其他實(shí)現(xiàn)方式的??梢栽偎伎纪诰蛞幌?:)

      來(lái)自廣東 回復(fù)