今天的文章咱们来聊聊查找框的规划，怎么让用户尽量节省时间，搜到他们想要的内容。
查找框是咱们最常用到的UI控件之一，它简直存在于一切的网站和APP傍边。许多人以为查找框不需求规划，由于它好像便是由两个最简略的元素构成的。在以内容为导向的网站中，查找框的重要性会相对更显着，用户需求快速又无痛地找到他们想要的内容。而关于规划相对担任的网站而言，这个需求特别显着。查找框的可用性规划，是整个规划的要害。
1、运用放大镜图标
时至今天，查找的概念和放大镜图标之间的联系现已家喻户晓，根深柢固了。在日常最常用、最易于辨认的几个图标傍边，放大镜所带代表的查找图标便是其中之一。
即便在没有文本标签标识的情况下，用户也能轻松地辨认图标的意义。
小贴士：运用最简略直观的放大镜图标，细节越少，越简略辨认。
2、显眼的查找输入框
假如查找是你的网站或许APP的重要功用的话，你应当让查找框满足显眼，这样的能规划让用户最快发现它的存在。
左面：查找功用躲藏在图标之后
显现完好的文本输入框是很重要的，躲藏在按钮背面的输入框会让用户觉得不是那么显着，不简略被快速发现。需求点击之后用户才干看到。
3、供给查找按钮
按钮的存在让用户能够理解查找的触发方法——也便是说经过触发按钮来完结这一操作。
小贴士：
操控查找按钮的尺度巨细，让用户运用光标能够轻松找到并点击，让触发区域巨细适宜。让用户能够经过回车键提交查找，许多用户依然有经过点击键盘按键来触发查找的习气。4、每页都保存查找输入框
你应该为用户具有在每个页面都能马上进行查找的权限，假如你的用户在特定的页面找不到他们想要的内容，能够马上经过查找获取内容，不管他在网站的哪个当地。
5、让查找框尽量简略
在你规划查找框的时分，请尽量让它看起来便是一个查找框，而且简略易用。可用性研讨标明，默许没有显现高档选项的查找框看起来愈加友爱，所以，通常情况下给用户供给的查找框最好不要供给进阶的查找选项。
6、让查找框处于用户预期的方位
当用户想要查找内容的时分还需求花费精力来寻觅查找框，这就十分为难了。这意味着查找框自身就不简略被发觉。
下面这个图表来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研讨，它展现出了142名被调查者关于网站的查找框的预期的方位。这项研讨标明，网站的左上角和右上角是用户所等待的查找框的方位，用户在运用F型环视法检查内容的时分，能够轻松找到查找框。
这份研讨还标明，右上角的区域是用户查找输入框的首选区域。
因而，将输入框置于顶部靠右或许顶部居中的方位，用户会主动在这个当地寻觅查找框。
小贴士：
在抱负情况下，查找框的规划应当和整个网站的规划风格保持一致，一起在视觉上要略显杰出，便于用户发觉它的存在。假如网站的内容满足多，查找框在规划上明显程度应该越高，假如查找功用关于你的网站至关重要，那么你应该选用较大的对比度，保证输入框和按钮从布景中锋芒毕露。7、合理的输入框尺度
输入框太小是最常见的查找框规划错素，尽管用户能够输入比输入框更长的内容，可是可见的部分往往无法彻底可见，这种规划的可用性并不强。这样的输入框或许由于可视规模的约束，促运用户运用短的、不精确的查询方法，由于更长的内容并不合适阅览。假如输入框能够契合用户的常见输入内容的尺度来进行匹配，那么它的可用性会更强。
依据经历，输入框能够承载的最佳字符数量为27个，百分之90的查找内容都在这个长度以内。
小贴士：主张考虑运用能依据输入长度增加而能变长的输入框，这不只节省了屏幕空间，而且能够给予用户满足的视觉提示，并快速进入查找环节。
8、运用主动查找主张机制
主动主张机制能够协助用户在输入的进程中，动态地猜测正确的查询方向。主动主张并不会加速查找的进程，可是能够协助用户构建正确的查找要害词/内容。普通用户在第一次查找成果不抱负的情况下，很少会持续进行测验，而主动主张运作顺畅的情况下，将会协助用户更好的查找。
谷歌查找在这方面有着丰厚的经历，自2008年开端，谷歌开端记载用户的查找记载，而且经过这种方法节省时间，优化成果，发明更为优异的体会。
小贴士：
保证你的主动查找主张是有用的。不妥的查找主张内容或许会混杂和涣散用户的注意力。尽量协助用户更正拼写，辨认词根，猜测文本，并改善你的东西。当用户开端输入之后，赶快开端给予用户主张，例如在第三个字符之后，为用户开端供给即时的、有价值的主张，下降用户的输入难度和工作量。尽量为用户供给少于10个查找成果，防止信息过载。答应运用键盘进行交互，当用户运用方向键向下翻滚到最后的条目之后，持续翻滚会跳转到顶部的项目。答应用户运用Esc按键推出列表。杰出显现输入的信息和主张的信息之间的差异。
9、让用户理解哪些能够查找到
最好是在输入框中包括示例，这样能够向用户给予主张。假如用户能够输入多个要害词查找，那么能够像下面的IMDB的网站相同给予主张。HTML5 能够轻松的实现在输入框内参加文本占位符。
小贴士：主张的内容不宜过多，这样关于用户会有认知负荷。
结语
查找是UI规划中极为常见的一个组件，看似简略的输入框背面包括了很多的常识以及规划的要素。即便是细小的更改也会对整个用户体会带来巨大的改动，慎重。
原文作者：Nick Babich
原文地址：uxplanet
译者：@陈子木
译文地址：http://www.uisdc.com/perfect-search-box-design
上一年今天运营文章2023:小红书热榜：线下周边游趋势(0)2023:盘点十分nice的5款电脑软件(0)2023:直播选品有哪几种？怎么组货及排品？(0)2023:直播选品方法论，做好直播带货第一步(0)2023:B站直播带货，怎么发现带货能力强的up主？(0)
微信扫一扫 
支付宝扫一扫 
