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

0 评论 2774 浏览 3 收藏 7 分钟

编辑导语:我们在日常工作或者娱乐中经常会用到产品后台,产品后台很多与功能相关的组件,并且不同产品的后台功能也不一样;本文作者分享了关于用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的母版特性来实现只画一次,批量应用到所需页面。

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

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

三、总结

大家可以根据我这篇文章制作适合自己的顶部导航组件,然后添加到自己的Axure元件库中,后续画Web后台产品原型的时候就可以快速调用。

#相关阅读#

如何用Axure画出Web后台产品的面包屑组件

如何用Axure画出Web后台产品的菜单栏组件

如何用Axure画出Web后台产品的编辑详情页

如何用Axure画出Web后台产品的列表组件:高级交互

#专栏作家#

浪子,个人微信langzipm,公众号:浪子讲原型(langzisay)。专注于Axure原型设计和产品规范。

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

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
3人打赏
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!