网页导航样式设计，网页导航样式设计怎么设置

网页已经成为人们获取信息、沟通交流的重要平台。而网页导航作为用户与网站内容之间的桥梁，其设计质量直接影响着用户的浏览体验。本文将从网页导航的布局、关键词运用、修辞手法和权威资料引用等方面，探讨如何设计出既美观又实用的网页导航。

一、网页导航布局

1. 简洁明了

网页导航的布局应遵循简洁明了的原则，避免过于复杂的设计。过多的导航条目会分散用户注意力，降低用户体验。根据美国心理学家乔治·米勒的研究，人类大脑一次性处理信息的能力有限，过多信息会导致用户难以把握。

2. 对称与平衡

对称与平衡是网页设计中的基本美学原则。合理的对称与平衡布局可以使网页导航更加美观，同时便于用户识别。例如，将导航条分为左右两栏，左侧放置主要频道，右侧放置辅助频道。

3. 适应性

网页导航应具备良好的适应性，以适应不同设备、不同分辨率的需求。在移动端，导航条可折叠，节省空间，提高用户体验。

二、关键词运用

1. 明确性

在网页导航中，关键词的运用应具有明确性，让用户一眼就能看出该导航条目的含义。例如，将“新闻”替换为“最新资讯”，将“产品”替换为“热门商品”。

2. 精炼性

关键词应尽量精炼，避免冗余。过多的修饰词会降低导航的识别度，影响用户体验。

3. 相关性

关键词应与网站内容密切相关，确保用户在点击导航条目时，能够快速找到所需信息。

三、修辞手法

1. 对比

在网页导航设计中，运用对比手法可以使导航条目更加突出。例如，将重要频道用较大字体、鲜艳颜色展示，其余频道则采用较小字体、较淡颜色。

2. 重复

重复是一种常见的修辞手法，在网页导航中，可利用重复强调重要信息。例如，在多个导航条目中使用相同的关键词，引导用户关注。

3. 象征

运用象征手法，将导航条目与网站内容、企业文化相结合，使导航更具内涵。例如，将“联系我们”导航条目设计成一封信封形状，体现企业的人文关怀。

四、权威资料引用

1. 数据支持

在网页导航设计中，引用权威数据可以增强说服力。例如，根据艾瑞咨询报告，我国网民数量已超过8亿，网页导航设计应充分考虑用户需求。

2. 专家观点

引用专家观点，可以提高网页导航设计的专业度。例如，根据腾讯研究院的研究，优化网页导航可以提高用户留存率。

网页导航设计是提升用户体验的重要环节。通过合理布局、关键词运用、修辞手法和权威资料引用，可以使网页导航更加美观、实用。在今后的网页设计中，我们应不断探索创新，为用户提供更加便捷、舒适的浏览体验。

网页设计div和class,网页的每个部位都是怎么命名的

常用CSS命名参考资料

在XHTML中定义ID时都用得上，主要是方便CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。

(1)页面结构类

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

(2)导航类

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

位置导航： crumb

菜单：menu

子菜单：submenu

面包屑：breadcrumb(即页面所处位置导航提示)

(3)网页内容类

标题: title

摘要: summary

箭头： arrow

商标： label

网站标志： logo

转角/圆角： corner

横幅广告： banner

栏目： column

子菜单： subMenu

搜索： search

搜索框： searchBox

登录： login

工具条： toolbar

下拉： drop

标签页： tab

当前的： current

列表： list

滚动： scroll

服务： service

提示信息： msg

新闻： news

小技巧： tips

下载： download

栏目标题： title

热点： hot

加入： joinus

注册： regsiter

指南： guide

友情链接： friendlink

状态： status

版权： copyright

按钮： btn

合作伙伴： partner

投票： vote

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left;

(4)标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局，版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：leftrightcenter

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

友情链接：friendlink

页脚：footer

版权：copyright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：partner

(二) 注释的写法：

/*Footer*/

内容区

/*EndFooter*/

(三) id的命名：

(1)页面结构

容器：container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：leftrightcenter

(2)导航：

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题:title

摘要:summary

(3)功能：

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：regsiter

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的:current

小技巧：tips

图标:icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

(四) class的命名：

(1)颜色：使用颜色的名称或者16进制代码，如：

以下为引用的内容：

.red{color:red;}

.f60{color:#f60;}

.ff8600{color:#ff8600;}

(2)字体大小，直接使用“font+字体大小”作为名称，如：

以下为引用的内容：

.font12px{font-size:12px;}

.font9pt{font-size:9pt;}

(3)对齐样式，使用对齐目标的英文名称，如：

以下为引用的内容：

.left{float:left;}

(4)标题栏样式，使用”类别+功能”的方式命名，如：

以下为引用的内容：

.barnews{}

.barproduct{}

(五) 文件名命名：

主要的：master.css

模块：module.css

基本共用：base.css

布局，版面：layout.css

主题：themes.css

专栏：columns.css

文字：font.css

表单：forms.css

补丁：mend.css

打印：print.css

(六) 注意事项：

(1)一律小写。

(2)尽量用英文。

(3)不加中杠和下划线。

(4)尽量不缩写，除非一看就明白的单词。

建设网站中的导航栏在设计时有哪些常见的样式

分享几个常见的导航设计：

1、滑出导航

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

2、全屏导航

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

3、单页滚动导航

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

4、垂直导航

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

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

APP导航和页面设计样式

页面导航的分布如下所示

将入口放在页面的底部，形成标签导航。目前这种导航的设计方式在app设计中非常常见，其优点十分明显，即用户可以非常直接的看到该app的功能结构。而缺点是这些功能并没有非常清晰的主次关系，同时扩展性差。因此目前标签导航建议底部的标签不超过5个，如果超过5个建议使用其他方式。

该类导航与标签导航相似，不同的是中间的导航标签会蕴含更多的操作选项，即该标签中包含了更多的二级导航。以小红书为例，其底部导航就是典型的舵式导航，点击“+”标签会直接唤醒相机并可以导入图片/视频等内容

对于舵式导航里的扩展二级标签，这些二级标签可以形成一种单独的导航- 点聚导航 ，从Bilibili的底部导航可以看出，点击中间的导航会弹出4个二级标签：开直播、拍摄、上传和模板创作。舵式和点聚导航的方式往往适用于产品需要特殊引导或者是凸显核心功能的场景。其缺点是功能之间无主次，扩展性差，不利于后期的功能拓展。

将标签放到界面的上方，就会形成tab标签导航，这种导航适用于类目较多的APP作为二级导航梳理页面逻辑，布局清晰。作为一个二级导航，顶部标签导航应用于多种情境下，可以固定数量，展示有限的几个标签。也可以扩大一定的数量，变成向左滑动展现更多标签，十分灵活，但是因为在手机中左右滑动不如上下滑动方便，因此，个人认为还是不要展开太多标签。以微博和下厨房为例，这两个APP都采用了Tab页导航。

抽屉导航是将菜单隐藏在当前页面后，点击导航入口即可像拉抽屉一样拉出菜单。抽屉导航一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能，优点是可以节省页面空间，比较适合于不那么需要频繁切换内容的应用，例如对设置、关于、个人信息等内容的隐藏。以网易云音乐为例，其采用了非常标准的抽屉式导航，目前更多APP会采用抽屉导航的变式，即点击导航入口以后，以向右滑动的方式，整个抽屉页将滑动出现并且占据整个屏幕，例如小红书app的抽屉导航。

一般位于产品顶部，通过点击呼出导航菜单。导航菜单以浮窗形式位于界面上层，可通过点击导航菜单以外的区域使其收起。下拉导航的菜单与界面的连贯性比抽屉式要好，容易让用户感知当前位置。但由于是位于屏幕上方，相对隐蔽而且不能结合手势操作，所以该菜单形式也不适合于频繁的切换功能使用。考虑到导航菜单的可用面积较小，所以一般采用列表的形式展示菜单内容。下拉导航还有一种变式，就是下来菜单中展示两级甚至多级，一般在电商产品中比较常见，因为品类和筛选条件众多。

主要功能入口全部聚合在页面，让用户做出选择。这样的组织方式虽然无法让用户第一时间看到内容或执行操作，用户的选择压力也比较大。但却能够让用户整体上了解APP提供的服务，从而选择自己所需要的那个服务。这种导航于一些提供的服务较多或者类目较多的APP，例如支付宝、淘宝等。

宫格导航的应用很广泛，也产生了很多变种，以百度贴吧为例，其在应用宫格导航的时候，将功能进行了分类并且用标题加以区分，使用户更容易从众多功能中找到需要使用的功能。

还有一种变式，是可滑动的宫格，这种设计适合于宫格内容较多，但是不想占用太多屏幕空间，于是用户可以左右滑动来查看功能内容。以小米app为例，由于功能较多，但是不希望占用较多屏幕面积，因此导航只放了两行功能，但是用户可以向右滑动找到更多的功能。在宫格区域下方采用了指示器来告知客户滑动的范围。

通过列表指示类目，在右侧显示箭头表示有二级内容，列表导航通常用于二级页，由于它与宫格导航一样，不会默认展示任何实质内容，所以通常app不会在首页使用它。这种导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。

同样可以对列表进行分类产生变式，这样逻辑会更清晰，不知道如何确定分类名称。把分类名称去掉也是可以的。只是用间距将每一组列表隔开也能起到梳理逻辑的作用。

每一个页面就代表一个导航入口，这就是轮播导航，适用于比较简单或者结构比较扁平的APP。轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的，只需要手指左右滑动。缺点也很明显：承载入口的数量有限，超过10个可能就多了。这种导航常见于查看图片，也经常与其他导航模式结合，作为banner广告呈现。