Axure 目录设计

准备安装资料
-Axure（我这里是8.0版本）

正文：

1.在class1里，直接使用蓝色矩形代表头部导航栏logo，灰色矩形右侧导航栏底色。分别命名为

导航栏logo和左侧导航栏。

2.白色矩形作为左侧导航栏根目录，分别输入根目录1和根目录2，命名为m1和m2。

3.添加动态面板，设置为隐藏，并命名为d1。

4.在动态面板输入子目录1.1，子目录1.2，子目录1.3。并和根目录1组合。（我这里把隐藏去掉了，才能显示子目录）

5.同理新增目录2的子目录2.1，子目录2.2，子目录2.3.并组合，隐藏

这会的预览是只有两个根目录，两个动态面板被我隐藏了。现在我们开始设置显示和链接。

6.在目录1（m1）的属性-鼠标点击-添加用例-切换显示动态面板1（d1）。

7.在动态面板1（d1）属性-更多事件：设置显示时和隐藏时。

8.显示时例子设置如下，在显示动态面板1（d1）时，移动目录2（m2），移动绝对位置，并设置x轴（[[d1.left]]）,y轴（[[d1.bottom]]）

9.同理，动态面板1设置隐藏时，移动目录2（m2），移动绝对位置，并设置x轴（[[d1.left]]）,y轴（[[d1.top]]）

10.同理，根目录2也设置鼠标点击时，切换显示动态面板2。

到此为止就添加好了用例了。预览点击可显示子目录，并且根目录2也会随着子目录1展开折叠而变动位置。

Axure 目录设计相关推荐

Axure原型设计工具介绍
Axure原型设计工具介绍 1759230茅杭斌目录 1.前言 2.下载与激活 3. Axure相关功能介绍 4.Axure案例演示 5.结语一.前言在我们进行程序开发的时候,原型图是必不可少的 ...
Vue.js 源码目录设计（二）
Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── se ...
vue assets图片_Vue实战—如何细化Vue项目目录设计（2）
通过上一篇文章我们了解了Vue项目核心文件(src)以及在内的各个文件的职能. 接下来我们进一步细化Vue项目的目录设计: 在开发项目的时候前端避免不了请求后端接口.为了同时开发,我们知道的通常会用到 ...
移动端超高品质的Axure UI设计/交互设计组件库，几乎涵盖了所有的组件
这套超高品质的Axure UI设计/交互设计组件库,无论是APP原型设计还是小程序设计,都能满足您日常设计所需,关键是能让交互设计稿美美哒,简直是提高工作效率必备文档库,实属移动端设计组件中的顶级资源 ...
Axure交互式设计
作为产品经理,一直认为原型设计应该不仅仅是设计师们的工作,也应该是产品经理的工作--尤其是在前期需求讨论阶段. 爱因斯坦说,if I can't picture it, I can't underst ...
微信小程序优惠劵功能（包含用户需求，axure原型设计，数据库设计，后台功能，微信小程序功能）
1.用户需求优惠券功能有: 1.后台可以设置优惠券和查看已发出优惠券的状态 2.平台自动给新用户发放优惠劵,或者手动给某些用户发放优惠券 3.用户在小程序中手动领取优惠券 4.用户中心新增" ...
Axure课程设计-漫画APP界面/UI设计(免费分享.rp文件学习)
这次的课程设计主要是UI设计,基于Axure我设计了一个类似动漫之家的一个设计界面,以下是效果图: UI首页点击夜魔侠点击更新按钮点击分类按钮排行点击专题按钮之后点击搜索按钮之后点击&q ...
Vue.js 源码目录设计
Vue.js 源码目录设计 Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # ...
axure 原型设计20条军规
这是完整的最棒的AXURE原型系列1-6季的全部作品最棒的Axure原型第一季(基础范例) http://share.axure.com/P0QX7V 最棒的Axure原型第二季(手机客户端) ht ...

Axure 目录设计

Axure 目录设计相关推荐

最新文章

热门文章