记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[设计经验] froglt教你网页导航的设计[含20P]

[复制链接]
发表于 2017-6-3 05:54:18 | 显示全部楼层 |阅读模式
                               
                                                                               

无网站不导航!网站的导航设计对于网站而言至关重要,网站99%的内容都依赖良好的导航设计,因为良好的导航可以保证用户找到任何信息。总体来说,导航设计包含了三方面的部分:栏目构成、视觉设计和交互设计。是栏目构成决定了导航的设计。
                                          
网站的导航设计对于网站而言至关重要,网站99%的内容都依赖良好的导航设计,因为良好的导航可以保证用户找到任何信息。总体来说,导航设计包含了三方面的部分:栏目构成、视觉设计和交互设计。是栏目构成决定了导航的设计。




10.1 网站的栏目构成


网站栏目构成,决定了导航的分类级别,例如一个栏目是否可以包含两个或多个分类,等等。其中,有很大一部分工作是对内容进行分类。


分类,就是对已有的项目、内容,通过已知的共同属性,进行分组、归类。就好比可以把地球上的所有人按性别分成男人和女人两类,如图10-1所示。这里“性别”就是分类的方法,同样的道理也可以按“年龄”分成幼儿、青年、老人等等。对网站栏目使用什么样的分类方法,应该根据网站的内容来决定。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625hds3hv6cdss902db 1
图10-1 按性别分类





一般来说分类方式有两种类型,广度优先和深度优先。广度优先就是同一层次的目录数量尽量多,层数尽量少,如图10-2所示。在这个音乐站点中,每个栏目下面都会有一个图片的二级栏目,这样分类便于不同栏目图片的查找。
froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625qzys842u90xs88u8 2
图10-2 广度优化





深度优先则正好相反。两者的不同在于,广度优先访问时间少,但是搜寻定位的话会花时间,如图10-3所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625mh8iojkdid8z1thd 3
图10-3 深度优先





例如一个新闻栏目的文件夹底下添加100条新闻,不一定马上能找到你想要找的那一个。而深度优先比较容易定位搜寻,可以根据新闻的类型来进行分类,但是找到一个新闻页面可能要经过好几层目录,比较麻烦。


对内容分类的最终目的是希望浏览者能快速找到他所需要的,那么所分出来的不同类别就是网站的栏目。如图10-4所示,大部分的公司产品网站,其导航规划中基本上都会包括“公司资讯(或公司简介)、最新消息、产品中心、联系我们”等栏目,因为这些栏目也是作为一个公司产品网站所必须的内容分类。
froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625ha8mycdagaashaak 4
图10-4公司产品网站





读者可以参看淘宝网(www.taobao.com)是如何对内容进行分类的,如图10-5所示。淘宝网中的商品数以万计,没有一个合理的的导航规划,用户是很难快速找到自己所想要的商品的,除了网站所提供的搜索功能以外,网站在商品栏目构成的规划上,按照产品的不同行业类别来进行分类。
froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625gk96m46f96ddfy6d 5
图10-5 淘宝网的导航规划





对于网站栏目定位,栏目目的,服务对像,子栏目设置,首页内容,分页内容等等,都需要网站建设人员对栏目有一个全局的整体把握和了解。并且能通过各个栏目之间的联系,来加强网站的整体性。让网站有整体感,还应当在网页中放置一些贯穿性的元素。纸上谈兵不如真枪实战,对于网站导航的规划而言,读者可以从最简单的做起,例如做一个个人网站,然后由自己来策划一下网站的栏目构成和导航效果,从而逐步地积累经验。;




10.2 导航的视觉设计


从技术上来说,导航有传统的纯文本导航,和图像类导航。文本类导航由于不需要图像修饰,所以一般下载速度较快,但是视觉效果单一。而图像类导航可以通过Fireworks或者PhotoShop设计成图像,视觉效果明显,但是相对下载速度较慢,如图10-6所示,页面顶端为图像类按钮,而多行的栏目采用了文本按钮。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625amegy4h929olzm6t 6
图10-6 各种技术的导航



10.4.2.1 门牌式导航


导航采用纵向排列方式,并且简单排列着一些带文字和图标的按钮,如图10-7所示,这是最传统的方式。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625cuw5gjp7g5g73g7p 7
图10-7 门牌式导航





10.4.2.2 索引式导航


导航采用横向排列方式,如图10-8所示,使人联想到文件夹索引的类型,像是在文件夹中查找文件。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625pj3uiu0oz4hiouv4 8
图10-8 索引式导航





对于导航内的字体而言,中文网站常间的效果是中文或者中英文混排的方式,字体选择上一般选择比较“粗”的字体,如黑体或其他艺术字体。同时字体的形状还应当考虑到导航的形状,两者要能够很好的结合起来。最后,导航字体的颜色一定要和底色有强烈的对比,否则文本不易于识别,如图10-9所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625g1imyxlf020mmoru 9
图10-9 导航的文本设计





10.4.2.3 变化方框式导航


这种导航采用没有底座的清爽形式,如图10-10所示,给人以自由轻松的印象。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625vkk7dhman83an7hq 10
图10-10 变化方框式导航





10.4.2.4 按钮式导航


按钮式导航也是最常见的导航效果,让人联想起电子产品和汽车的按钮,如图10-11所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625jv9o3rohr9uzh9qf 11图10-11 按钮式导航





大多数的网页效果图设计中,导航选择比较标准的矩形和圆角矩形,也有部分强调视觉效果的网页以不规则形状来设计导航,前面说过,导航是由多个按钮组成的按钮组,所以一定要注意多个按钮之间的连续性,导航要有整体的感觉,如图10-12所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625odmbbcnnp5z9vbdd 12
图10-12 不规则形状的导航





10.4.2.5 无框图标式导航


去掉边框,给人以轻快的自由感,增强了趣味性,如图10-13所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625zrbbq93z2rzq2w1k 13
图10-13 无框图标式导航





10.4.2.6 下划线式导航


符合人们在报纸和图书的重要部分加下划线的习惯,如图10-14所示,让你从这个链接开始冲浪!
froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625t82i888mo2d5f0ol 14
图10-14 下划线式导航





10.4.2.7 记号式导航


虽然文字偏小,但是在每句话的前面加上“●”、“★”或特殊的小图标,就变成了可以点击的信息,如图10-15所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625rashjsphr1iiypyy 15
图10-15 记号式导航





10.3 导航的交互设计


随着网络技术的不断发展,网页导航的交互设计也在发生着不断的变化,其最主要的特点就是把复杂变的简单,用户使则更加流畅。在网站中制作交互式的导航,主要使用Flash技术和JavaScript技术。在了解导航的交互设计之前,需要知道导航的级别分类。习惯上可以把导航分为分层、线性、无序的。下面举例来说明:




10.4.3.1 分层导航


分层导航一般仅限于一二三级栏目的,下拉菜单的就是“分层导航”的典型应用,基本属于必要元素,如图10-16所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625oqxe6y46e67zvb7v 16
图10-16 分层导航





10.4.3.2 线性导航


能够跟踪用户行为,记录的用户在网站的活动足迹就是“线性导航”,俗称面包屑,如图10-17所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625q57z9560dtyimcyy 17
图10-17 面包屑导航





10.4.3.3 无序导航


例如网站管理系统的后台,在首页增加的类似跨分层结构的链接就是“无序导航”,俗称快捷方式,如图10-18所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625obqaw1oiajtiioqo 18
图10-18 无序导航





10.4.3.4 Tab导航


从交互技术上来说,网页导航的交互技术主要为JavaScript和Flash,使用这两种技术,可以设计出各种级别的导航。常见以JavaScript技术为主的交互导航除了下拉菜单、折叠菜单外,还有现在比较流行的TAB导航等,如图10-19所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625fszrt7kxsks9kdgx 19
图10-19TAB导航





由于Flash的动画特性,以Flash技术为主的导航其交互效果丰富多样,但是其级别分类还是和传统的导航设计没有太多区别,这里就不再详细介绍。




10.4没有“导航”的导航—搜索


导航的根源在于分类,当有几十条信息的时候,我们需要类别,当有上万条信息的时候,有了导航,当信息非常多的时候,无论怎么分类都是难以寻找的,于是就有了搜索。当一个网站信息越积越多,搜索将会变得越来越重要。甚至到了某一天,网站50%以上的用户都是通过搜索来查询信息的时候,搜索就将成为没有“导航”的导航,如图10-20所示。


froglt教你网页导航的设计 视觉设计,网页,地球,男人,青年 设计理论 055625apulh4ppiz4pfi4u 20
图10-20 网页中的搜索





对于网站的导航设计而言,如果在设计时没有什么好的想法或创意,不妨上网多参考同类型网页的设计风格,进行归纳和总结,从而设计出最符合当前网站的导航效果。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
微信扫一扫,每天教程更新!
想学习最新知识关注“今日教程”微信公众号!站长每天更新教程,每天八条,欢迎关注支持!!!
快速回复 返回顶部 返回列表