一、搜索功能的作用

搜索是我们经常使用的功能，当我们面对复杂的信息时，想找到目标信息，就会寻找搜索功能的位置，它能高效精准的帮我们找到想要的目标。因而，我们可以从这两个维度去衡量一个搜索功能是否好用：

• 是否高效节省用户时间
• 是否精准直达用户目标
  

作为用户体验设计师，在设计搜索功能时，不仅要考虑视觉美观，还需要考虑内容层次、交互引导，以及在提升搜索效率时如何巧妙融入视觉情感体验、商业价值等等。下面带大家一起了解搜索功能的3个步骤，如何通过设计提升视觉层次、情感体验、搜索效率等。

二、搜索功能的三个步骤

搜索前 – 搜索中 – 搜索后

1. 搜索前，常见的搜索入口

• 搜索icon：节省空间，位置灵活。
• 底部导航入口：触发后对应的搜索页面功能。
• 顶部固定搜索栏：任务型功能，一目了然，快速点击搜索。
• 悬浮窗搜索icon：悬浮窗搜索入口能够使用户在浏览的状态下总能注意到搜索图标，随时可以搜索的状态。
  

通常会把搜索放在比较明显的位置，具体怎么设计需要看搜索功能在这个产品中的权重。

2. 搜索中，输入页

常见的搜索输入页有两个状态：一个是刚进入时候的默认状态，另外一个是用户已经开始输入时候的输入状态。

用户进入搜索输入页时立即弹出键盘，并且输入框是焦点状态，保证用户无需其他点击，直接输入即可。另外需要增加快捷搜索词入口，展示5～10个历史搜索词，方便用户快速键入。

进入搜索输入页的用户，都具有比较明确的意图，可以在搜索页增加业务导向的模块，提高相关业务搜索。比如：热门搜索模块、推荐搜索词模块等。

3. 搜索后，搜索结果页

搜索结果页的主要目的是让用户准确找到自己的目标信息或结果。在搜索结果页里以下五种功能展示：

分类展示：当结果页内容展示过多时，应按模块对内容进行分类展示，可提升信息的清晰度和可读性，帮用户快速找到想要的内容。

增加操作功能：在结果页上增加操作功能，让用户快速抵达目的地，缩短操作路径，更有利于提升用户操作效率及提升购买转化等。

结果数展示：展示搜索出来的结果数量，让用户清晰了解搜索内容的多少及预估浏览所需时间。

关键词高亮显示：对结果页中关键字高亮显示，可以让用户快速找到自己想要的目标。

有效的纠错展示：当出现输入错误时，对用户进行有效的纠错或提示，可帮助用户快速且准确的完成输入，减少流失。

三、如何通过设计提升

视觉层次、情感体验、搜索效率。

1. 搜索功能的视觉提升

搜索框设计

统一设计语言：根据 app 的整体设计语言来考虑，页面中是具有亲和力的圆角按钮，大圆角的卡片样式，那么搜索框的设计语言也应保持一致。如下图飞猪的搜索框右上角与品牌图形相呼应，达到设计语言的统一性。

搜索框比例：搜索框长度确保可输入的字符的极限长度、推荐词的字符数，输入框高度符合移动端手指触碰面积。

搜索框视觉层次突出：搜索框线与面在视觉层次是否更突出。

搜索icon设计

图标符合用户心智：在用户的心智中放大镜图标即是「搜索」，如果图标很明显，那么就不需要再显示「搜索」二字了。

搜索icon形体：在设计中我们发现 icon 设计大小与屏幕有较大关系，在移动端里屏幕较小，可放置的图标和文字按钮更少。在较小的面积里对 icon 形体需要有高度的提炼，线条过于繁琐、过细都会造成视觉对比关系弱。

位置设计

用户对一些用户界面元素和模式的位置有一定的期待和习惯性的认知。搜索作为其中的一种模式，大多数用户希望在界面的顶部或右上角找到它。

2. 搜索中加入微交互提升情感体验

随着技术的发展和体验的提升，越来越多的 APP 中增加了微交互动效，比如在搜索页中增加了过渡动画，语音搜索中的引导动效，如：百度地图的语音搜索，在开启语音搜索后，同时以简短的文字动效和语音图标不断扩大的圆环来引导用户说出需要搜索的地址，简单清晰又不影响用户操作。

在实际设计中我们发现适当增加微交互有超出用户预期的3个作用：

△ 《懂呗》APP搜索功能设计演示demo

提供即时反馈：在搜索时，视觉反馈的微交互让用户明白，操作已经被系统接受，让用户拥有掌控感。

促进互动：搜索中的微交互鼓励用户进行更多互动，它能够指引用户，教育用户，降低学习成本，让用户明白如何使用。

带来愉悦感：在搜索过程微交互动效给用户带来流畅愉快的体验。

比如：把语音搜索的功能与品牌吉祥物结合起来，创造出未来的智能感，在搜索等待时加入品牌吉祥物的 loading动效，或者对搜索不到的内容，搜索结果页可以增加一些萌趣的小动效等，来引导用户进行下一步操作，避免用户在搜索不到产生的消极情绪而影响产品的使用。

3. 设计形式如何提升搜索效率

搜索效率在搜索功能里扮演着至关重要的角色，下面从3个维度了解在设计形式中搜索功能的效率如何提升：信息效率设计、输入效率设计、商业效率设计。

信息展示效率设计

移动端屏幕小，内容呈现少，用户希望最快找到目标结果，搜索的信息展示设计应简洁高效、显而易见、层次分明。最常见的设计方式：分类、分区、排序展示等。

输入效率设计

为了减少用户输入成本，我们比较常见的是推荐位、历史搜索、关键词联想设计等，同时为了降低搜索跳出率，会规划出大家都在搜的模块。有这些关键词：

• 用户常搜的，从常搜的词库中抽选几个展示，即推荐的模块，根据推荐内容展示形式不同。
• 用户的历史搜索设计。
• 关键词联想设计，即高亮部分，一般都采用 app 主色或品牌色。
  

业务效率设计：相关业务的推荐、标签样式设计

• 当前正在进行的活动相关关键词；
• 当前要推的相关业务。
  

总的来说，在实际设计中提升搜索信息展示效率、输入效率、业务效率需要注意以下几点：

• 合理利用手机屏幕空间，把关键信息简单明了展示。
• 考虑用户特点及当前与更广泛的场景。
• 突出关键匹配字段。
• 保持设计语言的一致性，保证信息阅读的顺畅度。
  

更有人性化的无结果引导

• 通过对用户的行为习惯记录、历史浏览记录，在无结果页中增加更准确、人性化的结果推荐，降低用户的失望，提升搜索效率。
• 趣味性的引导：设计搜索无结果页时，可采用萌趣化的品牌IP形象，同时增加猜你喜欢，联想搜索关键词也能增加好的用户体验。
  

四、关于搜索功能的其他思考

至今为止，我们常见到的搜索形式主要有：文字搜索、语音搜索、图片搜索，另外还有一些特殊场景使用的搜索形式，比如扫码搜索，拍照搜索，拍照翻译搜索等等。最近几年，随着语音技术的不断成熟，语音搜索功能在音乐类APP 上应用越来越多，通过识别音乐来搜索音乐的相关内容，部分音乐类app 还针对一些场合做了些语音搜索上的优化，比如哼歌识曲，提高了用户搜索的内容的效率。

如今，我们看到搜索的效率、体验设计都在不断发生着变化，或许今后搜索结果页面中将更多应用于 AI领域，或许搜索答案的准确性和相关性更大幅度的提高，或许搜索更加互动、或许更加个性化的社会关系搜索等等。虽然目前我们还无法预知，但我们知道一件事，搜索体验在不断提升。

转载自优设设计 宜信BXD

地址：https://www.uisdc.com/how-to-do-search-function

一、搜索功能的作用

搜索是我们经常使用的功能，当我们面对复杂的信息时，想找到目标信息，就会寻找搜索功能的位置，它能高效精准的帮我们找到想要的目标。因而，我们可以从这两个维度去衡量一个搜索功能是否好用：

• 是否高效节省用户时间
• 是否精准直达用户目标
  

作为用户体验设计师，在设计搜索功能时，不仅要考虑视觉美观，还需要考虑内容层次、交互引导，以及在提升搜索效率时如何巧妙融入视觉情感体验、商业价值等等。下面带大家一起了解搜索功能的3个步骤，如何通过设计提升视觉层次、情感体验、搜索效率等。

二、搜索功能的三个步骤

搜索前 – 搜索中 – 搜索后

1. 搜索前，常见的搜索入口

• 搜索icon：节省空间，位置灵活。
• 底部导航入口：触发后对应的搜索页面功能。
• 顶部固定搜索栏：任务型功能，一目了然，快速点击搜索。
• 悬浮窗搜索icon：悬浮窗搜索入口能够使用户在浏览的状态下总能注意到搜索图标，随时可以搜索的状态。
  

通常会把搜索放在比较明显的位置，具体怎么设计需要看搜索功能在这个产品中的权重。

2. 搜索中，输入页

常见的搜索输入页有两个状态：一个是刚进入时候的默认状态，另外一个是用户已经开始输入时候的输入状态。

用户进入搜索输入页时立即弹出键盘，并且输入框是焦点状态，保证用户无需其他点击，直接输入即可。另外需要增加快捷搜索词入口，展示5～10个历史搜索词，方便用户快速键入。

进入搜索输入页的用户，都具有比较明确的意图，可以在搜索页增加业务导向的模块，提高相关业务搜索。比如：热门搜索模块、推荐搜索词模块等。

3. 搜索后，搜索结果页

搜索结果页的主要目的是让用户准确找到自己的目标信息或结果。在搜索结果页里以下五种功能展示：

分类展示：当结果页内容展示过多时，应按模块对内容进行分类展示，可提升信息的清晰度和可读性，帮用户快速找到想要的内容。

增加操作功能：在结果页上增加操作功能，让用户快速抵达目的地，缩短操作路径，更有利于提升用户操作效率及提升购买转化等。

结果数展示：展示搜索出来的结果数量，让用户清晰了解搜索内容的多少及预估浏览所需时间。

关键词高亮显示：对结果页中关键字高亮显示，可以让用户快速找到自己想要的目标。

有效的纠错展示：当出现输入错误时，对用户进行有效的纠错或提示，可帮助用户快速且准确的完成输入，减少流失。

三、如何通过设计提升

视觉层次、情感体验、搜索效率。

1. 搜索功能的视觉提升

搜索框设计

统一设计语言：根据 app 的整体设计语言来考虑，页面中是具有亲和力的圆角按钮，大圆角的卡片样式，那么搜索框的设计语言也应保持一致。如下图飞猪的搜索框右上角与品牌图形相呼应，达到设计语言的统一性。

搜索框比例：搜索框长度确保可输入的字符的极限长度、推荐词的字符数，输入框高度符合移动端手指触碰面积。

搜索框视觉层次突出：搜索框线与面在视觉层次是否更突出。

搜索icon设计

图标符合用户心智：在用户的心智中放大镜图标即是「搜索」，如果图标很明显，那么就不需要再显示「搜索」二字了。

搜索icon形体：在设计中我们发现 icon 设计大小与屏幕有较大关系，在移动端里屏幕较小，可放置的图标和文字按钮更少。在较小的面积里对 icon 形体需要有高度的提炼，线条过于繁琐、过细都会造成视觉对比关系弱。

位置设计

用户对一些用户界面元素和模式的位置有一定的期待和习惯性的认知。搜索作为其中的一种模式，大多数用户希望在界面的顶部或右上角找到它。

2. 搜索中加入微交互提升情感体验

随着技术的发展和体验的提升，越来越多的 APP 中增加了微交互动效，比如在搜索页中增加了过渡动画，语音搜索中的引导动效，如：百度地图的语音搜索，在开启语音搜索后，同时以简短的文字动效和语音图标不断扩大的圆环来引导用户说出需要搜索的地址，简单清晰又不影响用户操作。

在实际设计中我们发现适当增加微交互有超出用户预期的3个作用：

△ 《懂呗》APP搜索功能设计演示demo

提供即时反馈：在搜索时，视觉反馈的微交互让用户明白，操作已经被系统接受，让用户拥有掌控感。

促进互动：搜索中的微交互鼓励用户进行更多互动，它能够指引用户，教育用户，降低学习成本，让用户明白如何使用。

带来愉悦感：在搜索过程微交互动效给用户带来流畅愉快的体验。

比如：把语音搜索的功能与品牌吉祥物结合起来，创造出未来的智能感，在搜索等待时加入品牌吉祥物的 loading动效，或者对搜索不到的内容，搜索结果页可以增加一些萌趣的小动效等，来引导用户进行下一步操作，避免用户在搜索不到产生的消极情绪而影响产品的使用。

3. 设计形式如何提升搜索效率

搜索效率在搜索功能里扮演着至关重要的角色，下面从3个维度了解在设计形式中搜索功能的效率如何提升：信息效率设计、输入效率设计、商业效率设计。

信息展示效率设计

移动端屏幕小，内容呈现少，用户希望最快找到目标结果，搜索的信息展示设计应简洁高效、显而易见、层次分明。最常见的设计方式：分类、分区、排序展示等。

输入效率设计

为了减少用户输入成本，我们比较常见的是推荐位、历史搜索、关键词联想设计等，同时为了降低搜索跳出率，会规划出大家都在搜的模块。有这些关键词：

• 用户常搜的，从常搜的词库中抽选几个展示，即推荐的模块，根据推荐内容展示形式不同。
• 用户的历史搜索设计。
• 关键词联想设计，即高亮部分，一般都采用 app 主色或品牌色。
  

业务效率设计：相关业务的推荐、标签样式设计

• 当前正在进行的活动相关关键词；
• 当前要推的相关业务。
  

总的来说，在实际设计中提升搜索信息展示效率、输入效率、业务效率需要注意以下几点：

• 合理利用手机屏幕空间，把关键信息简单明了展示。
• 考虑用户特点及当前与更广泛的场景。
• 突出关键匹配字段。
• 保持设计语言的一致性，保证信息阅读的顺畅度。
  

更有人性化的无结果引导

• 通过对用户的行为习惯记录、历史浏览记录，在无结果页中增加更准确、人性化的结果推荐，降低用户的失望，提升搜索效率。
• 趣味性的引导：设计搜索无结果页时，可采用萌趣化的品牌IP形象，同时增加猜你喜欢，联想搜索关键词也能增加好的用户体验。
  

四、关于搜索功能的其他思考

至今为止，我们常见到的搜索形式主要有：文字搜索、语音搜索、图片搜索，另外还有一些特殊场景使用的搜索形式，比如扫码搜索，拍照搜索，拍照翻译搜索等等。最近几年，随着语音技术的不断成熟，语音搜索功能在音乐类APP 上应用越来越多，通过识别音乐来搜索音乐的相关内容，部分音乐类app 还针对一些场合做了些语音搜索上的优化，比如哼歌识曲，提高了用户搜索的内容的效率。

如今，我们看到搜索的效率、体验设计都在不断发生着变化，或许今后搜索结果页面中将更多应用于 AI领域，或许搜索答案的准确性和相关性更大幅度的提高，或许搜索更加互动、或许更加个性化的社会关系搜索等等。虽然目前我们还无法预知，但我们知道一件事，搜索体验在不断提升。

转载自优设设计 宜信BXD

地址：https://www.uisdc.com/how-to-do-search-function