当前位置:粤秀教育 > 艺术 > 艺术问答 > 正文

Axure怎么画出微信APP导航原型图?

发布时间: 来源:只考清华 168

使用Axure也可以绘制出APP的导航原型图,但是有很多的新手小伙伴还不会绘制!下面粤秀教育就来教一教大家怎么绘制操作!如果此时你心里众多疑惑:Axure去哪学?怎么学?学多久?那不妨学习体验粤秀教育的Axure自学视频课!资深讲师授课,从基础的Axure软件功能到原型绘制到交互案例,综合全面的带你入门Axure产品原型设计!~

Axure画出微信APP导航原型图方法:

Axure怎么画出微信APP导航原型图?

画出每个导航按钮

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

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

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

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

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

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

设置导航按钮样式

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

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

名称,改变文字的颜色。

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

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

设置导航按钮链接

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

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

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

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

生成固定位置母版

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

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

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

Axure怎么画出微信APP导航原型图?

添加母版到导航页

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

以此类推即可…

设置导航页的效果

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

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

以此类推…

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

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

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

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

以上即是关于Axure怎么画出微信APP导航原型图?”的全部精彩内容分享了,希望能够帮助到你!大家跟着步骤学习操作,也要独立思考哦!最后,学习更多Axure原型技巧,不妨阅读更多Axure相关文章学习?

相关文章
精彩推荐
学习热线
4008-128-711
申请报名

立即申请报名,提升你的技能

  • 姓名

  • 电话*

  • 报读学校

  • 报读专业

立即报名

Warning: Invalid argument supplied for foreach() in /www/wwwroot/www.yuexiuedu.com/yishu/wp-includes/script-loader.php on line 2841