干货！最全优秀搜索框设计案例
面对纷繁复杂的网页内容，用户通过查询关键词表达需求，期望在响应的查询结果中快速获取准确的信息和流畅的用户体验。用户与网络世界的万千联系都是从搜索开始的。搜索框之于用户就像是用户与应用或网站之间的对话窗口。小小的搜索框传递着用户与网站、应用程序、甚至与整个世界千丝万缕的联系。如网页设计、应用程序设计一样，搜索框设计同样是一门值得研究的学问。
搜索框对于网站或应用程序有着非常重要的作用。一个好的搜索框设计能够提高转化率，提升用户体验。
那么，从原型设计的角度，如何设计一款个性化的搜索框呢？
1. 确定搜索框样式
- 填充色：通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找。
- 线框：多用于干净简洁的背景页面
- 投影：常用于风格简洁轻量的风格页面，同时搜索功能级别较高的场景。
- 透明度：常用于背景色复杂的场景，目的是为不破坏背景页面的整体效果，在视觉上更和谐。
- 无外框：用于风格简洁的大留白的页面。
2. 是否需要圆角
- 直角
- 圆角矩形：通常以4~8px最为常用
- 胶囊：适用于活泼，年轻，具有亲和力的品牌风格。
- 异形
在确定以上两个基本的样式元素后，可以参考下面的20个优秀的搜索框设计在Mockplus中绘制自己的搜索框如下图所示。
HTML/CSS搜索框设计案例（附代码链接）
1. Search Form With Animated Search Button
HTML/CSS代码地址：
适用于：网页/移动端搜索
设计特色：
- 动态搜索按钮
- HTML/CSS搜索框设计
这是一个由HTML/CSS创建的搜索表单。借助于代码优势，放大镜按钮自带动画效果，可在悬停时转换为右箭头。为了方便大家学习，设计师Himalaya Singh将代码也公布给大家参考。
2. Animated search bar
HTML/CSS代码地址：
适用于：网页/移动端搜索
设计特色：
- HTML/CSS设计
- 删除按钮
常规的静态的搜索框设计很容易给人一种误区，那就是认为搜索功能的设计只是搜索框+提示词+删除按钮的设计，但其实看似简单的搜索框背后拥有十分复杂的场景。通过案例中的HTML/CSS代码可以很清楚的了解此类设计的代码语言。删除按钮的作用不仅在于删除搜索内容，同时也可以快速关闭搜索框。
3. Expandable Search Form with CSS3
HTML/CSS代码地址：
适用于：网页/手机端搜索
设计特色：
- 随字符扩展的搜索框
这个搜索框的设计亮点在于它的自适应特点，可以根据输入的字符数扩展框体。CSS3的运用使其可以在扩展后仍旧保持样式。
4. Simple Search Bar
HTML/CSS代码地址：
适用于：网页/移动端搜索
设计特色：
- 简约搜索设计：颜色边框+默认提示+搜索按钮
看太多花哨的设计后，偶尔看下简约的搜索框设计反而更觉视觉清新。淡雅的蓝色底色和白色搜索按钮，配上恰到好处的默认提示文字，让用户简单直接的实现搜索功能。
5. Search button animation
HTML/CSS代码地址：
适用于：网页/移动端搜索
设计特色：
- 搜索按钮动画
这个搜索框设计的特色之处在于设计师机智的将放大镜图标伴随搜索动作拆分为前进按钮。文字提示则以跳动的光标作为输入讯号。
6. Search Input With Morphing Effect
HTML/CSS代码地址：
适用于：网页搜索
设计特色：
- 搜索输入变形特效
放大镜的变形拆分组成搜索框的设计主要是由HTML/CSS/JS共同完成的。也是一种比较常见的搜索框特效。
7. CSS Search Field Animation
HTML/CSS代码地址：
适用于：网页/移动端搜索
设计特色：
- 悬浮CSS搜索字段动画
鼠标悬浮至放大镜按钮，自动放大搜索框填写区域，省去了前期的点击步骤。只需一次点击即可输入文本。
8. Header Search
HTML/CSS代码地址：
适用于：网页搜索
设计特色：
- 下拉搜索
- 导航栏过渡搜索框
这个案例中展示了两种在网页上常用的顶部搜索框样式。第一种，点击搜索按钮弹出下拉搜索框，优势在于不影响导航栏布局。第二种，点击搜索按钮，导航栏动画渐变为搜索框，导航栏消失，优势在于不占用网页布局空间。
9. Icon to Search Field Animation CSS
地址：
设计特色：
- CSS动画
- 图标按钮激活搜索
这是一个通过CSS设计的搜索框。独特之处在于需要通过单击右上角的搜索图标，通过CSS代码扩展为可用于搜索的文本框。完成搜索或再度点击时，搜索框会自动还原为一个放大镜的图标按钮。
Bootstrap搜索框设计(附代码链接)
10. Bootstrap Table Search
HTML/CSS地址：
11. Table Search Bootstrap Accordion
HTML/CSS地址：
Dribbble创意搜索框设计案例分享 （附地址）
12. Diya – Shopping Web HeroSection
设计特色：
- 搜索框尺寸大小合适
- 复合搜索
- 搜索提示按钮
表明，一个可以输入27个字符的输入框是比较合适的，基本能够满足90％的查询条件。Diya的搜索设计十分符合这一搜索框设计原则。太短的输入框设计往往会迫使用户使用有限的字符搜索网站内容，无法使搜索结果以完整的的视觉效果呈现。这不利于用户阅读搜索结果，也不利于用户友好。
Diya使用了醒目的红色提示搜索按钮配合白色的网页背景。这样的设计有利于用户在进入网站的第一眼看到搜索按钮，从而直接引导用户的搜索行为。按钮加搜索提示字符的复合设计一方面有利于网页界面设计的美观性；另一方面，扩展搜索也允许用户在点击时展开文本输入框，兼顾网页界面统一性与用户体验友好。
13. Search Hint
设计特色：
- 搜索结果分类
- 关键词联想
- 精确搜索
Search hint, 翻译为中文就是搜索提示是为电影应用所创建的搜索栏。输入关键词，在应用内进行搜索，即可实时展现搜索结果。由于手机屏幕空间有限，所以设计师采取的是分类展现，通过不同的类别过滤搜索结果。这样的设计有助于提升转化在“更多结果”的提示下还可以选择继续展现更多该关键词下的搜索结果。对于手机端的搜索框设计，Search hint是一个不错的参考案例。
14. Video Page
设计特色：
- 搜索按钮，节省空间
- 输入框激活搜索
类似于常见的手机应用搜索框设计，Video page的搜索框设计也是置于屏幕顶部靠右的位置。出于节省屏幕空间和平衡导航栏设计的需求，这个搜索框设计取而代之的是一个简洁的放大镜按钮。在点击放大镜的同时激活输入框，呈现搜索结果。当完成搜索动作后，回归到初始的导航栏界面，不影响应用界面的美观度。
15. Material Search Bar
设计特色：
- 搜索转场效果
- 语音搜索
这是一款材料风格的搜索框设计。在没有执行搜索动作的情况下，透明的导航栏展现的是静态的提示文字。当点击搜索按钮时即呈现动态的转场动画，并激活搜索功能。同时，我们可以注意到右侧的话筒按钮，表示其可以支持语音搜索。
16. Search Icon Interaction
适用于：网页、移动端搜索
设计特色：搜索图标交互
点击搜索框，搜索按钮自动变化为闪动的输入光标，提示用户进行搜索操作，为搜索增加趣味性。这样的图标交互设计，甚至有点皮~
17. Chrome Desktop Omnibox
适用于：网页搜索
设计特色：桌面搜索栏+地址栏 (Omnibox)
最近的Chrome设计更新，搜索框设计中采用了Omnibox（桌面搜索栏+地址栏）。也就是现在可以直接在地址栏中获得答案，而无需打开新的标签。并且，在地址栏中搜索一个网站，Chrome会告诉你它是否已经打开，让你直接通过“切换到标签页”跳转页面。
18. Search Field Animation Dem
适用于：网页搜索
设计特色：
- 搜索区域随字符数延展
- 搜索图标交互
在这个搜索动画概念将重点放在搜索框与搜索按钮的交互动画以及关键词精确匹配效果上。相比传统的“无聊”搜索功能，这个案例希望能为开发人员提供一些灵感。
19. Search Bar Microinteractions
适用于：网页搜索/移动端应用搜索
设计特色：连续的摇摆、弹跳动效
这是一个非常有趣的微交互搜索框设计概念。搜索按钮在经过连续的摇摆弹跳后变幻为搜索框。整个搜索过程俨然是一场动效欣赏。不过这种活泼的搜索设计更适合于儿童类的应用或者游戏。
20. Search States
适用于：网页搜索
设计特色：
- 不同搜索状态展示
设计师应该执着于追求细节。这个搜素框设计案例在细节上展示了几种不同的搜索状态，分别是默认、悬浮、聚焦、建议、搜索等。每个状态对应不同的设计细节。
以上20个优秀的搜索框设计各自侧重不同的类别，有的侧重于搜索框的样式设计和交互设计，而有些则侧重于功能，另外的部分侧重于设计和开发技巧。
结语
通过上面搜索框案例以及分析可知，一个优秀的搜索框设计对于提升一个应用或网站的用户体验有着非常重要的作用。不同的场景需要配合不同的搜索功能才能提升搜索体验。希望这20个搜索框设计能为你带来更多的设计灵感，让你的搜索框设计为你的网站或应用带来更多会话及转化。
Mockplus
作者：jongde