Material Design 下如何设计漂亮的搜索框？-JavaScript中文网-JavaScript教程资源分享门户

搜索框是网站和应用中常见的交互元素，用户可以通过搜索框快速找到所需的信息。在 Material Design 中，搜索框也是非常重要的设计元素之一。本文将介绍 Material Design 下如何设计漂亮的搜索框，包括样式、布局、交互等方面的内容。

样式

Material Design 中的搜索框通常具有以下几个特点：

椭圆形状：搜索框的外形通常是椭圆形状，这与 Material Design 中其他元素的圆角设计相呼应。
浮动标签：搜索框中的标签通常是浮动的，即当用户在搜索框中输入内容时，标签会上移并变为较小的字体。
动画效果：搜索框中的动画效果是 Material Design 中的重要设计元素之一。在搜索框中，当用户点击搜索按钮时，搜索框会展开并显示搜索结果。
颜色：搜索框的颜色通常与应用或网站的主题色相呼应。

下面是一个基本的搜索框样式：

<div class="search-box">
  <label for="search-input">搜索</label>
  <input id="search-input" type="text">
  <button type="submit">搜索</button>
</div>

// javascriptcn.com 代码示例
.search-box {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 48px;
  border-radius: 24px;
  background-color: #f2f2f2;
  transition: background-color 0.2s ease-in-out;
}

.search-box:hover {
  background-color: #e0e0e0;
}

label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #757575;
  transition: font-size 0.2s ease-in-out;
}

input {
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
}

input:focus + label {
  font-size: 12px;
  top: 12px;
  left: 16px;
  transform: none;
  color: #2196f3;
}

button {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  outline: none;
  background-color: #2196f3;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

button:hover {
  transform: scale(1.1);
}

布局

搜索框的布局通常与应用或网站的整体布局相呼应。在 Material Design 中，常见的搜索框布局有以下几种：

固定在页面顶部：搜索框固定在页面顶部，用户可以随时点击进行搜索。
在页面头部：搜索框放在页面头部，通常与其他导航元素放在一起。
在侧边栏：搜索框也可以放在侧边栏中，方便用户在浏览网站时进行搜索。

下面是一个固定在页面顶部的搜索框布局：

// javascriptcn.com 代码示例
<header>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">标签</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </nav>
  <div class="search-box">
    <label for="search-input">搜索</label>
    <input id="search-input" type="text">
    <button type="submit">搜索</button>
  </div>
</header>

// javascriptcn.com 代码示例
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-right: 16px;
}

nav li:last-child {
  margin-right: 0;
}

nav a {
  text-decoration: none;
  color: #757575;
  font-size: 16px;
}

nav a:hover {
  color: #2196f3;
}

.search-box {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

交互

搜索框的交互通常包括以下几个方面：

点击搜索按钮进行搜索：用户在搜索框中输入关键词后，可以点击搜索按钮进行搜索。
按下回车键进行搜索：用户在搜索框中输入关键词后，也可以按下回车键进行搜索。
自动完成：搜索框可以通过自动完成来提高搜索的效率。用户在搜索框中输入关键词时，搜索框会自动提示相关的搜索结果。
搜索历史记录：搜索框可以记录用户的搜索历史，方便用户查找之前的搜索结果。

下面是一个带有自动完成功能的搜索框交互示例：

// javascriptcn.com 代码示例
<div class="search-box">
  <label for="search-input">搜索</label>
  <input id="search-input" type="text">
  <ul class="autocomplete">
    <li><a href="#">搜索结果 1</a></li>
    <li><a href="#">搜索结果 2</a></li>
    <li><a href="#">搜索结果 3</a></li>
  </ul>
  <button type="submit">搜索</button>
</div>

// javascriptcn.com 代码示例
.search-box {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 48px;
  border-radius: 24px;
  background-color: #f2f2f2;
}

.autocomplete {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.24);
  background-color: #fff;
  z-index: 1;
  display: none;
}

.autocomplete li {
  margin: 0;
  padding: 8px 16px;
}

.autocomplete li:hover {
  background-color: #f2f2f2;
}

label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #757575;
}

input {
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  width: 200px;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
}

button {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  outline: none;
  background-color: #2196f3;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

button:hover {
  transform: scale(1.1);
}

input:focus + label {
  font-size: 12px;
  top: 12px;
  left: 16px;
  transform: none;
  color: #2196f3;
}

input:focus + label + .autocomplete {
  display: block;
}

总结

本文介绍了 Material Design 下如何设计漂亮的搜索框，包括样式、布局、交互等方面的内容。通过本文的学习，读者可以了解到 Material Design 中搜索框的设计原则和实现方法，从而设计出更加美观、高效的搜索框。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656dcb02d2f5e1655d6071af