【授人以渔or鱼】web-顶部&侧边导航切换效果 原型 免费

xiaobai668 产品大牛 2月前 1059

新手交流,大神勿笑。

在web管理系统(后台)设计中,我们经常会遇到需要通过导航(顶部菜单or侧边栏)来对功能模块进行区分。通过导航,可以极大的提高产品的易用性。

以下2个导航效果的展示:

顶部导航,主要用到的交互事件为:鼠标点击-设置【选中】

侧边导航,主要用到的交互事件为:鼠标点击-动态面板状态切换

1、顶部导航

用到的元件:矩形(菜单名称)

1)新建矩形:

无边框,并进行【交互样式设置】。其中【选中】样式是必须要设置的,这为我们后面定义鼠标点击事件打下基础。

【选中】样式可以针对矩形的边框、填充色、及文字、不透明度等进行灵活设置,大家可以根据需要自行尝试

2)定义鼠标单击:

为矩形定义【鼠标单击】,设置【选中状态于this="true"】。从这个事件通俗理解就是我点击了这个矩形,那么这个矩形就会被选中,然后呈现上一步设置的【选中】效果

3)定义选项组:

为矩形设置选项组名称,这里我自己命名为【顶部导航】。这一步的作用是,导航通常有多个,只有在一个组里,那么选中其中个,另一个必然是【未选中】,这就实现了切换选中效果。 这一点,想不通的童鞋可以参考一下【单选组】的概念

4)复制矩形:

前面只有一个矩形,各种设置都做好了。那么我们想要几个菜单,就复制几个。

5)大功告成:

根据前面几步的设置,那么就可以实现导航效果了。

补充说明:因本例并无页面,故没有设置【鼠标单击-打开链接】事件,实际情况下大家自己添加即可

此外,一般打开页面时,都会有一个菜单处于默认选中状态,因此需要对某个矩形设置交互【载入时-选中】


2、侧边导航

侧边导航通常存在多级菜单,点击上级菜单,切换展开/收起下级菜单。

用到的元件:矩形、动态面板

1)新增矩形:

添加背景矩形、一级菜单(1个矩形)、二级菜单(N个矩形)

参考上面的指导,为一二级菜单分别设置【鼠标悬停】、【鼠标按下】、【选中】等交互

为二级菜单整体设置【选项组名称】

2)转换为动态面板:

将一二级菜单组合选中后,右键【转换为动态面板】,设置面板名称【侧边导航】,并修改面板状态state1为【展开】

请注意,任何时候,为组合/面板及矩形、文本框设置名称,都是一个好习惯。就跟程序猿敲代码加注释一样。不然复杂的产品设计,你会发觉自己掉进泥潭里了。

3)为动态面板增加状态【收起】:

在【收起】状态下,新增矩形【一级导航】,具体参考原型

4)设置【鼠标单击】事件:

如图,进行【鼠标单击】事件的配置,通过面板状态设置,实现切换展开/收起菜单效果

5)大功告成:

将刚完成的一二级导航面板,根据需要复制即可

额外说明:侧边导航,巧妙的利用了动态面板的状态切换及【推动/拉动元件】效果。这种效果在一些通知公告或者需要切换/展开内容的功能模块也是适用的。只是学如何操作,终归有局限性,举一反三,才是我们交流的目的。

上传的附件:
快速回复
最新回复 (174)
全部楼主
  • zunleo 普通用户 2月前
    0 引用 2
    十分感谢
  • feng900628 普通用户 2月前
    0 引用 3
    感谢分享
  • vicente529 普通用户 2月前
    0 引用 4
    感谢分享,
  • jacksonpan47 普通用户 2月前
    0 引用 5
    感谢分享
  • NewZong 普通用户 2月前
    0 引用 6
    tks
  • nancy1997 普通用户 1月前
    0 引用 7
    优秀!
  • jacky1992 普通用户 1月前
    0 引用 8
    谢谢楼主分享哈
  • levisyyy 普通用户 1月前
    0 引用 9
    感谢分享
  • 因果 普通用户 1月前
    0 引用 10
    谢谢
  • arthur613 普通用户 1月前
    0 引用 11
    感谢分享
  • 回禄 普通用户 1月前
    0 引用 12
    大赞
  • 神龙是超人 普通用户 1月前
    0 引用 13
    大赞
  • jfree168 普通用户 1月前
    0 引用 14
    感谢分享!
  • weinnie1983 普通用户 1月前
    0 引用 15
    感谢楼主分享!
  • Kadeem 普通用户 1月前
    0 引用 16
    我来看看~
  • 宝贝儿honey 普通用户 1月前
    0 引用 17
    感谢分析
  • caj1010 普通用户 1月前
    0 引用 18
    学习下,学习下
  • 喵沫沫 普通用户 1月前
    0 引用 19
    感谢分享!
  • cindyz 普通用户 1月前
    0 引用 20
    飘过
  • 土匪老牛忙 普通用户 1月前
    0 引用 21
    谢谢分享
  • 小地瓜 普通用户 1月前
    0 引用 22
    感谢分享
  • dragon4 普通用户 1月前
    0 引用 23
    感谢分享
  • yong 普通用户 1月前
    0 引用 24
    感谢分享
  • 逍遥浪子 普通用户 1月前
    0 引用 25
    谢谢
  • carawsy 普通用户 1月前
    0 引用 26
    感谢楼主
  • tinating 普通用户 1月前
    0 引用 27
    厉害了。。。
  • sunnyroom 普通用户 1月前
    0 引用 28
    谢谢分享
  • 金豆豆2020 普通用户 1月前
    0 引用 29
    厉害了我的哥
  • feiyunad 普通用户 1月前
    0 引用 30
    希望会搞
  • anyan 普通用户 1月前
    0 引用 31
    谢谢分享  !  学习一下!
  • XUERZE 普通用户 1月前
    0 引用 32
    感谢楼主分享
  • happy乐 普通用户 1月前
    0 引用 33
    十分感谢
  • samuel86 普通用户 1月前
    0 引用 34
    感谢分享
  • erlongshang 普通用户 1月前
    0 引用 35
    感谢楼主分享
  • 普通用户 1月前
    0 引用 36
    66
  • 李小清 普通用户 1月前
    0 引用 37
    很棒
  • 酱爆9527 普通用户 1月前
    0 引用 38
    谢谢分享
  • 10951606 普通用户 1月前
    0 引用 39
    感谢分享
  • 绯瞳之火 普通用户 1月前
    0 引用 40
    xuexixuexi
  • metome2 普通用户 1月前
    0 引用 41
    多谢,必须赞你一个。
  • LeeYatSan 普通用户 1月前
    0 引用 42
    谢谢
  • feng1465 普通用户 1月前
    0 引用 43
    感谢分享
  • fxilin 普通用户 1月前
    0 引用 44
    谢谢
  • chenw_1979 普通用户 1月前
    0 引用 45
    感谢分享 
  • zhangxintong 普通用户 1月前
    0 引用 46
    感谢分享
  • luan040 普通用户 1月前
    0 引用 47
    感谢分享
  • fxilin 普通用户 1月前
    0 引用 48
    谢谢分享
  • 13874989965 普通用户 1月前
    0 引用 49
    谢谢分享
  • bin828 普通用户 1月前
    0 引用 50
    谢谢分享
  • Alice 普通用户 1月前
    0 引用 51
    谢谢
  • 晴朗de天空 普通用户 1月前
    0 引用 52
    学习一下
  • 浅念 普通用户 1月前
    0 引用 53
    谢谢分享
  • slr 普通用户 1月前
    0 引用 54
    感谢分享
  • xuezd 普通用户 1月前
    0 引用 55
    谢谢分享
  • hiangtop 普通用户 1月前
    0 引用 56
    谢谢分享
  • hiangtop 普通用户 1月前
    0 引用 57
    谢谢分享
  • rodje 普通用户 1月前
    0 引用 58
    感谢分享
  • Arwen 普通用户 1月前
    0 引用 59
    谢谢
  • cqw1991 普通用户 1月前
    0 引用 60
    感谢分享
  • mumu 普通用户 1月前
    0 引用 61
    666
  • walkmannick 普通用户 1月前
    0 引用 62
    加油!
  • sakura 普通用户 1月前
    0 引用 63
    万分感谢!!!
  • chaih 普通用户 1月前
    0 引用 64
    看看
  • jediwang 普通用户 1月前
    0 引用 65
    感谢分享 
  • alexander 普通用户 1月前
    0 引用 66
    666
  • jhun8343 普通用户 1月前
    0 引用 67
    666
  • nanihuang 普通用户 1月前
    0 引用 68
    十分感谢
  • cindyz 普通用户 29天前
    0 引用 69
    感谢分享
  • lzcoco 普通用户 29天前
    0 引用 70
    感谢分享
  • 飞奔的五花肉 普通用户 29天前
    0 引用 71
    感谢分享
  • 啊啊啊啊牛 普通用户 29天前
    0 引用 72
    666
  • toplzt 普通用户 29天前
    0 引用 73
    666nnn
  • renzehui 普通用户 29天前
    0 引用 74
    感谢分享
  • 交互新鲜人 普通用户 28天前
    0 引用 75
    十分感谢
  • Fshelly 普通用户 28天前
    0 引用 76
    谢谢分享
  • cq547131627 普通用户 28天前
    0 引用 77
    6666
  • 837233596 普通用户 28天前
    0 引用 78
    666
  • 735994852 普通用户 28天前
    0 引用 79
    ganxiefenxiang
  • csck 普通用户 28天前
    0 引用 80
    123
  • kale甘蓝 普通用户 27天前
    0 引用 81
    感谢分享!
  • jiyong 普通用户 27天前
    0 引用 82
    thx,看看效果
  • jiaxiad 普通用户 27天前
    0 引用 83
    感谢分享!
  • xinsong0534 普通用户 26天前
    0 引用 84
    谢谢分享
  • mcxiao6 普通用户 26天前
    0 引用 85
    学习学习
  • daidaiwang 普通用户 26天前
    0 引用 86
    感谢分享
  • 画个圈圈诅咒你 普通用户 26天前
    0 引用 87
    新手交流,大神勿笑。

    无论是面向用户的web产品,还是web管理后台,都会遇到使用弹窗的情况。

    以下是弹窗效果展示:遮罩灯箱效果,居中展示,让用户更容易聚焦于内容,而不受其他元素影响。



    所用到的核心元件:矩形按钮1(触发弹窗)、动态面板(及state1页面)

    1、弹窗界面:

    通过矩形1(背景)、矩形2(标题)、矩形3(确定)、关闭(图标或字体图标)完成基本的弹窗页面。



    全选,右键【转换为动态面板】,设置该面板名称为:弹窗



    2、动态面板设置:

    对【弹窗】动态面板,右键【设为隐藏】,此举是为了后面触发弹窗准备。

    对【弹窗】动态面板,进行【固定到浏览器】设置,此处我们选择水平-垂直均居中。小贴士:固定到浏览器后,如果你还在此页面增加别的元件,这个面板你可以随意放到任意位置,不影响显示。



    3、动态面板state1设置:

    打开动态面板【state1】,对【确定】按钮和【关闭】按钮,分别设置鼠标单击事件:隐藏



    4、触发弹窗:

    添加【添加商户】矩形按钮,为当前按钮设置鼠标单击事件:显示




    5、大功告成:

    通过以上设置,就可以实现:打开页面(页面载入)时,弹窗不显示,点击【添加商户】,则弹窗以灯箱遮罩形式  居中显示。点击【确定】或【关闭】按钮,弹窗隐藏。

    额外说明:如果弹窗只有一个状态,即state1,直接采用【显示/隐藏】即可,即上文所述。  但如果一个动态面板有多个状态,在显示面板同时记得额外添加【设置面板状态】

  • cinds 普通用户 26天前
    0 引用 88
    很有帮助
  • feitian 普通用户 26天前
    0 引用 89
    感谢分享
  • kirasamen 普通用户 26天前
    0 引用 90
    3q
  • dolby001 普通用户 26天前
    0 引用 91
    十分感谢
  • ayinmu 普通用户 26天前
    0 引用 92
    666
  • zhangyue9903 普通用户 25天前
    0 引用 93
    打Call
  • zrq 普通用户 25天前
    0 引用 94
        感谢你的辛勤付出。
  • wen6323431 普通用户 25天前
    0 引用 95
    1
  • DellaYang 普通用户 25天前
    0 引用 96
    感激楼主!
  • yaolb1 普通用户 25天前
    0 引用 97
    感谢分享~
  • buxulianxiang 普通用户 24天前
    0 引用 98
    谢谢分享
  • 撒哈拉的草 普通用户 24天前
    0 引用 99
    Call
  • PM小九先生 普通用户 22天前
    0 引用 100
    感谢分享~
返回