网页设计搜索框怎么 第1篇
用户通常不知道如何合适地表述问题，如果他们在第一次尝试时找不到信息，他们往往不知道如何重新措辞或缩小搜索范围。通过使用自动建议框，用户可以有效地搜索内容。
创建自动建议时，请以对用户有帮助的方式使用关键字。
使用关键词、预测性文本和常见问题。还可以提供自动拼写更正，以便用户能够搜索他们真正想要的单词或术语。
“自动建议”最好使用凸出的字体，这将有助于吸引他们的注意力。你也可以给用户展示一系列的图标，帮助他们寻找他们真正想要的。
搜索栏为浏览者提供了快速高效地浏览网站的机会，以便找到他们正在搜索的内容。
这有助于用户感觉到一种控制感。把搜索栏设计得显而易见，用户将不再对如何查找信息感到迷惑。
创建一个可识别的搜索栏，快速查找且易于使用，将提高用户留存度。用简单的提示和吸引人的图标来帮助他们，你就不用担心你的用户会在你的网站上迷失方向。
文章转自由墨刀编译自Bogdan Sandu的 UX Best Practices for Using Search on Your Website
网页设计搜索框怎么 第2篇
在收集亚马逊案例的时候，好玩就去搜了搜国货之光“马应龙“，歪果仁们的评论简直是太欢乐了，看着看着我都笑出了鹅叫声。
于是就跑偏了，翻译了 2 个评论，贴了上来。大家看文章看久了，休息下~
即一定要有个确认的命令，才触发搜索。这里面有很多考虑。比如：
但，也有个别工具软件中，不用按回车，就实时刷新搜索结果。比如，Figma.
在软件中，都是自己的存档文件，数据量本身就不大。此时边输入关键字，边实时响应，刷新搜索结果页，让用户随时看到自己的文档。这种情况下，不用按回车，用户体验还更好。
以上，终于写完了。
暂时写到这吧，总结太累，但是值得！
最后，附上 Amazon 贝索斯的原话：
翻译如下：（没有太直译，不然有点拗口）
“以用户为中心”有很多优点，但最大的一个就是：用户是美丽的、棒棒的、不会满意的，即使他们说我们的商业很赞，他们表示很开心很满意。但他们其实想要更好的东西，不过他们自己并不知道。那么你的让用户愉悦的渴望，会驱使你代替他们去发明创造。
——杰夫*贝索斯，2016年给股东的信
额，还是拗口。简单来说，就是：
筒子们，为了让用户高兴，发挥你们做产品/交互的主观能动性吧，自己研究创造去，做个好产品出来。不用指望用户告诉你做什么/怎么做，他们也不知道。
自己研究? 那怎么试错呢？看来后面我可以讲讲 User Research, Agile, A/B Testing, Working Backward Method 啥的。
共勉！
------以上，皆为辛苦筹备+整理+码字，欢迎学习。但抄袭必究。Biu~------
Witten by “Lu 倾倾”
网页设计搜索框怎么 第3篇
如果用 tab 来展示分类了，那目的通常是：
1）横版显示。比如 某房产网站
2）竖版显示。比如 知网
搜索框的左侧的 3 个 Tab 为内容类型分类。
搜索框中展开的下拉框中是字段，此处一并展示。
3）竖版+横板显示。比如 某房产网站
如上图，是竖版分类+横版的两个搜索按钮。
如上图，是竖版的分类+横版的分类。横版的分类还做了 2 级分类。分类太多，相信设计师们在处理时也挺头大。
回答：哪个重要，就突出显示哪个呗！
以 Amazon 为例，
该页为商品评论页面。