编辑导语：搜索是用户常使用的功能，搜索框设计的好坏关系到用户的搜索展示、用户的产品体验等，因此搜索框虽然看起来简单，但其设计依然不容小觑。本篇文章里，作者结合大量案例，就搜索框设计做了总结和梳理，一起来看一下。

关于我：在全球化企业工作多年，在产品/用户体验/交互/设计/方法上有一些心得体会。整理成文章，其实也是自己重新思考，梳理的过程，非常有帮助。有不当之处，欢迎指正，互相学习。

本文要义：Web端“搜索框”的设计思路。全文包括了UX交互设计，用户体验，UI设计，响应式设计（responsive design）。

关键词：搜索框、UI、UX交互、用户体验、响应式设计、网页。

题外话Tips：在写Amazon案例时，看到了歪果仁对国货马应龙的评论，简直太欢乐（以前看过人家翻译的帖子，但自己看一遍还是太搞笑了）。于是就写跑偏了，翻译了下贴了上来。随便乐乐~

以下都是从Web端角度写的总结，Web的空间比APP大，相对来说，交互可发挥的余地更大。APP端如果有时间，就另外再写吧。

搜索框简单吧，也就输入框+按钮。但是就那么点小元素，里面也是注满了无数的小心思，死光了无数产品经理/交互设计师的脑细胞，只是为了让交互更流畅，产品体验更好。

一、搜索框——默认状态

搜索框的默认UI/UX样式，取决于网站的业务性质，取决于搜索功能的重要性，取决于页面布局。