网站首页导航设计的要点

网站首页导航 设计 的要点

当网站UI元素比较拥挤时，如果导航菜单视觉比重太弱就会在各色图形、促销广告、标题里迷失，不易被用户识别。下面介绍网站首页导航设计的要点，希望这些内容对您有所帮助。

1. 导航设计要大气

大屏中的导航菜单不要太小.如果空间足够，不要将菜单隐藏。

2. 导航操作要简单方便

通常用户会希望在浏览过的网站或app中的类似位置(譬如网站顶部、左侧等)中找到他们想要的UI元素。

3. 要有互动感

如果菜单选项看起来不可点击，用户未必能认出它是导航。如果我们的导航设计融入太重的图形、或太过追崇扁平化设计风格，会使它们看起来更像是装饰性图片或标题。

4. 有视觉冲击力

很多导航菜单的周围会留有一点空白区域以从视觉上突显它。但当网站UI元素比较拥挤时，如果导航菜单视觉比重太弱就会在各色图形、促销广告、标题里迷失，不易被用户识别。

5. 导航菜单与背景要对比鲜明

即便是熟悉以上规则的设计师设计出来的导航菜单也有可能会被用户忽视，因为他们很难客观地评价自己的作品——尤其是碰上比较主观的设计标准时，比如哪个UI元素应该拥有更明显的视觉效果。如果你知道你的导航菜单在哪儿，自然能一看看到它，因为这是你设计的。因此，让用户参与验证十分必要。

6. 位置导航

用户成功导航的一个最基本的标准是他自己能发现：“我在哪儿?” 通常被选中的菜单选项在视觉上与其他选项是有差异的，这可以帮助用户明确自己的当前所在位置(或者通过面包屑导航定位)。如果没有让用户明确所在位置、导致他们迷路，那么就犯了网站设计最基本的错误。讽刺的是用户不总是通过首页到达目的页，所以导航菜单对于用户来说意义重大。

7. 链接标签要清晰

清楚用户要找的是什么，使用相似且相关的类别标签。要记住导航菜单并不是拿自造词和行话去忽悠人的。请使用可以准确描述网站内容和特征的术语。

8. 链接标签要易读

减少用户阅读菜单具体内容的时间，如使用左对齐的垂直菜单、或将关键词前置。

网站导航设计的要点

1、 对于二级菜单要易于查找

对于大型网站来说，让用户通过导航菜单预览子级内容。对于喜欢挖掘网站各层级内容的典型用户来说，下拉菜单可以让用户快速浏览、节省时间。

2、为内容提供本地导航

如果用户喜欢对一些同类商品频繁对比、或在某个场景里完成多个任务，可以将这些临近页面做成本地导航菜单，这样用户就不需要在复杂的路径里“上蹿下跳”了。

3、传达网站意图

利用视觉的传达力。图像、颜色等元素可以帮助用户理解菜单选项，但也要确保这些图形起的是积极作用(至少不能让操作变得更难)。

4、菜单选项要够大、方便点击

如果导航菜单的选项过小或者彼此靠得太近，会给移动用户造成很大的困扰;大屏网站中导航菜单选项如果也设计成这样，那就会很难操作。

5、 确保下拉菜单不会太大或太小

鼠标悬停触发的下拉菜单呈现时间太过短暂会给用户带来挫败感，因为用户还没来得及点击菜单里的某个链接的时候，下拉菜单就消失了。另外，太长的垂直导航菜单也不利于底部选项的点击，除非滚动屏幕。最后，鼠标悬停触发的下拉菜单不能太宽，否则会让用户误以为是新页面、并且好奇为什么自己还没点击就出现了新的“页面”?

6、悬浮吸顶(或固底)菜单的使用

当页面内容很长时，可以考虑悬浮吸顶(或固底)菜单。已浏览到页面底部的用户要想回到首屏需要一次又一次地回滚鼠标(移动端则是不断向上划动屏幕);如果导航可以悬浮吸顶，用户就可以很方便地进行其他菜单选项的切换。这很适合小屏幕场景。

7、缩短导航菜单最常用操作的物理距离

下拉菜单内容比较多时，将用户最常点击的链接放到离鼠标悬停的选项最近的地方可以减少鼠标移动的距离(移动端也类似)。最近一些app中流行的饼状菜单则将所有菜单选项成圆(有的是半圆)状围绕在菜单周围，这样每一个选项链接的物理点击距离都是最短的。

网站页面设计中导航重点是什么

在网站设计中，网站导航页设计一直是个重要的课题，网站的导航在网站中就好比黑夜里的指路明灯，迷失路途中的指向牌，可见导航的重要性不言而喻。在网站设计中网页导航设计都有哪些重点?今天，小编就为大家讲述网站导航的分类和重点。

第一、网站的主导航

一般来说，网站的主导航位于网站的最上面，因为主导航包括网站的首页以及各个新闻栏目的导入链接，它是用户清晰了解网站核心栏目内容的指路牌，每当新访客来到网站，都需要通过网站的主导航来确定网站的定位和主营业务。另外，主导航多搜索引擎也是非常友好的，搜索引擎来到网站会根据网站的主导航进入网站的各个子页面，所以网站的主导航不管是对于用户的浏览体验还是搜索引擎都是十分有利的。

第二、网站的副导航

网站的副导航对网站的主导航起辅助作用，副导航通常位于网站首页的最下端，在网站的首页增加副导航是为了方便用户去找到自己中意的服务和产品的链接。当然，从搜索引擎的角度来说，增加副导航就是增加网站长尾关键词的密度，这样增加了网站关键词的排名。

第三、面包屑导航

面包屑导航在很多网站中都被忽略，所谓的面包屑导航就是上一栏目与下一栏目之间的桥梁，面包屑导航的作用虽然不及网站的主导航大，但是在网站中的作用也是不容忽视的。面包屑导航就是在首页与二级栏目三级栏目之间相互切换，让每一级栏目都转成锚文本的形式，这样用户在网站中，知道自身所处的位置，这同时也有利于搜索引擎的抓取。第四、网站地图导航网站地图中包含了所有网站的页面，在网站的布局中，其他页面均从网站的导航地图中导出链接，导航地图好比我们人类大脑的神经元，它控制着所有的神经，网站的导航地图只能由我们去手动添加。

在网站建设中，大部分网站都有导航地图，可见网站导航地图在网站中的作用。地图对搜搜索引擎蜘蛛的爬行提供了方便。总结：可见，网站设计导航页面建设对于用户体验和有所引擎抓取有着至关的重要。实际上，很多企业网站建设在页面导航设计这块做的非常不理想，不要一味的看人家的网站设计后期效果多么的理想，细节决定一切。

页面设计要点

一、确定网站的整体风格

在这里提供给大家一些参考经验：

1.将你的标志logo，尽可能的放在每个页面上最突出的位置。

2.突出你的标准色彩。

3.总结一句能反映贵站精髓的宣传标语!

4.相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!

二、网页色彩的搭配

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿;或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

1.不要将所有颜色都用到，尽量控制在三至五种色彩以内。

2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

三、网页设计的工具

1.Dreamweaver，用于编辑HTML、ASP、JSP、PHP、CSS、XML、JS的页面制作工具;

2.Frontpage，跟Dreamweaver一样，不过个人感觉还是Dreamweaver好;

2. photoshop，图像处理软件，一般网页都需要有图片相搭配，Photoshop是款很强大的工具。

4.Fireworks，跟Photoshop一样都是图像处理软件，但Fireworks偏向与对网页的处理。

江苏省