看到这个标题，你可能会认为搜索是不需要设计的，毕竟只是一个文字输入框和搜索按钮的组合。
然而，在信息爆炸的互联网时代，搜索框成为我们每天必须要使用(use)到的功能。当用户面对复杂的网站，难以找到自己想要看到东西的时候，他们会立即寻找并使用搜索框，快速的达到目的。这时候搜索功能的设计以及易用性就会显得尤为重要。本次我从“搜索框（一）”和下期的“搜索结果（二）”俩部分来分享比较正确的做法。
1.使用放大镜图标
在用户界面中放大镜图标和搜索功能如影随行，图标是对于操作对象、动作或想法可视化的表达，用户具有普遍认知的图形元素，我们通常也称之为icon。放大镜就是这样的图标之一。
提示:尽量使用(use)最简单的图形，较少的使用细节装饰会提高识别效率(efficiency)。
2.显示搜索字段
如果你设计(Design)的产品(Product)中搜索是一个高频（Induction Heating）操作的功能，你应该将它放在相对明显和便捷的位置，便于用户快速找到并使用(use)。
显示完整的搜索提示字段很重要，因为隐藏在图标中的搜索会使得搜索功能不那么明显，并增加无效的交互成本。
尽量避免这种形式的设计(Design)，因为它隐藏了搜索提示
3.为搜索框设计(Design)一个搜索按钮。
一个搜索按钮可以明确的告知用户，激活搜索框后的额外操作(operate)，即使他们已经决定了按下Enter键。
提示
适当的调整提交按钮触发区域的大小，使用户不必精确的指向就可以操作，更大的点击区域使其更容易被发现和便于点击。虽然大部分用户会通过Enter键提交搜索结果，但是依然有不少用户习惯于使用鼠标点击实际按钮来完成操作，俩个操作方式应当同时存在。
4.每一个页面都出现搜索框
你的用户应该在每个页面都可以使用搜索功能，不论他们在网站的什么位置（position )，当他们找不到他们正在查找的内容的时候，他们将尝试使用搜索功能。
5.设计一个简单的搜索框
让搜索框看起来尽可能的简单。UI设计教程UI表面上看是用户与界面两个组成部分，但实际上还包括用户与界面之间的交互关系。根据可用性研究，在默认情况下不显示高级搜索是更友好的选择(Select)。在下面的例子中，高级搜索会使用(use)户感到疑惑。
6.将搜索框放在用户更希望看到的地方
也就是说，搜索框的位置要尽可能（maybe)符合大部分用户的心理预期。
A.Dawn Shaikh和Keisi Lenz做了一个研究，研究结果（如下图）表示了142位参与者在调查(diào chá)中预期搜索功能在网页中出现的位置。研究发现，将搜索功能放在网站的左上角或者右上角是最好的选择，用户可以使用常见的“F形”扫描模式轻松找到。
因此，将搜索框放在页面的右上角或者中上部区域，是用户预期出现的位置。UI视觉设计承担的不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。二是交互设计，主要在于设计软件的操作流程、树状结构、操作规范等。
提示：
理想情况下，搜索功能应该匹配于网站的整体设计，在用户需要的时候出现。网站的内容越多，搜索功能显得越重要，如果搜索对你的网站至关重要，就要从视觉、尺寸、位置、颜色等方面增强搜索的权重，以便搜索功能在复杂的内容中脱颖而出。
7.确保输入框可以容纳足够的字段
输入框设计的太窄是设计师常见的错误做法，如果输入框不够宽，当用户在输入框内输入较长的文本查询时，意味着有一部分文字将不被看到，用户无法轻松的查看和编辑他查询的网站内容，可用性将非常差。当输入框仅允许输入有限可见的文本时，用户将被迫用短的，不精确的查询，因为较长的查询难以阅读。有好的做法是输入框根据用户预期输入的文本调整大小，那么他们将更容易帮助用户阅读和查询。
研究表明，可容纳27个字符的搜索框可以满足90％用户的搜索需求。
提示：考虑（consider)使用(use)可变化的宽度的搜索框（激活输入框后输入框变宽），这样既可以节省屏幕空间(Space)，也可以为用户提供足够的可视化提示，以便快速查找和执行搜索动作。
8.启用“搜索联想”机制
“搜索联想”（自动建议）可以帮助用户通过已输入的文本来预测可以找到的查询结果。搜索联想的目的不是加快搜索的过程，而是帮助用户构建正确的搜索查询机制。常见的场景是：当用户第一次搜索没有得到想要的结果时，稍后会更少使用搜索，意味着更低的成功率(指物体在单位时间内所做的功的多少)。事实（Fact)是用户会就此放弃搜索。所以搜索联想会帮助用户更好的构建搜索路径。
Google字2008年以来掌握并实施“搜索联想”，由于搜索引擎会记住用户每多一次且相同的搜索记录，所以Google为用户节省(spare)了时间并创造了更加便捷的体验。
提示：
确保搜索联想是有效的，设计(Design)不完善的搜索联想会混淆和分散用户的注意力，所以使用拼写自动更正、词根识别、语义识别和预测，可以改进搜索体验。尽可能快速的提供搜索联想，例如输入到第三个字的时候，就给用户提供相匹配的联想词汇，以此减少用户数据录入的工作，只提供少于10个项目的联想词句（不建议使用滚动条），否则信息将会变得难以承受。允许用户通过键盘(Keyboard)的上下键控制（control)选择(Select)列表，当滚动到最后一个项目，如果继续向下翻动则自动返回到列表顶部，用户也可以使用Esc按键关闭搜索联想列表。已输入文本和建议文本视觉上保持差异（例如，通常情况下建议的词汇通过加粗表示）
9.描述用户可以搜索的内容
在输入框中可以添加搜索示例，告知用户那些内容是可以搜索的，以及如何使用功能。UI设计学习UI设计师的涉及范围包括高级网页设计、移动应用界面设计，是目前中国信息产业中最为抢手的人才之一。如果用户可以搜索多个条件，请使用输入提示模式(pattern)说明。
（Html5的技术(Technology)将文本占位符添加到输入框中是极其容易的）
提示：简要的概述，否则会增加用户的认知负担。
结论
搜索是构建内容繁重应用程序或门户网站最基本和最关键（解释:比喻事物的重要组成部分)的功能。即使最小的变化，例如输入框可输入的字段大小或搜索框中的提示字段信息可有效的提升搜索的可用性以及整体的用户访问体验。
评论(0)