如何设计网站导航（如何设计网站导航栏）

超级实用！网站导航栏设计形式综述

导航对一个网站起着重要的导向作用。一个优秀的导航设计可以让用户快速找到自己需要的东西，让用户清楚地了解网站的结构框架，起到重要的指导作用。以下是一些常见的网页导航形式:

1.顶部导航

置顶导航广泛应用于各个领域的网站。这种导航可以让用户快速找到自己需要的东西，一目了然。顶部导航的设计形式保守但有目的性，可以保证组织结构的可靠性，减少用户搜索的时间成本。然而，这种导航有一个缺点。当首页内容过多，需要滚动屏幕时，用户需要滚动到顶部，然后切换导航内容。所以现在很多顶部设计的导航都会有把导航固定在顶部导航上的效果，从而降低用户的使用成本。

顶部的导航设计有很多种风格，主要结合logo、登录注册、搜索框形成多种效果，如下图所示:

顶导航的设计成熟稳重，中规中矩，但不容易出大问题，所以使用率也比较广。熟悉我的人都知道我用蝉做网站。下图是蝉系统后台界面头部导航的定义，可以多种方式组合在前台显示效果。

2.侧面导航

侧边栏导航的设计形式多种多样，可以有多种表现形式，可动可静，可大可小，更具个性化。不太推荐固定的侧边栏导航设计，尤其是宽侧边栏导航，会影响整个web界面的宽度。设计师可以考虑把侧边栏做成滑动显示的方式，这样既节省了网站之间的空间空，又更加简洁。

在侧边栏导航的设计中，要注意导航栏的宽度。如果导航栏中的字体太长，在显示上会有一些问题，即使做成滑动显示也不能很好的解决问题。复制的网站不适合这种导航，侧边栏应该有更多的二级导航栏目，所以这种导航大多适合一些设计师或者个人官网。当然也有一些结构简单的网站会采用这种导航。

以下the HOUSE时尚礼服官网将侧边栏的内容简化为一个元素，放在边上，这样看起来不突兀，不会占用空房间，但也起到了装饰的作用。

3.底部导航

底部导航的应用不是很广，但是在一些活动或者个性化网站中出现。事实上，底部导航的广泛应用不是在pc端，而是在移动端。

在pc中，底部导航通常采用固定的方式。这种导航可以降低用户的成本，但是对于结构复杂的网站，二级或者三级导航的网站就不太适合了。其次，把导航放在底部，对于用户的使用习惯来说不是特别好。用户的眼睛从上到下从做到右浏览。这种设计挑战了用户的使用习惯。

所以有很多网站第一屏导航会放在底部，第二屏导航之后会固定在顶部，比如:forh Gym体育网站。

4.汉堡导航

汉堡风格的导航和底部导航一样，经常出现在移动端。但是现在很多pc终端越来越喜欢汉堡式的导航设计。这样的设计节省了空时间，相当于把导航做成隐藏式设计或者弹出式设计，很有设计感。

STUDIO JT韩国设计工作室网站的汉堡导航有一定的设计感。

虽然汉堡导航可以有很多种设计，但也可以很有个性。但是对于一些用户来说，汉堡导航其实并没有那么直观，尤其是导航结构不清晰的时候。设计师还是要考虑这种导航。

5.滚动导航

滚动导航包括水平滚动和垂直滚动。

水平轧制

水平滚动是指内容在左右水平方向滚动。用户第一次遇到这种类型的网站，体验会比较差，因为它的物理和视觉运动方向与常规的垂直滚动不同。而且当你使用鼠标滚轮滚动的时候，它的左右水平滚动会让用户在交互中有错位的感觉，其实并不是特别友好。所以这样的网站其实不多，但是做的好的也有几个。

看看古装国香官网的界面效果。

其实为了不让用户体验到糟糕的水平滚动，可以在界面设计中增加一个向左或者向右的箭头，让用户有一个心理暗示，可以减少突兀感。

垂直轧制

html5网页中广泛使用垂直滚动，很多设计师都喜欢使用这种设计。将一些动画效果与垂直滚动导航相结合，可以达到一种新的视觉效果。我们来看看电装品牌网站官网，里面融合了很多特效。

以上导航方式各有利弊，但不管是哪一种，导航既然是导航，就应该起到快速便捷找到用户需要的东西的作用，提高网站的可用性和可操作性。不是花哨的导航而是好的，用户往往喜欢简洁醒目的导航。这就是导航的设计原则！

以上介绍了几种常见的导航设计风格。我们来谈谈在设计导航之前应该做些什么:

1.准备:梳理导航结构。

一个网站的页眉往往包括标志、导航、搜索框、语言、登录注册、标语、400电话等。这么多的内容不可能全部放在网站里，所以我们需要在设计网站之前，对这些内容进行规划，进行一些适当的权衡。

2.分析网站风格，确定导航的具体风格。

确定了网站导航的内容后，就可以把这些信息罗列出来，分析网站的整体风格和最佳用户体验，确定导航的表现形式。

3.设计方案

在确定了导航形式是顶部固定导航还是底部固定导航之后，我们需要对确定的导航内容进行组合排列。选择最佳设计方案。

在设计的过程中，需要遵循用户体验第一的设计原则，在保证内容可读性的同时，保证最优的界面设计。

我相信一个好的导航是整个网站成功的重要一步。设计师根据不同网站的需求设计不同的导航，做到这一步并不容易。学无止境。让我们加入设计师的行列。

Html5/网页简洁导航栏制作？

1、我们以下图所示的导航栏为标准来制作一个导航栏。

2、首先大家看看这个的原理

<nav>

<p>

<a href=”index.html”><li>首页</li></a>

<a href=”#”><li>杂志</li>

</a><a href=”#”><li>签到</li></a>

<a href=”#”><li>商场</li></a>

</p>

<nav按照这个格式你就可以制作出你想要的导航栏了。

导航地图是怎样绘制出来的？

　　平常我们使用导航有两种情景：一种是使用电脑或者智能设备上的地图软件来导航；另一种是使用更专业的车载导航或者手持GPS。　　从地图的采集到最终应用在导航软件，整个过程将涉及到地图学、地理学、遥感技术以及计算机科学等跨学科知识。我们尽量用浅显的语言解释整个制图过程。不过在此之前，我们必须先了解两个概念。　　GIS：Geographic Information System，即地理信息系统。通俗的说是将实际的地形、建筑等地理信息转换成数字模式，可以将这些数字化了的信息进行存储、分析、管理、计算等操作。　　POI：Point of Interest，即兴趣点。一个POI可以是一栋房子、一个商铺、一个邮筒、一个公交站等。传统的地理信息采集方法需要地图测绘人员采用精密的测绘仪器去获取一个兴趣点的经纬度，然后再标记下来。　　GIS和POI是构成导航内地图不可或缺的两个信息，这些信息在地图上以不同图层显示出来。经过对图层的叠加，显示进行表达的过程。对地图应用目标不同，叠加图层也不同。比如你想查看卫星图，选择“卫星图层”就可以直接显示出来。　　●地图数据分为这几大类：　　

1. 底图数据：　　底图就是地图中最基本的图形数据和一些相关附加信息。底图数据来源有三个：　　官方地图：地图厂商从政府测绘局购买其发布的权威地图。　　实地外采：实地外采就是测绘人员利用专业仪器，在实地环境中测绘得到数据。这种实地外采精度高，置信度高，但是缺点是成本高，周期长。　　航片卫片：通过自己拍摄或者购买高精度航空照片或者卫星照片，作为底图数据。这种地图数据被绝大多数地图厂商采用。目前航拍或者卫星地图精度已经可以达到0.05米甚至更精确，这个精度已经足够所有地图生产商使用。　　

2. POI数据：　　上面已经解释了POI数据的概念，我们这里只讨论POI数据来源。　　通过数据采集车采集：采集后数据通过手工标注。这种方式适合大规模采集标注，效率高成本低，尤其适合沿街的店面和场所的采集和标注，是目前数据采集供应商的主要采集手段之一。　　通过专职或者兼职人员利用手机等智能设备进行采集：它是对上一种采集方式的补充，比较适合变动频繁的商户位置。　　地址反向编译：这种方式通过门牌地址号码，运用算法进行定位标注。这种方法的好处是成本非常低，但是精度和准确度都不高。　　从互联网或者企业获取：这些POI直接从专业网站抓取或者购买。一些企业也可以利用这些地图开放的API服务为自己互联网产品服务。　　POI数据不需要很多资质限制，所以提供POI数据的服务生比底层数据供应商多很多。比如图吧就是主要的POI数据供应商。　　

3. 其他数据：　　其他常见数据图层包括交通状况图层、卫星图层、三维图层、街景图。交通状况图主要依赖于安装在出租车上的GPS采集实时数据，或者通过激光测速仪、摄像头、雷达测速等专业设备采集交通路况信息。三维图层主要依靠激光扫描和手工建模。街景则依赖实地拍摄。　　数据处理　　获得这些数据后，需要对这些数据需要进行模型化处理。目前有两种建模方式：矢量模型和栅格模型。　　对地图数据进行加工后，整个地图制作就基本成型了。地图厂商需要将做好的地图进行实地测试，保证地图的完整性和可靠性。最后这些原始地图数据在相关部门做保密技术处理和审查。通过审查后，电子地图就可以公开的在网上发布或者销售。至此，整个地图制作过程基本结束。