用Axure水平菜单做导航菜单原型

哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

用Axure水平菜单做导航菜单原型

哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧用Axure水平菜单做导航菜单原型

用Axure水平菜单做导航菜单原型

在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:

用Axure水平菜单做导航菜单原型

其实这是不是个有效率的办法,因为,做菜单导航的时候首先要整理出交互的逻辑,比如:鼠标的移入移出事件;鼠标悬停在选项时所对应的交互样式。下面,就给大家演示下,怎么用Axure的"水平菜单"做省去添加"鼠标移入移出"以及"显示隐藏二级菜单"用例的原型。

用Axure水平菜单做导航菜单原型

将Axure打开后,从左侧元件库中拖入"水平菜单"到设计区。拖入后,给出默认的菜单名称按照自己的需求进行更改(为了方便演示,我就先使用默认名称)。

用Axure水平菜单做导航菜单原型

用Axure水平菜单做导航菜单原型

选择"文件"菜单选项后鼠标右键,点击"添加子菜单",在默认生成的3个子菜单中根据自己需求适量增减,并键入所需的子菜单名称。

用Axure水平菜单做导航菜单原型

用Axure水平菜单做导航菜单原型

用Axure水平菜单做导航菜单原型

添加并重命名后,点击"预览"或者按键盘上的F5在浏览器中进行预览。可以发现在鼠标移入时,"文件"母菜单显示了其包含的子菜单选项但并没有鼠标悬停在子菜单时的悬停效果样式。

用Axure水平菜单做导航菜单原型

用Axure水平菜单做导航菜单原型

回到Axure界面中,选中其中的一个子菜单,鼠标右键选择交互样式后,在弹出的对话框中将默认的选项改为"选中的菜单项",并勾选"字体颜色"、"填充颜色",将字体颜色改为白色,填充色改为灰色。

用Axure水平菜单做导航菜单原型

用Axure水平菜单做导航菜单原型

最后,点击确定并预览,最终就是这样的效果:

用Axure水平菜单做导航菜单原型

鼠标移入母菜单并悬停在第一个子菜单时

用Axure水平菜单做导航菜单原型

鼠标直接移出菜单时

====================================

附上这一期的视频教程:

用Axure水平菜单做导航菜单原型

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35918/

(0)
交互精选交互精选
上一篇 2018-03-16
下一篇 2018-03-16

相关推荐

  • 美国设计师总结:2018年的用户体验设计趋势和方法

    这是由一位美国作者站在美国的视角写的文章。即便抛开个人因素不谈,国内外的发展进度并不完全同步。例如情感化反馈这一块也许国内稍稍落后一点、但是移动支付和AR却要快一些,有些方面即便步调差不多,举出的例子却不一样。不过看看别人的总结也挺有意思,至少可以了解一下国际风向。2017年即将结束,是时候向前展望,预测在接下来的十二个月里,信息体验设计会如何。我将在本文概述的,除了2017年里见证到的巨大的变化之外,还有值得关注的趋势,以确保能够赶于...

    2018-03-29
  • 做完这5次Axure实操,0基础不仅做出高保真,还能提升产品交互

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,2000多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)产品思维和交互贯穿全程,学完不仅能画出高保真,同时告别画图经理。具体来看,通过6...

    2018-04-07
  • 多功能福彩APP用户体验调查问卷

    近日,湖南省福彩中心在全省7100多个彩站安装使用“智慧福彩APP”。该APP具有申领热敏纸、报修设备故障、发布活动公告、发布开奖公告、发布消息通知等功能,并服务于彩站具有各站点详情、销售目标、巡检劝人、评价管理员、问卷调查、意见反馈的功能,从而实现“福彩中心”、“市场管理员”、“彩站站主”、“彩民”、“社会公众”五者间的互通互联。彩站或彩民们有任何意见建议或技术方面的问题,均可通过该APP上报省中心,为中心机构与站主、彩民之间搭建了桥...

    2018-04-24
  • 2017年设计师该如何转型?来看阿里UED掌门人的演讲!

    温馨提示,扫文章底部二维码可看相关视频。UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。汪方进:阿里巴巴BBC UED...

    2018-03-20
  • 广告与用户体验如何共存?

    今天给大家分享的是来自UI中国会员-海舟Ocean关于广告营销相关设计的一些经验总结。最近公司的移动端产品在优化广告投放,其中也遇到了不少的困惑,我翻看了部分APP的广告展现形式并结合了几位设计师&产品经理的想法之后,整理总结出了这篇文章。本文将结合实际案例就常见的广告形式以及它们如何合适地呈现与大家进行分享。遇到的困惑我们知道无论是自身的品牌活动宣传还是第三方的商业广告都能为公司和产品带来不小的收益,但与此同时不恰当的广告也会对用户体...

    2018-04-20
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 全面解读!人工智能如何改善五大用户体验?

    点击【阅读原文】,即将IPO独角兽,抓住上市前最后的机会!最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨...

    2018-05-05
  • 关于“用户体验动效”的十二项原则

    前言关于“用户体验动效“的十二项原则,本文分为四部分来引入说明:1. “用户体验动效” 不等于 “界面动画”;2. 实时与非实时交互的区别;3.  动效的四种可用性提升方式;4. “用户体验动效”的十二项原则。1.  “用户体验动效”不等于“界面动画”在用户界面设计中,大部分动态的效果被设计师理解为“界面动画”,事实却并非如此。在介绍“用户体验动效”的十二项原则之前,我们先明确一下二者之间的不同。大部分设计师认为,“界面动画”是为了让用...

    2018-04-01
  • 2018年交互设计趋势

    想必你还在对昨天HJUX视觉伙伴们给出的视觉设计趋势啧啧称赞,那么赞别停!今天团队的交互伙伴们将带来2018年交互设计趋势。选择在农历新年来临之际奉上这道历时一个月烹制的“交互趋势年夜饭”,只愿给力求打造极致用户体验的你以启发和帮助。干货阅读时间预计5分钟设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官...

    2018-02-02
  • 交互设计第一步 了解完整的知识体系架构

    交互设计师犹如一名“翻译官”,主要的使命就是让人与产品之间更容易沟通、更具有人性化,让用户的操作更加有效,这也是交互设计师的价值之所在。今天推荐的这门课程,带你全面了解交互设计的知识体系架构和工作流程,了解交互设计师应具备的能力、应掌握的工具、如何完成进阶,并掌握让你更加专业、更具逻辑性的设计思维与交互设计面试技巧。点击“阅读原文”,开启你的学习之旅~丨我将从这门课中学到什么?了解形成完整的知识体系架构的重要性了解交互体系架构包括哪些部...

    2018-03-12