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

2016-02-17 02:18 0 1 收藏

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

【 tulaoshi.com - 平面设计 】

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

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

1.快速搜索

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

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

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

2.垂直搜索

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

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

▎下拉框模式

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

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

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

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

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

▎标签模式

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

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

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

ios样式

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

3.查询建议工具

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

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

ios样式

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

4.关联搜索

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

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

5.高级搜索

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

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

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

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

6.过滤器

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

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

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

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

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

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

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

7.Best bet

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

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

8.搜索结果

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

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

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

总结

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

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

延伸阅读
怎样在autocad里标注角度?cad角度标注命令使用介绍 怎样在autocad里标注角度?这次CAD教程带来AutoCAD2013中文版使用DIMANGULAR命令角度标注图文教程。教程很实用,对于新手来说是很值得学习的。希望这篇教程对大家有所帮助。 教程如下: 执行命令,或在AutoCAD2013工具栏中选择标注-角度按钮,如图所示。 图01 ...
标签: 暗黑3 网络游戏
《暗黑3》模型分析:从工程的角度看架构     我的研究领域是博弈论在工程中的应用,所以这个 游戏 一直都是一边玩一边想的,一直都觉得非常有意思。这里说说我的理解。     大型游戏一开始的第一步都是数学建模,按照暴雪的经验,财力和人才,这个模型肯定还是有一定的完备性在里面。我...
标签: 网络游戏
从各个角度浅谈《创世西游》无量戒佛 仙家雷系(下称雷管)布甲类职业中当之无愧的法术强攻DPS,高伤害点对点输出,技能后续产生的DE-BUFF让敌人望而生畏:从职业定位来看属敏捷法术强攻点杀类型,先天附加出手速度的技能使其更易先发制人,克敌制胜,对雷电的运用更达炉火纯青的地步,对于法防较低的流派,其杀伤力显而易见; 从操作流程...
TuLaoShi.com 从文艺角度来入手 学习文青的摄影精神   什么叫做文青一直很模糊,没有人能真的说出个定论。但单从比较文艺、感性的角度去看摄影,那的确有许多值得学习之处。推荐一些我认为摄影人都可以学习、参考的地方吧。 学习看见 文艺气息并不代表无病呻吟。发掘生活上大大小小、让人幸福快乐的事物,也是一种文艺特质。...

经验教程

237

收藏

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