原型设计:APP下导航如何通过Axure画出来
ann3311 2025-03-29 14:50 2 浏览 0 评论
下导航是APP原型设计中常见的功能，如何快速高效的通过Axure画出来呢？
网上有不少文章讲过如何画下导航，要么方法特别复杂，要么步骤并不全面。典型的错误有两个，①使用多个动态面板来嵌套实现下导航。②使用动态面板来区分选中和未选中。
但是学会本文你可以100%模拟出微信、支付宝，淘宝，天猫app的下导航原型效果，点击预览效果。
接下来我会以微信APP为例，详细讲解每一步骤，学会之后可根据自身项目要求酌情删减。
画出每个导航按钮
每个导航按钮都是由方框，名称，图标3个元素组成。
方框，使用矩形元件。宽度=375/4=94px。高度建议50px左右。
名称，使用文本元件。输入文字代表导航名称。
图标，则用图片元件。缩放到合适的大小。
处理一下三者的布局，最终得到导航按钮。
（Axure功能理解比较深的童鞋，可以将前两者合并成一个矩形实现，新手不建议这样使用。）
设置导航按钮样式
以第一个导航按钮为例，设置它每一个元素的交互样式-选中。选中代表的是元素的另外一个状态。
方框，改变矩形的背景色。
名称，改变文字的颜色。
图标，使用另外一个图片来替换。
以此类推，把其他三个导航按钮也做一下样式。(矩形、文本元件可以使用格式刷快速复制交互样式，图片元件不行。)
设置导航按钮链接
将每个导航按钮的三个元素选择，并生成组合。
然后给组合添加链接，跳转到对应的页面“微信、通讯录、发现、我”。
为什么要这样做？点击导航按钮的区域内，都可以跳转。所以使用组合来表示这个区域内都是可交互热区范围。
我们已经画出了微信下导航的线框图效果，接下来讲解如何做出相似的交互效果。
生成固定位置母版
下导航是存在于所有的导航页。所以需要把下导航原型放到不同的页面。
选中这些元件，右键生成母版。
考虑到下导航在每个页面中的位置是一样的，所以将母版设为固定位置。
添加母版到导航页
打开微信页面，将左下方的母版拖进去。
以此类推即可…
设置导航页的效果
当位于微信页面的时候，导航按钮微信是不可点击，但是样式是点击后的样式效果。
所以需要设置当载入微信页面的时候，选中该按钮组合，并且禁用该按钮的交互。
以此类推…
需要注意的是，同时只有一个导航按钮处于选中状态，所以需要把所有的导航按钮选中并新建成单选组。
固定导航相对于屏幕的位置
如果你希望下导航原型和微信下导航一样，固定在页面的底部。
那么把这些导航按钮选中并生成动态面板，然后右键固定到页面指定位置即可。
至此我们做出了和微信APP完全一样的下导航原型和交互效果，
小结
本文是以微信APP为例，讲解常用的功能该如何画原型。鉴于视频教程不是特别容易理解，所以写成详细的文章分享给大家。
本文用到的微信图标和字体颜色等素材，提供下载
https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ
相关推荐
- 美女老师教我玩淘宝推广（淘宝女装直通车推广技巧）
-
上一篇：你有没有这样用淘宝引流？承接上文我：BOSS啊，推广很难耶，找个高手教教我我心想得是高手教自己才能事半功倍，不然跟不厉害得人学了还是小白一枚老板：哈哈，小炜，找个美女给你好吧？我之前也说了一些...
- 网络推广常用软件分享（网络推广常用软件分享）
-
大家好，今天给大家分享几款网络推广常用的软件。百分百qq营销软件百分百微信营销软件百分百邮箱群发软件豪迪qq群发软件批量邮箱验证专家大家可以自行网上下载，也可以评论区留下自己的邮箱，给大家群发安装包...
- 淘宝推广效果不好，是用老计划还是重新建计划?
-
推广效果不好用老计划还是新建计划？说说付费推广计划表现不好时的两种情况！1.开的是直通车的手动出价标准计划，因自己不会优化，之前跑过一段时间，点击率、转化率等各方面数据都很低，像这种情况建议大家修改...
- 鲸观察|京东APP改版并推出“送礼”功能，和微信、淘宝一起卷“春节档”
-
蓝鲸新闻1月17日讯（武静静）蓝鲸新闻注意到，近日，京东app进行了一次大的改版，主要在首页、京东生活、我京、商详、消息和搜索，目前正在测试阶段，即将全量推出。值得一提的是，京东也在其最新版本APP中...
- 天猫推出AI设计工具:商家可一键生成多种风格场景图
-
3月20日，在上海AWE2025展上，天猫表示推出的电商行业首款AI设计工具“家作”升级功能。商家上传商品图，即可一键生成多种风格的场景图，并且可以选择模特做展示，自定义出图，效果如同专业级棚拍实感。...
- 新经济观察丨平台为商家配备AI助手 可一键生成媲美实拍场景图 还带模特
-
封面新闻记者付文超3月20日，在上海AWE2025展上，天猫推出的电商行业首款AI设计工具“家作”全新升级。商家上传商品图，即可一键生成多种风格的场景图，并且可以选择模特做展示，自定义出图，效果如同...
- 推广拉新app哪几个靠谱?盘点10大拉新推广接单平台，都是一手单
-
推广拉新app哪几个靠谱？相信这是很多朋友都非常关注的话题，其实这个问题更深次的解读，是推广拉新app那几个平台靠谱，因为只有找到靠谱的接任务平台，才能对接到靠谱的推广拉新app项目。本期文章，小编就...
- 行业首个!天猫推出AI设计工具 商家可一键生成媲美实拍场景图
-
天猫率先给商家配备“AI设计助手”，可一键生成媲美实拍的场景图！3月20日，在上海AWE2025展上，天猫推出的电商行业首款AI设计工具“家作”全新升级。商家上传商品图，即可一键生成多种风格的场景图...
- 淘宝改版放大招!全站推广可“定时定域”，拼多多这次彻底输了?
-
大家是不是受够了无脑烧钱的全站推广？烧钱推广却零转化？淘宝这波操作，让拼多多彻底慌了！淘宝最新改版的全站推广，直接甩开拼多多——支持自主设置投放时间+精准锁定投放地域！那些凌晨3点的无效点击次数、...
- 1月19日起!英雄联盟全场半价来袭 玩家快来薅羊毛
-
【CNMO新闻】临近春节，人们都在购置各种年货。在此氛围下，大家的购物欲大增，商家们也在此时纷纷推出优惠活动，抓住一波促销机会，游戏行业也不例外。1月13日，CNMO从《英雄联盟》官方了解到，LOL全...
- 38节营销太容易翻车，就不能老老实实打折么?
-
今年品牌确实长进了我是平权主义者严无视...
- 乔汉娜价格降至10000金 商城半价商品上架
-
6月17日(周三)，《风暴英雄》游戏内商城更新完毕，新英雄圣教军乔汉娜的金币价格由15000降至10000，等待多时的玩家可以看情况出手了!与此同时，最新一期的每周特惠也已经开启，新上架的半价商品包括...
- 300万元!低至五折起!明天中午12点，余杭亚运文旅消费券大礼包来了
-
潮新闻客户端余杭文旅记者潘骏余杭亚运文旅消费券来了！总额300万元，景区景点、酒店民宿、旅行社线路、体育场所，都可使用。定好闹钟，6月15日12点正式开抢！6月15日是亚运倒计时100天，为宣传...
- 2023年淘宝“双十一”，全网最低价实至名归
-
10月24日,2023年的天猫淘宝“双十一”正式开启。经过了这些天,想必大家对今年的天猫淘宝“双十一”活动,已经有了很多认识和不一样的看法了吧?大家都知道,淘宝第一次开启“双十一”网购狂欢节活动是在2...
- 淘宝9月满减活动有哪些?2024天猫九月跨店满减推荐
-
9月6日星期五消息：金秋九月，淘宝天猫迎来了一波又一波的精彩活动！无论你是想为中秋团圆备好礼，还是为即将到来的国庆假期做准备，或是单纯想给自己和家人添置些新衣新物，9月的淘宝都不会让你失望。让我们一起...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 淘宝店铺优惠券怎么用 (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)