Axure RP 9 for mac 高保真原型图 - 案例18 【导航栏-展开、收起】导入元件库
相关链接
- 目录
- Axure中文学习网
- AxureShop
- AxureShop-QA
1. 了解 导航栏-展开、收起 的实现原理
2. 掌握 导入元件库 的方式
一、成品效果
Axure Cloud 案例18 【导航栏-展开、收起】导入元件库
二、安装元件库
下载：
进入Ant Design官网 选择
Ant Design Library。
选择Web版本 最新。
安装：
方式一：
解压后会看到 *.rplib 文件，双击直接运行
哪一种都可以，如果选择第二种，要保证AntDesign3.9.x_Axure_20180903.rplib文件位置不能改变
方式二：
或者选择添加元件库
指定文件
选择：
在列表中，已经可以看到新的元件库
等待元件库加载
使用：
使用元件
三、素材准备
随便找一个有下拉菜单的组合，保留两个一级导航，删掉多余的部分即可。
四、制作方法
页面主要由四部分构成：title、主内容、导航、背景色
4.1 title
几个图标，没有做任何交互
4.2 主内容
每个 二级导航 对应一个 动态面板的子页面，记得打开垂直滚动即可实现 滚动条 效果。
内部内容是从Ant Design元件库里面分割出来的，记得保证各个 子页面内容 的 宽度一致。
4.3 导航
4.3.1 一级导航
有两个一级导航：1.信息板、2.列表页
其中 2.列表页 是收起状态，设置如下：
隐藏二级：
图标旋转：(图片素材默认是向下的箭头）
编辑界面效果：
【一级导航】1.信息板 - 热区
显示/隐藏： 选择 向下滑动、向上滑动，对应元件会自动被挤到其他地方。相当于前端的 流式布局，对应元素消失后，指定方向其他页面元素会自动进行偏移补齐。
旋转： 旋转图片达到展开、收起的效果
4.3.2 二级导航
主要有颜色变化、选项组、点击交互：
颜色变化：
动态面板底色：透明（底色色号#333333）,字体颜色：白色（色号#FFFFFF透明度65%）
鼠标悬停样式：填充蓝色（色号#0B4B88）、字体颜色：白色（色号#FFFFFF）
鼠标悬停样式：填充 - 浅蓝色（色号#1890FF）、字色 - 白色（色号#FFFFFF）
选项组：图中对应7个矩形块，都置于同一个选项组内
点击交互：设置当前矩形为选中状态为 真，由于所有二级导航处于同一选项组内，同一时间只能最多有一个处于选中状态。 并且右侧 主内容 动态面板切换到对应子页面。
22/09/16
M
Axure RP 9 for mac 高保真原型图 - 案例18 【导航栏-展开、收起】导入元件库相关推荐
- 1.4_18 Axure RP 9 for mac 高保真原型图 - 案例17 【js-echarts官网】
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 最开始只是想尝试一下,在Axure RP9中引用echarts图片.访问了一下echarts官网 ,后来对官网的 ...
- 1.4_15 Axure RP 9 for mac 高保真原型图 - 案例14 【动态面板-滚动条4】深色模式 - 图层处理
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 深色模式 的实现原理 2. 掌握 在 概要 模块中,显示/隐藏 对象 3. 掌握 置于顶 ...
- 1.4_5 Axure RP 9 for mac 高保真原型图 - 案例4 【旋转的唱片2】计时器
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 计时功能 的实现原理 2. 熟悉 交互 功能中,情形(case) 的使用场景 3. 掌握 ...
- 1.4_10 Axure RP 9 for mac 高保真原型图 - 案例9 【按钮】单选按钮组
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 单选 功能的实现原理 2. 掌握 按钮 的常见使用方式 3. 掌握 指定单选按钮的组 功 ...
- 1.4_17 Axure RP 9 for mac 高保真原型图 - 案例16 【动态面板-滚动条6】手动制作滚动条
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 手动制作滚动条 的原理 2. 掌握 鼠标悬停 在本案例中的用法 一.成品效果 Axure ...
- 1.4_16 Axure RP 9 for mac 高保真原型图 - 案例15 【动态面板-滚动条5】深色模式 - 按钮效果升级
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 元件库,会使用元件库中的成品进行改造 2. 掌握 在 概要 模块的使用技巧 一.成品效果 ...
- 1.4_21 Axure RP 9 for mac 高保真原型图 - 案例20【中继器 - 入门1】中继器原理Repeater Table
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 中继器 是什么 2. 了解 中继器 的使用场景 3. 会使用 中继器 展示数据 4. ...
- 1.4_9 Axure RP 9 for mac 高保真原型图 - 案例8 【动态面板】浏览、翻页、回弹
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 手机端app 浏览的实现原理 2. 掌握 回弹效果 的交互配置方式 3. 掌握 动态面板 ...
- 1.4_20 Axure RP 9 for mac 高保真原型图 - 案例19 【放大效果】
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 了解 放大效果 的实现原理 一.成品效果 Axure Cloud 案例19[放大效果] 版本介绍 ...
- 1.4_4 Axure RP 9 for mac 高保真原型图 - 案例3 【跳转】微信听一听
相关链接 目录 Axure中文学习网 AxureShop AxureShop-QA 案例目标 1. 熟悉 动态面板 的功能 2. 熟悉 变量值 的使用方法 3. 熟悉 图层 的设置方法 4. ...
最新文章
- 七大Github机器学习热门项目
- 为什么我在gpu上训练模型但是gpu利用率为0且运行速度还是很慢？
- 原 ng-include用法分析以及多标签页面的简单实现方式
- Linux学习之CentOS(三)--初识linux的文件系统以及用户组等概念
- aspnet前后台条件下根目录的读取
- android.os.build修改,Android的os.BuildID对应的SDK版本号以及SDK版本号与APILevel对应关系.docx...
- CSS基础学习 18.CSS多列
- 楼天成夺Facebook黑客杯季军，已被Facebook录用得到美国绿卡
- webmin安装_如何在Ubuntu 18.04上安装Webmin
- 注意！最新.Net Framework与Exchange 的兼容性问题
- 如何在SqlServer中快速有条件删除海量数据
- python 对象和json互相转换
- FreeRTOS学习记录（安富莱FreeRTOS教程摘录）
- 三星android手机工程模式,11款手机工程模式汇总 小编教你来验机
- Linux bridge模块的一次重构(让bridge归bridge让eth0归eth0)
- 斯坦福计算机硕士要求,申请斯坦福计算机硕士要求有哪些？
- Java实现局域网聊天软件分享
- atlas mysql怎么用,MySQL —— Atlas 使用
- mac配置iOS开发环境
- eclipse安装包网址