aipage网站导航菜单设计

网站导航分为内置导航和自由设计导航两种模式,常用导航设置如下:

1 内置导航版块的使用

内置导航版块是系统中开发好的响应式内置导航头部,每个版块都已经设计好了较为固定的风格,提供了基本的样式设置对颜色和功能进行调整。内置导航版块能快速设计站点导航,点击头部版块切换设计查看目前已有的导航版块效果。例如通用企业风格导航、商城风格导航、下拉产品风格、logo不同位置风格等,切换任何版块可以快速运用相应效果,并且导航菜单设置能保持不变。

aipage网站导航菜单设计插图

注意需要区分当前版块是否是全局头部,全局头部版块带有黄色边框,如果没有看到导航版块或者全局版块,可以在左侧页面设置  -> 页面布局里开启全局头部,否则使用普通页头版块设计的导航不能自动同步到其他页面使用,除非当前页面要自定义导航效果。

aipage网站导航菜单设计插图1

内置导航的菜单编辑可以直接选中菜单进入编辑面板,二三级菜单需要横向拖拽控制层级(部分导航才支持三级菜单,层级太深影响用户体验)

aipage网站导航菜单设计插图2

版块设置里除了样式设置,需要注意的是导航类型和导航宽度设置,导航类型里部分导航带了固定效果,可以控制导航在滚动的时候始终固定在顶部,另外还有浮动效果可以让导航浮动显示在轮播图或者banner大图上方,官网首页带大图轮播时这种效果比较常见。

导航宽度设置则是内置版块在展示时的内容区宽度控制,可以自动撑满整个屏幕,或者只显示在页面设置的内容区宽度。

aipage网站导航菜单设计插图3

2 自由元素设计定制导航

内置版块数量有限,如果风格不能满足需求,需要使用空白版块结合元素设计自定义导航效果。常用的元素包括元素 -> 系统 -> LOGO控件和元素 -> 菜单里面的元素组件。

aipage网站导航菜单设计插图4

与内置版块一样,自由设计菜单通用支持浮动和吸顶模式,在导航设置里切换设置体验不同的效果差异,如果要设置浮动建议设计好之后再切换成浮动效果,否则无法直接点击选中版块需要在左侧页面视图里选中头部版块。

自由设计比较灵活,按照想要的设计效果进行自由设计即可,如果有复杂的下拉菜单显示效果,可以搭配选项卡元素来设计,具体参考选项卡设计教程。

3 底部导航菜单

底部导航一般会带有页面重要的链接,方便用户快速找到相应页面,另外还有友情链接等。底部导航可以直接使用文本来设计,给每个文本添加链接即可。如智能云官网底部导航效果

aipage网站导航菜单设计插图5

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
在线客服
主机帮
我们将24小时内回复。
2024-10-30 22:30:56
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
176363189
当幸福来敲门
[小黄]
17307799197
[企业邮箱]
sudu@yunjiasu.cc
取消

选择聊天工具: