Axure怎么给网页设计左侧三级导航菜单栏?

Axure中想要设计一款三级导航菜单,该怎么设计呢?下面我们就来看看详细的教程。

1、创建一、二、三级导航,矩形框表示每个选项。三级导航3附图片分别对应第二步中三级导航动态面板的 A、B、C 三种面板状态,便于切换显示。同时,每个选项(小矩形框)都有选中后的颜色样式交互:见第三幅图片。

2、将二级导航和三级导航都转换成动态面板,各自取名:二级导航,三级导航。同时对一级导航添加交互用例:“选中当前元件,显示二级导航,隐藏三级导航。”

3、添加二级导航菜单中三个选项的交互用例,如图操作,第二张和第三张与第一张的逻辑是一样的,COPY设计就可以了。

4、添加三级导航菜单的交互用例,他们虽然有 A、B、C 这三张状态,但他们的逻辑都是相同的。第二张图就是以 A 状态设计的交互,只要控制一下鼠标停留时的 UI 样式就可以了,剩下两个状态直接 COPY.

5、最后,隐藏二级导航动态面板,隐藏三级导航动态面板,将整体界面上的所有元素包裹成一个总的面板,在总面板上添加交互用例,目的是为了鼠标离开的时候自动隐藏2、3级导航。

以上就是axure设计三级导航菜单的教程,希望大家喜欢,请继续关注我们。

(0)

相关推荐

  • Axure RP 8怎么设计图片点赞功能的网页原型?

    Axure RP 8怎么设计图片点赞功能的网页原型? 1.打开Axure RP 8软件,在元件库中找到图片元件,拖一个到画布上,如下图所示: 2.在"Icons"中找到手形向上和手 ...

  • Axure怎么创建网页的侧边栏? Axure网页侧边栏的设计方法

    Axure中想要设计侧边栏,该怎么制作呢?下面我们就来看看详细的教程. 1.在元件库中找到垂直菜单: 2.在右键菜单中创建子菜单: 3.可以看到会出现一个侧边栏: 4.选中交互样式: 5.可以为侧边栏 ...

  • 2018年优秀动态网页设计大赏【附教程】

    随着设计行业的的不断进步和发展,动态网页设计已经成为设计师必须掌握的重要技能之一.对于许多设计师来说,缺乏设计灵感和网页设计是阻碍设计的主要问题.针对这些问题,小编在本文中为设计师精心准备了优秀网页设 ...

  • 如何让网页设计更加简单?(设计经验谈)

    怎样制作一个网页设计?没有清晰的逻辑?没有扎实的技巧?想要高端!想要大气!想要上档次!你确定你没有做梦?没错,这不是梦,在这里可以给你支一招--网格布局.让你网页设计不再难~~ 网格布局就像是Metr ...

  • 度假走起(酒店网页设计)

    度假走起~~哪敢呀,就连一次说走就走的下班都不行,难道还想来场说走就走的度假么~~我这绝对是做梦来着的,不是有句话叫做"秀才不出门,便知天下事"现在是,谁都可以不出门,便可知天下事 ...

  • 软塌塌没骨感?学学网页设计中的视觉解剖

    小编:今天为大家奉上一篇来自作者@飞屋睿的关于网页设计的文章,此篇主要从设计的骨架入手来讲解如何构好图.让我们的设计更有骨感不再"软塌塌".作者通过几种设计形式加上图文结合为我们详 ...

  • 网页设计(一):拼图游戏

    网页设计是什么? 网页设计是平面设计的一种,但是却是和技术关系最密切的.它是技术和艺术的完美结合.如果离开了美感,大家只会想起用户图形界面早期年代,有限的显色情况下的网站,因为那时还没有网页设计的概念 ...

  • 网页设计:如何布局是关键

    操作方法 01 一个网站是由许许多多网页组成的,网页是网站的主心骨.一个精美的网页不仅仅是依靠图文并茂的视觉展示,更重要的是网页的架构和布局,合理的布局才能让网页易于用户接受.   对于网页设计的初学 ...

  • 网页设计的布局有哪几种

    网页可以说是网站构成的基本元素.当我们轻点鼠标,在网海中遨游,一副副精彩的网页会呈现在我们面前,那么,网页的精彩与否的因素是什么呢?色彩的搭配.文字的变化.图片的处理等,这些当然是不可忽略的因素,除了 ...