网页制作设计搜索框 第1篇
N年前，就有很多小伙伴引用过如下研究报告了，我重复下吧。
Dawn Shikh 与 Keisi Lenz 的研究：展示了在142个参与者的调查中，网站搜索框的期望位置。研究发现，对用户来说最方便使用的地方是网站的左上角与右上角位置。用户可以使用常见的F形扫描模式轻松找到它。
如图，搜索框要放置在网站的右上角或者中间位置，这是用户所期望的位置。
目前大部分网站在UI布局搜索框时，也是大致遵循这个规则的。但总体来说，搜索框的位置，还是可以分为如下几种：
那么，分别讨论。
网页制作设计搜索框 第2篇
为啥顶部居中？因为网站业务中，搜索是重要功能，但不是全部。不用夸大显示，但顶部的居中好位置要留给它。
一般适用于电商平台、资讯平台。
这些网站中，展示商品、广告、信息才是重点，是为了促成交易，增加流量的。搜索是工具，比较重要，但不是重点，只是为了达成目的的一个手段。因此可以放在页面顶部且居中的显眼好位置，重要，但是不过分夸张。
用户场景：如果用户是漫无目的的瞎逛，可以随便浏览页面中提供的大量信息。
如果用户是有目的地找某个商品或信息，也能很容易地在页面顶部找到搜索框，定位目标。
比如，电商平台——京东。
比如，视频平台——Youtube。
看到了吗？顶部中间，不太显眼的那个灰色搜索框。
网页制作设计搜索框 第3篇
概念：响应式设计（Responsive Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。
通俗来说，这个网页就可以自动适应手机、平板、和电脑的各个分辨率。用户在各个设备上浏览这个web页时，页面布局和交互都是自动调节的，相当舒适。
以页面中的单个功能区为例：
Tips：做响应式设计，需要公司舍得投入资源，因为涉及到很多额外的工作量。最起码有以下：
为啥3套？因为针对分辨率需要做2个节点。我司一般是792px
好了，响应式设计就大概讲一下吧。不然又能写好几页。收~
以Youtube为例，大家可以感受下搜索框的响应式设计。
3. 按钮样式
网页制作设计搜索框 第4篇
为啥居中？当然因为对于网站，搜索是核心功能。如果没有搜索功能的话，业务几乎无法开展。它最最最重要啦！
① 绝对居中
这种一般适用于搜索引擎的首页。页面基本就是一屏，搜索是最主要功能，其他内容不重要。
比如Google、百度。
Google的界面就相当干净清爽。嘿，我就是纯搜索的，赶紧搜呗！
百度，可以只显示一个搜索框。
如图所示的搜索框下的大块资讯，是可以在设置中隐藏的，不想看，关掉就好。
② 相对居中，垂直略靠上部。
适用于数据库网站的首页。
因为数据库的数据量动不动就是千万、上亿的，搜索是极其重要的功能，99%的用户都是带着目的来的，直接通过搜索找数据的。搜索框需要极其醒目，需要占据首屏大部分的位置。
但考虑到数据库网站的首页也需要展示其他信息，来增加用户粘性，一般会有好几屏，比如最新信息、热点信息之类的。这些就放在搜索框大区块的下方了。
比如官方司法权威网站——中国裁判文书网，全国的1亿多个案件都在这个数据库里，供免费查阅。搜索数据是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。
网页制作设计搜索框 第5篇
① 单个推荐词交替显示
比如，小米官网。
截图为动态图哦，大概5秒换一个推荐词。个人觉得间隔时间有点长了。
② 多个推荐词同时显示
比如，LexisNexis，全球顶级法律数据库中国站。
没有和小米一样，做1个推荐词的动态交替显示，是因为用户场景不同。
提示：推荐词可能会大于3个的，比如有8个。那就在用户每次回到首页后，显示一批新的推荐词。
或者，直接显示在框外，如下文所述。
网页制作设计搜索框 第6篇
为啥顶部右边？因为网站业务中，搜索只是辅助功能，居中这么好个位置没必要，放右边看得见就行了。
比如，Dribbble。
Dribbble，设计师都知道。一般大家都是去随便看看找灵感的，浏览信息是重点，搜索功能不太重要，放边上就行了。
比如，小米。
提问：有同学会问，嗯哼，这是电商网站呀，要卖产品呀。为什么不像淘宝京东一样放顶部居中呀？
回答：因为，这是品牌自己的平台呀，就那么几个品类，在顶部导航条内，侧边导航条内都已经展示得清清楚楚了，鼠标点点就行了。搜索是次要的功能。
根据设计原则——奥卡姆剃刀原理（简单有效原理）
顶部的品类导航条本身就能帮用户找到产品了，可以直达分类页面，是非常重要的入口，也是重要的产品宣传，需要放在顶部首行的位置。
搜索是辅助功能（此处相信小米的PM是分析过search usage的），放在次要位置就可以了。
不需要同时突出搜索框+品类导航条，来增加用户的选择成本。
另外，要是搜索框居中了，那展示品类的重要导航条就得布局在第二行。Web/APP的第一屏都是黄金位置，能省一行是一行。