Axure实现模拟拨打电话和真实拨打电话

Axure模拟拨打电话

Axure RP是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理 。

1.打开Axure，新建空白页面

2.用矩形元件绘制手机边框

3.新建动态面板，设置拨号状态和通话状态

4.编辑通话状态

（1）设置通话状态背景色为黑色，并设置接收号码的文本框

（2）添加接收城市的文字域并设置样式

（3）添加显示通话状态的文字域并添加交互

（4）添加挂断元件，并添加交互

5.编辑拨号页面

（1）添加号码输入的文本区域

• 拖入文本框元件，并调整到合适大小

• 设置文本框的提示文字和样式
  
  

（2）绘制号码键区域

• 先制作一号键，拖入矩形元素并调整到合适大小，输入键内号码
  

• 为该矩形元件添加交互事件，使其通过点击将号码输入到上面的文本框中
  

• 复制号码键1，修改内容和名称，完成其他号码键的制作
  

注意：0号键需要更改交互事件才能输入

（3）绘制底部导航栏

• 添加元件并修改样式
  
• 为删除按钮添加交互

• 为拨打按钮添加交互
  

（4）绘制通话记录区域

• 将号码城市文本域和图形元件放到一个矩形区域中，并组合
  
• 为组合添加交互，使其跳转到通话界面，并将号码和城市传值到通话页面相应区域
  
  
  
• 复制该组合并修改其内容和名称，形成通话记录
  

真实拨打电话

1.去掉拨号页面前面步骤同模拟拨号，修改拨打按钮的交互

2.修改通话记录的交互事件

3.实现手机演示

• 生成HTML文件，并压缩
• 将压缩包上传至https://www.wulihub.com.cn/user/login生成演示链接
• 将网址更改为c=2；去掉列表