首页 网站建设 客户案例 移动应用 关于我们 动态 联系咨询

web导航的样式及设计方法(二)

2020/7/27 13:01:10

4. 固钉导航

4.1 样式

以固定在页面窗口的某一个位置,滚动页面时不影响其位置。

①  当内容区域比较长时,需要滚动页面,这部分内容对应的操作或导航需要在滚动范围内始终展现,如侧边菜单、返回顶部按钮等。

②  当页面可视范围过小时,导航内容怕被遮挡,则以隐藏式固钉导航样式。


4.2 设计方法

①  固钉隐藏式导航

一般用于隐藏导航的条件下,在设计上需要固定导航在屏幕上的位置时,也可用于因页面可视范围很小时,导航内容怕被遮挡。如上图隐藏导航。


②  固钉水平导航

一般作为在滚动页面时,导航始终在窗口固定位置展现,在设计上可作为垂直型网页设计和全屏切换网页设计时所采用。


③  固钉垂直导航

一般作为全屏切换的网页设计中,垂直导航固定不动,只切换banner或内容。


④  固钉快捷按钮

如在网页内容较多时,右侧常常会出现“回到顶部”的快捷按钮,方便用户查看顶部内容;或右侧一些快捷的方式,比如联系电话,二维码等,常常要时刻提醒用户可关注。


5. 底部导航

5.1 样式

页面内容较长时,底部导航方便用户快速访问。


5.2 底部导航常规内容

网页的底部导航内容在此全部列出来,大家可根据需求来自行筛选:

①  导航的全部内容,包括主导航和全部次导航

②  联系方式:包括地址、电话、邮箱、联系人、传真、二维码、网址

③  Logo

④  版权信息,包括版权所属,备案信息,技术支持。

⑤  友情链接

⑥  地图位置:如果底部空间较大的话可以考虑。

⑦  其他快捷按钮:如服务条款、隐私声明、法律声明、知识产权等。

⑧  一些广告语或单词,通常以设计为准,为填充留白区域,使页面更有层次


在底部导航的设计中,首先要选定需要展示的内容,再选择需要展示的方式,如背景色、排版方式、元素应用等,找到适合需求的一种。


web导航设计


三、其他导航样式分类及设计方法


1. Tab导航

1.1 样式(此部分内容来自ant.design)

①  基本样式:引领整个页面的内容,用于主功能切换,横向tab,选中则下方出现主色横条。

②  卡片样式:用于页面中局部展示,包裹型容器能很好的和其他内容隔离。

③  胶囊型样式:用于卡片内的选项切换,经常和其他组件结合使用,让用户快速切换对应内容。

④  竖状样式:用于分类较多的选项,可以不限制分类数量,具备更好的扩展性。

⑤  横向步骤条:步骤条使引导用户按照流程完成任务的导航条,可以帮助用户对操作流程长度和步骤有个预期,并指导自己在哪个步骤。横向步骤条多于2步时使用,但建议不超过5步,每阶段文字保持在12字符内。

⑥  向流程步骤条:一般居页面左侧,悬浮固钉,可追加多行文字表述,适合较多的步骤或步骤数动态变化时使用。

⑦  分页器:当有大量内容需要展现时进行分页加载处理,分页器可以让用户清楚的指导自己所要浏览的内容有多少,已经浏览了多少,还剩余多少。


2. 面包屑导航

在网页中常用于内容页面,告知用户“你在哪里”,还可点击面包屑导航来返回前几层级的页面,在功能上也支持面包屑下拉菜单功能。


3.下拉菜单(子导航)

3.1 样式

①  基本下拉菜单:鼠标移入即显示,单选即可,点击则跳转。

②  存在不可用菜单项:下拉后,以分割线、灰色字来表示不可点击。

③  菜单弹出方向:可上弹出,或下弹出。

④  触发方式:移入触发,点击触发。

⑤  多层级菜单,一般三级,最佳

⑥  带按钮的下拉框:一般按钮为icon

⑦  右键菜单:鼠标点击右键来触发。


3.2 设计方法

①  常规设计方法:只有二级时,用基本下拉菜单的样式,只是在背景、边框、移入时做设计的变化。

②  横向通栏展开:一般在网站设计时,考虑到下拉菜单展开时少量遮挡banner或设计需要时采用,可用于少层级,更适用于多层级菜单。多层级通栏展开时会更直观的展现菜单内容及层级关系。

③  侧边展开:上面有提到的,垂直导航在子导航展开时,适用于电商等平台。


好了,这期内容到此就结束了,希望能给到你一些帮助。

标签

网站建设我们用了11年的光阴;今天我们再度启程。。。

线上服务咨询微信二维码13602086663