深圳网站建设

网站公告 网站公告:
深圳网站建设电话
网站建设 网络推广
深圳网站建设

网站建设Web Design

当前位置: 主页 > 网站建设 > 网站建设经验 >

网页的导航设计

发布时间:2015-08-25 文章来自:深圳网站建设 点击次数:
更多
网站的栏目构成
 
网站栏目构成,决定了导航的分类级别,例如一个栏目是否可以包含两个或多个分类。其中,有很大一部分工作是对内容进行分类。
 
分类,就是对已有的项目、内容,通过已知的共同属性,进行分组、归类的方法。就好比把地球上的所有人按性别分成男人和女人两类一样,如图所示。这里“性别”就是分类的方法,同样的道理也可以按“年龄”分成幼儿、青年和老人等。对网站栏目使用什么样的分类方法,应该根据网站的内容来决定。

网站的栏目构成
 
一般来说分类方式有两种类型,广度优先和深度优先。广度优先就是同一层次的目录数量尽量多,层数尽量少,如图所示。在这个站点中,每个栏目下面都会有一个图片的二级栏目,这样分类便于不同栏目图片的查找。
网站的栏目构成
 
深度优先则正好相反。两者的不同在于,广度优先访问时间少,但是搜寻定位会花时间,如图所示。
 
网站的栏目构成
 
例如一个新闻栏目的文件夹底下有100条新闻,不一定马上找到想要的那一条。而深度优先比较容易定位搜寻,可以根据新闻的类型来进行分类,但是找到一个新闻页面可能要经过几层目录,比较麻烦。
 
对内容分类的最终目的是希望浏览者能快速找到所需要的信息,所分的不同类别就是网站的栏目。如图所示,大部分的公司产品网站,其导航规划中基本上都会包括公司资讯(或公司简介)、最新消息、产品中心和联系我们等栏目,因为这些也是作为一个公司产品网站所必须的内容分类。
 
网站的栏目构成
 
可以参看淘宝网是如何对内容进行分类的,如图所示。淘宝网中的商品数以万计,没有一个合理的导航规划、用户很难快速找到自己想要的商品,除了网站提供的搜索功能以外,网站在商品栏目构成的规划上,按照产品的不同行业类别进行分类。

网站的栏目构成
 
对网站栏目定位、栏目目的、服务对象、子栏目设置、首页内容和分布内容等、都需要网站建设人员对栏目有一个全局的整体把握和了解。并且能通过各个栏目之间的联系,加强网站的整体性。让网站有整体感,读者可以从最简单的做起,例如设计一个个人网站,然后策划网站的栏目构成和导航效果,从而逐步积累经验。
 
导航的视觉设计
 
从技术上来说,导航有传统的纯文本导航和图像类导航。文本类导航不图像修饰,所以一般下载速度较快,但视觉效果单一。而图像类导航可以通过Fireworks或者Photoshop设计成图像,视觉效果明显,但相对下载速度较慢,如图所示,页面顶端为图磁按钮,而多行的栏目采用了文本按钮。

导航的视觉设计
 
1.门牌式导航
导航采用纵向排列方式,简单排列着一些带文字和图标的按键,这是最传统的方式。
 
2.索引式导航
导航采用横向排列方式,使人联想到文件夹索引的类型,像是在文件夹中查找文件。
 
对于导航内的字体而言,中文网站觉的效果是中文或者中英文混排的方式,字体选择上一般选择比较“粗”的字体,如黑体或其他艺术字体。同时字体的形状还应当考虑到导航的形状,两者要能够很好地结合起来。最后,导航字体的颜色一定要和底色有强烈的对比在,否则文本不易于识别。
 
3.变化方框式导航
这种导航采用没有底座的清爽形式,给人自由轻松的印象。
 
4.按钮式导航
按钮式导航也是最见的导航效果,让人联想起电子产品和汽车的按。大多数的网页效果图设计中,导航选择比较标准的矩形和圆角矩形,也有部分强调视觉效果的网页以不规则形状来设计导航。前面说过,导航是由多个按钮组成的按钮组,所以一定要注意多个按钮之间的连续性,导航要有整体的感觉。
 
5.无框图标式导航
去掉边框,给人轻快的自由感,增强了趣味性。
 
6.下划线式导航
符合人们在读报纸和图书的重要部分加下划线的习惯,让你从这个链接开始冲浪!
 
7.记号式导航
虽然文字偏小,但是在每句话前面加上“●”、“★”或特殊小图标,就变成了可以单击的信息。
 
导航的交互设计
 
随着网络技术的不断发展,深圳网站建设网页导航的交互设计也发生着不断的变化,其最主要的特点是把复杂变得简单,用户使用更加流畅。在网站中制作交互式的导航,主要使用Flash技术和JavaScript技术。在了解导航的交互设计之前,要知道导航的级别分类。习惯上把导航分为分层、线性和无序。下面举例说明;

导航的交互设计
 
1.分层导航
分导导航一般公限于一、二和三级栏目,下拉菜单就是“分层导航”的典型应用,基本属于必要元素。
 
2.线性导航
能够跳跃用户行为,记录用户在网站的活动足迹就是“线性导航”,俗称面包屑。
 
3.无序导航
例如网站管理系统的后台,在首页的类似分层结构的链接就是“无序导航”,俗称快捷方式。
 
4.TAB导航
从交互技术上说,网页导航的交互技术主要为JavaScript和Flash技术,使用这两种技术可以设计出各种级别的导航。常见以JavaScript技术为主的交互导航除了下拉菜单和折叠菜单外,还有现在比较流行的TAB导航等。
 
由于Flash的动画我,以Flash技术为主的导航其交互效果丰富多样,但是其级别分类和传统的导航设计没有太多区别,这里就不再详细介绍。
 
没有“导航”的导航——搜索
 
导航的根源在于分类,当有几十条信息的时候,可以类别;当有上万条信息的时候,有了导航,当信息非常多的时候,无论怎么分类都难以寻找,于是就有了搜索。当一个网站信息越积越多,搜索将会变得越来越重要。甚至到了某一天,网站50%以上的用户都是通过搜索来查询信息的时候,“搜索”就将成为没有“导航”的导航,如图所示。

没有“导航”的导航——搜索
 
对于网站的导航设计,如果在设计时没有什么好的想法或创意,不妨上网多参考同类型网页的设计风格,进行归纳和总结,从而设计出最符合当前网站的导航效果。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
顶一下
(0)
0%
踩一下
(0)
0%
网页的导航设计 : /web/konws/178.html