原型设计:APP下导航如何通过Axure画出来
ann3311 2025-03-26 09:26 13 浏览 0 评论
下导航是APP原型设计中常见的功能，如何快速高效的通过Axure画出来呢？
网上有不少文章讲过如何画下导航，要么方法特别复杂，要么步骤并不全面。典型的错误有两个，①使用多个动态面板来嵌套实现下导航。②使用动态面板来区分选中和未选中。
但是学会本文你可以100%模拟出微信、支付宝，淘宝，天猫app的下导航原型效果，点击预览效果。
接下来我会以微信APP为例，详细讲解每一步骤，学会之后可根据自身项目要求酌情删减。
画出每个导航按钮
每个导航按钮都是由方框，名称，图标3个元素组成。
方框，使用矩形元件。宽度=375/4=94px。高度建议50px左右。
名称，使用文本元件。输入文字代表导航名称。
图标，则用图片元件。缩放到合适的大小。
处理一下三者的布局，最终得到导航按钮。
（Axure功能理解比较深的童鞋，可以将前两者合并成一个矩形实现，新手不建议这样使用。）
设置导航按钮样式
以第一个导航按钮为例，设置它每一个元素的交互样式-选中。选中代表的是元素的另外一个状态。
方框，改变矩形的背景色。
名称，改变文字的颜色。
图标，使用另外一个图片来替换。
以此类推，把其他三个导航按钮也做一下样式。(矩形、文本元件可以使用格式刷快速复制交互样式，图片元件不行。)
设置导航按钮链接
将每个导航按钮的三个元素选择，并生成组合。
然后给组合添加链接，跳转到对应的页面“微信、通讯录、发现、我”。
为什么要这样做？点击导航按钮的区域内，都可以跳转。所以使用组合来表示这个区域内都是可交互热区范围。
我们已经画出了微信下导航的线框图效果，接下来讲解如何做出相似的交互效果。
生成固定位置母版
下导航是存在于所有的导航页。所以需要把下导航原型放到不同的页面。
选中这些元件，右键生成母版。
考虑到下导航在每个页面中的位置是一样的，所以将母版设为固定位置。
添加母版到导航页
打开微信页面，将左下方的母版拖进去。
以此类推即可…
设置导航页的效果
当位于微信页面的时候，导航按钮微信是不可点击，但是样式是点击后的样式效果。
所以需要设置当载入微信页面的时候，选中该按钮组合，并且禁用该按钮的交互。
以此类推…
需要注意的是，同时只有一个导航按钮处于选中状态，所以需要把所有的导航按钮选中并新建成单选组。
固定导航相对于屏幕的位置
如果你希望下导航原型和微信下导航一样，固定在页面的底部。
那么把这些导航按钮选中并生成动态面板，然后右键固定到页面指定位置即可。
至此我们做出了和微信APP完全一样的下导航原型和交互效果，
小结
本文是以微信APP为例，讲解常用的功能该如何画原型。鉴于视频教程不是特别容易理解，所以写成详细的文章分享给大家。
本文用到的微信图标和字体颜色等素材，提供下载
https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ
相关推荐
- 双11体验升级!淘宝联合千余品牌推“优+”服务计划
-
【亿邦原创】双11在即，天猫宣布联动千余品牌商家，面向消费者共同推出“优+”服务计划，为消费者提供远超平台服务标准的优质服务，如更快的接待响应，更高的服务标准，更极速的售后处理等。据悉，优+服务计划是...
- 淘宝官宣吴艳妮为淘宝闪购品牌大使
-
新榜讯今日，淘宝正式官宣运动员吴艳妮出任淘宝闪购品牌大使。吴艳妮表示：“非常高兴能够成为淘宝闪购品牌大使！速度没有限制，心意更加充足，这个夏天，我将与淘宝闪购联手，为大家免费派送一亿份奶茶。”...
- 1小时内6000万家庭参与红包互动 淘宝助力央视打造最具科技感春晚
-
边收看央视春晚边跨屏互动开红包、开通亲情账号全家中奖、明星爱豆视频大拜年…通过与淘宝独家合作而有了更多互动黑科技，今年的央视春晚正变得与往年不同。围着电视开红包，成为全新的家庭成员间交流和互动方式——...
- 双十一别拆淘宝红包了，来答题，我们直接送给你!
-
宪法的核心内容是什么？规定了国家生活中的哪些问题？小编这次带着“红包”好好让大家“了解一下”怎样领红包呢？参与学习宪法知识有奖答题活动！↓每次随机10道题目...
- 淘宝成春晚独家电商互动平台 邀网友“许愿”瓜分25亿大红包
-
还有10天就是除夕，蛇年春晚也逐渐揭开其神秘面纱。记者获悉，淘宝成为2025蛇年春晚独家电商互动平台。而就在刚刚，淘宝官宣了春节互动玩法：许愿领红包，瓜分25亿。从1月21日起，全国网友打开淘宝app...
- 淘宝66大促抢红包攻略（淘宝618活动红包多少钱）
-
进入6月份，年中大促已经来到，电商之间促销战争就开始了。作为一个消费者来讲，倒是挺希望这样的活动能有很多，毕竟是让消费者受益的好事嘛，哈哈哈哈哈哈......请原谅小编的物质。昨天，淘宝66年中大促已...
- 淘宝618喵运会，我出坑了（淘宝618喵币在哪里打开）
-
#挑战30天在头条写日记#淘宝618喵运会，我出坑了。昨天打到了209级，在经过了一路的惨败之后，我拿到了200级的通关红包。出坑了，不玩了。年年的“5.18”“6.18”“双十一”“双十二”淘宝都会...
- 淘宝天猫双12红包奖池再加码 让你畅游会场不虚此行
-
【CNMO新闻】临近双12，各大电商平台纷纷亮出重磅优惠福利。其中，根据淘宝目前已公布的活动节奏力度来看，本次的双12超级红包将会在12月9日，也就是明天迎来第一次“奖池加码”的机会，更多的惊喜将会在...
- 春节“抢红包”玩法上新!淘宝10亿“红包发发乐”今日正式启动
-
图说：淘宝启动“10亿红包发发乐”活动采访对象提供...
- 1小时内6000万家庭红包互动 淘宝助力打造最具科技感春晚
-
中新网杭州2月16日电(赵小燕)边收看央视春晚边跨屏互动开红包、开通亲情账号全家中奖、明星爱豆视频大拜年…通过与淘宝独家合作而有了更多互动黑科技，今年的央视春晚正变得与往年不同。图为手机淘宝参与央视春...
- 封面福利|你还在苦苦为集五福烦恼吗?这有个暗号可以轻松领春节红包
-
清早起床，当小编收到第一条提醒时才突然发现：原来要过年了，因为一年一度的集五福又开始了！于是小编索性打开支付宝，原来这是连环轰炸啊，微信群也开始躁动起来，花式要福的人语气稍显油腻，小编想吐槽，朋友们你...
- 花768网购香奈儿香水，却是花露水味，商家:一经拆封，概不退换
-
现在许多女性都会选择网购这种方式，毕竟网购非常方便还可以送货上门。这是许多懒人喜爱的购物方式。而且网上买的东西更加便宜，这也是很多人选择网购的一个重要原因。就在前不久，郭女士在网上一家海外专营店里，买...
- 「干货」二手iPad真香?入手前你需要知道这些事
-
大家都知道，小编是一个数码博主（勉强是）。但小编其实也是二手数码行业的一名从业人员，这几天双十一，身边不少朋友都对二手iPad蠢蠢欲动。确实，价格这么低，买一台二手99新的iPad简直做梦都能笑醒！不...
- 淘宝大量海外版游戏主机下架，部分游戏店铺已清空店面
-
记者|彭新编辑|近日，社交平台上很多网友纷纷留言，称发现大量PS5、Xbox、Switch海外版主机在淘宝下架。3月30日，一些流量较大的游戏店铺已经清空店面，下架了所有游戏相关产品，目前部分...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 淘宝店铺优惠券怎么用 (36)
- 淘宝图片上传 (53)
- 购买天猫专卖店 (31)
- 淘宝搭配套餐怎么弄 (31)
- 淘宝试用什么意思 (39)
- 淘宝动态评分 (34)
- 淘宝保证金在哪里交 (32)
- 淘宝宝贝降权 (32)
- 淘宝恶意点击 (32)
- 淘宝查号 (31)
- 淘宝系统异常 (31)
- 天猫平台 (33)
- 淘宝信誉等级划分 (31)
- 天猫网店开店费用 (32)
- 淘宝假一赔三申请 (37)
- 淘宝会员打折 (35)
- 淘宝好评率 (32)
- 淘宝如何加入购物车 (33)
- 淘宝涨价 (35)
- 淘宝如何刷信誉 (32)
- 天猫直播入口 (34)
- 淘宝上架 (33)
- 淘宝帐号 (33)
- 淘宝不能发货 (33)
- 淘宝排名查询 (32)