上篇文章《Axure教程：可使用的計算器demo制作（上）》，講完了數(shù)字鍵0、1…9以及其他幾個鍵的事件設(shè)置，這篇文章補(bǔ)充講完+／-鍵、%鍵的事件寫法，完成整個計算器demo的制作，建議先看完上一篇。下面繼續(xù)完成事件設(shè)置～

1、%鍵的事件設(shè)置

點(diǎn)選%鍵，鼠標(biāo)單擊時，設(shè)置屏幕文字為[[LVAR1%100]]，其中LVAR1為局部變量，表示原屏幕文字。

解析：計算器里%鍵表示的是求屏幕數(shù)字的百分比，所以點(diǎn)擊時，設(shè)置原屏幕文字除以100即可；值得說明的事，在Axure運(yùn)算函數(shù)中，%運(yùn)算代表的是求余數(shù)（上篇文章講到的，+號代表加法運(yùn)算，-代表減法運(yùn)算，*號代表乘法運(yùn)算，／號代表除法運(yùn)算），如設(shè)置單擊某按鈕，設(shè)置按鈕文字為[[7%2]]，觸發(fā)事件時，則按鈕文字會變?yōu)?。

2、+/-鍵的事件設(shè)置

點(diǎn)選+/-鍵，鼠標(biāo)單擊時，編輯條件，設(shè)置條件當(dāng)屏幕文字不包含-時，設(shè)置屏幕文字為-[[LVAR1]]，其中LVAR1表示原屏幕文字。

接著，繼續(xù)添加+/-鍵的單擊用例case 2，設(shè)置屏幕文字為[[LVAR1.slice(1,LVAR1.length)]]，其中LVAR1表示原屏幕文字。

解析：關(guān)于+/-鍵寫法的思路，+/-鍵其實(shí)就是設(shè)置屏幕文字為原屏幕文字的相反數(shù)。當(dāng)屏幕為正數(shù)時（即屏幕文字不包含-號情況），在原屏幕文字前加上-號，否則（即當(dāng)屏幕文字包含-號情況），去除原屏幕文字前方的-號，保留-號后面的文字即可（此時需要運(yùn)用到兩個字符串函數(shù)，解析見下方）。

slice(start,end)函數(shù)：此為截取字符串函數(shù)，表示截取某字符串從第n位，到第m位的字符，返回的結(jié)果為一串新的字符串。完整寫法為[[LVAR.slice(start,end)]]，LVAR表示原字符串文字，satrt表示開始截取的位數(shù)n，end表示結(jié)束截取的位數(shù)m，返回結(jié)果新字符串包括原字符串第n位的字符，但不包括第m位的字符，且字符串從0開始計位，例如：字符串a(chǎn)b165，第0位為a，第1位為b，第2位為1…以此類推，若此時要從該字符串里截取出新的字符串b16，則寫法應(yīng)為[[LVAR1.slice(1,4)]]，其中LVAR1為局部變量代表原字符串a(chǎn)b165文字。

length函數(shù)：此為字符串長度函數(shù)，求取某字符串的長度，返回的結(jié)果為一個數(shù)字。完整寫法為[[LVAR.length]]，其中LVAR代表所求的字符串文字，如上述字符串a(chǎn)b165，求其長度具體寫法為[[LVAR1.length]]，LVAR1為局部變量代表字符串a(chǎn)b165文字，返回結(jié)果為5。

3、舊鍵事件修改完善

數(shù)字鍵1、2…9事件修改完善

以數(shù)字鍵7為例，點(diǎn)選數(shù)字鍵7，添加單擊時用例case 3，編輯條件，當(dāng)屏幕文字等于“-0”時，設(shè)置屏幕文字為-[[This.text]]，并將case 3上移到事件最上方（右擊case 3事件，選擇事件上移動，或直接點(diǎn)擊case 3整個事件，按住鼠標(biāo)拖動到事件最上方），數(shù)字鍵7完整事件見上圖右側(cè)紅框。

刪除1、2、3、4、5、6、8、9數(shù)字鍵的事件，將數(shù)字鍵7的單擊事件復(fù)制到這些數(shù)字鍵，完成1到9數(shù)字鍵的最終事件。

解析：因?yàn)?/-鍵事件的寫入，存在了當(dāng)屏幕文字為-0的特殊情況（計算器默認(rèn)屏幕文字為0，默認(rèn)判斷條件為替換，此時點(diǎn)擊+/-鍵，則屏幕會出現(xiàn)該情況），在該情況下，點(diǎn)擊數(shù)字鍵1、2…9等，應(yīng)將0替換為所點(diǎn)擊的數(shù)字，若此時依舊用原事件，則屏幕顯示為-0時，點(diǎn)擊7，則屏幕文字會顯示為7，與現(xiàn)實(shí)計算器效果不符合。

事件的執(zhí)行是由上往下執(zhí)行的，以上述數(shù)字鍵7為例，會先執(zhí)行屏幕文字為“-0”情況，如果屏幕文字不為“-0”，則繼續(xù)執(zhí)行判斷文字為“替換”情況，如果判斷文字不為“替換”，再繼續(xù)執(zhí)行判斷文字為“連接”情況的事件。

數(shù)字鍵0事件修改完善

點(diǎn)選數(shù)字鍵0，添加單擊事件新用例case 3，編輯條件當(dāng)屏幕文字為“-0”時，設(shè)置屏幕文字為“-0”，并將case 3移動至事件最上方，原理與數(shù)字鍵7相同。

小數(shù)點(diǎn)鍵事件修改

點(diǎn)選小數(shù)點(diǎn)鍵，添加單擊事件新用例case 2，編輯條件當(dāng)判斷文字等于“替換”時，設(shè)置屏幕文字為“0.”，設(shè)置判斷文字為“連接”，禁用小數(shù)點(diǎn)，并將case 2事件上移，完整小數(shù)點(diǎn)事件見上圖右側(cè)紅框。

解析：原來的寫法存在bug，即當(dāng)完成一次算術(shù)運(yùn)算后，如3+4，點(diǎn)擊等號鍵后，屏幕文字為“7”，判斷文字為“替換”，若沿用之前寫法，此時點(diǎn)擊小數(shù)點(diǎn)鍵，則屏幕文字將顯示為“7.”，與現(xiàn)實(shí)計算器效果不符。添加判斷條件，則可避免該bug出現(xiàn)。

完成上述所有操作，則一個完整有效的計算器demo就全部完成。

通過這個實(shí)例告訴我們，在原型的設(shè)計過程中，原型組件的事件不可能一蹴而就，組件與組件之間，事件可能存在相互影響的關(guān)系，只有通過一次次邏輯思考，進(jìn)行修改完善，才能達(dá)到你期望的效果。

所以，原型設(shè)計的核心思想是：產(chǎn)品做什么，邏輯與判斷條件是什么，它側(cè)重表達(dá)業(yè)務(wù)需求；與之相關(guān)的還有一個概念“交互設(shè)計”，其核心思想是：產(chǎn)品怎么做，它側(cè)重點(diǎn)在于用戶體驗(yàn)設(shè)計。

作者：五月，微信公眾號：wuyuepd。

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