发布时间：2022-9-26 分类： 行业动态
编者注：用户界面设计是任何想要留住用户的应用程序和网站的重要组成部分，如何设计符合用户习惯的服务产品并非易事。在本文中，Bruno Charters在“获得正确的搜索模式”一文中描述了设计者希望关注的五个细节。虽然切入点很小而且支离破碎，但作为一名新秀甚至是老将，这一点必须牢记在心。
完美的案例
1.视觉提示
在创建任何类型的用户界面时，为用户提供他们所需的快速浏览页面工具是您工作职责的一部分。这样做将使您的用户能够准确找到他们想要的内容，无论何时，以及一旦他们与之交互后会发生什么。
（1）放大镜图标
使用图标。我不想强调我会找到搜索栏的速度。越简越好。您可以确保用户可以快速扫描它的细节越少。虽然，只有一个图标本身没有可以输入的容器或按钮实际上使搜索更加困难。
极简主义搜索图标的示例
人们经常意识到，即使没有标签，放大镜图标也会显示搜索工具。但坏消息是，只有一个图标会使搜索变得更加困难。
（2）真实搜索按钮
不是每个人都是千禧一代学会上网的人，这意味着并不是每个人都知道他们需要在输入查询后按Enter键。在搜索输入旁边添加实际按钮将帮助用户确认他们的下一个动作，这反过来减少了用户所需的认知负荷。
不要将按钮放在左侧，顶部或底部
提示：
或者，您可以隐藏输入按钮，直到文本输入行为完成。
确保按钮尺寸合适，以便点击行为自然。
2.输入您的特征
有时，最亮，性能最好或更大的汽车根本无法做到这一点。搜索模式是相同的。
（1）你想表达的设计
将设计与网站或应用程序的主题相匹配，同时确保它脱颖而出。
YouTube的新主题和令人惊讶的黑暗主题通过将搜索模式与其他元素结合起来完美地体现了这一点：“这不是关于谁是最大的问题”。
确保您输入的长度不会太短。诺曼集团的一项研究表明，一个27个字符的输入框可以满足用户90％的需求。
一个简单的搜索框示例，可以输入5个字符和26个字符
3.清除占位符
在输入的占位符文本中使用适当的副本非常重要，通常由用户使用。这将确保他们知道要搜索的内容，并且他们不会对他们不理解的内容感到失望。最近，Web工具允许人们在HTML5中轻松添加提示作为占位符来实现此目的。
添加占位符可帮助用户过滤其查询行为
提示：
众所周知，人类的短期记忆力较弱。使副本保持占位符文本简洁明了。使用长提示最终会增加认知负担并影响用户体验。
有些项目需要更具体的搜索功能。在这种情况下，您可以使用悬停工具提示来确保提示始终可见，允许用户使用短期内存执行其他操作。
在此示例中，工具提示可帮助用户使用查询格式以及他可以搜索的内容。
4.引导查询自动建议功能
通常，您的用户将忙于考虑搜索结果，而不是专注于确保输入正确的搜索查询。对于那些无法找到预期结果的人来说，这也是一种负担。这是用户的错误，也是设计师的错误。这也是自动建议机制派上用场的地方。
此机制的目标不是更快地搜索，而是在查询构造中提供一些帮助。实现此目标的一种方法是实现预测搜索模式。你在查询的奇怪词是什么？它只是通过分析用户编写的任何字符的行为来预测他们的查询目标。
众所周知，大多数未能在第一次查询中找到预期搜索结果的用户在下一次尝试中将获得很少的成功。 Jacob·领导的团队从相关研究中得出了相同的结论;尼尔森。因此，通过这样做，除了能够大大减少执行搜索的用户的工作量之外，还增加了寻找期望内容的成功次数。
提示：
不要错误地给他们任何自动建议。无论您使用哪种机制，请确保它有意义并满足用户的需求。
为用户提供最近搜索历史的可视提示。这对于频繁的搜索行为非常有用。
保持简单，并使用最少的元素来分隔不同的自动建议。 （即：填充和边框）
限制提供给用户的建议数量在5到9之间。记住米勒定律在用户体验设计中的应用。
5.不要忘记位置的重要性
2006年，A。D. Shaikh和K. Lenz发现用户对某些用户界面元素和模式的位置有一些期望。搜索是其中一种模式，大多数用户希望在界面的顶部或右上角找到它，如下面提到的研究。
“许多参与者希望找到‘网站搜索引擎’位于页面右上角或左上角的位置。 ”的
尝试基于这种基于知识的搜索模型进行设计，这将确保亲爱的用户很容易找到它。
结论
搜索是一种不断发展的行为模型，我知道本文并未涵盖所有现有指南。基于此，我希望本文能够帮助一些初学者，甚至是用户界面和用户体验的老手。
在我看来，我们每天处理太多所谓的最佳实践，所以很容易忽略一些简单的主题，正如我在本文中提到的那样。
原文链接：https://uxplanet.org/getting-the-search-pattern-right-e71dbb59dc67
译者：Mu Muzi，由36个编辑组编写。编辑：郝鹏程
翻译地址：http://36kr.com/p/5124738.html
本文由@郝鹏程授权，未经作者许可，不得转载。
该地图来自Unsplash，基于CC0协议
