51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！

下导航是APP原型设计中常见的功能，若何快速高效的经由过程Axure画出来呢？

网上有不少文┞仿讲过若何画下导航，要么办法特别复杂，要么步调并不周全。典范的缺点有两个，①应用多个动态面板来嵌套实现下导航。②应用动态面板来区分选中和未选中。

然则学会本文你可以100%模仿出微信、付出宝，淘宝，天猫app的下导航原型效不雅，点击 预览效不雅 。

接下来我会以微信APP为例，具体讲解每一步调，学会之后可根据自身项目请求酌情删减。

画出每个导航按钮

每个导航按钮都是由方框，名称，搁笔3个元素构成。

搁笔，则用图片元件。缩放到合适的大年夜小。

方框，应用矩形元件。宽度=375/4=94px。高度建议50px阁下。

名称，应用文本元件。输入文字代表导航名称。

处理一下三者的构造，最终获得导航按钮。

（Axure功能懂得比较深的童鞋，可以将前两者归并成一个矩形实现，新手不建议如许应用。）

设置导航按钮样式

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

方框，改变矩形的配风景。

名称，改变文字的色彩。

本文是以微信APP为例，讲解常用的功能该若何画原型。鉴于视频教程不是特别轻易懂得，所以写成具体的文┞仿分享给大年夜家。

搁笔，应用别的一个图片来调换。

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

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

设置导航按钮链接

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

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

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

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

推敲到下导航在每个页面中的地位是一样的，所以将母版设为固定地位。

添加母版到导航页

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

我们已经画出了微信下导航的线框图效不雅，接下来讲解若何做出类似的交互效不雅。

生成固定地位母版

以词攀类推即可…

设置导航页的效不雅

当位于微信页面的时刻，导航按钮微信是弗成点击，然则样式是点击后的样式效不雅。

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

以词攀类推…

须要留意的是，同时只有一个导航按钮处于选中状况，所以须要把所有的导航按钮选中并新建成单选组。

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

如不雅你欲望下导航原型和微信下导航一样，固定在页面的底部。

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

至此我们做出了和微信APP完全一样的下导航原型和交互效不雅， 点击预览。

小结

本文用到的微信搁笔和字体色彩等素材，供给下载 https://www.jianguoyun.com/p/DYKpyqkQu4zdBRjPwzQ

【编辑推荐】

1. 高教社力推HTML5 App开辟教程
2. H5 App开辟专业教材┞俘式宣布
3. 外媒速递：让你的app在圣诞节被赞的10个最佳筹划
4. 无需修改root，MIUI8录屏APP体验版上线
5. 麦当劳APP终于要推移动订单和付款功能了!

【义务编辑：张燕妮 TEL：（010）68476606】

　　推荐阅读

　　EMC James McCready：软硬件配置更灵活，VxRail旨在帮助用户简化部署，降低TCO

51CTO诚邀您9月23号和秒拍/国美/美团元专家一路聊智能CDN的优化之路，抓紧时光哦！ 【51CTO.com原创稿件】在软>>>详细阅读

本文标题：原型设计：APP下导航如何通过Axure画出来

地址：http://www.17bianji.com/lsqh/37315.html

 1/2    1