Axure绘制页面框架
相信大家在日常的B端web原型绘制中会经常绘制到类似框架页面，效果如下：
左边会展示二级菜单，点击菜单时，右边会内容会实时进行变化，有的伙伴们在初次制作时，可能会直接在每个页面都画上菜单， 如下：
但是这样有一个问题是，如果后期菜单有变动的的话，比如要新增一个菜单，那么就需要在每个页面中新增这个菜单，并添加交互事件了，可见这样的方法，会导致后期修改非常的麻烦。那么有没有简单点的方法实现这个功能呢。
答案当然是肯定的，这里不得不提到axure基础元件中的内联框架
那么内联框架的作用是什么呢，通俗一点说,内联框架就是在固定的区域显示内容,如果显示不下了，可以拖动滚条移动到其他的部分，那么在这种框架的需求下，就比较适合使用了。那么下面咱们开始教学，咱们以1920*968（减去浏览器的顶部内容高度）的展示分辨率进行演示
1.新建一个框架页面，并进行页面划分区域并添加对应的元件，具体样式大家可以按照自己喜欢的样式进行编辑
2.新建两个子页面，员工花名册和员工档案库，并在两个页面里添加一下页面内容，用于后续查看页面跳转是否成功
3.接下来在框架中进行菜单功能的绘制。拖入矩形，并分别按照菜单的结构进行摆放
为二级菜单添加交互事件，首先将两个二级菜单添加至同一个选项组
然后为两个二级菜单添加选中的效果，这里就不做复杂的选中效果了，选中时直接字体加粗
将员工花名册设置为默认选中项；同时为两个二级菜单添加单击时的交互时间，点击时选中当前元件
到这里为止，左边菜单的效果就已经实现了，当然大家如果想做高保真或者更好的交互效果，可以自行进行添加，在这里就不产开给大家做赘述了
4.接下来开始设置内联框架相关的配置，首先需要配置默认打开时，展示哪个页面，这里举例，框架打开时，默认打开员工花名册，需要点击内联框架，选择默认框架目标为员工花名册
在点击二级菜单时，配置切换内联框架打开对应的页面，同样给另一个二级菜单页配置跳转的，页面
接下来就是运行查看效果了
更多精彩分享内容请访问：文拾沐译产品经理导航
Axure绘制页面框架相关推荐
- 原型设计如何直接生成html,使用原型设计工具 Axure RP创建一个web页面框架
前言 什么是原型呢? 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品.利用交互设计师专业的眼光与经 ...
- Axure RP 基于母版实现页面框架/页眉/页脚/导航栏
文章目录 一.前言 二.添加母版 三.添加到页面中 四.效果演示 一.前言 不管是做个App设计,还是Web设计,N个界面中总有一小部分是一模一样的. 要么是页眉.要么是页脚.要么是侧边导航栏.要么是 ...
- axure RP文件如何找回_AXURE教程：管理后台页面框架
今天,教大家如何用AXURE做一个管理后台页面框架. 本文以员工信息为案例,展示中继器增.删.改.查+导入+导出+排序的真实效果.包括直接在中继器修改和弹出页面修改两种模式,只需要导入数据,就可以直接 ...
- Axure绘制跑马灯
相信大家在日常的产品设计中或多或少的会涉及到绘制跑马灯的效果,诸如弹幕效果或者滚动公告 那么这样的效果如何实现呢,直接上干货 一.功能分析 需要实现的功能如下: ①在固定区域内展示文字 ②从左向右循环 ...
- 关于Axure的基本框架
近期学习了对Axure的使用,我将分为两个部分总结我对Axure的学习经历和经验以及总结. Axure的基本框架 工具栏: 工具栏中可以选择相交选择和包含选择.链接.插入.组合等功能. 相交选中,通过 ...
- 如何优雅的用Axure绘制高保真原型心得分享
去年一直想写的Axure小技巧分享,终于还是动手写了,今天主要给大家分享关于axure高保真原型的一些东东. 本文核心内容点: - 啥是高保真原型?(附简单说明原型) - Axure可以画出什么水准的 ...
- axure交互页面设计【学习篇01】
axure学习记录一.2020.0305 未来会在这个专题下不定期更一些关于axure学习日常,小白入手,希望大家能够一起学习进步吧~ 今天这期教程是跟着b站 up主av40374556 学习的,附上 ...
- Axure绘制登录功能
上一篇文章为大家介绍了一下登录功能的设计思路和相关的流程图,本篇主要带大家从0到1绘制一下B端产品的登录功能如何实现 一.功能解析 本篇主要是针对内部员工使用的B端产品,主要功能如下: ①手机号+密码 ...
- axure内联框架和动态面板_最详细的Axure动态面板使用教程
1.打开[Axure]软件,在index文件上新建一个375*667大小的背景矩形并绘制页面. 具体如图所示. 2.在banner的位置上新建一个[动态面板],双击动态面板在其中新建state1.st ...
最新文章
- PyTorch 系列教程之空间变换器网络
- [转]Docker学习之四：使用docker安装mysql
- 93后阿里P7晒出工资单：原来是狠补了这个~真香
- ajax post提交数据_JavaEE学习——为什么get请求方式比post请求方式效率高
- linux mount 原文件夹,window文件夹mount挂载Linux
- Linux下socket-文件传输
- Apache下设置整站变灰方法
- 2021.02.18 北师大寒假新生训练
- win10默认壁纸_Win10瞬间审美爆炸，5分钟一键美化，不输万元Mac！
- android 网易音乐sdk,Netease Music SDK 开发文档
- 电影《邪不压正》打动我的
- 登顶多国免费榜，Zynga能否依靠超休闲游戏重回巨头行列
- 计算机 上的图片怎样加密码,电脑照片文件怎么加密？电脑文件加密软件介绍...
- 停止在csdn发文及上传资源的声明
- python提取发票信息发票识别_分享一个电子发票信息提取工具(Python)
- 简约纯色卡通蝴蝶Mac动态壁纸
- 克服低温磁场测量的挑战—高斯计
- 2023年南京晓庄学院五年一贯制专转本国际经济与贸易专业考试大纲
- C++ LeetCode简单程序：罗马数字转整数
- Fragment碎片