欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

axure设计网页导航菜单原型图的思路与实例介绍

程序员文章站 2023-09-05 09:27:10
axure设计网页导航菜单原型图的思路与实例介绍...

axure8.0是一款原型设计工具,是产品经理必不可少的工具,经常使用axure制作网页导航,该怎么制作网页导航菜单呢?今天我们就来通过一个实例来介绍怎么画导航菜单的原型设计,以淘宝app导航为例来详细说明,详细请看下文图文介绍。

一、前期准备

1、首先我们的电脑上需要安装原型设计工具axure:

axure设计网页导航菜单原型图的思路与实例介绍

2、需要具备一些基础的软件设计知识:

二、导航状态制作

1、打开原型设计工具:

axure设计网页导航菜单原型图的思路与实例介绍

2、新建一个母版,命名为导航菜单,然后再工作区域内拖动两个长方形,调至合适的尺寸:

axure设计网页导航菜单原型图的思路与实例介绍

3、从库中拖动一个图形至画图区,双击,从电脑上选择合适的图标:

axure设计网页导航菜单原型图的思路与实例介绍

4、双击图标,在右击的弹出框中选中转换为动态面板:

axure设计网页导航菜单原型图的思路与实例介绍

5、之后会弹出一个设置框,修改名称,以及添加两种状态:选中和未选中:

axure设计网页导航菜单原型图的思路与实例介绍

6、双击未选中,然后点击未选中页面上的图标,从电脑上选中未选中的图标;这样一个图标的两种状态就都有了。

axure设计网页导航菜单原型图的思路与实例介绍

7、依照上面的方法,画出其他四个图标:

axure设计网页导航菜单原型图的思路与实例介绍

三、制作菜单页面

根据导航栏,分别创建5个单独的页面,然后命名:

四、制作菜单单机效果

1、选中菜单,双击右侧鼠标单机时:

axure设计网页导航菜单原型图的思路与实例介绍

2、选中当前窗口:

axure设计网页导航菜单原型图的思路与实例介绍