网页搜索框设计 第1篇
① 单个推荐词交替显示
比如，小米官网。
截图为动态图哦，大概5秒换一个推荐词。个人觉得间隔时间有点长了。
② 多个推荐词同时显示
比如，LexisNexis，全球顶级法律数据库中国站。
没有和小米一样，做1个推荐词的动态交替显示，是因为用户场景不同。
提示：推荐词可能会大于3个的，比如有8个。那就在用户每次回到首页后，显示一批新的推荐词。
或者，直接显示在框外，如下文所述。
网页搜索框设计 第2篇
注意！配置路由时引入组件的一个坑：路由对应组件导入错误
错误原因：自定义组件和框架组件名字重复，可能会错把框架的组件给 import 进来
解决：修改自定义组件的名称
方法一：编程式导航路由跳转
引入 vue-router 的 { useRouter }
使用 (_/search_)，导航到搜索页面
方法二：声明式路由跳转
网页搜索框设计 第3篇
为啥居中？当然因为对于网站，搜索是核心功能。如果没有搜索功能的话，业务几乎无法开展。它最最最重要啦！
① 绝对居中
这种一般适用于搜索引擎的首页。页面基本就是一屏，搜索是最主要功能，其他内容不重要。
比如Google、百度。
Google的界面就相当干净清爽。嘿，我就是纯搜索的，赶紧搜呗！
百度，可以只显示一个搜索框。
如图所示的搜索框下的大块资讯，是可以在设置中隐藏的，不想看，关掉就好。
② 相对居中，垂直略靠上部。
适用于数据库网站的首页。
因为数据库的数据量动不动就是千万、上亿的，搜索是极其重要的功能，99%的用户都是带着目的来的，直接通过搜索找数据的。搜索框需要极其醒目，需要占据首屏大部分的位置。
但考虑到数据库网站的首页也需要展示其他信息，来增加用户粘性，一般会有好几屏，比如最新信息、热点信息之类的。这些就放在搜索框大区块的下方了。
比如官方司法权威网站——中国裁判文书网，全国的1亿多个案件都在这个数据库里，供免费查阅。搜索数据是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。
网页搜索框设计 第4篇
概念：响应式设计（Responsive Design）是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面，随着屏幕尺寸的改变，自适应地改变页面布局。
通俗来说，这个网页就可以自动适应手机、平板、和电脑的各个分辨率。用户在各个设备上浏览这个web页时，页面布局和交互都是自动调节的，相当舒适。
以页面中的单个功能区为例：
Tips：做响应式设计，需要公司舍得投入资源，因为涉及到很多额外的工作量。最起码有以下：
为啥3套？因为针对分辨率需要做2个节点。我司一般是792px
好了，响应式设计就大概讲一下吧。不然又能写好几页。收~
以Youtube为例，大家可以感受下搜索框的响应式设计。
3. 按钮样式
网页搜索框设计 第5篇
① 可以放logo的右边
比如google的搜索结果页。
从设计理念上说，google的搜索框和logo放在一起，也能组成品牌和搜索引擎之间的强关系。即google=search. 用户们不也早就说，“你google一下”，而不是“你搜索一下了”嘛！
从UI上说，搜索引擎的内页一般只有列表，这样搜索框也能和列表左对齐，布局清晰。
② 其他位置，根据情况判断。比如Figma界面，文章最后有图。此处不赘述。
2. 宽度
搜索框的宽度（包括input box + search button），同样取决于搜索功能的重要性。其中，大概率取决于上文所述的搜索框的位置。
其次，也需要考虑输入的关键字的字符数。
另外，根据整体布局决定。