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;去掉列表