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

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

ann3311 2025-03-29 14:50 15 浏览 0 评论

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

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

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

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

画出每个导航按钮

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

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

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

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

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

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

设置导航按钮样式

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

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

名称,改变文字的颜色。

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

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

设置导航按钮链接

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

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

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

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

生成固定位置母版

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

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

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

添加母版到导航页

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

以此类推即可…

设置导航页的效果

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

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

以此类推…

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

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

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

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

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

小结

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

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

相关推荐

夸克发布全新“AI相机” 形成多模态产品入口和交互体验

来源:环球网【环球网科技综合报道】4月27日,夸克AI超级框发布全新AI相机,上新“拍照问夸克”功能。基于视觉理解与思考推理的强大模型能力,夸克AI超级框从视觉出发创新下一代搜索体验,进一步理解和回...

拍照问夸克!“AI相机”上线(ai相机和普通相机有什么区别)

来源:新华网新华网北京4月27日电(记者张漫子)又一国产多模态AI应用上线。夸克AI超级框27日发布“AI相机”,上新“拍照问夸克”功能。基于视觉理解与思考推理的模型能力,“拍照问夸克”支持用户在手...

夸克推出“拍照问夸克” ,提升超级框多模态能力

4月27日,夸克AI超级框上新了“拍照问夸克”功能。基于AI超级框的视觉理解和推理模型能力,“拍照问夸克”能在手机和电脑上进行图片搜索、问答、思考、编辑以及创作。夸克搜索负责人张帆表示:“我们希望通过...

淘宝链接上小红书有什么用(怎么在小红书上挂淘宝链接)

一、小红书与淘宝链接互通的影响小红书和淘宝的合作,允许在小红书平台上直接挂载淘宝链接,这一变化具有多方面的意义。对于消费者而言,购物体验得到了极大的优化。以往在小红书上看到心仪的商品,若想购买,往往需...

如何批量下载淘宝上的商品图片信息

在电商领域中,图片具有决定性作用。优质的商品图片能第一时间抓住消费者眼球,快速传递产品信息,有效提升点击率和购买转化率。它直观展示商品细节、功能及应用场景,弥补了线上购物无法实物感知的短板。高质量的图...

教你快速轻松获取淘宝,天猫等平台商品图片的方法

在这个网络时代电商是我们日常会接触到,像淘宝,天猫,拼多多等一些平台,那么当我们想要下载这些产品的图片做参考的时候,我们都知道主图,详情图非常的多,下载下来是很麻烦的事情,那么现在有了好的解决方法,感...

一键批量下载淘宝图片信息,节省时间

图片在电商中的重要性不言而喻,它就像一家店铺的门面,直接影响着消费者的第一印象。高质量的图片能吸引顾客,提升购买欲望,而低质量的图片则可能导致潜在客户的流失。因此,投资于优质的产品摄影和设计是提升电商...

2025淘宝京东618活动时间表发布:从5月13日开始到6月18日结束,附优惠红包指南!

根据2025年京东和淘宝618最新活动规则,红包领取方式已全面升级,以下是整合多平台信息的一站式领取攻略,覆盖口令、时间、技巧及隐藏福利,建议收藏备用!...

淘宝双十一抢购攻略,如何能快人一步 小编来帮您

淘宝双十一抢购攻略,如何能快人一步小编来帮您

2025年淘宝京东618活动关键时间点,618选购攻略哪天买最便宜最优惠,活动力度最大

各位小伙伴注意啦!2025年京东618年中购物狂欢节即将盛大开启,今年的活动不仅延续了"全网最低价"的硬核承诺,更通过超长周期、多重补贴和创新玩法,为消费者打造一场覆盖全场景...

淘宝闪购奶茶免单再加码:单日70万杯,还有秒杀频道红包

天猫618期间,淘宝闪购加码奶茶免单,宣布天天送奶茶,5月24日全天再送出70万杯。用户进入淘宝App搜索“奶茶免单”,或者进入淘宝闪购频道,点击左下角的“抽免单”就有机会抢到奶茶免单卡。此外,5月2...

网店标品应该怎么去运营?运营的方法有什么?

在平台中,商品也分为标品和非标品,所以对商家来说,我们要做好不同产品间的运营工作。网络店铺的标品应该怎么去运营?运营的方法有什么?今天我们就来给各位商家分享一些方法与技巧。  广大商家们如想要知道商品...

淘宝 2025 年新玩法揭秘——内容种草与互动权重

咱做淘宝的,都知道这平台的规则和算法那是一年一个样,到了2025年,又有不少新变化。今天咱就来唠唠现在淘宝的一些玩法,看看咋在这新规则下把店铺搞起来。...

淘宝直通车如何合理运用大词、精准词、长尾词?

随着淘宝不断的更新,不断的变化,平台对词的人群筛选越来越精准了,优质的词能给我们带来跟多的流量,直通车也不例外,直通车的词如何运用到每一个场景是很重要的,下面我来分享下,我平时用词的一些技巧。直通车用...

直通车投放的关键词怎么选?(直通车标准投放)

直通车关键词的选择是我们直通车推广的重中之重。选择什么样的关键词,就会直接影响我们店铺的访客和最终成交量、以及直通车的推广效果,而它也从另一个侧面反映了客户的需求。投放什么样的关键词最适合直通车投放关...

取消回复欢迎 发表评论: