从设计的角度介绍搜索模块

萨尔陆克

萨尔陆克

2016-02-17 02:18

今天图老师小编给大家精心推荐个从设计的角度介绍搜索模块教程,一起来看看过程究竟如何进行吧!喜欢还请点个赞哦~

搜索能够帮助用户在海量的数据库中实现大海捞针,是产品最核心的模块之一。本篇是从设计的角度介绍搜索模块,包含Web和ios两个平台,下面直接开始正文:

从设计的角度介绍搜索模块,PS教程,图老师教程网

1.快速搜索

搜索是帮助用户简单快速的匹配相关内容,最简单的search box主要包含两个元素:①文本框 ②按钮(可以隐藏用回车代替)

从设计的角度介绍搜索模块,PS教程,图老师教程网

快速搜索是最基本的搜索模型,用户输入文字点击按钮或直接回车即可完成搜索。

2.垂直搜索

如果搜索引擎明确只是在海量数据库中寻找一个特定的子集,那么这时候会使用到垂直搜索。垂直搜索主要元素包括:①文本框 ②按钮 ③标签或下拉框。

▎下拉框模式

从设计的角度介绍搜索模块,PS教程,图老师教程网

关于下拉框前置与后置,我在公司也与同事进行过讨论,有几种说法:

①.业务人员觉得: 下拉框前置会减少产品曝光量,增加商情和厂商的曝光量,这样的结果对网站来说弊大于利。(B2B网站类)

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

②技术控觉得:用户操作习惯是 鼠标→键盘输入→回车(搜索),如果下拉框后置就会打断这样连贯的操作。

③调研同类网站发现下拉框内容较少的时候前置,内容分类较多的时候后置。

▎标签模式

从设计的角度介绍搜索模块,PS教程,图老师教程网

从设计的角度介绍搜索模块,PS教程,图老师教程网

标签模式比较适合独立的搜索框,相比下拉框模式更具有引导性。但视觉元素复杂,不太适合在页面内容较多的页面。淘宝首页的顶部的视觉元素已经显得杂乱了,但坚持这样做应该是为了最大化的推广天猫和兼容老用户的操作习惯。

ios样式

从设计的角度介绍搜索模块,PS教程,图老师教程网

3.查询建议工具

查询建议工具有好几种说法:提前键入(type-ahead)、搜索建议(suggest)或者自动填充(autofill),也可以称呼为实时搜索。主要目的基本上是为了减少用户输入和推广相关词组。下面直接看图例:

从设计的角度介绍搜索模块,PS教程,图老师教程网

ios样式

从设计的角度介绍搜索模块,PS教程,图老师教程网

4.关联搜索

关联搜索主要用于地图路线搜索,我也不知道还有什么地方用的到,就简单介绍一下:

从设计的角度介绍搜索模块,PS教程,图老师教程网

5.高级搜索

高级搜索是为了让搜索结果精确匹配,普遍应用与电子商务网站。通常的样式是一堆筛选条件+搜索按钮。

从设计的角度介绍搜索模块,PS教程,图老师教程网

因为iso平台上不存在下拉框控件的操作,所以ios平台上的高级搜索都是通过列表跳转的方式来实现高级搜索。

从设计的角度介绍搜索模块,PS教程,图老师教程网

6.过滤器

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

大都数人都不喜欢使用高级搜索,为了精确匹配搜索结果页面,所以在结果列表页面都会添加过滤器。过滤器实际上就是对当前子集的二次搜索。过滤器的设计非常的讲究,以后的文章为重点讲解,本章就简单介绍一下:

国内的网站因为考虑右侧卖banner广告位,过滤器都会放置在顶端位置:

从设计的角度介绍搜索模块,PS教程,图老师教程网

国外的习惯将过滤器放置在左侧,可以一般看图一边筛选:

从设计的角度介绍搜索模块,PS教程,图老师教程网

在ios平台上大都数应用都会设计快速搜索+过滤器的模型:

从设计的角度介绍搜索模块,PS教程,图老师教程网

7.Best bet

best bet可以翻译为更好的选择,当产品运营一段时间后积累了一定规模的访问量,可以从访问数据中为用户提供更好的选择。看看相关网站是如何做到这一点的:

从设计的角度介绍搜索模块,PS教程,图老师教程网

8.搜索结果

搜索的最终结果会以列表或橱窗的视图呈现,这是整个开发团队都希望看到的结果,但如果没有匹配的结果出现,设计人员还需要鼓励用户重新搜索或更换关键词:

从设计的角度介绍搜索模块,PS教程,图老师教程网

总结

搜索是电商网站最最核心的一个模块,做好这个模块需要优秀的工程师和一定规模的访问量,但作为设计师也必须对这个模块有足够的了解,这样才能做出优秀体验的设计。

展开更多 50%)
分享

猜你喜欢

从设计的角度介绍搜索模块

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
从设计的角度介绍搜索模块

CSS模块化设计——从空格谈起

Web开发
CSS模块化设计——从空格谈起

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

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

CSS模块化设计—从空格谈起

Web开发
CSS模块化设计—从空格谈起

设计师教您如何从市场角度看设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
设计师教您如何从市场角度看设计

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

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

大黄鸭从多个角度拍摄

摄影 人像摄影 静物摄影
大黄鸭从多个角度拍摄

带你从科学的角度了解癌症

育儿 育儿知识 妈妈 儿歌 取名 婴儿 喂养 孕期 怀孕 分娩 孕妇 教育 胎教 亲子游戏 幼儿 宝宝 早教
带你从科学的角度了解癌症

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

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

详细解析平面设计小结和设计心得技巧

详细解析平面设计小结和设计心得技巧

使用手绘板绘制甜美可爱的美女作品

使用手绘板绘制甜美可爱的美女作品
下拉加载更多内容 ↓