❶ 如何设计搜索框
所谓搜索框,实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计, 毕竟它只涉及到两个简单的元素。然而,在那些重内容的网站上,搜索框常常都是用户最用到的设计元素。当用户遇到一个相对复杂的网站时,他们往往会首先寻找这个网站内的搜索框,以便能快速高效地到前往自己想去的页面或找到自己最为关心的内容。因此,搜索框的设计及其可用性问题其实是一个不容忽视的要点。
1、使用放大镜图标
一个搜索框应该始终与放大镜图标放在一起。所谓图标,其实就是代表着一个对象、动作、想法等多种含义的图形符号。我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。然而,对于用户来讲,具有通用性代表含义的图标为数并不多,幸运的是,放大镜图标正是其中之一。
2、搜索框要显着
如果搜索是你的应用程序/网站的一个重要功能,那么搜索框的显示务必要足够显着,以保证用户能够最快的发现它。直接显示完整的搜索框很重要,因为默认只显示搜索图标(点击图标才展开搜索框)的话会使搜索功能不那么明显,而且增加了用户的交互成本。
3、提供一个搜索按钮
搜索按钮可以帮助用户识别出触发搜索操作的下一步——即使他们可能往往会通过按Enter键来执行此操作。
提示:
1)提交按钮的尺寸大小要合适,以便用户不必非常精确地移动鼠标位置到它上面。较大的可点击区域会使得按钮本身更容易被发现和点击。
2)使用Enter键或点击搜索按钮都应该能执行搜索操作才对,毕竟许多用户仍然有点击搜索按钮来提交搜索的习惯。
4、将搜索框放在每一页上
用户在每个页面上都应该能获取搜索框,因为如果用户找不到他们要找的内容,他们往往会自然而然地想要尝试使用搜索功能来进行查找,他们才不关心自己当前是在你网站的哪个地方(以及该不该有搜索)。
5、搜索框要足够简单
如果你设计了一个搜索框,请确保它看起来确实像是一个搜索框,并且使用起来要足够简单。可用性研究表明,默认情况下不显示高级搜索选项对用户会更加友好。高级搜索选项(例如下面的示例中的布尔搜索查询)可能会混淆要尝试使用它的用户。
6、将搜索框放在用户预期找到的位置
如果因为搜索框不够突出、不容易察觉,用户还得花费精力去找它,那这个设计无疑是不够友好的。因此,最好将搜索框放在页面的右上方或中上方,以确保用户能在预期的位置找到它。
提示:
1)理想情况下,虽然搜索框在用户需要的地方应该能轻易出现,但是搜索框的设计也应该完美地契合网站的整体设计效果。
2)内容越重的站点,你越希望搜索框显着。如果搜索对你的网站至关重要,请使用大的对比度,以便搜索框和图标能从页面背景和周围元素中脱颖而出。
7、搜索框尺寸大小要合适
输入框太短是设计人员常犯的一个错误。当然,用户可以键入长查询,但一次只能看到一部分输入的文本,这自然也就存在可用性问题,因为用户无法轻松地回看和编辑其刚刚才输入的查询条件。事实上,当搜索框具有有限数量的可见字符时,用户会被迫使用短的、不精确的查询条件,因为更长的查询条件将不易阅读。 但如果输入框的长度是根据用户的预期输入来确定大小的,那对用户而言就友好多了。
经验表明一个可以输入27个字符的输入框是比较合适的,它能够适应90%的查询条件。
提示:不妨考虑使用扩展型的搜索框,它会在用户点击时展开文本输入框。这种做法一方面节省了屏幕空间,同时仍能给予用户足够的视觉提示以便他们快速找到并执行搜索。
8、使用自动检索匹配机制
自动检索匹配机制可根据用户输入的字符进行预测来帮助用户找到一个可能匹配的查询条件。 该机制并不是为了加快搜索过程,而是为了引导用户并帮助他们构建他们的查询条件。普通用户在构建查询方面往往会有困难:如果他们在第一次尝试查询后没有获得满意的结果,后面的查询也会很难顺利,事实上,他们常常就会放弃。而当自动检索匹配机制运作顺利时,它们就能帮助用户将查询条件表达的更加清楚。
Google 搜索自2008年起就已经开始应用该机制,现在已经相当成熟。由于用户常常会多次搜索相同的内容,因此通过记住搜索记录,Google既节省了时间成本又能创造出更为便捷高效的搜索体验。
提示:
1)确保自动检索匹配机制是有效的,若设计不当,就可能会混淆和分散用户的注意力。因此,不妨使用自动更正拼写错误、根词识别和文本预测等做法,来改进这种机制发挥更好的作用。
2)你应该尽快提供自动检索匹配,例如在用户输入第三个字符后就提供有效匹配以减少用户的输入成本。
3)匹配的查询条件不要多余10个(而且不要显示滚动条),以保证信息不会变得过载。
4)允许使用键盘在匹配的条件列表中导航。一旦用户在最后一个项目中接着向下滚动,他们应该重新返回到列表的顶部。另外,Esc 键应该允许用户退出列表。
5)突出输入部分跟匹配部分的差异(例如,输入文本具有标准字重,而匹配部分使用粗体字重)。
9、明确告诉用户可以搜索哪些内容
在输入框中显示一个搜索查询的示例条件是一个不错的做法,这样能够向用户表明他们究竟可以应用该搜索框搜索哪些/哪类内容。 如果用户可以搜索多个条件,则使用输入提示模式来向用户说明(例如,HTML5 技术使得我们可以很轻松地在输入框中写明作为占位符的提示文本。)
结论:
对于创建一个重内容的应用程序或网站而言,搜索理应作为一个基本的操作和关键要素。即使小幅的改进(例如使搜索框长度更合适或者指明可以搜索哪些信息)都可以显着增加搜索的可用性以及整体的用户体验。
❷ 怎样在网页加入搜索的功能
分类: 电脑/网络 >> 互联网
问题描述:
最近在做我自己主页,我想在页面中加入搜索功能,比如有的网页上有综合搜索功能,我只想加入网络,可是,我从别的网页上弄下来的代码放进去后,不能用!应该怎么弄啊?比如:7939/上的综合搜索一样的。
解析:
这个经过测试,所有杀毒软件都不起作用。。所以要手动删除!
有人说用超级兔子之类的能有用,但经过本人实验,不能根本上根除这个木马!
(一)首先按CTRL+ALT+DEL在任务管理中把进程Realplayer.exe结束掉!
(二)打开我的电脑!选工具——文件夹选项——查看(快捷键按ALT+T再按O)中的"隐藏受保护的操作系统文件(推荐)"的勾取消,把"显示所有文件和文件夹"选中!
(三)把WINDOWS\system32\Realplayer.exe找到!按CTRL+F查找Realplayer.exe更快!(这就是一个木马脚本程序,没在安全模式下删除不掉,经过我反复实验终于找到删除的办法)
打开任务管理把进程中的explorer.exe结束掉,接着桌面变消失了,不怕!选中任务管理器的“文件(F)”——“新任务(运行。。)(N)”然后运行explorer.exe桌面就又出来了!接着把在system 32中的Realplayer.exe删除
(四)在开始——运行中输入regedit按CTRL+F查找Realplayer.exe把查到的值删掉再按F3查。知道把所有的值都删完!
(五)运行“regedit”命令,按以下路径: HKEY_CURRENT_USER\Sofare\Microsoft\Inter Explorer\Main 显灰到这个项 然后就在右边就可以找到: Start Page 这个键值了 双击改成"about:blank”
然后右击Inter Explorer选属性点使用空白就好了!(接下来如果不是菜鸟就在注册表中搜索 7939 把查到的项,值都删除掉!)
至此大功告成!
❸ 网页怎么制作搜索框
方法/步骤
1
首先,我们打开自己建了一半的网页或者是新建一个页面,个人建议用HTML5。
2
然后,我们开始编写代码。搜索框要有输入框和搜索按钮两部分组成,我用的都是input
3
我们会在input框的外面再套一个标签,我是仿照网络搜索的样子,在input的外面套了一个span标签,在最外层套了一个form表单
4
我们的第一个input框是用来输入文字的,其type类型应该是text,第二个是搜索的,我用的type类型是submit(提交),
5
这样一个简单的搜索框就算是做出来了,我们可以在浏览器中查看一下。可以看到两个框之间是有一定的距离的,这个就需要我们重新定位提交按钮的位置
6
我采用的是relative定位方法,将第二个input框的位置定位为left-:10px。这样刚好和前面的输入框的边重合
7
这样一个基本的搜索框就做好了,我们可以再调整一下框的高度和宽度,以及整体的位置,使得这个搜索框更加美观大方。
❹ 怎么用yandex网站搜索想要的内容
跟正常浏览器一样进行搜索操作就可以。
打开浏览器,输入Yandex的浏览器搜索框中输入搜索。然后在搜索狗结果中,根据需要单击其中一个,然后在打开的页面中单击本地下载,然后在弹出的页面中单击下载。
下载完成后,解压缩,解压缩,你可以看到它有两个程序文件,一个是32位,另一个是64位,选择按需要安装。双击安装程序,它将在一段时间后安装,然后您可以在桌面上看到yandex浏览器的快捷方式。
在桌面上,然后双击该快捷方式Yandex的浏览器打开它,就可以正常使用这个浏览器了。首先,我们在桌面上打开Yandex浏览器。此时,我们将看到页面显示我们无法访问该页面。别担心。我们点击页面右上角的三个垂直点。然后在弹出窗口中单击[设置]。然后我们拉下页面,在搜索引擎处切换yandex到任意网站,使用后,单击右上角关闭浏览器。
❺ 如何在网页中实现搜索功能
有三种常见的方式
1、自己设计表单、编程、与数据库链接检索。
2、在网络或谷歌注册申请站内搜索功能。获得代码,添加到自己的页面中。
3、使用第三方的工具软件,搭建检索功能
下面是制作’PHP搜索’功能
准备:
数据库(mysql):一个数据库(search),库里面一个表(title),表里面一个字段(name).
PHP页面:两个页面(index.php search.php)
制作工具:Dreamweaver
开始:
——————————————————
第一步.创建数据库.(目前大家应该都是用的phpmyadmin来操作数据库的吧?)
建立一个数据库.
第二步.建表
在刚建立的search数据库里插入一个名字为title的表.建表时让你选插入几个字段.写1就可以了.
第三步.建字段
插入的字段命名为name,长度值20就可以了.
—–数据库部分已经做完,接下来是网页部分—–
第四步.建立两个页面
建立两个文件:index.php和search.php可以使用记事本等文本工具直接建立.我使用的工具是Dreamweaver(方便嘛.呵呵).
第五步.index.php的页面制作.
这个页面是用来传递你搜索的关键字的.代码如下:
这段代码是建立一个FORM表单.专门用来提交数据的.
第一行是FORM表单的开始.它的传递方式是post,传递到search.php这个页面.表单名为name.
第二行是文本域和提交按钮.文本域命名为search,按钮默认就可以了.
第三行是FORM表单的结束语句.
第五步.search.php的页面制作.
这个页面很关键.因为他是获取index页面传递过来的值,然后导出搜索的数据.
首先要绑定你建立的search数据库,我用的DW生成的.
上一个页面传送的文本域是search.所以,这里需要建立一个search变量.来接收你输入的关键词.用以下语句定义变量:
<?php
$searchs = $_POST['search'];
?>
然后建立一个记录集,选择高级.SQL语句中填写:
SELECT *
FROM title
WHERE name like ‘%$searchs%’
这句的意思是选择title表里面的所有字段(*),然后查询name中的$searchs变量。这个变量也就是你在index中输入的值啦。
然后在BODY里面绑定一个动态文本。选择NAME。
—–网页部分完成.真个搜索功能也就完成了—–
❻ html5搜索框是怎么实现搜索功能的
搜索功能需要结合网站程序功能来实现,一般主流程序都有搜索功能的。
html5只是一个界面的美观,自身没有搜索功能。
也可以使用网络等搜索引擎的站内搜索,配合html5显示效果更佳。
❼ 北大青鸟设计培训:常用的搜索框设计的七大技巧
1.使用放大镜图标根据定义,图标是对象,动作或想法的可视化表示,并且有几个图标是用户记忆最深刻的,也是通用的。
沈阳北大青鸟http://www.kmbdqn.cn/认为放大镜图标就是其中之一。
即使没有文字标签,用户也可以识别放大镜图标的作用。
2.将搜索框放在用户希望找到的地方如果搜索对于你的应用或网站来说是重要的功能,那么搜索框必须放在显眼的位置,让用户一眼就能找到。
研究发现,搜索框放置的最佳位置是你网站上每个页面的左上角或右上角,用户可以使用常见的F形扫描模式轻松找到它。
理想情况下,搜索框应该完美匹配网站的整体设计,并在用户需要时轻松展现。
3.为搜索框提供搜索按钮搜索按钮可以帮助人们了解还有额外的触发操作_即使他们通常使用Enter键。
4.将搜索框放在每一页上始终提供对每个页面的搜索框的访问权限,因为如果你的用户找不到他们正在查找的内容,他们将会使用搜索功能,无论他们处于你网站的哪个位置。
5.使搜索框简单如果你设计一个搜索框,请确保它看起来像一个搜索框,并尽可能简单的使用。
根据可用性研究,默认情况下没有显示高级搜索选项,这样更加显示用户友好。
高级搜索选项可能会混淆将尝试使用它的用户。
6.自适应字段大小输入字段太短是设计人员常见的错误。
当然用户可以键入长查询,但只有一部分文本可见,部分文字被隐藏,这意味着可用性差。
因为用户无法轻松查看和编辑其查询。
实际上,当搜索框能够输入的文本有限时,用户被迫使用短的文本进行查询,这样就不能精确的查询。
如果输入字段根据其预期输入进行大小调整,那么它们更容易阅读并给用户提供良好的用户体验。
7.使用自动建议机制自动建议机制可以帮助用户通过输入的字符进行预测来找到正确的查询。
自动建议机制不是加快搜索过程,而是关于指导用户并帮助他们构建搜索查询。
用户在查询配置方面非常差:如果在第一次尝试时没有获得良好的结果,他们可能就放弃了。
自动建议机制可以帮助用户更好地表达他们需要的搜索查询。
❽ 用DW制作网页时怎样在页面中加入搜索栏
1、新建一个asp页面,保存为“sousuojieguo.asp”。
❾ 搜索框是什么
搜索框一种常见的交互控件,用于精准提取海量的信息中的准确内容。搜索框几乎存在所有的网站和APP中,尤其是海量内容为导向的产品之中,例如音乐库、电商类网站,做好搜索(框)尤其重要。
一些电商网站,巧妙利用搜索框中预置的词,可以达到活动推荐的效果,例如搜索框内置“油烟机”一词,用户只需通过点击搜索即可直达结果页或者活动页面。
(9)网站搜索框怎么用扩展阅读
搜索框的类别
(1)隐藏式搜索框
只提供一个放大镜图标,需要再点击图标跳转到搜索页面;或者是需要下拉时才出现,例如微信首页的搜索框。
(2)普通搜索框
通常固定在页面顶部,包含搜索框的普通要素(放大镜+线框)。
(3)有提示搜索框
此类搜索框的特征是,中间有提示语,通常这类的都可以复合搜索,例如可以搜名称或者代码。
(4)含图片搜索框
顾名思义,与普通搜索框相比,增加可以“以图识图”的搜索功能,例如淘宝就可以通过上传图片,搜索与图片同类的商品。
❿ 如何在网站中加入站内搜索功能
一、什么是站内搜索
站内搜索是相对于网站本身而言的一种搜索状态,用户一般情况下可以利用站内搜索在本站内运行各种搜索需求,而无法跨网站进行。
二、如何在网站中加入站内搜索功能
这里以wordpress程序安装网络站内搜索功能为例进行讲解:
1、在网络搜索引擎中搜索“站内搜索”关键词,进入网络站内搜索官网