网页导航系统的作用与分类

___爱如少年

___爱如少年

2016-02-17 04:31

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐网页导航系统的作用与分类,希望大家看完后也有个好心情,快快行动吧!

网页导航系统就是我们一般所说的导航条,不过在网页中除了全站导航外,还可以有各种不同的导航条,因此统称这些为网页导航系统。

导航系统的作用:告诉你在哪里,可以去哪里,这里有什么,附近有什么,指引你下一步的行为。

导航系统的分类:全站、区域、情境式、辅助性导航。

浏览器的导航特点

考虑浏览器环境,其实浏览器上已经有后退、前进、收藏、设为首页等功能,但有时候在页面本身的浏览情境当中也最好要放这些功能,比如在浏览一篇文章,到了结尾能看到[收藏]、[关闭]、[返回]等功能可以方便不少用户看完后其它意图的操作。还有就是区分有无链接的文字样式,区分是否浏览过文字的样式(这些其实是编写CSS样式范围内的)。

建立情境

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

最典型的例子用户随便从Google搜索到一张网页,当点击进入页面后,就算是进入了一个情境中。情境中应该告诉用户这是在哪里?(我在什么位置,这是什么网站),这里有什么(页内标题),用户下一步能做什么(能看,能下载,能购买),还能去哪里(栏目,本栏页内导航),以上几点类似于《Don't make me think》中内页的6点基本要素:1.站点ID、2.页面名称、3.栏目下一级栏目、4.页面导航、5.你在这里指示器、6.搜索。

改善灵活性

网站中各栏目之间的内容可能保持垂直的排列方式,但用户在访问内容时要考虑Ta们可以会随时跳转到其它栏目的二级、三级页面中,保持横向和纵向的导航,注意不要导航辅助功能的设置。提供增加的情境和灵活性,弥补等级式系统的不足之处。

全站导航系统

全站导航系统就是要在网站上的每一页都会展示的导航系统,可直接连向重要的区域和功能,无论用户在哪个层次中。全站导航保持一致性,以密集且重复来访的用户为中心,进行设计和测试。

值得一提:具有情境式的全局导航系统,这类导航不仅告诉你这里有什么内容,还告诉用户正在哪块内容中。(图1)

网页导航系统的作用与分类,PS教程,图老师教程网

图1

区域导航系统

当用户进行某个栏目中后,可能该栏目还会分很多小栏目,把这些小栏目列出来,方便用户可以立刻浏览那些内容,有些网站会把全站导航和区域导航整合成一致且统一的系统,如下拉菜单。和全站导航一样,在同一个站点中他们的表现形式最好一致且统一的。

情境式导航

进入目的页面后,会有一些内容指向特定的网页、文件、对象。比如网站上的相关文章,喜欢这个商品的用户也会喜欢,同类TOP10,要注意[情境式全局导航系统]主要是说明所处的位置,[情境式导航]是说明在这张页面内容的情境下,有什么相关内容可以告诉并提供链接给用户(称外部情境式导航链接,玩概念:)。比如你在Joyo买《精通CSS》这本书,在介绍这本书的页面中,总会有一些链接是指向与CSS类的其它书籍。还有一种是在文章叙述的文字中放链接(称内联情境式导航链接,玩概念:)。

实践嵌入式导航

认识到全站、区域和情境区导航元素都在大多数网页上同时共存,如何在网站中整合好。不过这个问题可能涉及到:网站栏目多少、页面结构复杂度、实现一些效果的JS程序、交互过程相关这些。

辅助性导航系统

包括网站地图、索引、指南。确保大型网站可用性和可寻性的关键。

网站地图:1.强化信息层次,使得用户熟悉对内容的组织方式。2.对了解网站用途的用户,则便利其快速、直接访问内容。3.避免让用户承担太多信息,协助用户。网站地图强化层次感,探索感。网站地图有一个很实在的好处,当你在搜索引擎中找到某个网站,它可以直接把你带到相关的栏目中。(图2)

网页导航系统的作用与分类,PS教程,图老师教程网

图2

网站索引:就是将网站的内容以关键词、词汇、标签按一定顺序(字母,笔划)排列而成。内容之间可以没有等级关系。方便已知条目的寻找,比如歌星中找曾轶可",只要有找首字首拼音Z就可以。

对小型网站可以利用你对内容了解的知识来决定要引入哪些链接,来创建索引。

对大型网站首先用户从索引中选择术语,再从以该术语为索引的文件清单中选出想要的。

指南:网站的新手指南。设计指南原则1.指南要短。2.无论何时,用户都能离开指南。3.允许用户在指南中,前进,后退的自由移动。4.指南的设计目的是回答问题的。5.截图应该明确,具有把重点功能放大的效果。6.如果指南有好几页,要目录。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

向导和配置器:主要是协助用户选择配置产品细节(图3)

网页导航系统的作用与分类,PS教程,图老师教程网

图3

高级导航方法

个性化和定制化个性化(猜测用户想要什么。在特定环境中会运行的很好,但在用户体验时,就会失败)就是针对个人的行为、需求、喜好提供剪裁后的网页给用户。如网上买书时,会有推荐同类书籍,可能有些推荐的书你已经买过并看过了。定制化(用户告诉我们想要什么。但有时候用户自己都不知道他们要需要什么)是给用户直接控制权,可以针对展现格式、导航和内容选项的组合做调整。如Google Reader。

可视化:让用户可能采用可视化的方式浏览GROXIS。(在网上浏览博物馆网站时就像逛现实生活中的博物馆一样身临其境的感觉,想了想谷歌音乐的[挑歌]栏目可能比较类似这种概念)

社会化导航用户上网的需求点、兴趣点可以从观察其它用户行为中推论出来的基础上。比如说一些人上论坛,微博时就是看最近有什么网络话题,关注一些热门的标签,标题;而这类标签,话题主要是通过搜索日志、使用量统计数据、顾客数据库等站长统计软件中获得。(其实这也是情境式导航,只不过作者用这类导航的产生方式来归纳:这类导航的内容是通过用户的行为统计产生的,就成了[社会化导航]了)

展开更多 50%)
分享

猜你喜欢

网页导航系统的作用与分类

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页导航系统的作用与分类

网站架构设计:网站导航系统作用和分类

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网站架构设计:网站导航系统作用和分类

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

如何快速合理的设计网站导航系统?

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
如何快速合理的设计网站导航系统?

凯立德语音移动导航系统7.0评测:智能导航领跑者

手机软件 应用软件
凯立德语音移动导航系统7.0评测:智能导航领跑者

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

网页导航的质感运用技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
网页导航的质感运用技巧

50个经典的网页导航条与按钮设计教程

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
50个经典的网页导航条与按钮设计教程

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

携程,elong和去哪儿的产品设计比较

携程,elong和去哪儿的产品设计比较

详细解说奔驰汽车广告设计教程

详细解说奔驰汽车广告设计教程
下拉加载更多内容 ↓