Axure8.0原型案例:制作手機撥號界面
今早上在去公司的班車上打開手機撥號界面,突然想怎么能用Axure把它做出來,到了公司花了半小時就做出來,然后把制作過程分享給大家。
效果描述
手機撥號,想必大家都知道,就是點擊數字時有按下反饋,且會組成一串手機號碼,同時按錯數字,會有撤退按鈕刪除剛輸入的數字,效果鏈接:http://flpa2p.axshare.com
一、首先畫頁面原型
主要元件為無邊框文本框“顯示”(設置輸入文字為居中),數字按鍵“1”、“2”….(設置白色圓形背景),撤銷按鈕“撤銷”。
二、添加交互事件
1、為數字按鍵添加鼠標按下狀態
- 全部選中數字按鍵,在右側統一設置交互樣式為“鼠標按下時,填充顏色為綠色、字體顏色為白色”,即鼠標點擊時顯示綠色背景+白色文字,松開恢復默認狀態。
2、為數字按鍵添加“鼠標單擊該數字按鍵時,在顯示框依次顯示單擊的數字”,即執行“單擊數字按鍵設置顯示框文本為…”命令。
- 選中數字按鍵“1”,設置鼠標單擊時,設置文本-選擇“顯示”文本框;
- 點擊fx,設置文本框顯示文本,因為文本框里的值是變化的,我們設置局部變量LAVR1=元件文字=“顯示”,然后設置fx=[[LVAR1]]1,即上一個變量值后面再顯示剛剛單擊的數字1,注意不是[[LVAR1]]+1,那就變成加法了;
- 為其他數字按鍵也添加這個命令,設置fx=[[LVAR1]]2、[[LVAR1]]3…,這樣就完成了“鼠標單擊數字按鍵時,在文本框依次顯示單擊的數字”。
3、設置點擊“撤銷”按鈕,文本框“顯示”會相應刪除一個數字。也是執行“單擊撤銷按鍵設置顯示框文本為…”命令。
- 選中“撤銷”按鈕,設置鼠標單擊時,設置文本-選擇“顯示”文本框。
- 點擊fx,設置文本框顯示文本,設置局部變量LAVR1=元件文字=“顯示”,設置fx=[[LVAR1]]??,該怎么設置呢?這時我們用到一個函數“substring(from,to)”,即從截取變量的第from位到to位字符串,舉例LVAR=123456,那截取第1位到第4位字符串LVAR.substring(1,4)=234(從第1位,不包括第1位的數字,到第4位包括第4位的數字,所以為234,而不是1234)。
- 點擊“撤銷”按鍵,文本框應該截取0位到倒數第2位的字符串,那倒數第2位該怎么表示,這時又用到一個函數LVAR.length,即變量值字符串長度,這里可以理解為字符串數字個數,那倒數第2位就表示為LVAR.length-1。所以fx=[[LVAR1.substring(0,LVAR1.length-1)]],設置好并確認,就達到了“點擊撤銷按鈕,文本框會相應刪除一個數字”的效果。
按下“F5”生成Html預覽一下吧!
今天主要通過局部變量和兩個函數LVAR.substring(from,to)、LVAR.length來做手機撥號,希望大家能通過練習掌握,有什么問題大家可以一起交流學習呀。
本文由 @ 一位焦戶 原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
您好~想問您‘*’和‘#’號這兩個怎么顯示出來,我做的這倆個都不能撥出來 ??
感謝,對想入行的新手來說受益良多?。ㄓ謱W會了一個交互~哈哈 ?? )
您還,清完下。為啥我的axure8.0,添加局部變量那里沒有【顯示】
沒有看到具體的,也不知道是怎么回事,你加個qun 417203171 我給你看看
“顯示”是給元件啟動名字
是給元件起的名字
嗯 是的
棒棒噠
函數好難 ?? 理解不了
嗯,需要有前端基礎,不過Axure做原型只是表達設計方案,沒必要做出什么炫酷吊炸天的動效,會基本的就可以
謝謝,能否加個微信?
微信號lcq1218best
不用做這么高保真的
嗯,強迫癥又犯了