我用Axure做了個(gè)計(jì)算器
這是一篇有趣的文章,本文作者是一只單身狗,昨天別人都在過七夕,而他在奮筆疾書:用Axure做了個(gè)計(jì)算器,與你分享~
始于顏值~
始于顏值~
始于顏值~
七夕了,我們不講技巧,我們看顏值(也有可能暴露我這個(gè)直男的審美)……
本次原型制作過程主要練習(xí)函數(shù)的使用。
Tips:
- Target:獲取目標(biāo)元件對(duì)象。目標(biāo)元件是指當(dāng)前交互動(dòng)作控制的元件。
- This:獲取當(dāng)前元件對(duì)象。當(dāng)前元件是指當(dāng)前添加交互動(dòng)作的元件。
- text:獲取元件對(duì)象的文本文字。
- Math.pow(x,y) :冪函數(shù),計(jì)算x的y次冪。準(zhǔn)備:
做臨時(shí)存儲(chǔ)用的元件,分別用來存儲(chǔ)“臨時(shí)數(shù)值”、“數(shù)值A(chǔ)”、“運(yùn)算符號(hào)”、“數(shù)值B”、“小數(shù)位數(shù)”。
Tips:
也可以用系統(tǒng)變量來存儲(chǔ),使用元件的好處在練習(xí)過程中可以隨時(shí)看到值的變化,便于查找問題。
數(shù)字鍵交互:
當(dāng)按下數(shù)字鍵時(shí),有兩種情況:
- 輸入整數(shù),“臨時(shí)數(shù)值”=[[Target.text*10+This.text]];
- 輸入小數(shù),“臨時(shí)數(shù)值”=[[Target.text+This.text/Math.pow(10,“小數(shù)位數(shù)”)]],并設(shè)置“小數(shù)位數(shù)”=“小數(shù)位數(shù)”+1。
Tips:
“小數(shù)位數(shù)”默認(rèn)值為0,當(dāng)點(diǎn)擊”.”時(shí),設(shè)置“小數(shù)位數(shù)”=1,通過“小數(shù)位數(shù)”是否為0來判斷輸入的是整數(shù)還是小數(shù)。
設(shè)置“小數(shù)位數(shù)”=“小數(shù)位數(shù)”+1一定要在“臨時(shí)數(shù)值”賦值之后進(jìn)行,否則你會(huì)發(fā)現(xiàn)莫名其妙多了個(gè)0。
運(yùn)算符號(hào)鍵交互:
賦值“運(yùn)算符號(hào)”。
這里定義1=+;2=-;3=*;4=/。
Tips:
“運(yùn)算符號(hào)”默認(rèn)值為0,每次運(yùn)算結(jié)束需要重新賦值到0。
邏輯
按下數(shù)字鍵——>賦值“臨時(shí)數(shù)值”——>“運(yùn)算符號(hào)”判斷——>賦值到“數(shù)值A(chǔ)”/“數(shù)值B”——>展示
當(dāng)“運(yùn)算符號(hào)”=0時(shí),我們將值賦予“數(shù)值A(chǔ)”;否則賦予“數(shù)值B”。
設(shè)置“數(shù)值A(chǔ)”/“數(shù)值B”交互如下:
這樣一個(gè)簡(jiǎn)單的計(jì)算就完成了,如果我們進(jìn)行連續(xù)計(jì)算呢?
將“=”的運(yùn)算結(jié)果不直接進(jìn)行展示,而是賦值到“數(shù)值A(chǔ)”,“數(shù)值A(chǔ)”的交互會(huì)自動(dòng)將值進(jìn)行展示。
這樣當(dāng)我們按下運(yùn)算符號(hào)鍵,“運(yùn)算符號(hào)”值將不為0,后續(xù)鍵入的數(shù)值則將賦值與B。
然后在按下運(yùn)算符號(hào)鍵時(shí),模擬點(diǎn)擊一次“=”。
Tips:
增加一個(gè)臨時(shí)存儲(chǔ)用的元件用來判斷是否清除臨時(shí)變量,當(dāng)每次點(diǎn)擊運(yùn)算符號(hào)后設(shè)置為清除。
至于為什么,大家做到這步自然就懂了……(來自單身狗的報(bào)復(fù),哈哈哈)
其他交互:
“±”=[[Target.text*-1]]
“%”=[[Target.text/100]]
案例訪問地址:
https://axhub.im/pro/32acf0e0782cceb6/phone.html
本文由 @fraidei 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖由作者提供
作者你是真的皮呀, ?
開心就好,但是開場(chǎng)白真的不是我寫的
服了!?。?!
iaxure了解一下,axshare慢~~~
axhub 打錯(cuò)了
這篇的開場(chǎng)刺痛了我……
可以介紹一下學(xué)習(xí)Axure的書籍嗎?我只學(xué)習(xí)做過一個(gè)訂餐的網(wǎng)站項(xiàng)目。
我是那種自己研究的性格,把軟件里面的菜單都點(diǎn)一遍差不多做產(chǎn)品原型圖就夠用;
當(dāng)然要看書的話,我推薦看小樓的Axure入門手冊(cè)、實(shí)戰(zhàn)手冊(cè)。