摹客
产品
下载
面对纷繁复杂的网页内容，用户通过查询关键词表达需求，期望在响应的查询结果中快速获取准确的信息和流畅的用户体验。用户与网络世界的万千联系都是从搜索开始的。搜索框之于用户就像是用户与应用或网站之间的对话窗口。小小的搜索框传递着用户与网站、应用程序、甚至与整个世界千丝万缕的联系。如网页设计、应用程序设计一样，搜索框设计同样是一门值得研究的学问。
搜索框对于网站或应用程序有着非常重要的作用。一个好的搜索框设计能够提高转化率，提升用户体验。
那么，从原型设计的角度，如何设计一款个性化的搜索框呢？
在确定以上两个基本的样式元素后，可以参考下面的20个优秀的搜索框设计在Mockplus中绘制自己的搜索框如下图所示。
HTML/CSS代码地址：https://codepen.io/himalayasingh/pen/dqjLgO
适用于：网页/移动端搜索
设计特色：
这是一个由HTML/CSS创建的搜索表单。借助于代码优势，放大镜按钮自带动画效果，可在悬停时转换为右箭头。为了方便大家学习，设计师Himalaya Singh将代码也公布给大家参考。
HTML/CSS代码地址: https://codepen.io/AlbertFeynman/pen/BPvzWZ
适用于：网页/移动端搜索
设计特色：
常规的静态的搜索框设计很容易给人一种误区，那就是认为搜索功能的设计只是搜索框+提示词+删除按钮的设计，但其实看似简单的搜索框背后拥有十分复杂的场景。通过案例中的HTML/CSS代码可以很清楚的了解此类设计的代码语言。删除按钮的作用不仅在于删除搜索内容，同时也可以快速关闭搜索框。
HTML/CSS代码地址: https://codepen.io/huange/pen/rbqsD
适用于:网页/手机端搜索
设计特色：
这个搜索框的设计亮点在于它的自适应特点，可以根据输入的字符数扩展框体。CSS3的运用使其可以在扩展后仍旧保持样式。
HTML/CSS代码地址: https://codepen.io/huange/pen/rbqsD
适用于：网页/移动端搜索
设计特色：
看太多花哨的设计后，偶尔看下简约的搜索框设计反而更觉视觉清新。淡雅的蓝色底色和白色搜索按钮，配上恰到好处的默认提示文字，让用户简单直接的实现搜索功能。
HTML/CSS代码地址：https://codepen.io/kristyjy/pen/zGOXYb
适用于：网页/移动端搜索
设计特色：
这个搜索框设计的特色之处在于设计师机智的将放大镜图标伴随搜索动作拆分为前进按钮。文字提示则以跳动的光标作为输入讯号。
HTML/CSS代码地址：https://codepen.io/MilanMilosev/pen/JdgRpB
适用于：网页搜索
设计特色：
放大镜的变形拆分组成搜索框的设计主要是由HTML/CSS/JS共同完成的。也是一种比较常见的搜索框特效。
HTML/CSS代码地址：https://codepen.io/sebastianpopp/pen/myYmmy
适用于：网页/移动端搜索
设计特色：
鼠标悬浮至放大镜按钮，自动放大搜索框填写区域，省去了前期的点击步骤。只需一次点击即可输入文本。
HTML/CSS代码地址：https://codepen.io/choogoor/pen/NGJVMb
适用于：网页搜索
设计特色：
这个案例中展示了两种在网页上常用的顶部搜索框样式。第一种，点击搜索按钮弹出下拉搜索框，优势在于不影响导航栏布局。第二种，点击搜索按钮，导航栏动画渐变为搜索框，导航栏消失，优势在于不占用网页布局空间。
地址：https://codemyui.com/icon-search-field-animation-css/
设计特色：
这是一个通过CSS设计的搜索框。独特之处在于需要通过单击右上角的搜索图标，通过CSS代码扩展为可用于搜索的文本框。完成搜索或再度点击时，搜索框会自动还原为一个放大镜的图标按钮。
HTML/CSS地址：https://codepen.io/adobewordpress/pen/gbewLV
HTML/CSS地址：https://codepen.io/lauraMM/pen/pZoeZG
https://dribbble.com/shots/5167231-Diya-Shopping-Web-Hero-Section
设计特色：
经验表明，一个可以输入27个字符的输入框是比较合适的，基本能够满足90％的查询条件。Diya的搜索设计十分符合这一搜索框设计原则。太短的输入框设计往往会迫使用户使用有限的字符搜索网站内容，无法使搜索结果以完整的的视觉效果呈现。这不利于用户阅读搜索结果，也不利于用户友好。
Diya使用了醒目的红色提示搜索按钮配合白色的网页背景。这样的设计有利于用户在进入网站的第一眼看到搜索按钮，从而直接引导用户的搜索行为。按钮加搜索提示字符的复合设计一方面有利于网页界面设计的美观性；另一方面，扩展搜索也允许用户在点击时展开文本输入框，兼顾网页界面统一性与用户体验友好。
https://dribbble.com/shots/4106506-Search-hint-Daily-ui-22
设计特色：
Search hint, 翻译为中文就是搜索提示是为电影应用所创建的搜索栏。输入关键词，在应用内进行搜索，即可实时展现搜索结果。由于手机屏幕空间有限，所以设计师采取的是分类展现，通过不同的类别过滤搜索结果。这样的设计有助于提升转化在“更多结果”的提示下还可以选择继续展现更多该关键词下的搜索结果。对于手机端的搜索框设计，Search hint是一个不错的参考案例。
https://dribbble.com/shots/4581639-VIDEO-PAGE
设计特色：
类似于常见的手机应用搜索框设计，Video page的搜索框设计也是置于屏幕顶部靠右的位置。出于节省屏幕空间和平衡导航栏设计的需求，这个搜索框设计取而代之的是一个简洁的放大镜按钮。在点击放大镜的同时激活输入框，呈现搜索结果。当完成搜索动作后，回归到初始的导航栏界面，不影响应用界面的美观度。
https://dribbble.com/shots/4329283-Material-search-bar
设计特色：
这是一款材料风格的搜索框设计。在没有执行搜索动作的情况下，透明的导航栏展现的是静态的提示文字。当点击搜索按钮时即呈现动态的转场动画，并激活搜索功能。同时，我们可以注意到右侧的话筒按钮，表示其可以支持语音搜索。
https://dribbble.com/shots/4605344-Search-icon-interaction
适用于：网页、移动端搜索
设计特色：搜索图标交互
点击搜索框，搜索按钮自动变化为闪动的输入光标，提示用户进行搜索操作，为搜索增加趣味性。这样的图标交互设计，甚至有点皮~
https://dribbble.com/shots/5217905-Chrome-Desktop-Omnibox
适用于：网页搜索
设计特色：桌面搜索栏+地址栏 (Omnibox)
最近的Chrome设计更新，搜索框设计中采用了Omnibox（桌面搜索栏+地址栏）。也就是现在可以直接在地址栏中获得答案，而无需打开新的标签。并且，在地址栏中搜索一个网站，Chrome会告诉你它是否已经打开，让你直接通过“切换到标签页”跳转页面。
https://dribbble.com/shots/5094907-Search-Field-Animation-Demo
适用于：网页搜索
设计特色：
在这个搜索动画概念将重点放在搜索框与搜索按钮的交互动画以及关键词精确匹配效果上。相比传统的“无聊”搜索功能，这个案例希望能为开发人员提供一些灵感。
https://dribbble.com/shots/5016801-Searchbar-Microinteractions
适用于：网页搜索/移动端应用搜索
设计特色：连续的摇摆、弹跳动效
这是一个非常有趣的微交互搜索框设计概念。搜索按钮在经过连续的摇摆弹跳后变幻为搜索框。整个搜索过程俨然是一场动效欣赏。不过这种活泼的搜索设计更适合于儿童类的应用或者游戏。
https://dribbble.com/shots/4199324-Search-States
适用于：网页搜索
设计特色：
设计师应该执着于追求细节。这个搜素框设计案例在细节上展示了几种不同的搜索状态，分别是默认、悬浮、聚焦、建议、搜索等。每个状态对应不同的设计细节。
以上20个优秀的搜索框设计各自侧重不同的类别，有的侧重于搜索框的样式设计和交互设计，而有些则侧重于功能，另外的部分侧重于设计和开发技巧。
通过上面搜索框案例以及分析可知，一个优秀的搜索框设计对于提升一个应用或网站的用户体验有着非常重要的作用。不同的场景需要配合不同的搜索功能才能提升搜索体验。希望这20个搜索框设计能为你带来更多的设计灵感，让你的搜索框设计为你的网站或应用带来更多会话及转化。
相关阅读：
摹客协作
摹客RP
摹客DT
摹客超级版
