设计点击左侧切换页面进出_Axure教程：（初级）导航中的页面切换

2024-05-05 15:18:18

本文给大家讲讲如何利用Axure进行导航中的页面切换，一起来看看~

一、页面布局

(1)从左侧元件库拉入两个矩形作为导航按钮，分别命名为：页面1、页面2。

(2)从左侧元件库拉入一个动态面板作为页面内容展示，命名为页面内容。

(3)双击动态面板，点击“+”，添加状态2；再分别点击对应的状态，往里面添加任意页面内容。

二、添加交互

(1)按住shift键，选中两个导航按钮，鼠标右键，选中【交互样式】。

(2)设置选中样式：字体颜色为白色，填充色为蓝色。

(3)选中导航按钮【页面1】；双击右侧“属性”栏中的【鼠标点击时】。

(4)选择【设置面板状态】->勾选【页面内容动态面板】->选择【状态1】。

再点击【设置选中】-》勾选导航组中的【页面1】按钮。

(5)选中导航按钮【页面2】；双击右侧“属性”栏中的【鼠标点击时】，重复上面步骤；选择【设置面板状态】-》勾选【页面内容动态面板】-选择【状态2】；再点击【设置选中】-》勾选导航组中的【页面2】按钮。

三、交互细节调整

(1)按住shift键，选中两个导航按钮，鼠标右键，选中【设置选项组】。主要为了实现，点击选中【页面1】按钮选中时，【页面2】按钮则自动变为不选中。

(2)页面刚加载时，先展示页面1，所以，导航按钮【页面1】的初始状态应该为选中；因此，选中导航按钮【页面1】，点击右侧属性栏，勾选【选中】。

四、预览效果

示例：https://pan.baidu.com/s/1PpBz_JqIDlnSKWeE4q4BcQ

效果：

本文由 @火星人～艾斯原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

设计点击左侧切换页面进出_Axure教程：（初级）导航中的页面切换相关推荐

axure 点击按钮弹出框_Axure 教程：web网站原型设计技巧的分享
分享个人在绘制PC端web网站交互原型中一些设计技巧,enjoy~ 技巧一:搭建导航框架页面当自己还是一个小白时,开始着手设计web界面时,最容易犯的一个错误就是:基本每一个页面的绘制都是顶部导航. ...
webbrowser控件有数据但页面空白_如何在Excel中实现可以切换不同数据系列的滚珠图?...
▲更多精彩内容,请点击上方Excel小铲子▲ 操作系统版本 Windows 10 64位 Excel版本 Microsoft Excel 2016 64位案例文档下载链接:https://pan. ...
php制作网页教程pdf,php中pdf页面制作方法
FPDF即"Free PDF",FPDF类库提供了基本的PDF创建功能,其源代码和使用权是免费的.本文主要和大家分享php中pdf页面制作方法,希望能帮助到大家. PDF格式文档优 ...
axure如何实现跳转_Axure中继器实现APP中设置页面的各种列表
中继器是Axure中的一个高级元件,可以当做Axure中的小型数据库使用,用于实现一些增删查改的效果,同时可用于一些具有相同元件组合的组件的快速生成,比如APP中的设置,如下图所示.下面我们介绍一下怎 ...
html切换导航不同页面,HTML按钮：导航到其他页面 - 不同的方法
有多种方式可以创建HTML按钮以导航到其他页面.HTML按钮:导航到其他页面 - 不同的方法方法1 Click Me $('#btn_click').on('click', function() { ...
axure手机页面设计说明_Axure中基于设备模板的移动端原型设计方法（附IPhoneX和IPhone8最新模板）...
文章作者分享了一种基于设备模板的移动端原型设计方法,相信能够对你的原型设计工作带来帮助,值得马克. 在使用Axure设计移动端原型的应用方面,我总结出了两种常用的方法.第一种是更适合在移动端进行演示的 ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
OA系统十九：请假申请五：【请假申请】这个内嵌页面的前台文件；设置【点击左侧菜单栏的“请假申请”后】在首页的“功能区”显示【请假功能】这个内嵌页面；
本篇博客的主要内容是: 本篇博客有几点特别说明下: (1)前端的东西挺复杂的,感受到了[学会一个成熟的前端框架]的重要性.毕竟,框架可以提高前段文件的开发效率,简化开发步骤! (2)前端的Ajax请求 ...
Android仿人人客户端（v5.7.1）——点击左侧菜单栏中的Item切换视图
转载请标明出处:http://blog.csdn.net/android_ls/article/details/8765193 在前面几讲中,左侧菜单(左侧面板).满足滑动或点击子View的方式,打开 ...

最新文章

热门文章