如何设计搜索框

发布网友发布时间：2022-04-06 11:53

共2个回答

懂视网时间：2022-04-06 16:14

本篇文章给大家带来的内容是关于简单的搜索框样式是如何实现的，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这里涉及的是清除input框默认样式和设置聚焦样式；还有就是控制搜索列表的显示，下面直接给除代码，可以去试试效果

<!DOCTYPE html>
<html>

<head>
 <meta charset=" utf-8">
 <title>新浪微博搜索框功能</title>
 <style type="text/css">
 * {
  padding: 0;
  margin: 0;
 }

 body {
  font-size: 14px;
 }

 #box {
  width: 600px;
  margin: 40px auto;
 }

 input {
  width: 240px;
  height: 24px;
  line-height: 24px;
  border: 1px solid gray;
  padding: 0 10px;
  background: #eee;
  outline: none;
  /* box-shadow: inset 0 0 0px #999; */
  /* box-shadow:阴影的设置 */
 }

 input[type="text"]:focus,
 input[type="password"]:focus {
  border: 1px solid #eb7350;
  background: #fff;
  outline: none;
 }

 #suggest {
  display: none;
  position: relative;
  margin-top: -1px;
  width: 240px;
  padding-top: 1px;
  border: 1px solid #369;
  border-top: 0 none;
  border-radius: 4px;
  box-shadow: inset 0 0 2px #999;
  overflow: hidden;
 }

 #suggest a {
  display: block;
  color: #f00;
  height: 24px;
  line-height: 24px;
  text-decoration: none;
  padding: 0 4px;
 }

 #suggest a:hover {
  background: #eee;
 }

 #suggest a span {
  color: #369;
 }

 .xiangguan1,
 .xiangguan2 {
  font-size: 14px;
 }

 .xiangguan1 dl dd,
 .xiangguan2 dl dd {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  padding: 0 0 0 6px;
  box-sizing: border-box;

 }

 .xiangguan1 dl dd:hover,
 .xiangguan2 dl dd:hover {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  background: #eee;
  color: #f00;
  cursor: pointer;
 }
 </style>

</head>

<body>
 <dl id="box">
 <dt>
  <input type="text" name="" id="in" placeholder="大家正在搜:我们来自同一个世界" />
 </dt>
 <dd id="suggest">
  <a href="###">搜“
  <span></span>”相关微博
  </a>
  <p class="xiangguan1">
  <dl>
   <dd>我们相爱吧</dd>
   <dd>我们来同一个世界</dd>
   <dd>我们都有自己的梦想</dd>
   <dd>我们不曾放弃</dd>
  </dl>
  </p>
  <a href="###">搜“
  <span></span>”相关用户
  </a>
  <p class="xiangguan2">
  <dl>
   <dd>我们相爱吧</dd>
   <dd>我们来同一个世界</dd>
   <dd>我们都有自己的梦想</dd>
   <dd>我们不曾放弃</dd>
  </dl>
  </p>
 </dd>
 </dl>
 <script type="text/javascript">
 window.onload = function () {
  var obox = document.getElementById("box");
  var obj = document.getElementById("in");
  var osug = document.getElementById("suggest");
  var oa = osug.getElementsByTagName("span");
  obj.oninput = obj.onpropertychange = onchange;
  obj.onblur = function () { disbox() } ;
  function onchange() {
  var txt = this.value;
  var words = txt.length;
  if (words == 0) {
   osug.style.display = "none";
  }
  else if (words > 0) {
   osug.style.display = "block";
   var limit
   if (words <= 8) {
   limit = txt
   }
   else {
   limit = txt.substring(0, 8) + "...";
   }
   for (var index = 0; len = oa.length, index < len; index++) {
   oa[index].innerHTML = limit;
   }
  }
  }
 };
 function disbox() {
  document.getElementById("suggest").style.display = "none";
 }
 </script>
</body>

</html>

以下是实例：

微信截图_20181020143942.png

热心网友时间：2022-04-06 13:22

所谓搜索框，实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计，毕竟它只涉及到两个简单的元素。然而，在那些重内容的网站上，搜索框常常都是用户最用到的设计元素。当用户遇到一个相对复杂的网站时，他们往往会首先寻找这个网站内的搜索框，以便能快速高效地到前往自己想去的页面或找到自己最为关心的内容。因此，搜索框的设计及其可用性问题其实是一个不容忽视的要点。

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 技术使得我们可以很轻松地在输入框中写明作为占位符的提示文本。）

结论：

对于创建一个重内容的应用程序或网站而言，搜索理应作为一个基本的操作和关键要素。即使小幅的改进（例如使搜索框长度更合适或者指明可以搜索哪些信息）都可以显着增加搜索的可用性以及整体的用户体验。