Axure教程:后台产品导航栏

0 2021-08-26 14:41 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 156 人学习了本教程

《Axure教程:后台产品导航栏》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强动态面板,母版,交互设计等多维度案例或实操来进行更多的学习;此教程是由福到家在2021-08-26发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

产品经理在做一个完整产品的原型设计时,都需要一个导航菜单栏。这种菜单栏看着简单,但对于初级产品经理来说是个难点,自己琢磨起来也比较费劲。今天做个导航栏的原型设计教程给大家参考,学会这一招,轻松应对导航栏的设计,进一步地提高产品技能。

设计过程

(1)设计概述

本次设计以bilibili创作中心为例,主要给大家介绍二级和三级导航栏。为了展示三级菜单的设计过程,将bilibili原有的二级菜单粉丝管理、互动管理、收益管理整合成二级菜单商业数据。

(2)二级菜单设计

步骤如下:

1)打开Axure RP 8软件,新建项目,命名为导航栏。

2)创建母版

点击母版页面的添加按钮,新增母版,命名为左侧导航栏导航。

Axure教程:后台产品导航栏

编辑母版。

拖拽矩形3到窗口,作为导航栏面板。拖拽三级标题到窗口,命名为bilibili创作中心。

Axure教程:后台产品导航栏

3)制作导航菜单

拖拽矩形3,修改成合适的大小放置到合适的菜单位,按照下图依次命名。

Axure教程:后台产品导航栏

4)添加二级菜单

复制数据中心,修改名称为数据总览。复制数据中心,修改名称为观众分析,并列排放。

选中数据总览和观众分析,点击右键,选择转换为动态面板。点击右键,选择设为隐藏。

Axure教程:后台产品导航栏

Axure教程:后台产品导航栏

Axure教程:后台产品导航栏

在动态面板编辑区,给该动态面板命名为二级-数据中心。

Axure教程:后台产品导航栏

将动态面板二级-数据中心移动到数据中心下方。

5)二级菜单交互设计

选中数据中心,双击鼠标单击时。

Axure教程:后台产品导航栏

按照以下步骤操作,操作完成后点击确定。

Axure教程:后台产品导航栏

6)创建菜单模块

按照下图结构创作菜单模块。

Axure教程:后台产品导航栏

7)打开首页管理,拖拽模板左侧导航栏到首页管理窗口,以同样的方式将母版放到各个模块中

Axure教程:后台产品导航栏

8)预览

点击软件右上角预览,可预览导航栏效果,二级菜单制作完成。

Axure教程:后台产品导航栏

(3)三级菜单

1)按照2.2步骤制作二级菜单:二级-商业数据

Axure教程:后台产品导航栏

Axure教程:后台产品导航栏

2)双击打开动态面板二级-商业数据,复制互动管理三个,分别命名为评论管理、弹幕管理、字幕管理。

选中三个矩形,选择设为动态面板,命名为三级-互动管理,并设为隐藏。

Axure教程:后台产品导航栏

Axure教程:后台产品导航栏

3)交互效果

选中互动管理,双击鼠标点击时,按照如下步骤操作,操作完成后确定。

Axure教程:后台产品导航栏

Axure教程:后台产品导航栏

Axure教程:后台产品导航栏

4)点击预览查看效果

Axure教程:后台产品导航栏

以上就是Axure教程:后台产品导航栏的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由福到家原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员