我们上篇刚讲完首页，在介绍产品页之前先介绍一个不算页面类型，但只要是网站就一定会有的组成要素——导航栏。
对于一个新网站，用户除了可以选择一步步浏览首页了解产品，也可以通过导航栏快速查询自己需要的信息。所以，如果导航设计的合理，让用户能轻松找到自己需要的内容，这不管对用户初印象还是转化率都有积极影响。
01
优秀的导航栏在设计上都有哪些特征？
1.有目的的信息架构
这其实是非常关键的，导航栏是具有引导作用的，所以要条理清晰、架构有序，让用户能更快地找到自己需要的内容。就像在线上超市购物时，给物品分类一样。
同时，SaaS网站的导航栏还要注意，最好确保网站导航中包含的所有内容都有其用途，并且对用户有价值。
毕竟导航是给用户看的，对他们有用才是最重要的。这也告诉我们，不用把所有类型的页面都塞进导航，有些东西可能更适合放在页脚。
以下是几个经过大量实践验证的导航设置思路，如果你不知道该如何安排导航，可以学习一下：
产品、平台和解决方案的下拉菜单一般都放在比较靠前的位置。都是用户比较关心的内容，通过这那部分的下拉菜单，用户能对网站中涵盖的产品有大致了解。
随后是按与品牌的关联性将资源/学习、客户、合作伙伴、关于公司排序
右上角可以放置CTA按钮和登录选项，这样方便提高转化率
2.清晰的元素层次
除了导航中的大分类要选择恰当，导航内元素的排布层次也要清晰合理。当然，还有它的视觉呈现方式和它们作为整体之间的关系。
如果没有合理的元素层级结构，用户会分不清哪些是可点击的链接、哪些是标签，从而错过网站的中心页面，最终因为找不到他们想要的内容而离开导航栏。
3.相关标题和标签
大多数SaaS网站在命名导航中的项目时一般有两种思路：
第一种是按产品/平台+解决方案来组织导航。
这是组织导航的最常见方式，即一个产品或平台部分，以及一个专门用于解决方案的部分，并按用例、角色、行业等进行细分。
由于这种导航方式应用广泛，并且是最受认可和期待的导航方式，如果你是新手那其实这种是最安全的选择。
第二种方法是使用更多行业或产品特定的术语来给导航栏目命名。
例如，用“我们服务的对象”代替“解决方案”，这估计会让人眼前一亮。但是这也是把双刃剑，脱颖而出的代价就是要牺牲掉常规性。这需要我们对自身产品有非常清晰地理解，不然只会适得其反。所以，在没有十足把握之前，不建议轻易尝试。
而且有一个大原则是无论如何都要遵守的，那就是：不管采用哪种方法锚文本短小清晰是必须的。
4.易于使用
相比于其他部分，导航和页脚通常都是走朴素简单路线的，因为它要易于使用。不用像做产品功能展示时整那么多互动和复杂动画，在导航里这些就只会是减分项了。
用些简单的过渡和动画就足够了，毕竟要保证导航的引导功能不受影响，用户也不会被这些外在因素影响。
02
网站导航的分类
导航栏非常注重功能，所以我们的导航栏起码要确保登录、搜索、品牌logo和关键内容是易于访问的。不同类型的导航栏布局其侧重的用途也有所区别。
下面我们将介绍几种导航样式：水平导航栏、汉堡菜单、滚动式菜单栏、垂直侧边栏等。每种方式在用户体验和网站美观方面都有独特的优势。
1.水平导航栏
水平导航栏是最常见的导航栏样式了，大多数都是以文本形式呈现。一般会列出网站中重要的页面和板块。再按照类型分类汇总在1-2个单词组成的标签下，标签用于简述该板块的内容。
比如下图airbnb的网站，导航栏采用的是图标+文本的水平导航栏，左上角的品牌logo也可以让用户在浏览网站的其他网页时，快速返回主页。
水平导航栏通常是固定式菜单，这意味着它们在用户滚动往下浏览页面时，也会一直停留在页面顶部，这种对于用户来说也非常实用。
2.汉堡菜单（Hamburger menu ）
汉堡菜单，也叫做三条杠菜单，顾名思义是因为菜单在点开前是三条从上而下依次排列的横杠，形状很像汉堡，所以被形象地叫做汉堡菜单。
因为其空间占比小，收放自如，所以常常被用在各个网站的移动端上。但这种导航栏在设计时也要注意可访问性的问题，避免出现不能点击访问的情况，影响使用。
3.多级菜单（Mega menu）
多级菜单常被用在电商网站中，它的设计特点就是版面占比大，可以让用户通过导航就浏览到网站上包含的所有类别。能让用户了解网站产品构成，并快速找到自己需要的类别。
大而全一次性呈现的缺点也显而易见，那就是一下子给用户呈现的选择太多了，容易“吓到”首次访问的用户，让他们不知所措。还有在移动端适配方面，也是一个不小的难题，需要仔细考虑。
4.基于悬停的下拉菜单
这类一般是在普通的下拉菜单上加入一个悬停的效果，通常会跟上面提到的多级菜单同时出现。当用户将鼠标悬停在导航栏中的某个选项上时，菜单会通过动画下拉，让其查看更多二级类别和版块。
虽然它可以比较好地完成跳转，但在用户体验层面，就比较有争议了。一方面设计这种形式的初衷是为了让用户更自由地选择展开阅读的部分，但是另一方面，悬停响应的速度和设计上，可以说是见仁见智各有不同，并且移动端的效果也不是很好。
5.滚动菜单（Scroll menu）
滚动菜单可以说是与上面提到的都不太一样，现在成为了单页网站设计的热门选择。
滚动菜单借鉴了顶部导航栏的外观，但当访问者点击某个选项时，页面会自动滚动到所选部分，而不是直接跳转到单独的页面。这种浏览网站的形式可以使单页网站感觉更有沉浸感和条理。
6.垂直侧边栏
垂直侧边栏的导航会在点击时从页面侧面展开，并以列表形式将菜单项堆叠在一起。这样做也有不少可取之处。
首先，是否展开导航栏用户完全可控，并且不会一次性将所有选项挤满整个设计。其次，由于菜单仅在用户需要时打开，我们可以把内容描述写的更具体，而不用像其他导航一样只用几个单词。
03
总结
可以看到，虽然导航栏在页面中占比不大，但是作用却不容忽视，对于用户来说它是认识网站的地图，并且会一直出现在网站的页面中，使用的体验会直接影响用户对网站的印象。
结合文中提到的特征和导航类型，相信一定能设计出适合自己网站的导航。
以上就是本期推文的全部内容了，希望对你了解网导航栏的相关内容有所帮助。
以上内容由霆万科技/霆万出海学院原创/转载，请勿私自转载，以免侵权！如需转载，请扫码添加客服，获得授权并注明来源。
广州霆万科技有限公司是一家专注于软件出海的服务创新企业，至今已积累12年的软件品牌独立站运营经验，总部在广州，分公司在佛山、深圳。我们致力于帮助中国软件品牌出海，解决从市场调研、商业化验证、团队组建，到策略规划、营销推广和运营实施等难题。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
