Axure8.0原型案例:制作手機撥號界面

14 評論 36108 瀏覽 96 收藏 5 分鐘

今早上在去公司的班車上打開手機撥號界面,突然想怎么能用Axure把它做出來,到了公司花了半小時就做出來,然后把制作過程分享給大家。

效果描述

手機撥號,想必大家都知道,就是點擊數字時有按下反饋,且會組成一串手機號碼,同時按錯數字,會有撤退按鈕刪除剛輸入的數字,效果鏈接:http://flpa2p.axshare.com

一、首先畫頁面原型

主要元件為無邊框文本框“顯示”(設置輸入文字為居中),數字按鍵“1”、“2”….(設置白色圓形背景),撤銷按鈕“撤銷”。

手機撥號

二、添加交互事件

1、為數字按鍵添加鼠標按下狀態

  • 全部選中數字按鍵,在右側統一設置交互樣式為“鼠標按下時,填充顏色為綠色、字體顏色為白色”,即鼠標點擊時顯示綠色背景+白色文字,松開恢復默認狀態。

QQ截圖20161213181053

2、為數字按鍵添加“鼠標單擊該數字按鍵時,在顯示框依次顯示單擊的數字”,即執行“單擊數字按鍵設置顯示框文本為…”命令。

  • 選中數字按鍵“1”,設置鼠標單擊時,設置文本-選擇“顯示”文本框;
  • 點擊fx,設置文本框顯示文本,因為文本框里的值是變化的,我們設置局部變量LAVR1=元件文字=“顯示”,然后設置fx=[[LVAR1]]1,即上一個變量值后面再顯示剛剛單擊的數字1,注意不是[[LVAR1]]+1,那就變成加法了;
  • 為其他數字按鍵也添加這個命令,設置fx=[[LVAR1]]2、[[LVAR1]]3…,這樣就完成了“鼠標單擊數字按鍵時,在文本框依次顯示單擊的數字”。

QQ截圖20161213175902

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)]],設置好并確認,就達到了“點擊撤銷按鈕,文本框會相應刪除一個數字”的效果。

QQ截圖20161213175801

按下“F5”生成Html預覽一下吧!

今天主要通過局部變量和兩個函數LVAR.substring(from,to)、LVAR.length來做手機撥號,希望大家能通過練習掌握,有什么問題大家可以一起交流學習呀。

 

本文由 @ 一位焦戶 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 您好~想問您‘*’和‘#’號這兩個怎么顯示出來,我做的這倆個都不能撥出來 ??

    來自北京 回復
  2. 感謝,對想入行的新手來說受益良多?。ㄓ謱W會了一個交互~哈哈 ?? )

    來自重慶 回復
  3. 您還,清完下。為啥我的axure8.0,添加局部變量那里沒有【顯示】

    來自上海 回復
    1. 沒有看到具體的,也不知道是怎么回事,你加個qun 417203171 我給你看看

      來自江蘇 回復
    2. “顯示”是給元件啟動名字

      來自四川 回復
    3. 是給元件起的名字

      來自四川 回復
    4. 嗯 是的

      來自江蘇 回復
    5. 棒棒噠

      來自江蘇 回復
  4. 函數好難 ?? 理解不了

    來自江蘇 回復
    1. 嗯,需要有前端基礎,不過Axure做原型只是表達設計方案,沒必要做出什么炫酷吊炸天的動效,會基本的就可以

      來自江蘇 回復
  5. 謝謝,能否加個微信?

    回復
    1. 微信號lcq1218best

      來自江蘇 回復
  6. 不用做這么高保真的

    來自廣東 回復
    1. 嗯,強迫癥又犯了

      來自江蘇 回復