恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
froglt教你网页导航的设计
0.0°
2017-06-02 原创文章 教程 举报 1266 2 2 0


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

  

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



10.1 网站的栏目构成


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


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


Image title

图10-1 按性别分类



一般来说分类方式有两种类型,广度优先和深度优先。广度优先就是同一层次的目录数量尽量多,层数尽量少,如图10-2所示。在这个音乐站点中,每个栏目下面都会有一个图片的二级栏目,这样分类便于不同栏目图片的查找。

Image title

图10-2 广度优化



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


Image title

图10-3 深度优先



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


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

Image title

图10-4公司产品网站



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

Image title

图10-5 淘宝网的导航规划



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



10.2 导航的视觉设计


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


Image title

图10-6 各种技术的导航


10.4.2.1 门牌式导航


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


Image title

图10-7 门牌式导航



10.4.2.2 索引式导航


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


Image title

图10-8 索引式导航



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


Image title

图10-9 导航的文本设计



10.4.2.3 变化方框式导航


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


Image title

图10-10 变化方框式导航



10.4.2.4 按钮式导航


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


Image title图10-11 按钮式导航



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


Image title

图10-12 不规则形状的导航



10.4.2.5 无框图标式导航


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


Image title

图10-13 无框图标式导航



10.4.2.6 下划线式导航


符合人们在报纸和图书的重要部分加下划线的习惯,如图10-14所示,让你从这个链接开始冲浪!

Image title

图10-14 下划线式导航



10.4.2.7 记号式导航


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


Image title

图10-15 记号式导航



10.3 导航的交互设计


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



10.4.3.1 分层导航


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


Image title

图10-16 分层导航



10.4.3.2 线性导航


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


Image title

图10-17 面包屑导航



10.4.3.3 无序导航


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


Image title

图10-18 无序导航



10.4.3.4 Tab导航


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


Image title

图10-19TAB导航



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



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


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


Image title

图10-20 网页中的搜索



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


更新:2017-06-02

收藏

2人已收藏

刘涛_UID

发现自我,树立信心,健全人格

  • 113

    作品

  • 160

    粉丝

  • 0

    关注

  • Photoshop基础教程_016_UID
  • Photoshop基础教程_015_UID
  • Photoshop基础教程_014_UID
  • Photoshop基础教程_013_UID

    猜你喜欢

      2017-06-02 原创文章 教程 举报 1266 2 2 0

      froglt教你网页导航的设计

      0.0°

      你确定要举报froglt教你网页导航的设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录