超实用！网站导航栏设计形式总结

当前最流行的分辨率是1920*1080，在该分辨率下，页面中心区域为1200px以内都可以。在800*600分辨率下，导航栏尺寸规格保持在778px以内；在1024*768分辨率下，网页宽度保持在1002px以内。

如果没有指定的要求，以1920尺寸设计就好（这是目前最普遍的尺寸大小），前端开发人员会自行适配其他的分辨率。

扩展资料：

UI设计网页方法

一、呈现更新颖的内容

设计师在进行网页ui设计的过程中需要注意的是，想要让自己的网页看起来更加与众不同，但也不必过于夸大，可以用一些新鲜的理念和不同的布局来吸引用户访问。比如以一种动态的方式，将信息呈现给用户，以此来赢得用户更多的关注。

二、增强元素的设计感

相对于普通的网页ui设计而言，具有较强的设计感的网页往往会更容易吸引用户的注意。任何一个具有创意的网站开发设计方案，都会把目光更聚焦在网页的基本布局和色彩搭配上，而这也意味着网页上一般存在很多种不同的元素。

三、激励用户更多操作

网站开发的设计制作的类型有很多种，面对不同的类型，要有特定的网页ui设计方案。给用户提供一个寻找目标的简易方法，这样用户就容易沉浸到页面中来，同时也增加了用户操作的几率。

1、滑出导航

滑出式导航是现在很流行的一种，当用户打开页面时，第一眼看到的是主要的内容而非菜单，给用户更好的第一印象。响应式全屏滑出导航也可以给人愉悦的体验。

2、全屏导航

全屏导航设计对内容有强调作用，用户可以更加便捷地切换到不同的页面，让内容成为更加触手可及的东西。如果设计的够合理，用户会在无意识间充分运用起它的导航功能。

3、单页滚动导航

对于不含有大量内容的网站而言，单页式的导航的效果非常不错。这样的网站只需要简单的向下滚动操作，内容就会持续不断地到你的眼前。

4、垂直导航

垂直导航最流行的有两种排版方式，一种是隐藏式的导航菜单，需要的时候点击显示。另外一种是固定的侧边栏来展示菜单。它为网站设计提供了一种新的视觉体验。

导航如何使用，还是要结合你的项目的具体特征来决定的。

2、导航不多的情况下，一般就只有一排，横竖都可以，但其实如果考虑到美观，栏目超过6个就可以考虑用两排。

3、如果遇到导航栏目很多的情况，设计师也可以进行多排，甚至可以使用不规则的多排(一排个数不同，或长度不同)。商业设计或门户站点通常都会有很多子栏目，设计起来，设计师就要考虑到横向双排的方式。使用竖排，会占用太大空间。多排排版时要考虑导航条的直观和美观。

4、为了更好地进行网站优化，导航的锚文本中可以考虑包含关键词。但这里注意的是包含关键词，不是不要堆砌关键字，2-4个字就足够了。

5、通常内容不多的情况下，可能无所谓栏目，站点就包括了导航的具体内容。

6、导航层次的设计。好的导航层次最多不会超过四层，以三层为最佳。但在百度收录过程中，比较注重首页，与首页越近的网页最容易被收录。所以，在设计过程中，一定要在网站规模与用户体验中做好平衡。

7、双排导航未必要挨在一起，可以自由一些，如：上排有导航栏，图片分隔开后则另起一排。

8、图片式导航，很漂亮，占用页面空间比较大。如每一个图像就是一个点击热点。

9、内容很丰富的站点，可以考虑使用快捷导航，即Frame框架快捷导航，是因为不管你进入哪个页面都可以快速跳跃到另外的栏目，不会失去方向。

10、利用DHTML、JS、动态隐藏层等技术实现的多变化的导航，都有浏览器的支持问题。建议大家不用。另外，不是所有的网站都有导航的。大家可根据自己情况而定。

关于网页设计中导航栏须知的十大事项，青藤小编就和您分享到这里了。如果您对互联网营销有浓厚的兴趣，希望这篇文章可以为您提供帮助。如果您还想了解更多关于广告营销文案写作、文案优化的方法及素材等内容，可以点击本站的其他文章进行学习。

当期最普遍的做法是将搜索功能放在导航区域，并且右上角放一个搜索框。

要点：

1. 如果空间有限，推荐使用可扩展的输入框，带有放大镜图标；

2. 内容越多的情况下，就越是需要将搜索放在明显的位置。例如，Facebook 并没有采取传统的方法，将搜索框放右上角，而是放在了中间偏左的位置；

3. 自动填充能够节省用户时间，给出建议内容和合适的词；

4. 如果用户能够多重条件搜索，使用“输入提示”模式。

二：通知

随着社交媒体网站的流行，让用户知道何时有人产生互动的“通知”也普遍开来。网站和 APP 可以推送新的内容、产品、评论或折扣信息，用户也可以选择想要接收哪种通知信息。

Google 采用了跨产品的混合通知：用户登录 Gmail 后，可以快速查看是否有人在 YouTube 上发出新的评论。

要点：

1. 最普遍的通知图标是一个 “铃铛”；

2. 通知通常带有颜色并且接着一个数字，选择一个醒目的颜色来吸引注意力；

3. 偶尔的更新提示是适当的，但是不能滥用通知，利用通知发一些营销信息，否则会降低消息的价值；

4. 如果用户长时间未登录（如一周或以上），可以考虑通过增加快速通知，为用户总结过去这段时间内发生的重要信息。

三：跳转

无论是文字链接还是图标形式的跳转都能够节省用户时间。作为可选功能，不能太显眼，最常见的跳转是“返回顶部”。

要点：

1. 不要太显眼，可以考虑固定在侧边栏；

2. 同样可以采用下拉到一定距离显示按钮。

四：固定导航栏

通常会采用固定顶部导航栏，也可见一些固定侧边和底部导航栏。好处是用户在浏览内容时候，突然需要搜索或查看通知，有便捷的入口。

要点：

1. 由于总是需要占据一些屏幕空间，导航设计的越小越好；

2. 对于单页站点强烈推荐用这种导航，否则用户会丢失导航信息；

3. 为了更好的移动端体验，针对移动用户做导航收缩；

4. 对于卡片式风格的网站，不建议采用这种方式的导航，用户在下翻的时候容易迷失。

五：垂直导航

放在两边的垂直导航能够节省空间。对于有很多分页的网站，同时可以为用户提供很多选项，当然也可以为其他导航增加变化的空间。

垂直导航的好处是允许用户在不同页面间自由跳转，更简单的获取不同内容。

要点：

1. 如果想要节省更多空间，垂直导航可以考虑采用抽屉式；

2. 不必拘泥于左侧垂直导航，有时候采用右侧垂直导航能够让网站更加突出。

3. 如果想要更加有创造性，可以结合垂直导航和跳转功能，例子：http://www.heartkids.co.nz/

六：弹出框

适用于用户不想离开当前位置，但是能够获取更多信息的情境，这样做的好处是不会分散用户的任务流。通常在鼠标悬浮时弹出。

要点：

1. 完美适用于卡片式布局：设计师可以在页面展示大量的内容，同时以弹出的方式显示信息来节省空间；

七：模态

由于涉及到交互，模态是一种交流重要信息的方式。和弹出框一样，模态可以让用户在当前页面完成操作，不同的是模态需要交互，即使是最简单的点击“跳过”或“是”。

模态通常有两个用处：

·吸引用户注意某个功能

·营销

要点：

1. 模态弹出时背景需要处理一下，通常是将背景变暗；

2. 允许用户通过点击背景框和按“ESC”键退出模态；

3. 如果觉得强迫用户点击会影响用户体验，可以考虑使用自动最小化的动画；

4. 对于教程页面，推荐使用多页面模态；

5. 对于邮件订阅的模态，在用户滚动到相应位置触发。

八：行为召唤

行为召唤意为用明显的按钮引导用户进行某项操作，通常用于购买、注册、邀请参加某项活动等。对于行为召唤，最重要的是视觉效果：显眼且实在。实际上，行为召唤应当是用户看到的第一元素，毕竟这个功能通常都带有商业目标。

要点：

1. 颜色时让行为召唤显眼的最有效方式，橘色或绿色是吸引人注意力的颜色，使用黑vs白强烈对比的颜色也可以

2. 另外一个是位置，在最常见的位置放置行为召唤

3. 鼠标移上时变化颜色是近来的趋势，能够增加视觉愉悦感；

九：推荐

推荐最常见于电商页面，依据用户的购买/浏览行为推荐商品。现在，任何网站只要能够收集用户数据都能够做推荐，也可以基于用户的个人资料。

Facebook 会基于你的好友和关注列表来推荐你可能感兴趣的人，而视频网站可能仅仅依据你的观看记录推荐同一类的内容。

Amazon 做的最超前，依据不同维度来做推荐，如：搜索、浏览、收藏等。

要点：

1. 个性化是关键。对用户了解越多，推荐就能越精准。使用所有你可以用到的数据。

2. 用户简历个人资料时，可以邀请他们选择一些特点标签来区分偏好。

十：相关内容

在电商、博客、杂志网站中最为流行，和“推荐”功能一样非常有效，但是不需要用户数据。通常通过标签或关键字推荐相关内容。

要点：

1. 相关内容的准确性常常依赖于标签系统，更多的精准标签创造更有效的结果。

导航模式

网站的导航如何设计，在设计网站导航时首先应该明确用户的浏览习惯，根据用户的浏览习惯，首先会先大概地扫视一遍页面，其次则会开始寻找导航栏，快速从导航栏上找到主要信息，引导用户寻找网站对他有用的信息。一般来说左边的权重要比右边的权重要高一些。

网站的导航信息应该明确，，设计一个有魅力的导航还能留住用户浏览更多的内容信息，带给用户良好的体验。在网站导航设计上应该主要关注一下几点：导航的模式常见的导航模式有很多，例如顶部水平横栏式，垂直导航栏，侧边固定式，滑出或者弹出窗口导航等，通常网站是根据所要展示的内容要点来选择不同的导航。如果网站的内容较少，在网站导航上可以选取水平式导航，这样既可以重点内容而且简单清晰，网站内容较多的时候可以选择抽屉式的导航，用户在浏览网站时各种信息都很明确。如果网站的显示页过长，比较试用的是垂直式导航，方便用户在浏览内容时导 航信息始终保持在一个位置可以被快速找到。

导航内容

网站的导航应该是对整个网站想要展示的信息总结，导航的信息要与详细页面符合，标题的总结要精简，注意网站小内容最好不要以导航的总标题形式出现，可通过细分的下拉菜单，或者以更多形式的小菜单栏里出现。

导航细节

在导航设计时可以设置一个“回到顶部” 的标志，以便用户快速到达头部的导航位置。这样对于网站内容较多用户下滚的内容过长时就可以快速的回到顶部了。

导航创意

我们都喜欢新的东西，在看惯了千篇一律的导航形式如果能给导航加点创意，那么肯定会非常吸引人眼球。

网站的导航在网站设计中有着举足轻重的地位，好的网站导航是成功的一半，所以在网站的导航设置上更加注意。

1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：

<html xmlns="网址">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>导航栏示例</title>

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首    页</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互动交流</a></li>

<li><a href="#">开心一刻</a></li>

<li><a href="#">悬 赏 令</a></li>

<li></li>

</ul>

</body>

</html>

2、此时对应效果如图：

3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。

4、然后将以下CSS代码加入到<head></head>之间：

<style type="text/css">

body {text-align:center}

#navigation

{ list-style-type:noneheight:auto}

#navigation li { width:154pxheight:60px text-align:center

float:leftpadding-top:18pxfont-size:20px font-family:"微软雅黑", "宋体", "隶书"

background-image:url(images/noactive.jpg)}

a {width:154pxheight:72px}

a:link { text-decoration:nonecolor:#FFFF00}

a:visited { text-decoration:nonecolor:#FFFF00}

#navigation li:hover { color:#CC0000 text-decoration:underline

background-image:url(images/active.jpg)}

a:hover{ color:#CC0033}

#left {background-image:url(images/left.jpg)width:22px}

</style>

5、在加入CSS代码之间，网页此时的效果如图：