Axure RP 9 for mac 高保真原型图 - 案例18 【导航栏-展开、收起】导入元件库

最新推荐文章于 2024-05-22 17:48:52 发布
最新推荐文章于 2024-05-22 17:48:52 发布
阅读量2.6k 收藏 17
点赞数 4
分类专栏： # 1.4 Axure RP 9 for mac 文章标签： axure macos 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43529621/article/details/126890394
版权

相关链接

案例目标

 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

GroupiesM
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure RP9 制作动态顶部导航
m0_65421975的博客
03-14 1005
1.拖动一个动态面板到编辑区，在样式页面设置尺寸为Web页面，将设置为1000，h设置为60，命名为head1，将100%宽度勾选上,背景颜色填充色值为#333333。 2.将head1复制两个，一个命名为head2，w，h值不变，另一个命名为body，w为1000，h为800。Body动态面板取消勾选100%宽度。 3.将head2复制一个命名为newhead1，位置跟head1重叠，勾选100%宽度，同时固定到浏览器，顶部、居中，背景填充色为#7F7F7F，设置为隐藏。 4.页面设置交互.
【Axure9.0原型实战（一）】Axure9.0的元件库的使用、导入、制作、路径等操作方法与技巧（附Axure元件库大全）
汪雯琦的博客
12-08 9781
Axure9.0的元件库 1.windows系统加载元件库 将元件库复制到Axure根目录 F:\Axure\Axure RP 9\DefaultSettings\Libraries 2.MAC系统加载元件库 将元件库复制到Axure根目录-Contents-Resources -DefaultSettings\Libraries 3.新加入一些元件库 直接复制后缀为.rplib到Libraries文件夹 关闭重启Axure软件 目的：提高工作效率，可以直接拖拽已经设计好的内容到新页面中，继续修改或添加
Axure教程—折叠面板
weixin_43516258的博客
06-24 2458
本文介绍利用Axure中的动态面板制作折叠面板
Axure怎么建立自己的元件库？（超详细）
最新发布
chensx_2011的专栏
05-22 727
Axure怎么建立自己的元件库？（超详细）
Axure京东高保真原型图
YouYi__的博客
04-23 3520
*Axure某东高保真原型图 我是河北软件职业技术学院大一的一名学生，本人是Axure的小白，就是喜欢Axure，做了一个某东的购物商城界面，从注册到购物成功，详情请看流程图，其余地方全部链接某东真实链接，请勿支付，不喜勿喷，如有侵权请及时联系删帖，企鹅：205119518 百度云盘链接:https://pan.baidu.com/s/1GzmtGixw0TvJpN0sBumajw 密码:ahuj...
Axure RP9制作响应式导航栏
m0_65421975的博客
03-14 2085
1.元件库拖动一个动态面板，W为1000，H为60，100%宽度，然后双击打开，在动态面板里在添加两个动态面板，分别命名为left、right，位置是靠左靠右，left W为500，H为44，right W为270，H为44,并固定在浏览器的右侧，设置100的距离。 2.点击Left面板，添加一个占位符，三个矩形框，right动态面板中添加三个矩形框。 3.添加视图，命名为920，W为1000，设置在当前920的视图下，取消勾选影响所有视图，在920视图下，点击 进入动态面板，将r.
Axure RP9 的元件库
热门推荐
两条线-twolines
09-23 1万+
Axure的元件库 1.加载元件库 可以通过导入一些现有的元件库，来提高绘制的效率及美观性。 （1）windows系统： 将准备好的元件库复制到Axure根目录下-【DefaultSettings】-【Libraries】中； 移动成功后，重启Axure软件即可。 比如我存放的位置：C:\Program Files (x86)\Axure\Axure RP 9\DefaultSettings\Libraries （2）Mac系统： 将准备好的元件库复制到Axure根目录下-【Defa...
AxureRP9项目原型50套、案例20个、元件库1套
02-08
总的来说，这个资源包集合了Axure RP9的设计实践、案例研究和实用元件库，无论你是初学者还是经验丰富的设计师，都能从中获益良多。通过深入学习和实践，你将能够熟练掌握Axure RP9的使用，提高设计效率，打造出更加...
Axure9元件库大全（最新整理）rplib格式 高低保真
06-13
APP动效元件库、APP基础元件库、APP图标库、Axure低保真组件库、ios9元件、iphone x手机外壳、layui_web_1.0.9、Refs数据图表元件库、RP8扩展元件库、SVG矢量图标元件库、Tables、Web元件库、常用元件库、饿了么后台...
axure通用元件库+Web端原型图组件库高保真UI以及源文件.zip
05-12
"axure通用元件库+Web端原型图组件库高保真UI以及源文件.zip"是一个非常实用的资源包，专门针对那些进行产品设计和原型构建的专业人士，特别是产品经理和交互设计师。 Axure是一款广泛使用的原型设计工具，它允许...
axure通用元件库 PcWeb端原型图组件库高保真UI rp源文件
05-27
本资源提供的“axure通用元件库”是针对PcWeb端（个人电脑网页端）设计的原型图组件库，包含了一系列高保真UI元素，旨在提升设计效率并优化设计质量。 这个元件库包括了各种常见的Web界面元素，如按钮、表单、导航...
Axure 2、3层级菜单展开折叠Demo.rp
02-21
使用Axure做的 2、3层级菜单展开折叠Demo rp 源文件。 点击一级菜单展开二级菜单，点击二级菜单展开三级菜单。 用户可直接下载使用。
Axure RP8 for Mac
08-15
Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具，它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。并且支持Windows和苹果Mac双系统
AxureRP9Bootstrap元件库
10-07
Bootstrap4 for Axure RP9 AxureRP9使用到的Bootstrap元件库，可以在软件中导入使用。 在左侧点击+号，添加元件库， 或者打开Axure RP9安装目录，进入DefaultSettings\Libraries，复制资源到此目录并重启Axure软件即可看到。
Axure9元件库大合集
09-20
我收集的Axure的各种元件库大合集，绝对超值，有element ui,ant design ,axureux, 收集与各大网站。现在一起打包。 我收集的Axure的各种元件库大合集，绝对超值，有element ui,ant design ,axureux, 收集与各大网站。现在一起打包。 我收集的Axure的各种元件库大合集，绝对超值，有element ui,ant design ,axureux, 收集与各大网站。现在一起打包。
Axure RP 9 元件库
12-07
Axure RP 9 元件库加载，Ant design Axure组件库，Axure库全套，Google Material Design 900个实用的Axure图标组件库 LIB002+-+AxureUX交互原型Web元件库精简版
AxureRP7.0制作天猫商城WEB高保真原型.zip
03-24
1. **元件库**：Axure RP 7.0拥有丰富的内置元件库，包括按钮、表单元素、导航栏等，这些都是构建天猫商城WEB原型的基础。用户可以根据需求自定义元件，比如天猫商城的特色图标、购物车、商品展示模块等。 2. **...
Axure8.0教程：动态面板左右滑动及展开收起
weixin_43516258的博客
03-18 2772
动态面板是产品的基本功能之一，应用也非常广泛。本文作者分享了如何用Axure，制作动态面板左右滑动及展开收起，希望对你有帮助。
axure rp9高保真原型案例软件
05-19
Axure RP9是一款高保真原型设计工具，可以帮助用户快速创建交互式原型，并且可以模拟真实应用程序的交互过程。Axure RP9可以用于网站、移动应用、桌面应用等各种类型的设计。以下是一些使用Axure RP9创建的高保真原型案例： 1. 移动应用原型：用Axure RP9创建的移动应用原型可以实现各种交互效果，包括滑动、下拉刷新、菜单弹出等，帮助用户更直观地了解应用的功能和界面设计。 2. 网站原型：Axure RP9可以帮助用户创建复杂的网站原型，并且可以进行多人协作，方便团队成员进行交流和修改。 3. 桌面应用原型：Axure RP9还可以用于创建桌面应用原型，可以模拟真实应用程序的操作流程和交互效果，帮助开发人员更快地了解用户需求。 总之，Axure RP9是一款非常强大的原型设计工具，可以帮助用户更好地理解应用程序的交互过程，提高产品的设计质量和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值