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

2016-02-17 04:30 1 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享网站架构设计:网站导航系统作用和分类吧。

【 tulaoshi.com - 平面设计 】

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

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

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

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

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

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

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

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

网站架构设计:网站导航系统作用和分类,PS教程,图老师教程网

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

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

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

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

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

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

网站架构设计:网站导航系统作用和分类,PS教程,图老师教程网

图2

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

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

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

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

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

网站架构设计:网站导航系统作用和分类,PS教程,图老师教程网

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

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

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

讨论

来源:https://www.tulaoshi.com/n/20160217/1578511.html

延伸阅读
设计背景 先看看最终效果图 第一步建立新文件,设置如下图 下一步设置前景色为#e6e0d5,背景色为#cec5af 制作顶部区域,确保之前设置的颜色正确,然后使用滤镜渲染云彩! 开始设计导航按钮,新建图层,使用矩形工具,制作如下图形 再次新建图层,制作#ac2a2a颜色矩形 再用单行选区工具制作按钮鼠标移动上后的...
对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。 然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。 定义大型网站 一个大型网站由结合了综合服务和产品的典型大型组...
标签: Web开发
网站的整体风格及其创意设计是站长们最希望掌握,也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。当我们说:"这个站点很cool,很有个性!"那么,是什么让你觉得很cool呢?它到底和一般的网站有什么区别呢?本文试图用最简明的语言来说明: 1.风格是什么,...
标签: Web开发
导航是科学,是艺术。它让人们从一个地方到另外一个地方。我们从家里到超市购物时,我们是在真实世界里航行。而WEB则是一个虚拟世界里。在实际生活当中人们从A点到B点,以最短的时间和距离到达目的地,这就是导航的焦点,导航就是帮助人们找到他们的路。在航行时人们经常问下面的问题: 1. 我在哪? 2. 我怎样才能到达我要去的地...
标签: PS PS基础
先看效果图。 新建文档560x300像素,背景黑色,建新层,画一白色圆角矩形。 添加图层样式。 颜色请采样我的截图,效果如下(局部) 新建图层1,调出圆角矩形选区,填充白色,把选区左挪2像素。(最后的效果里我修改了一下,挪了1像素) 删除,图层模式改为叠加,重复这个步骤,做出导航2端的亮边。 输入一些白色文...

经验教程

420

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部