认识达内从这里开始

我们在前几期的文章中给大家简单介绍了ui设计师在学习达内网页设计课程需要重点掌握的一些技术知识等内容，而本文我们就再来学习一下，网页设计常见导航类型与设计方法。

1.顶部水平导航菜单

1.1样式

导航菜单有多种样式分类，其中水平导航是常见的样式，导航的一级菜单按照水平的排版方式全部排出来，二级菜单隐藏在内。起到网站功能的聚合作用，并且很醒目的呈现出来。

如图所示，像站酷，用的这样的水平导航，在鼠标移入时会展开二级菜单。

注意：横向导航建议每组字符不超过6个，导航数量在2~9个为美观。

1.2设计方法

在web中，导航的设计方法多种多样，在此内容中，全部为个人总结，大家可自行选择与借鉴。

一般web设计，通常考虑到logo的放置与导航的位置关系，不是所有logo都只放左上角，也不是所有导航都放logo右侧。在这里，用官网的设计方法给大家分享。

①左放logo，中间导航，右放搜索等小控件。

此类排版方法适用于导航数量偏少时，或需要搜索等控件时，为节省控件也可将少量导航丰富起来的设计方法，如图所示，logo、导航、搜索三个占一行，为下方banner节省了很多控件，又能有效的留白。

②左放logo，右放搜索，下方放导航

此类排版方法适用于导航数量很多时，刚好可以一行排下并且也能十分美观，也适用于logo十分复杂，需要放大才可以的情况。

③左放logo，右放导航

此类排版方法是常见的方法，logo与导航分别左右对齐，保持网页整体可见区域。

④Logo居中，导航放置logo的左右两侧

使导航能放置logo的左右两侧，需要logo的数量为偶数，放置后才显得美观。此类排版常用于美食行业、幼儿方向、医疗行业、建筑行业等，logo居中可表现为可爱，因其对称原理，也可表现为庄重，严肃。在美食中，更适用于logo本身为圆形的。

⑤logo居中，导航放置logo下侧

这样的网页显得头部会留白多一些，可放置其他需要的控件，logo适合较多的情况下，可以单独排列一整行，在行业使用上与上一点一致。

2.侧边垂直导航菜单

2.1样式

垂直导航，子菜单内嵌在菜单区域，纵向分布，类目数量不限，层级2~3级为佳。

2.2功能

①内嵌导航：子导航内嵌在主导航区域。点击主导航，展开子导航(内部展开或侧边展开)。

②缩起内嵌导航：常用于系统平台，指导航可缩短至只显示icon，可缩起/展开。

③只展开当前父级导航：点击主导航，收起其他所有菜单，保持当前菜单的聚焦。

④多色主题：指菜单有根据页面设计有多种色调，以开关来切换。

2.3设计方法

①子导航内部展开

此类导航设计在特点上，不占用其他空间，完全在自己的范围内展开折叠，这样的设计适用于系统平台。一般一级导航以纯文字或icon+文字类型，二级展开后为纯文字或小icon+文字，通常对文字颜色、背景颜色或文字大小来区别于一级导航。如图，高德平台。

②子导航侧边展开

此类导航设计适用于子导航内容较多，或层级较多的情况，不适用于系统，适用于电商平台、行业网站等内容量较大的网页设计中。在这种平台的设计中，一级导航的数量需要适当控制，且有多层级时，展开的层次好要控制只展开一层，即二级直接列出来。如图，淘宝平台。

③水平导航于垂直导航可同时使用

如电商平台那样，水平导航与垂直导航分别可作为不同的视觉重点，不同的分类方式来进行视觉的引导。也如上图淘宝平台。

3.隐藏导航

3.1样式

隐藏导航一般不直接显示出导航的内容，通常以icon的方式汇聚，放置页面中的一个角落，点击可展开导航内容。

3.2适用情况

隐藏导航的设计方式通常使用的情况为，

①面内容较多，已经无法排列出导航的位置，如大屏设计。

②导航的重要程度稍低，此类的情况较少。

③根据设计来看，页面在设计上更适用于隐藏导航，例如在设计悬浮的水平导航的页面中，响应式到了小屏幕时，悬浮导航会遮挡部分的内容，此时导航可另设计为隐藏导航。

3.3隐藏导航弹出交互方式

①下拉菜单方式

移入icon时，出现下拉菜单样式，此类方式不占用多余空间，并且菜单可放置多个。

②侧滑入菜单

侧滑入有四种方式，上划入、下划入、左划入、右划入，一般为小于等于半屏的面积，以透明层的关系遮挡主页面，此类交互特点为，不打断当前用户浏览的位置，即可找寻想要去的方向。

③全屏切入菜单

全屏以遮罩形式遮挡主页面，展示出主导航或全部导航，此类交互使效果更明显，突出设计风格。

④窗形式菜单

常用于内页或功能表单中，当用户需要进行一些操作时，点击后以弹窗的形式展现出来，可供用户来选择。

4.固钉导航

4.1样式

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

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

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

4.2设计方法

①固钉隐藏式导航

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

②固钉水平导航

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

③固钉垂直导航

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

④固钉快捷按钮

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

5.底部导航

5.1样式

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

5.2底部导航常规内容

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

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

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

③Logo

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

⑤友情链接

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

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

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

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

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。