设计网页的搜索框 第1篇
如果用 tab 来展示分类了，那目的通常是：
1）横版显示。比如 某房产网站
2）竖版显示。比如 知网
搜索框的左侧的 3 个 Tab 为内容类型分类。
搜索框中展开的下拉框中是字段，此处一并展示。
3）竖版+横板显示。比如 某房产网站
如上图，是竖版分类+横版的两个搜索按钮。
如上图，是竖版的分类+横版的分类。横版的分类还做了 2 级分类。分类太多，相信设计师们在处理时也挺头大。
回答：哪个重要，就突出显示哪个呗！
以 Amazon 为例，
该页为商品评论页面。
设计网页的搜索框 第2篇
目录
HTML是一种常用的网页标记语言，它可以用于创建各种各样的网页元素，包括搜索框。在本文中，我们将介绍如何使用HTML和一些CSS样式创建一个漂亮的搜索框。
首先，让我们创建基本的HTML结构。请将以下代码复制到你的HTML文件中：
上面的代码中包含了一些CSS样式，用于美化搜索框。你可以根据自己的需求进行调整和扩展。以下是一些基本样式的解释：
你可以根据自己的需要对搜索框进行定制。例如，可以调整搜索框的宽度、字体大小、颜色等。你还可以添加其他样式来增加搜索框的吸引力。
通过使用HTML和CSS，你可以轻松地创建一个漂亮的搜索框。本文介绍了如何使用提供的代码创建一个简单的搜索框，你可以根据自己的需求对其进行调整和定制。
本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~
设计网页的搜索框 第3篇
在收集亚马逊案例的时候，好玩就去搜了搜国货之光“马应龙“，歪果仁们的评论简直是太欢乐了，看着看着我都笑出了鹅叫声。
于是就跑偏了，翻译了 2 个评论，贴了上来。大家看文章看久了，休息下~
即一定要有个确认的命令，才触发搜索。这里面有很多考虑。比如：
但，也有个别工具软件中，不用按回车，就实时刷新搜索结果。比如，Figma.
在软件中，都是自己的存档文件，数据量本身就不大。此时边输入关键字，边实时响应，刷新搜索结果页，让用户随时看到自己的文档。这种情况下，不用按回车，用户体验还更好。
以上，终于写完了。
暂时写到这吧，总结太累，但是值得！
最后，附上 Amazon 贝索斯的原话：
翻译如下：（没有太直译，不然有点拗口）
“以用户为中心”有很多优点，但最大的一个就是：用户是美丽的、棒棒的、不会满意的，即使他们说我们的商业很赞，他们表示很开心很满意。但他们其实想要更好的东西，不过他们自己并不知道。那么你的让用户愉悦的渴望，会驱使你代替他们去发明创造。
——杰夫*贝索斯，2016年给股东的信
额，还是拗口。简单来说，就是：
筒子们，为了让用户高兴，发挥你们做产品/交互的主观能动性吧，自己研究创造去，做个好产品出来。不用指望用户告诉你做什么/怎么做，他们也不知道。
自己研究? 那怎么试错呢？看来后面我可以讲讲 User Research, Agile, A/B Testing, Working Backward Method 啥的。
共勉！
------以上，皆为辛苦筹备+整理+码字，欢迎学习。但抄袭必究。Biu~------
Witten by “Lu 倾倾”