百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 运营笔记 > 正文

原型设计:APP下导航如何通过Axure画出来

ann3311 2025-03-26 09:26 5 浏览 0 评论

下导航是APP原型设计中常见的功能,如何快速高效的通过Axure画出来呢?

网上有不少文章讲过如何画下导航,要么方法特别复杂,要么步骤并不全面。典型的错误有两个,①使用多个动态面板来嵌套实现下导航。②使用动态面板来区分选中和未选中。

但是学会本文你可以100%模拟出微信、支付宝,淘宝,天猫app的下导航原型效果,点击预览效果。

接下来我会以微信APP为例,详细讲解每一步骤,学会之后可根据自身项目要求酌情删减。

画出每个导航按钮

每个导航按钮都是由方框,名称,图标3个元素组成。

方框,使用矩形元件。宽度=375/4=94px。高度建议50px左右。

名称,使用文本元件。输入文字代表导航名称。

图标,则用图片元件。缩放到合适的大小。

处理一下三者的布局,最终得到导航按钮。

(Axure功能理解比较深的童鞋,可以将前两者合并成一个矩形实现,新手不建议这样使用。)

设置导航按钮样式

以第一个导航按钮为例,设置它每一个元素的交互样式-选中。选中代表的是元素的另外一个状态。

方框,改变矩形的背景色。

名称,改变文字的颜色。

图标,使用另外一个图片来替换。

以此类推,把其他三个导航按钮也做一下样式。(矩形、文本元件可以使用格式刷快速复制交互样式,图片元件不行。)

设置导航按钮链接

将每个导航按钮的三个元素选择,并生成组合。

然后给组合添加链接,跳转到对应的页面“微信、通讯录、发现、我”。

为什么要这样做?点击导航按钮的区域内,都可以跳转。所以使用组合来表示这个区域内都是可交互热区范围。

我们已经画出了微信下导航的线框图效果,接下来讲解如何做出相似的交互效果。

生成固定位置母版

下导航是存在于所有的导航页。所以需要把下导航原型放到不同的页面。

选中这些元件,右键生成母版。

考虑到下导航在每个页面中的位置是一样的,所以将母版设为固定位置。

添加母版到导航页

打开微信页面,将左下方的母版拖进去。

以此类推即可…

设置导航页的效果

当位于微信页面的时候,导航按钮微信是不可点击,但是样式是点击后的样式效果。

所以需要设置当载入微信页面的时候,选中该按钮组合,并且禁用该按钮的交互。

以此类推…

需要注意的是,同时只有一个导航按钮处于选中状态,所以需要把所有的导航按钮选中并新建成单选组。

固定导航相对于屏幕的位置

如果你希望下导航原型和微信下导航一样,固定在页面的底部。

那么把这些导航按钮选中并生成动态面板,然后右键固定到页面指定位置即可。

至此我们做出了和微信APP完全一样的下导航原型和交互效果,

小结

本文是以微信APP为例,讲解常用的功能该如何画原型。鉴于视频教程不是特别容易理解,所以写成详细的文章分享给大家。

本文用到的微信图标和字体颜色等素材,提供下载
https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ

相关推荐

淘宝内测新版店铺会员表达体系:首页新增会员日飘条,搜索及推荐加强露出

记者获悉,淘宝近日已开始向部分用户内测新版店铺会员表达体系。参加内测的用户发现,淘宝首页上方已新增会员日飘条,店铺会员相关活动和信息开始集中出现在搜索、推荐、商品详情页等多个重要场域。具体而言,目前店...

淘宝活动海报尺寸多少?首页活动怎么设置?

当淘宝活动设置好了以后,必须要进行宣传,很多商家会在淘宝店铺首页设置一下相关的活动,这样用户进入店铺就能看到了,那么首页活动应该怎么设置?下面我们一起来具体了解看看吧。淘宝首页活动怎么设置?打开千牛客...

淘宝大学首次跨界携手TCL成立新零售学院

e公司讯,e公司记者从TCL集团获悉,1月26日,阿里巴巴集团旗下培训平台淘宝大学首次跨界携手TCL成立淘宝大学·TCL新零售学院。该新零售学院将设立在TCL酷友网络科技有限公司,以虚拟学院形式运作。...

淘宝大学认证讲师田野:十年天猫双11唯一没变的就是变化

田野封面新闻记者易弋力他是最早一批参加双11的商家,开业三天的店铺在第一个双11赚了39万;他是淘宝大学8年的王牌讲师,练就了看一眼首页就知道店铺转化率的“北冥神功”。他就是双11的十年“老司机”—...

“聚焦食品电商 勇抓蜀商机遇”,淘宝大学川渝食品商家赋能公开课今日开讲

6月15日,由淘宝大学和淘宝汇吃主办,封面新闻承办的“聚焦食品电商勇抓蜀商机遇”川渝食品类商家赋能活动暨19财年食品与汇吃商家大会在成都举行。这是自今年3月27日淘宝大学华西分校成立以来的首次垂直领...

淘宝大学电商直播西南分校落户重庆

阿里巴巴联手重报集团培养直播带货达人重庆日报讯(记者王丽)6月15日,阿里巴巴集团与重庆日报报业集团在渝举行“淘宝大学电商直播西南分校”签约揭牌仪式,阿里巴巴淘宝大学在西南地区唯一一所电商直播培训...

◎ 淘宝大学培训农村电商“店小二”

息烽区位优势明显,发展潜力巨大。县委、县政府经过仔细分析,决定借贵州发展大数据之机,大力发展农村电商,带动县域经济发展。但是电商专业人才紧缺,物流成本高,让多数息烽特色商品在大山中“沉睡”……困难面...

转化率低?无线端详情页该这么做| 网商大学

文/蛋蛋无线详情页优化可谓是无线转化的重中之重。商家都意识到无线详情优化非常重要,都开始重视并去做。可是还有不少商家的无线转化不好,只因详情页制作没有注意到设备特征。以网商大学诊断的一家时尚女装品...

想成为电商人才吗 快去淘宝大学贵阳分校吧

3月25日上午,淘宝大学贵阳分校在清镇淘宝生态城挂牌成立。创业者可免费进校受训,淘宝生态城将提供培训、店铺、供货、销售等创业条件,创业者在淘宝城可实现白手创业当电商老板。据悉,淘宝大学今后计划免费培训...

报名速来~淘宝大学沭阳培训基地新一期课程上线!

提示:点击上方"太原易点微信"↑免费订阅本刊大家注意啦~~~淘宝大学沭阳培训基地2018年度第十一期培训课程来啦本次淘大的讲师想必大家都熟悉——孙瑜,有“搜索大神”之称他的课场场爆满,还不赶快来报名~...

淘宝大学要开“无线”学科,课程设置看起来很实用

淘宝大学负责人叶挺口述:淘宝大学负责人叶挺整理:范婷婷应阿里今年的无线升级和赋能商家战略,阿里巴巴商家事业部、淘宝大学推出了2016官方全新培训项目——“网商成长三板斧”,培训内容紧贴当前最新的...

还在纠结“双十一”该怎么玩?淘宝大学“特训”来帮你!

提示:点击上方"沭阳发布"↑快来关注我们!一年一度的双十一购物狂欢节即将来临!“野心勃勃”的卖家们已开始摩拳擦掌为赚得盆满钵满积极应战!今日,电子商务“双十一”专场培训开班!吸引了来自县内外530余名...

今天开始,淘宝可以微信支付了(今天开始,淘宝可以微信支付了吗)

9月5日,淘宝网发布公告,宣布新增微信支付能力:为提升消费者的购物体验,淘宝网计划新增微信支付能力,于本公告公示七天后逐步向所有淘宝网卖家开放。2024年9月12日生效,也就是今日开始生效。基于上述服...

冲上热搜!淘宝将可用微信支付?网友:赶紧的吧

今天,微博话题“淘宝即将全面支持微信支付”冲上热搜榜首,引发公众关注。9月4日,淘宝天猫发布公告称,为提升消费者购物体验,淘宝计划新增微信支付能力,并于本意见征集结束后,进行平台规则调整。据悉,本次调...

12日起,淘宝可用微信支付了(淘宝是否可用微信支付)

淘宝发布关于《新增微信支付能力的公告》公示7天后,在12日起逐步向所有淘宝网卖家开放。9月5日,淘宝网发布公告,宣布新增微信支付能力:为提升消费者的购物体验,淘宝网计划新增微信支付能力,于本公告公示七...

取消回复欢迎 发表评论: