首页 > 建站资源 > 网站优化 > 如何设计出正确的搜索模式?

如何设计出正确的搜索模式?

时间:2017-12-11    来源:人人都是产品经理

注:如果你正在阅读这篇文章,那么你一定正在设计一个有搜索功能的网站或应用程序。在这篇文章中,我将介绍 5 个最佳实践,这些实践可以帮助大家设计了更好、更实用的搜索机制。

最佳实践

1.视觉线索

无论创建任何类型的用户界面,为用户提供快速扫描屏幕所需的工具是你设计的一部分。这样做可以确保你的用户知道在什么地方找到他想要的东西,何时需要使用以及与其交互后会发生什么。

放大镜图标

使用放大镜图标,我无法保证这样会加快了搜索栏查找的速度。但是图标越简单越好,较少的细节可以让用户更快地浏览。虽然,一个图标本身没有输入容器或按钮,实际上会使搜索更加困难。

极简主义搜索图标的示例

人们通常认为放大镜图标表示搜索工具,即使它没有标签说明。但是,只显示图标的搜索框会使搜索变得更加困难。(言论来自NNG凯蒂谢尔文的“搜索设计中的放大镜图标”)

一个实际的搜索按钮

不是所有用户都是资深网民,这也就意味着并不是每个用户都知道,一旦在输入框里输入查询内容,按下回车键就可以得到相关信息。因此,在搜索输入旁边设计一个实际的按钮可以帮助用户确认他们的下一个动作,从而减少用户所需的认知负荷。

注意:避免将按钮放在输入框的左侧,上方或下方。

提示

在文本输入获得焦点前,你可以隐藏输入按钮。

确保按钮的大小适中,以便点击起来感觉自然。

2.输入特性

有时候,越是闪亮,强大或面积大的东西也不一定能引起人们的注意,搜索模式也一样。不如将它改为你理想的风格!但切记搜索框的设计必须与你的网站或应用程序的主题相吻合,并同时确保它足够引人注目。

Youtube新的(令人惊叹的)黑色主题通过保持搜索模式与其他元素的一致性就完美地阐述了这一点。

“搜索框也并不是越长越好”

但也要确保输入长度也不要过短。据NNG的研究表明:拥有能够容纳 27 个字符的输入,可以满足90%的用户的需求。

如图:一个常见的 5 词 26 个字符搜索的例子。

3.透明占位符

为输入的占位符文本使用适当的副本很重要,它们通常是暗示用户可以搜索的内容。 这确保了他们知道要搜索什么,并且不会因编写错误导致查询失败而感到沮丧。最近,Web工具可以通过在HTML5 中添加提示作为占位符来轻松完成此操作。

添加占位符可以帮助用户过滤查询的内容。

相关推荐
网站分页导航的SEO优化方法
前端开发如何做好SEO优化的工作
垂直门户网站的SEO思路:越大的网站越容易
小A的SEO餐馆理论:让圈外人快速了解SEO
浅析:谷歌2014年都有哪些明显的SEO趋势?
外功再好不及内功:谈网站图片SEO优化的重要性
最新的SEO三大趋势,让你在流量竞争中胜出
SEO实战案例:兰亭集势SEO何以“干得漂亮”?
5个做网站SEO优化的细节你忽略了吗?
SEO的用户互动:论在线评论内容的重要性!
回顾2014年SEO要素 2015的SEO有何新趋势?
网站被百度转码的SEO影响分析 附禁止百度转码的方法
SEO核心概念:什么是内容增益 又如何做增益
说说2015的SEO新趋势:内容与用户体验为王
SEO新说:2015年你要知道的六大SEO新趋势
SEO新说:如何利用原创内容做网站优化?
10个关于搜索引擎SEO的真、假相分享
这个时代SEO这只饭碗要被砸?
百度测试推出“搜索工具”对SEO有何影响?
站长访谈:听Zero谈他的SEO挖词与排名操作经验
如何保证网站长期的SEO健康
二级域名和子目录 哪个更有利于SEO?
SEO的25年“进化史”:从PC到移动站点
百度移动SEO:独立移动站比PC适配移动站好?
网站优化:文章标题写不好?试试这两招吧!
你必须知道的SEO细分领域项目汇总
企业应该为出色的SEO投资多少?
一个影响力大、实战、干货的SEO案例
SEO优化案例:拆解同步网络SEO思路
网站SEO教程:网站 “养蛛”秘籍分享
百度开展“蝶变行动”扶持新站 SEO沙龙干货在此
百度蝶变行动干货:网站SEO 页面抓取等问题答疑
实用技能:不知道这些SEO知识 何颜做站长!
SEO这么难!百度搜索推《移动友好度标准V1.0》
2016年的10大SEO趋势预测
《SEO实战密码第3版》精华整理

精彩推荐

热门教程