资讯动态-干货！最全优秀搜索框设计案例

干货！最全优秀搜索框设计案例

2019-11-22 14:20:02

搜索框对于网站或应用程序有着非常重要的作用。一个好的搜索框设计能够提高转化率，提升用户体验。

那么，从原型设计的角度，如何设计一款个性化的搜索框呢？

1. 确定搜索框样式

填充色：通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找。
线框：多用于干净简洁的背景页面
投影：常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。
透明度：常用于背景色复杂的场景，目的是为不破坏背景页面的整体效果，在视觉上更和谐。
无外框：用于风格简洁的大留白的页面。

2. 是否需要圆角

直角
圆角矩形：通常以4~8px最为常用
胶囊：适用于活泼，年轻，具有亲和力的品牌风格。
异形

在确定以上两个基本的样式元素后，可以参考下面的20个优秀的搜索框设计在Mockplus中绘制自己的搜索框如下图所示。

搜索框设计 - Mockplus

HTML/CSS搜索框设计案例（附代码链接）

1. Search Form With Animated Search Button

搜索框设计- animated search button

HTML/CSS代码地址：https://codepen.io/himalayasingh/pen/dqjLgO

适用于：网页/移动端搜索

设计特色：

动态搜索按钮
HTML/CSS搜索框设计

这是一个由HTML/CSS创建的搜索表单。借助于代码优势，放大镜按钮自带动画效果，可在悬停时转换为右箭头。为了方便大家学习，设计师Himalaya Singh将代码也公布给大家参考。

2. Animated search bar

搜索框设计 - animated search button

HTML/CSS代码地址： https://codepen.io/AlbertFeynman/pen/BPvzWZ

适用于：网页/移动端搜索

设计特色：

HTML/CSS设计
删除按钮

常规的静态的搜索框设计很容易给人一种误区，那就是认为搜索功能的设计只是搜索框+提示词+删除按钮的设计，但其实看似简单的搜索框背后拥有十分复杂的场景。通过案例中的HTML/CSS代码可以很清楚的了解此类设计的代码语言。删除按钮的作用不仅在于删除搜索内容，同时也可以快速关闭搜索框。

3. Expandable Search Form with CSS3

搜索框设计- Expandable Search Form with CSS3

HTML/CSS代码地址：https://codepen.io/huange/pen/rbqsD

适用于：网页/手机端搜索

设计特色：

随字符扩展的搜索框

这个搜索框的设计亮点在于它的自适应特点，可以根据输入的字符数扩展框体。CSS3的运用使其可以在扩展后仍旧保持样式。

4. Simple Search Bar

搜索框设计 - Simple Search Bar

HTML/CSS代码地址：https://codepen.io/huange/pen/rbqsD

适用于：网页/移动端搜索

设计特色：

简约搜索设计：颜色边框+默认提示+搜索按钮

看太多花哨的设计后，偶尔看下简约的搜索框设计反而更觉视觉清新。淡雅的蓝色底色和白色搜索按钮，配上恰到好处的默认提示文字，让用户简单直接的实现搜索功能。

5. Search button animation

搜索框设计 - search button animation

HTML/CSS代码地址：https://codepen.io/kristyjy/pen/zGOXYb

适用于：网页/移动端搜索

设计特色：

搜索按钮动画

这个搜索框设计的特色之处在于设计师机智的将放大镜图标伴随搜索动作拆分为前进按钮。文字提示则以跳动的光标作为输入讯号。

6. Search Input With Morphing Effect

搜索框设计 - searchinput with morphing effect

HTML/CSS代码地址：https://codepen.io/MilanMilosev/pen/JdgRpB

适用于：网页搜索

设计特色：

搜索输入变形特效

放大镜的变形拆分组成搜索框的设计主要是由HTML/CSS/JS共同完成的。也是一种比较常见的搜索框特效。

7. CSS Search Field Animation

搜索框设计 - CSS search field animation

HTML/CSS代码地址：https://codepen.io/sebastianpopp/pen/myYmmy

适用于：网页/移动端搜索

设计特色：

悬浮CSS搜索字段动画

鼠标悬浮至放大镜按钮，自动放大搜索框填写区域，省去了前期的点击步骤。只需一次点击即可输入文本。

8. Header Search

搜索框设计 - header search

HTML/CSS代码地址：https://codepen.io/choogoor/pen/NGJVMb

适用于：网页搜索

设计特色：

下拉搜索
导航栏过渡搜索框

这个案例中展示了两种在网页上常用的顶部搜索框样式。第一种，点击搜索按钮弹出下拉搜索框，优势在于不影响导航栏布局。第二种，点击搜索按钮，导航栏动画渐变为搜索框，导航栏消失，优势在于不占用网页布局空间。

9. Icon to Search Field Animation CSS

搜索框设计 - Mockplus

地址：https://codemyui.com/icon-search-field-animation-css/

设计特色：

CSS动画
图标按钮激活搜索

这是一个通过CSS设计的搜索框。独特之处在于需要通过单击右上角的搜索图标，通过CSS代码扩展为可用于搜索的文本框。完成搜索或再度点击时，搜索框会自动还原为一个放大镜的图标按钮。

Bootstrap搜索框设计(附代码链接)

10. Bootstrap Table Search

搜索框设计 - bootstrap table search

HTML/CSS地址：https://codepen.io/adobewordpress/pen/gbewLV

11. Table Search Bootstrap Accordion

搜索框设计 - table search bootstrap accordion

HTML/CSS地址：https://codepen.io/lauraMM/pen/pZoeZG

Dribbble创意搜索框设计案例分享（附地址）

12. Diya – Shopping Web HeroSection

搜索框设计 - Mockplus

https://dribbble.com/shots/5167231-Diya-Shopping-Web-Hero-Section

设计特色：

搜索框尺寸大小合适
复合搜索
搜索提示按钮

经验表明，一个可以输入27个字符的输入框是比较合适的，基本能够满足90％的查询条件。Diya的搜索设计十分符合这一搜索框设计原则。太短的输入框设计往往会迫使用户使用有限的字符搜索网站内容，无法使搜索结果以完整的的视觉效果呈现。这不利于用户阅读搜索结果，也不利于用户友好。

Diya使用了醒目的红色提示搜索按钮配合白色的网页背景。这样的设计有利于用户在进入网站的第一眼看到搜索按钮，从而直接引导用户的搜索行为。按钮加搜索提示字符的复合设计一方面有利于网页界面设计的美观性；另一方面，扩展搜索也允许用户在点击时展开文本输入框，兼顾网页界面统一性与用户体验友好。

13. Search Hint

搜索框设计 - Mockplus

https://dribbble.com/shots/4106506-Search-hint-Daily-ui-22

设计特色：

搜索结果分类
关键词联想
精确搜索

Search hint, 翻译为中文就是搜索提示是为电影应用所创建的搜索栏。输入关键词，在应用内进行搜索，即可实时展现搜索结果。由于手机屏幕空间有限，所以设计师采取的是分类展现，通过不同的类别过滤搜索结果。这样的设计有助于提升转化在“更多结果”的提示下还可以选择继续展现更多该关键词下的搜索结果。对于手机端的搜索框设计，Search hint是一个不错的参考案例。