`
尹公子
  • 浏览: 5128 次
  • 来自: 青岛
社区版块
存档分类
最新评论

超实用!网站导航栏设计方法总结

阅读更多

导航对于一个网站来说,起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用。下面跟大家分享下常用的几种网页导航形式:

1、顶部导航

 

顶部导航被广泛应用在各个领域的网站当中,这类导航可以一目了然的让用户迅速寻找到所需。顶部导航这样的设计形式保守但目的性强,可以确保组织结构的可靠和降低用户寻找的时间成本。但这类导航有个缺点,首页内容过多需要滚屏的时候,用户需要滚动到顶部再去切换导航内容。所以现在很多顶部设计的导航会做一个效果,将导航固定在顶部导航,这样减少了用户的使用成本。

 


顶部导航设计的样式也比较多,主要是跟logo、登陆注册、搜索框搭配组合成多种效果,具体可见下图:

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

 

 

2、侧边导航

侧边栏导航的设计形式比较多样,也可以有多表现形式,可动可静,可大可小,比较个性化。固定的侧边栏导航设计不是很建议,特别是对于宽度大的侧边栏导航,这样的设计会影响整个网页界面的宽度。设计师可以考虑做成侧边栏以滑动方式展现,在节约网站空间的同时也显得更加简约。

侧边栏导航的设计需要注意的是导航栏目的宽度问题,若导航栏中字体过长,在展示上会存在一定的问题,哪怕做成滑动展示的形式也不能很好的得以解决问题。结构复制的网站不适用这类导航,且侧边栏的二级导航栏目不也宜多,所以这类导航大部分适用于一些设计师或个人官网。当然,也有一些结构简单的网站会采用这类导航。

以下这个the HOUSE时尚服饰官网将侧边栏的内容精简做成一个元素放在侧边,这样看起来是不突兀的,不会占用空间,相反还起到一定的装饰作用。

 

 

3、底部导航

 

底部导航应用性不是很广,比较长出现在一些活动或个性化的网站当中。其实底部导航被广泛使用的并不是在pc端中,而是在移动端。

 

 

在pc端中采用底部导航的形式,一般都是采用固定的方式,这类导航可以减少用户的使用成本,但对于结构复杂的网站,有二级或三级导航的网站就不是很合适。其次,将导航放置底部,对于用户的使用习惯来说不是特别的好,用户的眼睛都是从上到下从做往右浏览的,这样的设计比较挑战用户的使用习惯。

 

 

 

故而有很多网站在设计的时候首屏导航会放在底部,到第二屏之后导航就会固定到顶部,举个例子:forh健身房体育运动网站

 

 

4、汉堡包式导航

 

汉堡式导航其实跟底部导航一样,比较常出现于移动端。但现在不少的pc端也越来越喜欢用汉堡包式的导航设计。这样的设计比较节约空间,相当于将导航做成一个隐藏式的设计或是弹出式的设计,具有设计感。

 

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


虽然汉堡包式导航的设计方式可以很多样,也可以很个性。但对于一部分用户而言,汉堡包式导航其实并不是那么直观,特别是用户对导航结构不清晰的情况下。设计师在设计这类导航的时候还是要斟酌下。

5、滚动式导航

 

滚动式导航分水平滚动和垂直式滚动。

 

 

水平式滚动

水平式滚动就是内容呈左右水平方向滚动的,当用户第一次遇到这样类型网站的时候,体验感会比较差,因为它物理和视觉运动方向与常规的纵向滚动不同,而且当你使用鼠标滚轮滚动的时候,它的左右水平滚动会让用户产生交互上的错位感,这样的感受其实并不是特别友好。所以这样的网站其实比较少见,但也有及其少部分做得好的。

 

来看看Costume National Scents官网的界面效果。


其实为了不让用户在水平滚动的体验上太差,在界面设计的时候可以加入一个向左或向右的箭头指示,让用户有个心理暗示,可以减少突兀感。

垂直式滚动

垂直式的滚动在html5网页中运用广泛,很多设计师很喜欢用这样的设计,将一些动画特效和垂直式滚动导航相结合,可以达到一种新的视觉效果。一起看看DENSO Brand site的官网,里面结合了很多特效。

 

 

以上介绍的这么多种导航方式,各有利弊,但无论哪一种,导航既然是导航,就应该起到为用户快速便捷找到所需的作用,提高网站的易用性和易操作性,并不是花哨的导航就是好的,用户往往喜欢简单醒目的。这才是导航的设计原则!

 

 

 

上面介绍了导航常见的几种设计样式,我们再来说说在设计导航前应该做好什么工作:

 


1、准备工作:整理导航结构内容。
网站头部常常包括的内容是:标志、导航、搜索框、语言、登陆注册、口号、400电话这些内容。这么多内容不可能全部放置在网站当中,所以我们在设计网站前需要规划好这些内容,适当的做一些取舍。

2、分析网站风格,确定导航的具体风格。
在确定网站导航的构成内容之后,我们可以将这些信息列出,分析网站的整体风格和最佳的用户体验,确定好导航的表现形式。

3、设计方案
在确定好导航的表现形式是做顶部固定导航还是底部固定导航之后,我们需要将确认好的导航内容进行组合排列设计。选出最优的一款设计方案。
在设计的过程中,我们需要遵从用户体验为上的设计原则,在保证内容可读的情况下,再去保证界面设计的最优。

相信一个好的导航是整个网站成功的重要一步,设计师根据不同网站的需要设计不同的导航,而要做到这一步也并非易事,学海无涯,设计师们一起加油吧。

0
0
分享到:
评论

相关推荐

    非常漂亮的导航栏

    在导航栏设计中,可能会使用背景图片、图标或者其他图形元素来增强视觉效果。 4. `js`:这可能是JavaScript文件夹,里面可能包含`script.js`或类似文件,用于实现导航栏的交互功能。例如,当用户滚动页面时,导航栏...

    导航栏特效+图片滚动

    此外,CSS3的Flexbox或Grid布局可以轻松实现响应式设计,确保导航栏在不同屏幕尺寸上都能正确显示。 在描述中提到的图片滚动功能可能是通过CSS3的`transform`和`animation`属性实现的。开发者可以创建一个滑动效果...

    超酷仿GOOGLE首页导航菜单效果

    3. **导航栏动态显示/隐藏**:通过定义`window.gbar`对象及其相关方法,实现了导航栏的动态显示和隐藏。其中,`tg()`函数负责显示导航栏,`close()`函数则负责隐藏。 ```javascript window.gbar = {}; (function...

    书城网站页面设计

    例如,我们可以使用CSS为"框框书城"的导航栏设置背景色、字体大小和颜色,调整页面的布局以适应不同屏幕尺寸,实现响应式设计。此外,CSS还允许我们使用类选择器来为特定元素或一组元素定义样式,使得网站设计更加...

    超简洁浏览器,简单实用

    超简洁浏览器的界面设计遵循“少即是多”的原则,主界面只保留了最基本的导航元素,如地址栏、前进/后退按钮、刷新/停止按钮以及书签管理等。这种设计不仅减少了视觉疲劳,也使得新用户能快速上手,无需花费过多时间...

    Dreamweaver网页设计试着

    1. 创建导航栏,设置“成人高考”、“大学简介”、“友情链接”和“注册表”四个按钮的链接,实现页面间的跳转,这是网页交互设计的基本需求。 总结: 这个期末考试试卷全面覆盖了网页设计的基础知识,包括站点管理...

    网站导航设计html网站模板

    总结来说,"网站导航设计html网站模板"涉及到HTML结构、响应式设计、交互性、可访问性等多个方面,理解并掌握这些知识点,将有助于创建出既美观又实用的网站导航,提升用户在网站上的浏览体验。

    暗红色大气企业服务类网站模板下载-红色 大气 服务 企业 html 导航 黑色.rar

    总结来说,这个资源为需要建立企业服务网站的用户提供了现成的设计解决方案,通过这个暗红色大气的模板,企业可以快速搭建起一个既美观又实用的在线平台。其HTML和CSS代码可以被开发者或网站设计师自定义,以适应...

    Discuz! CY超酷黑色模板

    1. HTML文件:定义了页面的基本结构和内容,如头部、导航栏、帖子列表、页脚等。 2. CSS文件:控制模板的样式,包括字体、颜色、布局等,实现模板的视觉效果。 3. JavaScript文件:负责交互功能,如动态加载、下拉...

    黄色纹理个性单栏产品网页模板

    总结来说,这个“黄色纹理个性单栏产品网页模板”是网页设计初学者和专业人士研究风格、布局和交互的一个实用资源,它涉及到颜色搭配、纹理运用、布局设计、响应式网页技术等多个重要概念。通过深入研究和实践,可以...

    超级简洁的单页面网站模板

    3. **导航方便**:尽管是单页面,但通常会设置滚动导航或固定在顶部的导航栏,使用户能轻松访问页面的不同部分。 4. **内容层次分明**:通过视觉元素(如颜色、大小、间距)和布局区分不同的内容区域,使用户能快速...

    3种基于Bootstrap的超酷Tabs选项卡UI设计

    1. `.nav` 类:这是一个导航栏容器,可以是`.nav-tabs` 或 `.nav-pills`,前者用于选项卡样式,后者用于药丸样式。 2. `.nav-item` 类:每个选项卡都包裹在这个类中。 3. `.nav-link` 类:每个选项卡的链接元素,...

    关于ASP个人网站设计报告

    这包括页面的整体布局、导航栏的设计、内容区域的划分等。良好的网页组织不仅可以提升用户体验,还能增加用户的停留时间,从而提高网站的访问量。 **2.3 ASP简介** ASP(Active Server Pages)是一种服务器端脚本...

    html网页制作代码大全:庆余年——电影网站7页,不包含js 有登陆注册,表格 table布局 ,有的登录注册页面,内嵌 css

    - **导航栏效果**: 利用CSS实现动态导航栏,如下拉菜单、高亮当前选中项等功能。 - **Banner**: 通常是指网页顶部的横幅区域,常用于展示重要信息或广告。可以通过CSS设置背景图、文字样式等实现。 #### 6. **其他...

    227基于HTML5响应式框架Bootstrap的学生信息网站设计.rar.rar

    总结起来,这个项目结合了HTML5的强大功能和Bootstrap的响应式设计,旨在创建一个既实用又美观的学生信息网站。开发者通过学习和实践这样的项目,不仅可以提升HTML5和Bootstrap的使用技巧,还能深入理解响应式设计...

    全屏漂亮左栏固定摄影商务网站模板-全屏 漂亮 固定 左栏 摄影 商务 大气 html5 css3 手机 响应式

    该资源是一个针对摄影和商务领域的网站模板,设计风格为全屏、美观且具有固定的左侧导航栏,能够展现出专业且大气的视觉效果。这个模板利用了现代网页设计技术,包括HTML5和CSS3,以实现丰富的网页交互和动态效果。...

    实用的app开发网络科技公司网页模板

    5. Icon图标:可能包含SVG或PNG格式的图标,用于导航栏、按钮或其他界面元素。 6. 其他文件:可能有字体文件、示例数据、文档说明等,帮助用户理解和使用模板。 总结来说,这款“实用的app开发网络科技公司网页模板...

    Art 简实模板

    总结来说,"Art 简实模板"是一个面向网页设计的资源,强调艺术性和实用性,包含了完整的网页结构,适用于艺术相关网站。设计师可以依据"falling_star"这一主题进行个性化定制,通过HTML、CSS和JavaScript等技术实现...

Global site tag (gtag.js) - Google Analytics