0 前言

1 案例

1.1 目标效果

1.1.1 实现登录、注册、忘记密码、扫码登陆四个静态页面

1.1.2 实现动态行为

1.2 制作流程

1.2.1 准备活动

1.2.2 设计登录静态页面

1.2.3 设计注册静态页面

1.2.4 设计扫码登录静态页面

1.2.5 设计忘记密码静态页面

1.2.6 设计动态行为1

1.2.7 设置动态行为2

1.2.8 设置动态行为3

1.2.9 设置动态行为4

1.2.10 设置动态行为5

1.2.11 设置动态行为6

2 补充知识点--内联框架

0 前言

原型设计工具Axure RP能让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档，同时支持多人协作设计和版本控制管理。Axure RP的使用者非常广泛，包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师、架构师、程序员等等。Axure RP不仅能够设计静态页面，页能够设计动态交互行为。

1 案例

1.1 目标效果

1.1.1 实现登录、注册、忘记密码、扫码登陆四个静态页面

1.1.2 实现动态行为

动态行为1：在登录页面，鼠标移入时【注册】，【注册】的字和下划线由黑色变成红色，鼠标从【注册】移开，【注册】的字和下划线由红色变成黑色。左键单击【注册】会跳到注册页面。
动态行为2：在注册页面，鼠标移入时【登录】，【登录】的字和下划线由黑色变成红色，鼠标从【登录】移开，【登录】的字和下划线由红色变成黑色。左键单击【登录】后跳到注册页面。
动态行为3：在登录页面，鼠标移入【忘记密码】，【忘记密码】的字和下划线由黑色变成红色，鼠标从【忘记密码】移开，【忘记密码】的字和下划线由黑色变成红色。左键单击【忘记密码】后跳到注册页面。
动态行为4：在忘记密码页面，鼠标移入【返回立即登录】，会返回【登录】页面。
动态行为5：在登录页面，鼠标移入其他方式--QQ、微信、微博任意图标，图标会由灰色变成彩色，鼠标移出时，图标会由彩色变成灰色。
动态行为6：在登录页面，点击二维码图片区域可以出现二维码页面登录页面。

1.2 制作流程

1.2.1 准备活动

建立一个【登录注册】页面。在【登录注册】页面中设置一个具有【登录页面】、【注册页面】和【二维码登录页面】3个状态的动态面板。在【登录注册】页面下添加一个子页面【忘记密码页面】。备注：动态面板可以实现在一个区域内切换不同内容，比使用不同页面切换要高效。
准备好所需要的图片

1）新建一个rp文件，如下

2）然后在页面区域将页面名称更改，并删掉子页面page2,page3，改为如下

3）在元件库中选择动态面板，将其拖入中间的设计区域，并设置动态面板的名称、位置、大小、属性

4）在上图中右下角区域第⑤步：双击【登录注册(动态面板)】，弹出面板状态管理对话框，在对话框中点击【+】可在动态面板中添加状态，选择某个状态并单击，可修改状态名称

5）设置好如下图所示

6）将所需要的图片准备在一个文件夹里

1.2.2 设计登录静态页面

1）双击选择登录页面，按照所要设计的登录页面将矩形、文本标签、水平线、文本框、复选框、按钮、图片等元件拖入登录页面的对应区域（一定要在蓝色矩阵框内，即必须在动态面板区域内），如图所示。

2）设置好对应元件的属性，部分设置如下所示：

3）所有元件设置好后如图所示

1.2.3 设计注册静态页面

1.2.4 设计扫码登录静态页面

1.2.5 设计忘记密码静态页面

1.2.6 设计动态行为1

1）在登录页面，鼠标移入时【注册】，【注册】的字和下划线由黑色变成红色，鼠标从【注册】移开，【注册】的字和下划线由红色变成黑色。

将注册和注册下面的水平线复制，然后粘贴到和原位置重合，接着将其设置为红色，ctrl+G组合一下，如图所示

设置组合的名称，并将这个组合隐藏，如图所示

2）同样的方法设置隐藏的红色【忘记密码】，以及隐藏的彩色QQ、微信、微博图标，如下图所示

3）为了实现单击注册切换至注册页面，需要引入一个好用的控件--热区，从左侧元件库中拖如一个热区至注册区域。备注：热区方便面积区域的鼠标点击行为

4）设置行为：在登录页面，鼠标移入时【注册】，【注册】的字和下划线由黑色变成红色，鼠标从【注册】移开，【注册】的字和下划线由红色变成黑色。左键单击【注册】会跳到注册页面。

1.2.7 设置动态行为2

设置行为：在注册页面，鼠标移入时【登录】，【登录】的字和下划线由黑色变成红色，鼠标从【登录】移开，【登录】的字和下划线由红色变成黑色。左键单击【登录】后跳到注册页面。

方法：首先设置隐藏的登录（红色），然后在登录区域拖入一个热区，然后选择热区设置鼠标移入、移出和点击的属性。具体方法和⑤设置动态行为1的方法一致，此处不再赘述。

1.2.8 设置动态行为3

在登录页面，鼠标移入【忘记密码】，【忘记密码】的字和下划线由黑色变成红色，鼠标从【忘记密码】移开，【忘记密码】的字和下划线由黑色变成红色。左键单击【忘记密码】后跳到注册页面。

1.2.9 设置动态行为4

在忘记密码页面，鼠标移入【返回立即登录】，会返回【登录册】页面。

1.2.10 设置动态行为5

在登录页面，鼠标移入其他方式--QQ、微信、微博任意图标，图标会由灰色变成彩色，鼠标移出时，图标会由彩色变成灰色。

1.2.11 设置动态行为6

在登录页面，点击二维码图片区域可以出现二维码页面登录页面。

点击【发布】→【预览】，可以查看自己制作的静态页面和动态行为。

2 补充知识点--内联框架

①新建一个页面，从元件库拖入一个内联框架

①新建一个页面，从元件库拖入一个表格

③双击内联框架，选择链接属性表格

④点击发布→预览，可查看效果

⑤可以看到效果：表格在内联框架里面

参考学习资料：Axure动态面板的使用，Axure入门初体验教程-慕课网

原型设计之Axure RP相关推荐

原型设计如何直接生成html,使用原型设计工具 Axure RP创建一个web页面框架
前言什么是原型呢? 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经 ...
软件原型设计工具Axure RP安装教程
http://www.axure.us/1896/ Axure RP是产品经理必备的原型制作工具,因为很多同学是新手,在这里整理一下axure7.0的下载.安装和汉化流程,希望能够帮到大家. Axur ...
交互原型设计软件 Axure RP Pro 5 中文教程
互联网的一些事 (2008.07.22 更新了Axure RP pro5 的交互部分,最下面) yixieshi 一直在用visio做交互原型和画pageflow,朋友推荐用Axure RP 4,试用 ...
界面原型设计工具 Axure RP开发环境搭建
Axure RP 是一个界面原型设计的得力工具.类似于DreamWare对于网页设计的关系. [下载]:官方下载链接 :http://www.axure.com/ 百度搜索一下Axure RP,也很容 ...
原型设计软件Axure RP 9中文版
Axure RP是一款简单易用的原型设计工具,能够创建符合用户体验标准的模型和操作界面.它能有效地实现对数据图表.项目管理.交互.图形设计.图像编辑等功能的支持及用户界面风格的个性化设置.对于专业设计 ...
快速原型设计工具-Axure
快速原型设计工具-Axure sf2gis@163.com 2016年1月5日 2016年1月7日添加闪烁效果 2016年1月15日增加团队项目 1 目标:快速构建GUI,具备基本演示功能,帮助确定 ...
软件测试-5-图编辑引擎antVx6和交互原型设计软件Axure
参考antv-x6官方文档API 参考antv x6流程图图绘制编辑:初始化配置(一) 参考antv x6流程图图绘制编辑节点属性.连线属性置(二) 1 图编辑引擎antv-x6 JavaScrip ...
网站app原型设计工具:axure,Mockups,墨刀
网站app原型设计工具:axure,Mockups,墨刀 Balsamiq Mockups 3 网站原型设计工具非常高效,非常简单,几分钟就能搞定比axure好用很多墨刀 - 免费的移动应用原型 ...
[交互设计工具/原型创作工具]Axure RP Pro 5.0新特性破解版　注册码
先感谢木的{moond},要不是一次提供了那么多画原型图的工具,我现在还在Word和Visio里面打转呢. 这些软件能试用的我差不多都用了一下,其中觉得Axure的RP Pro 4挺好的,功能包括站点 ...
产品经理（PM）常用原型图设计工具 Axure RP 等等
本文转贴自:http://www.zhangping.name/2010/08/28/pm-wireframes-design-tools/ ,尽管都是一些商业软件,但对设计的确非常有帮助. 天天和产 ...

原型设计之Axure RP

0 前言

1 案例

1.1 目标效果

1.1.1 实现登录、注册、忘记密码、扫码登陆四个静态页面

1.1.2 实现动态行为

1.2 制作流程

1.2.1 准备活动

1.2.2 设计登录静态页面

1.2.3 设计注册静态页面

1.2.4 设计扫码登录静态页面

1.2.5 设计忘记密码静态页面

1.2.6 设计动态行为1

1.2.7 设置动态行为2

1.2.8 设置动态行为3

1.2.9 设置动态行为4

1.2.10 设置动态行为5

1.2.11 设置动态行为6

2 补充知识点--内联框架

原型设计之Axure RP相关推荐

最新文章

热门文章