网站的导航功能是一个网站的最基本也是最为重要的功能之一,当我们在做项目时,点击导航按钮实现跳转页面,并且每次点击跳转都会有交互,运用母版,可大量减少设计时间,实现跳转页面。
以知乎网站为例:
总结为两个动作:1、点击导航按钮并选中;2、选中的按钮链接并跳转到相应的页面。
第一步:创建母版,并添加按钮的选中交互
1、首先,设计出知乎的导航栏:
2、框选导航栏的所有元素 --> 右键,选择“转换为母版” --> 母版名称命名为“知乎导航栏-导航按钮” --> “确定” --> 变为粉红色的背景的母版创建完成,并体现在左侧母版栏中 -->
不管是做个App设计,还是Web设计,N个界面中总有一小部分是一模一样的。
要么是页眉、要么是页脚、要么是侧边
导航栏
、要么是轮播图等等。这些统称为
页面
框架。
本博文就是基于
Axure
RP
的
母版
功能
实现
页面
框架。
二、添加
母版
三、添加到
页面
中
四、效果演示
任意
页面
中修改
母版
,其他
页面
都跟着变化
觉得好,就一键三连呗(点赞+收藏+关注)
用
axure
实现
导航的
页面
切换
效果也不复杂,大致步骤如下:
首先设置你的
导航栏
,可以是几个按钮,也可以是box,都不影响,满足自己的
页面
效果就行了,我拖了俩button作为我的
导航栏
,还有一个动态面板
然后我们在动态面板中添加我们准备显示的
页面
双击动态面板,因为我只准备做两个
页面
切换
,所以再添加一个state就好了,如果需要更多
页面
切换
,可以根据自己的需求添加相应数目的states
双击st...
Hello!欢迎来到
Axure
9 实战案例教程专栏。点击了解课程简介>>前几章我们分别讲解了
Axure
基本元件、动态面板、
交互
事件的应用,相信同学们的
Axure
实战能力已经有了一定的提高,那么在基础课程的最后一章,我们接着来讲解一下
Axure
母版
的应用。在原型设计工作中,擅于运用
母版
,可大量减少设计时间,以及压缩
RP
文件大小;尤其是在设计导航
菜单
时,运用
母版
会十分省时省力;所以本篇教程我们就以微信为蓝本,来讲解一下,如何运用
母版
绘制APP导航
菜单
。
我们先来看看微信的效果图,大家可以看到微信导航
菜单
的主要
提高设计效率
母版
的作用
母版
的使用总结
母版
的作用
在项目中使用
母版
能大幅提高重复劳动的工作效率,一次修改多次更新,特别是在需求产生变更调整原型的时候。一个合理的
母版
结构能大幅的缩减繁琐的工作,可以方便我们管理自己的
页面
设计及快速的创建一个产品原型。
母版
的使用
点击
母版
视图中的“+”号新建一个
母版
,并重命名为主页模板:
向
母版
中添加三个按钮:
右键点击
母版
并将模板添加到主页
页面
中:
这里你可以根据实际的需要去变换
母版
在
页面
中的位置,这里我们就以
母版
的位置为准。
点击主页可以看到,
页面
从A
页面
跳转到B
页面
;
从主
页面
的
菜单
栏,在iframe1打开新的
页面
。
下面我们通过一个简单的APP
页面
跳转来
实现
第一种效果的展示,第二种效果将会在后续的行内框架文章中会介绍。
二、效果展示
链接案例:https://f9d9x0.axshare.com
三、操作步骤
在画布中添加一个434X841的矩形框,圆角在样式中设置为20,如下:
再添加一个3
Axure
RP
8 是一款功能强大的原型设计工具,可用于
制作
页面
、
交互
式原型和流程图等。以下是基本的
页面
制作
步骤:
1. 创建新
页面
:在
Axure
RP
8 中,可以通过选择
菜单
栏上的“文件”->“新建”或者使用快捷键 Ctrl + N 来创建新
页面
。
2. 设计
页面
布局:在
页面
上添加所需的元素,如文本框、按钮、图片等。可以使用工具栏上的工具来添加元素,也可以通过拖拽预设的部件到
页面
上。
3. 设计
页面
交互
效果:可以通过添加链接、
交互
式动作和状态等来设计
页面
的
交互
效果。例如,可以添加按钮,当用户点击按钮时,
页面
会跳转到另一个
页面
或显示一个弹出框等。
4. 添加样式和主题:可以通过添加样式和主题来美化
页面
。可以使用
Axure
RP
8 自带的样式和主题,也可以自定义样式和主题。
5. 预览和测试
页面
:可以使用
Axure
RP
8 中的预览功能来查看
页面
的效果。也可以使用
Axure
RP
8 的模拟器和
交互
式模式来测试
页面
的
交互
效果。
6. 导出
页面
:可以将
制作
好的
页面
导出为 HTML 文件、图片或 PDF 等格式,方便与他人分享或发布到网站上。
以上是基本的
页面
制作
步骤,你可以根据自己的需求和实际情况进行调整和优化。