绘制APP下的导航导航是APP原型设计中常用的功能。如何通过Axure快速高效的绘制出来呢？网上有很多关于如何绘制导航的文章，要么方法特别复杂，要么步骤不全面。有两个典型的错误，①使用多个动态面板嵌套来实现底部导航。②使用动态面板区分选中和未选中。但是学习本文后，你可以100%模拟微信、支付宝、淘宝、天猫APP下导航的原型效果，点击预览效果。下面我就以微信APP为例，对每一个步骤进行详细的讲解。学完后，可以根据自己的项目需求删除。绘制每个导航按钮每个导航按钮由三个元素组成：框、名称和图标。盒子，使用矩形元素。宽度=375/4=94px。建议使用50px左右的高度。名称，使用文本组件。输入导航名称的文本。图标，使用图像组件。缩放到合适的大小。处理三者的布局，最终得到导航按钮。（对Axure的功能理解较深的童鞋，可以将前两者组合成一个矩形来实现，初学者不推荐。）设置导航按钮的样式以第一个导航按钮为例，设置交互样式它的每个元素-选择。Selected表示元素的另一种状态。框，更改矩形的背景颜色。名称，更改文本的颜色。图标，用另外一张图片代替。以此类推，为其他三个导航按钮设置样式。（矩形和文本组件可以使用格式刷快速复制交互样式，图片组件不能。）设置导航按钮链接，选择每个导航按钮的三个元素，生成组合。然后在组合中添加链接，跳转到对应页面“微信、通讯录、发现、我”。你为什么要这样做？您可以在点击导航按钮的区域跳转。所以用组合来表示这个区域都在交互热点范围内。微信下导航的线框效果我们已经画出来了，接下来会讲解如何制作类似的交互效果。生成出现在所有导航页面上的固定位置主导航。所以需要将下层导航原型放在不同的页面上。选择这些组件并单击鼠标右键以生成母版。考虑到每个页面底部导航的位置都是一样的，master设置为固定位置。导航页添加大师打开微信页面，将大师拖到左下方。以此类推，可以设置导航页的效果。在微信页面时，导航按钮微信无法点击，但是样式是点击后的样式效果。所以需要设置在微信页面加载时选择按钮组合，禁用按钮的交互。依此类推...需要注意的是，同时只选中了一个导航按钮，所以需要选中所有的导航按钮，并新建一个radiogroup。固定导航相对于屏幕的位置如果想让底部导航原型和微信底部导航一样，应该固定在页面底部。然后选中这些导航按钮并生成一个动态面板，然后右击固定到页面指定位置。至此我们就做出了和微信APP一样的导航原型和交互效果，点击预览。小结本文以微信APP为例，讲解常用功能的原型绘制方法。由于视频教程不是特别通俗易懂，所以写成一篇详细的文章分享给大家。本文使用的微信图标和字体颜色等素材均可下载https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ
