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

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

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

【 tulaoshi.com - 平面设计 】

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

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

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

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

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

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

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

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

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

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

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

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

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

延伸阅读
在进入今天的主题之前,我们先来探讨导航的重要性,并分析一下门户网站中导航的表现。 导航直接影响到公司的财政收入 导航会给我们带来哪些好处?导航不光只是提供信息获取的途径,它的设计优劣会直接影响到整个公司财政收入。下面我们看一个例子(以下内容来自alibaba李凡的《设计师的商业意识》): alibaba大致的广告价格 上图反映了...
标签: PS PS基础
学好Photoshop最好的方法之一是解构、再现设计,以此来激发自己的灵感。怀着这样的心情,让我们走近 LittleLines.com 导航,去看一下,从他们最初是如何设计出这么精致的导航栏中,我们能学到什么。 最终效果图: 步骤一 注意下面放大图像中所有的细节,边框、渐变、尺寸、颜色。在这种情况下,放大镜将是你最好的朋友。 步骤二 新...
标签: 电脑入门
在老版本的Word软件按中浏览和编辑多页数的长文档比较麻烦,为了寻找和查看特定内容,不是拼命滚动鼠标滚轮就是频繁拖动滚动条,浪费很多时间。Word2010特别为长文档增加了导航窗格,不但可以为长文档轻松导航,更有非常精确方便的搜索功能。 如何打开Word2012的导航窗格 在Word2010中打开一份页数比较多的超长文档,单击Ribbon菜单栏上的...
设计背景 先看看最终效果图 第一步建立新文件,设置如下图 下一步设置前景色为#e6e0d5,背景色为#cec5af 制作顶部区域,确保之前设置的颜色正确,然后使用滤镜渲染云彩! 开始设计导航按钮,新建图层,使用矩形工具,制作如下图形 再次新建图层,制作#ac2a2a颜色矩形 再用单行选区工具制作按钮鼠标移动上后的...
对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。 然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。 定义大型网站 一个大型网站由结合了综合服务和产品的典型大型组...

经验教程

898

收藏

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