网站导航跟搜索的合并方式探讨

2016-02-17 04:50 0 1 收藏

下面是个超简单的网站导航跟搜索的合并方式探讨教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - 平面设计 】

网站的导航在一定意义上可以看做是对搜索系统中的关键词类别的提取,这个类别可大可小。比如众多购物网站中的手机类别,这是一个大的类别,而手机类别下的索爱品牌则是属于小类别。这两个类别可以通过导航系统的上下级关系表现出来,同样也可以基于搜索系统的范围搜索展现出来。

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

即使搜索系统在功能上几乎可以完全替代导航系统,但是导航系统却仍然是网站中不可缺少的组件,预先以网站主题为核心提取搜索系统中的大类别做为导航,将用户获取特定信息的范围进行类别的筛选。这是从让用户在最短的时间内获取特定信息为出发点的需求。

然而几乎所有网站的导航系统与搜索系统的表现形式都是区别开来的,以便于用户快速准确的区分哪里是导航,哪里是搜索。既然导航系统可以做为搜索系统中的一部分,那为何两者不能在表现形式上也进行叠加呢?

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

网站导航跟搜索的合并方式探讨,PS教程,图老师教程网

如上图,直接将导航系统中的类别以下拉框的形式表现,这个下拉框本身是搜索系统中的一部分,是对搜索范围的筛选。

第二类的导航与第一类实际上是形式上的差距,但第三类采用联动的下拉菜单方式则更趋向于搜索系统中的范围筛选,同时这样的导航设计也可以兼顾到指引用户路径的面包屑导航,然而这个导航的限制是大类别不能进行交叉筛选,只能是线性的范围筛选。

于是尝试带有维度的第四种导航跟搜索的合并方式:

网站导航跟搜索的合并方式探讨,PS教程,图老师教程网

当然,这样的导航与搜索的合并方式有很大的局限性,那就是网站中的类别不能多,如果是垂直性质的购物网站也许是可行的,用户可以通过交叉维度的筛选方式去寻找一定范围内的信息。

如果用户是有着明确的目标的,比如说知道新闻的标题,或是知道即将购买的物品的名称型号,那么用户只需要一个搜索框,导航在这里都是显得多余的。

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

延伸阅读
标签: Web开发
导航是科学,是艺术。它让人们从一个地方到另外一个地方。我们从家里到超市购物时,我们是在真实世界里航行。而WEB则是一个虚拟世界里。在实际生活当中人们从A点到B点,以最短的时间和距离到达目的地,这就是导航的焦点,导航就是帮助人们找到他们的路。在航行时人们经常问下面的问题: 1. 我在哪? 2. 我怎样才能到达我要去的地...
标签: PS PS基础
学好Photoshop最好的方法之一是解构、再现设计,以此来激发自己的灵感。怀着这样的心情,让我们走近 LittleLines.com 导航,去看一下,从他们最初是如何设计出这么精致的导航栏中,我们能学到什么。 最终效果图: 步骤一 注意下面放大图像中所有的细节,边框、渐变、尺寸、颜色。在这种情况下,放大镜将是你最好的朋友。 步骤二 新...
导航系统的作用:告诉你在哪里,可以去哪里,这里有什么,附近有什么,指引你下一步的行为。 导航系统的分类:全站、区域、情境式、辅助性导航。 浏览器的导航特点考虑浏览器环境,其实浏览器上已经有后退、前进、收藏、设为首页等功能,但有时候在页面本身的浏览情境当中也最好要放这些功能,比如在浏览一篇文章,到了结尾能看到[收藏]、[关...
标签: 电脑入门
在老版本的Word软件按中浏览和编辑多页数的长文档比较麻烦,为了寻找和查看特定内容,不是拼命滚动鼠标滚轮就是频繁拖动滚动条,浪费很多时间。Word2010特别为长文档增加了导航窗格,不但可以为长文档轻松导航,更有非常精确方便的搜索功能。 如何打开Word2012的导航窗格 在Word2010中打开一份页数比较多的超长文档,单击Ribbon菜单栏上的...
设计背景 先看看最终效果图 第一步建立新文件,设置如下图 下一步设置前景色为#e6e0d5,背景色为#cec5af 制作顶部区域,确保之前设置的颜色正确,然后使用滤镜渲染云彩! 开始设计导航按钮,新建图层,使用矩形工具,制作如下图形 再次新建图层,制作#ac2a2a颜色矩形 再用单行选区工具制作按钮鼠标移动上后的...

经验教程

977

收藏

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