web导航的样式及设计方法（二）

4. 固钉导航

4.1 样式

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

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

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

4.2 设计方法

①  固钉隐藏式导航

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

②  固钉水平导航

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

③  固钉垂直导航

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

④  固钉快捷按钮

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

5. 底部导航

5.1 样式

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

5.2 底部导航常规内容

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

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

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

③  Logo

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

⑤  友情链接

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

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

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

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

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

1. Tab导航

1.1 样式（此部分内容来自ant.design）

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

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

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

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

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

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

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

2. 面包屑导航

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

3.下拉菜单（子导航）

3.1 样式

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

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

③  菜单弹出方向：可上弹出，或下弹出。

④  触发方式：移入触发，点击触发。

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

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

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

3.2 设计方法

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

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

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

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