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

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

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

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

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

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

画出每个导航按钮

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

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

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

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

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

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

设置导航按钮样式

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

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

名称,改变文字的颜色。

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

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

设置导航按钮链接

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

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

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

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

生成固定位置母版

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

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

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

添加母版到导航页

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

以此类推即可…

设置导航页的效果

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

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

以此类推…

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

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

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

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

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

小结

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

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

相关阅读

原型设计的道、术、器

Axure原型设计:Axure原型加流程图功能的高效结合

#专栏作家#

浪子,业务型PM,浪子PRD系列51prd.com,公众号langzisay。

本文由 @浪子 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自 Pexels,基于 CC0 协议

欢迎打赏支持原创
5人打赏
评论
有话不说憋着难受
  1. 说用4个面板切换比这种方法方便的人,可以说根本就没有理解这种方法的方便之处。举个例子,如果你要把其中的一个图标换掉,你是不是要换四个面板中的图标?而这种方法,只需要换一个图标。

    回复
  2. 你给的原型,那广告条都把你要展示的东西挡上了 :arrow:

    回复
  3. 大神可否详解下这种和用动态面板实现的有何区别,小白有点没吃透,谢谢啦

    回复
  4. 这种感觉好复杂,用Mockplus做1-2分钟就解决了。

    回复
    1. 并不能做到的哦。
      另外和用什么原型软件没有关系。

      回复
  5. 通过改变元素选中状态的样式,实现选中效果,要设置的事件用例太多了吧

    回复
    1. 仅需设置一个,然后批量格式刷。这才是效率。

      回复
  6. 从不用muban ;-)

    回复
  7. 这个有这么复杂么?有更简单的方法吧,比如动态面板,比如做4个页面,点击哪个显示哪个,隐藏其他就ok了呀

    回复
    1. 麻烦先看清楚这种方法的原理,再对比动态面板来评价文章哈。

      回复
  8. 实现的方式比较多,你这种方式不建议

    回复
    1. 仁者见仁智者见智,文章不是对所有人都有用,所以如果觉得对您没有帮助就不要多加消极性评论

      回复
    2. 何来消极评论,莫以小人之心。。。谢谢!

      回复
    3. 建议看懂这篇文章能够实现什么样的下导航,再来评价有几种实现方式。

      回复
    4. 不装逼会死?

      回复
    5. 觉得文章没用,可以不看。
      人身攻击,挺没意思的。而且还是个女孩子。
      再说了,连文章都没看懂就评价,只会显得水平low。

      回复
    6. 1.我开始评论的只是不建议这么做,个人觉得没必要浪费时间在这个上面。
      2.我的评论从没有消极和人生攻击,仁者见人智者见智,你看到的和你理解的,只是你的心态是视野所能理解的东西。
      3.LOW的是谁,我就不知道了。lower总是从最开始就认为人家的态度是消极的,还用仁者见仁智者见智(PS:你懂什么意思吗?)

      回复
04e=$age.woshipm.com52+6s/20l alt/bo>c55et="">tetarget="_b">tetarget="_blank" href="http:// 04e=$age.woshipm.com528s/20l alt/bo>c55et="">g>圈iv> White"> class=">tetarget="_blank" href="http://www.wo435m.com/#coan clas有元紌偀丁淘 vs 850538微信 vs QQM蚄TOP会White"> class_U_7-11-158:>浪子PRD
- .chi## --> White"> m0l c>tetarget="_blank" href="http://wmww.w..22m.com/um.com/u/147106" 48 /37fu4e="/qu8 72> 04e=$age.woshipm.com/wnvcblapinjianli2/11WAbLAHn100x6alt="" hei100n-use" wid6al.--
White"> class=">tetarget="_blank" href="http://wmww.w..22m.com/>an class="te成长图鉴M蚄TOP会White"> class_U_7-11-108:>浪子PRD
- .chi## --> White"> m0l c>tetarget="_blank" href="http://wmww.w8402m.com/um.com/u/147106" 48 /37fu4e="/qu8 72> 04e=$age.woshipm.com/wcblapinjianli-72/11WAbLAHn100x6alt="" hei100n-use" wid6al.--
White"> class=">tetarget="_blank" href="http://wmww.w8402m.com/>ss=庈享|创公司呸了板月35岁an class="teM蚄TOP会White"> class_U_7-11-108:>浪子PRD - .chi## --> White"> m0l c>tetarget="_blank" href="http://wmww.w712ipm.com/m.com/u/147106" 48 /37fu4e="/qu8 72> 04e=$age.woshipm.com/wcblapinjianli-62/11WAbLAHn100x6alt="" hei100n-use" wid6al.-- White"> class=">tetarget="_blank" href="http://wmww.w712ipm.com>研究了2份ss="te人> 3.LOW仹量够实71.htss="telo欢迎M蚄TOP会White"> class_U_7-11-158:>浪子PRD - .chi//sh8:>浪8:>浪8
圈子
hot-questisvgcomml class="code-ul"> White"> class=">tetarget="_b">
White"> class12。答"lank">Young浪子PRD
- >圈iv> hot-questisvgcomml class="code-ul"> White"> class=">tetarget="_b">
White"> class8。答"lank">Young浪子PRD - >圈iv> hot-questisvgcomml class="code-ul"> White"> class=">tetarget="_b">人lo"tex的值的TOP会议? White"> class8。答"lank">Young浪子PRD - >圈iv> hot-questisvgcomml class="code-ul"> White"> class=">tetarget="_b">调沟通值的TOP会议? White"> class10。答"lank">Young浪子PRD - >圈iv> hot-questisvgcomml class="code-ul"> White"> class=">tetarget="_b"> 3.章倪朏段文驱琪行自an UGC紌容值的TOP会议? White"> class8。答"lank">Young浪子PRD - >圈iv> hot-questisvgcomml class="code-ul"> White"> class=">tetarget="_b"> class16。答"lank">Young浪子PRD - >圈ig>圈ig>圈ig>圈 3.44g>圈 3.44g>圈 3集媒觱O育Os="te社xt"活琎最谚觉蜋位服务71.ht开r /00闄弉蜋信公众号woshipm成立8年a举办线讲座每余朻线活300+妀覆盖北850:海广州O圳O州O态10城市蜋3帪有竞内所藹泛注和高>.ht789万 囘85%an class="te怅要里c55et="_o/"ediion sediionitle">>浪子PRD fodCor-v cl92e2a9fc17cf892ela 92e2a9fc17cf892ela 3.44加tetarget="_b> W加tetarget/tougao="m.com/u/147106" 投稿须M蚄TO加class="code-ul"> W加tetargetound"> W加tetarget>>scomim "//shang.qq.com/wp fodCor-class="作伙伴M>浪子PRD 4加tetarget="_b">寨堂" /ao/TO加c4加tetarget="_blank" hgeetesthref=?woshipmd"mar ="m.com/u/147106" 48 /37fu4e="/qu8 72> 04e=$age.woshipm.com524-22/11" alt/b致ml">=""mitle="致ml">="/ao/TO加c4加tetarget="_b"> fodCor-class="APP载M>浪子PRD浪子PR pyrighhraclass="co4 v clai <"class="co旗现hts: ote-post-title">/00派o/ | ote-post-title">粤ICP备idkef=30号-1o/ 版权文 © 圳聸创想信息科ext">限公司c55et="_o u-floatRighhrate/8505mar in-top:-10px;spa内训/o作/投诉:3 C57 435161o/>浪子PRo/>浪子PRo/>浪White"> clas2top281lank">Young浪 u-h-fl281lcript type="li> = ((t="_bs:" == documass.locaiion. to/a>) ? n-uund"> + "hm.baidu hef=h.js%3Fb85cbcc76e5633fd7ey=8f2fed0f504f' type='li>浪 1lcript type='li> /* */ o/"cripth 1lcript type='li> /* */ o/"cripth 1lcript type='li>