Question

Axure怎么绘制Web后台产品的顶部导航组件？

Answer 1

我们在日常工作或娱乐中经常用到产品背景。产品后台有很多功能组件，不同产品的后台功能也不一样。本文分享了在Axure中绘制Web后端产品顶部导航组件的方法，让我们一起来看看吧。入门Axure做产品经理，就上来学习！精选多套优质Axure自学视频课，综合全面的教会大家Axure软件基础操作以及原型交互，让你可以理论+实践全面发展~

Axure绘制Web后台产品的顶部导航组件步骤：

一、如何画出顶部导航

1）先画导航背景

从默认元件库拖动“矩形1”到画布位置(0,0)，修改尺寸为1200*80px。

2）画产品图标

从默认元件库拖动“图片”到画布合适位置，修改尺寸为40*40px。

3）再画产品名称

从默认元件库拖动“三级标题”到画布合适位置，双击输入产品名称。

4）再画用户名

从默认元件库拖动“文本标签”到画布合适位置，修改双击输入用户名。

5）再画退出按钮

从默认元件库拖动“文本标签”到画布合适位置，双击输入退出，修改字体颜色为#0000FF。

6）同时选择产品图标和产品名称，右键点击“组合”，然后点击该组合，右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发条件“单击时”，添加动作“打开链接”，链接到“首页”，点击“确定”按钮。

7）点击“退出”，右侧边栏切换到“交互”，点击“新建交互”按钮，选择触发条件“单击时”，添加动作“打开链接”，链接到“登录”，点击“确定”按钮。

8）如需顶部导航相对于屏幕位置不变，则同时选择相应的元件然后右键点击“转换为动态面板”，然后在右侧边栏“样式”中勾选“固定到浏览器窗口”，水平固定选择“居中”，点击“确定”按钮。

9）点击“预览”按钮，然后在浏览器中查看原型效果。

二、如何使用顶部导航

顶部导航作为大部分页面都需要用到的通用组件，那么我们是不是在对应页面都需要画一遍呢？答案是否定的，我们可以使用Axure的母版特性来实现只画一次，批量应用到所需页面。

10）同时选择顶部导航的所有元件，右键点击“转换为母版”，然后在弹窗“创建母版”中输入名称“顶部导航”，然后点击“继续”按钮。

11）点击左侧“母版”进入相应视图，右键“顶部导航”，点击“添加到页面中”，然后通过全选和选中子项，结合不选和取消选中子项来把所有需要顶部导航的页面快速选中，最后点击“确定”按钮。

好咯，关于“Axure怎么绘制Web后台产品的顶部导航组件？”的内容今天就分享到这里了，希望你能从中学到东西哦！Axure学习，的Axure相关文章、Axure自学视频课都是不错的选择！文字理解能力强的话，个人推荐Axure文章学习；但是想要专业学习Axure的话，还是推荐大家选择Axure自学视频课系统学！不仅可以更加清晰有条理，大家也都能够利用自己的碎片化时间学习！