1. 主页 > 行业资讯 > 设计文章 >

如何用Axure绘制Web后台产品的顶部导航组件

编者按:我们经常在日常工作或娱乐中使用产品背景。产品后台有很多与功能相关的组件,不同产品的后台功能不同;本文作者分享了用Axure绘制Web后端产品顶部导航组件的方法,大家一起看看。

Web后台产品顶部的导航组件用于显示产品名称logo、用户名、登录和退出等关键信息。PM必须了解和学习它的原型绘制方法。

我们在绘制Web背景产品的原型页面时,首先要考虑绘制页面的导航组件(顶部导航、菜单栏、面包屑),然后绘制页面的内容区域;前者存在于大部分页面,是一样的,后者则是每一页都不一样。

那么我们如何使用Axure绘制类似下图的常用顶部导航组件效果,以及在后续的原型绘制中如何使用?接下来,请查看详细步骤,或者您可以直接预览顶部导航的原型地址https://rgewvb.axshare.com

一、如何绘制顶部导航

1)先画导航背景

将“矩形1”从默认目录拖到画布位置(0,0),并将大小修改为1200*80px。

2)绘制产品图标

将“图片”从默认组件库中拖到画布上的适当位置,并将大小修改为40*40px。

3)再次绘制产品名称

将“三级标题”从默认目录拖到画布上的适当位置,双击输入产品名称。

4)再次绘制用户名

将“文本标签”从默认组件库中拖到画布上的适当位置,修改并双击以输入用户名。

5)再次绘制退出按钮

将“文本标签”从默认目录拖到画布上的适当位置,双击回车退出,并将字体颜色修改为#0000FF。

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

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

8)如果顶部导航相对于屏幕的位置保持不变,同时选择相应的组件,右键单击“转换为动态面板”,然后选中右侧边栏“样式”中的“固定到浏览器窗口”,水平选择“居中”,然后单击“确定”。

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

二、如何使用顶部导航

顶部导航是大多数页面需要使用的常见组件,那么我们是否需要在相应的页面上画满它?答案是否定的,我们可以用Axure的master特性画一次,批量应用到需要的页面。

10)同时选择顶部导航的所有组件,右键单击“转换为主控”,然后在弹出窗口“创建主控”中输入“顶部导航”名称,然后单击“继续”按钮。

11)点击左边的“主”进入对应视图,右键点击“顶部导航”,点击“添加到页面...”,然后通过选择和选择所有子项目,组合未选择和取消选择的子项目,快速选择所有需要顶部导航的页面,最后点击“确定”。

三.总结

可以根据我的文章制作自己的顶部导航组件,然后添加到自己的Axure组件库中,在绘制Web后台产品原型时可以快速调用。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/sjwz/524.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息