Axure RP从入门到精通（五十三）APP案例 - 底栏

已于 2025-01-05 10:28:44 修改
阅读量268 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Axure RP 从入门到精通 文章标签： html qt python
于 2021-09-05 13:23:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/vbirdbest/article/details/120112997
本文详细介绍了如何使用Axure RP创建APP的底栏设计，包括设置底栏动态面板，调整图标和文字组合，确保水平对齐，并为不同状态设置鼠标点击事件，以实现在预览时切换底栏选项的功能。关键步骤包括设置底栏尺寸，选取底部状态栏图标，创建各状态并添加交互事件，确保在切换时图标能准确对齐。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 拖一个矩形，填充色为浅灰色，W: 375 H: 49, 命名为底栏动态面板，并转为动态面板，并复制3份State1。
    在这里插入图片描述

  2. 去阿里矢量图中搜索ic_tabbar，找到四组底部状态栏选中和未选中的图标，并统一修改尺寸 25x25，并配备名字，将文字和图标设置成一个组合。注意图标要和文字居中对齐，没组图标之间要水平对齐(即中间间隔相等，选中所有图标点击水平对齐)
    在这里插入图片描述

  3. 分别将每一组状态栏放到不同的状态上。
    在这里插入图片描述
    在这里插入图片描述

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Axure RP从入门到精通（五十四）案例 - 超链接
人不风流枉少年
09-08 654
超链接非常容易制作，随便拉个”链接按钮“即可，但是如何实现鼠标悬停时鼠标又原来的箭头变为小手呢？ 拖入一个链接按钮，并修改文本为忘记密码，为忘记密码添加单击事件，注意只添加事件不加任何动作； 右键”单击时“，添加情形时，添加完什么就不操作。 预览。 鼠标移入鼠标执行形状变为小手实现的原理就是为此添加一个单击事件，单击事件中不添加任何动作，为了让单击事件生效，只需要添加一个空的情形即可。类似于以下伪代码。 <a onclick="forgetPassword()"> </a&g.
Axure RP从入门到精通（五十）案例（二级菜单）
人不风流枉少年
06-22 2502
制作一个二级菜单。为用户管理命名为一级菜单。 选中所有矩形，统一为矩形设置选中的样式。 将二级菜单转为动态面板，并命名为二级菜单。 进入动态面板State1，选中所有矩形，设置选项组，设置的目的是二级菜单只能有一个被选中。 设置二级菜单动态面板默认为隐藏。 为一级菜单(用户管理)添加鼠标单击时事件，单击时设置选中状态并切换二级菜单的可见性。 为每个二级菜单添加一个鼠标单击事件，单击时取消一级菜单的选中状态，设置当前二级菜单的状态为选中。这样一级菜单和二级菜单只能有一个可以选中。 ..
axure9左侧导航菜单完整示例.rp
08-01
使用动态面板实现左侧菜单完美展示，每个菜单点击后会有对应的页面展示，非常适合各个产品经理当做母版使用。
Axure RP从入门到精通（四十八）案例（顶部导航栏）
人不风流枉少年
06-28 1762
拖拽一个矩形，设置填充为蓝色、无边框。 将蓝色矩形转为动态面板并取消“自动调整为内容尺寸” ，进入State1，删除原来的蓝色矩形，并为State1设置同样蓝色的背景颜色。 为动态面板设置100%宽度。 往顶部导航栏左侧添加一个“Administrator”字样作为logo。 在顶部导航栏的右侧放一个动态面板，State1中放一个头像和用户名，下面再放一个动态面板（下拉菜单）内容为设置和退出登录。下拉菜单默认隐藏。 当鼠标移入头像时显示下拉菜单，当鼠标移出下拉菜单时隐藏下拉菜单。 ...
使用Axure RP 8制作两种导航菜单-下拉导航
qq_38548448的博客
09-15 3659
日常在绘制web端原型时，往往会涉及到导航栏的制作，文章主要记录两种常见导航栏的绘制方法。
Axure RP8 入门手册：网站和App原型设计从入门到精通 中文pdf高清版
03-18
《Axure RP8 入门手册》的写作初衷是以初学者的角度，由浅到深地引导读者学习Axure RP 8.0的使用方法，从而实现学习目标。 本书不但适合初学者学习，在知识结构与案例的安排上，也非常适合工作中的查阅与参考。初学...
AXURE RP8网站和APP原型制作从入门到精通
01-31
在"AXURE RP8网站和APP原型制作从入门到精通"这本教程中，你将全面学习如何使用AXURE RP8进行原型设计。以下是主要的知识点概述： 1. **基础操作**：首先，你需要了解AXURE RP8的界面布局，包括工具箱、部件库、...
Axure RP7.0 从入门到精通(78集全).txt
01-29
### Axure RP7.0 从入门到精通 #### Axure RP7.0 简介 Axure RP 是一款专业的原型设计工具，用于网站、APP等交互界面原型的设计，帮助设计者快速创建线框图、流程图、原型并进行共享。Axure RP7.0作为该系列的一个...
Axure RP从入门到精通（四十五）案例（App内容上下拖动）
人不风流枉少年
06-20 1216
制作基本的App页面，并在屏幕中间添加一个动态面板并命名为“屏幕”。 双击动态面板进入状态1，制作首页内容，并将所有内容组合成一个整体。 为动态面板增加鼠标拖动时事件，拖动时移动y轴的值。 上述示例效果当移动到顶部还能移动，当移动到底部也还能移动，这是不行的，我们需要添加移动的边界，当顶部到头了就不能继续往上移动了，当底部到底不能继续向下移动了。 如果顶部距离<=0就不再移动，如果底部距离>=432也不能再移动（0是动态面板的起始点，432是动态面板的高度） ...
Axture RP9实现动态导航栏
2301_76794079的博客
06-27 1784
4，主导航栏选择新建交互-单击时-显示隐藏-选择元件（为之前动态面板）-选择切换-动画效果按照自己想法设置-确认。完成简单交互，如图所示。2，将子导航栏全选，并按鼠标右键，转化为动态面板，给动态面板加一个名字（方便后续选择），并将动态面板隐藏，如图所示。3，在主导航栏这一项选择交互，按照自己想法添加元件样式。实现动态导航方法很多，简单介绍一种。1，如图做好自己想要做到导航栏。此帖子为作者学习经验记录。
Axure的微信及小程序组件库。
01-04
Axure的微信及小程序组件库。可用于设计微信及小程序页面原型。
1、Axure9.0实现简单的导航切换或tab切换效果
z983002710的博客
02-10 6426
使用Axure9.0实现简单的web端导航栏的切换效果或者APP底部的tab切换效果，主要做了三种模式，如下图： 1、构建基本的切换框架图 2、设置交互 2.1导航一效果设计 （1）选中需要设置的交互元件，后点击交互页面中“新建交互”的按钮 （2）设置交互事件，选中需要设置的元件，选择“单击时”的触发事件，并为其添加“设置选中”的动作 （3）选中的元件为“当前元件”，并将其选中的值设置为“真” （4）修改鼠标选中后的样式，点击“添加类似鼠标悬停的交互样式”，并选择“元件选中
Axure原型的设计规范（更新中）
qq_36755097的博客
08-28 8805
Axure原型的设计规范参考 一. 基础规范 APP页面：375*667px Web尺寸：1260*1024px 顶部状态栏：20px 顶部导航栏高度：44px 底部导航栏高度：48px 一般字号：12px-14px 一般原型图或元素一般采用：黑，白，灰三个颜色 二. 细节规范 一致性 用户需要在同一产品接受同一套规则或逻辑。 2. 简约易读 使界面足够简单，内容易读。 3. 对比性 页面不同元素之间要有对比效果，目的是更清晰的组织信息、使层级关系明了，能..
Axure RP9制作响应式导航栏
m0_65421975的博客
03-14 2350
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实现导航栏的展开与收缩
LAO__LIN的博客
04-12 2578
使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互，主要使用区域是左边或者顶部的导航栏展开与收缩，同一级导航下的小标题，放在一起既美观又节省时间。
Axure部件库：打造高效Web和移动端设计
最新发布
weixin_28746213的博客
09-21 2213
本文还有配套的精品资源，点击获取 简介：Axure部件库是UI设计师和产品经理在制作交互原型时不可或缺的工具，提供了丰富的前端、后台和移动端组件。这些预设元件能显著加速Web和移动应用的设计流程，支持尺寸、颜色和字体的自定义，以适应不同项目需求。设计师能够利用这一资源库快速构建出具有高用户交互性和视觉一致性的原型，并通过导入导出功能实现团队间的资源共享与协作。此外，Axur...
Axure RP 10制作导航栏指示效果
Peppaaa的博客
05-31 907
本文介绍了如何用Axure RP 10制作导航栏指示效果。
Axure8.0：标签导航栏
weixin_43516258的博客
07-08 1225
本次分享的的案例是Axure8.0制作的标签导航栏。 预览及下载地址：https://40074m.axshare.com
Axure RP从入门到精通（五十一） 案例 - 左侧菜单栏导航
人不风流枉少年
08-10 2594
1 更改页面尺寸，将Auto改为Web，页面布局改为左侧对齐。 页面尺寸和页面布局都会对元件的位置有影响。 拖一个动态面板作为左侧菜单导航栏的整体容器，设置x:0, y:50（这里留出50是给顶部导航使用的）w: 210，双击动态面板进入State1设置填充颜色R: 48 G: 66 B: 86，动态面板只有一个状态State1。 页面载入时设置尺寸，设置高度为：[[Window.height - 50]]，至此左边导航栏的容器算是完成。 双击导航栏容器进入State，拖拽一个矩形作为一级
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风流 少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值