赞助商
立即赞助

如何做好一个搜索体验流程?看这篇超全面的总结!

UI设计3年前 (2021)更新 流光
2.1K 0 0

随着我们品承载内容越来越多,搜索功能在大多品都成了个必不可少功能。最初我们在看搜索框时候,都会把它作是个常规UI控件来待,随着我们品用户体验越来越重视的情况下,搜索框在设计时还是有许需要我们注意的地方。

如何做好一个搜索体验流程?看这篇超全面的总结!

不管用户带着什么目的去使用搜索功能,其使用行为是点击搜索框,弹出搜索中间页,输搜索内容,最查看结果页。因此我们应依次对照操行为进行关键点设计。也是今天我要跟大家分享的重点内容。

搜索入口

如何做好一个搜索体验流程?看这篇超全面的总结!

首先给家看一调查表,这两谷歌作的人因素理学博士A.Dawn Shaikh(道恩·沙谢赫)Keisi Lenz的一项研究(用户对于搜索框网页中预出的置)。从结果可以看出左角右角占比高的两部分,部分用户还希望搜索功能出一明显的置。

因此产品中只要有搜索功能,我们通常把它放在一个相对明显的位置上,但是搜索口具怎么设计还是得看搜索功能在个产品中的权重何。小编在里不做的分析,简单给大家介绍一下现在APP中搜索口最常见的三种形式。

如何做好一个搜索体验流程?看这篇超全面的总结!

1. 独立导航标签

如图中「1」的置。这种搜索入口,明搜索功能整产品中占据绝对的权重,直接出底部或顶部导航栏中,这样用户切换几导航页面时,搜索入口常态存的。全局性的设让用户可以随时点击入到搜索页面。一般言,此类操作触发后对应的搜索页面功能层级也加丰富。

2. 搜索框式

如图中「2」的置。 任务型应用通常使用搜索框形式,这种设方式占据了足够的屏幕宽度,一般屏幕的核置,通常会页面顶部置出,用户对此一目了然,可以速点击搜索。

3. ICON入口式

如图中「3」的置。 这种入口通常出以浏览主、搜索辅的页面。由于占据空间较小,出的置严格限制,因此置置较灵活,可以出页面角落或者收起多入口当中,避免与其它高权重需求争权,它多只作一辅功能出。

搜索中间页

这页面简单的,就用户点击搜索按钮,页面立即弹起的一过渡页面。由提示语、返回按钮、历史记录、门推荐、清除按钮这些基本功能组。但当我们满足这些基本功能点时,如何让搜索中间页的设加贴呢?

如何做好一个搜索体验流程?看这篇超全面的总结!

1. 给一个确的提示语

在搜索框中放置提示语或者示范性搜索问题来建议用户如何使用这个功能,帮用户弄清可以搜索些什。这对用户也是一种良性的引导,给用户提供了一个心理预期,如下图中(图一)和(图二)。

如何做好一个搜索体验流程?看这篇超全面的总结!

(图三)在完成基本功能,它根据用户之前的大数据搜索情况,量身定制了每个用户的专属提示语。把用户的习惯放在第一位,造一种专属,让用户觉得是被别对待的,从细节中去动用户。

2. 历史记录靠近一点

如何做好一个搜索体验流程?看这篇超全面的总结!

在开始这个话题之前先给大说一个概念,如上图展示,我们的眼睛会自把红色圆形从黑色圆形中归为一类,这就是格式塔-相似律原则。相似律本质上是简和整体认知对象的组织原则,它倾向于将接、似的元素组合起来作为一个整体。

如何做好一个搜索体验流程?看这篇超全面的总结!

如图、图五,历史记录可有效的减户对重复性容的必要操作,呈现户的搜索历史。根据认知心中的相似律,搜索框通位于页面顶,历史记录紧贴搜索框展示,此时户的视觉焦点在这里,更容易注意到,会产生认知偏差,因此该位置要避免被他信息模占据从而割裂二者的联系。同时对同模在样式上做点区别,更好的帮户区分模间的区别。

3. 分类搜索

在搜索功全性的情况,搜索涵盖的容太多,仅在搜索框中现示词已足满足户对于信息分类搜索的需求。可前置分类搜索模,在搜索开始前就缩小搜索范围。

如何做好一个搜索体验流程?看这篇超全面的总结!

搜索过程

常我们击搜索框后到进入搜索页,输入内容,击「搜索」按钮到最后完成搜索。常几秒完成了,是这几秒钟时,是我们品功能性化与智能化体现。那我们应该怎么更好完善这个过程呢?

1. 动态实时搜索

根据你输入文本,应搜索结将会实时动态过滤显示在屏幕上,帮助用户更快地找到自己想要结,体现我们品智能性。

如何做好一个搜索体验流程?看这篇超全面的总结!

2. 给用户一点建议

当用户在搜索框输内容时,搜索框下面出现关个关键词的众搜索建议,把每条建议进行细化的拆分,用标签提示。为用户省去到结果页进行筛选的步骤,以帮助用户更快地到达搜索结果页。

如何做好一个搜索体验流程?看这篇超全面的总结!

3. 加点微交互

输入关键字时,搜索框下方会出一系列的联,点击某条联右的箭后,我们会发该联入搜索框并引发了又一系列的联,选择终确认词条,点击搜索按钮到达结果页。整过程可以让用户速精准的到达搜索结果页,避免输入过程中出错误输入,终提升产品转化率。

如何做好一个搜索体验流程?看这篇超全面的总结!

4. 搜索间过长,请考虑动画

虽然搜索的过程正常3秒内可以完成,当网络不好或者内容过多的候,一定要给一个搜索状展示(或进度展示)。告诉用户这个页面正在进行中,散用户等待过程中的无聊。

搜索结果页

搜索结果页是用户的终极目标。怎把用户所需要的息准确且重点的展示出来,让用户一目了然,是这个页面的主要任。

1. 多维度展示

当展示内容过多,应该对不同模块的内容进行类整理,把结果内容进行模块展示,提升息的清晰度和可读性,帮助用户快速找目标息。

如何做好一个搜索体验流程?看这篇超全面的总结!

2. 增操作功

在反馈结果页上附操作功,户快速抵达目的地,缩短操作路径,更有利于升户操作效率。

如何做好一个搜索体验流程?看这篇超全面的总结!

3. 结数呈现

显示搜索出来结数量,以便用户可以决定他们要花费多长时浏览结。

4. 关键高亮

结页快速查看到关键并件易事,尤其是页文数量众多关键多出现时。结页关键高亮显示,可以让用户快速找到自己想要东西。

如何做好一个搜索体验流程?看这篇超全面的总结!

5. 进行有效的提示和纠错

当我们出现输错误的时,不要给用户一个错误呈现页,以对用户进行有效的纠错和提示,以便帮助用户快速且准确的完成输。

如何做好一个搜索体验流程?看这篇超全面的总结!

以上说的内容是基现阶段的互形式,我们在设计时应该注意的地方。但随着科技的展,搜索的形式也不仅仅只局在文字搜索,越来越的互媒介出现在我们身边。就要求我们,与时俱进,更的和探索互媒介,以便更的提升我们的产品验。

欢迎关注微信公众号:「 融360RUX」

如何做好一个搜索体验流程?看这篇超全面的总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

您最近填写过在线表单了吗? 答案应该是肯定的。根据最近的研究,84% 的人每周至少会填写一份线上表单。 虽然你可能没有感...
用户体验
找图标这个事情,对于设计师而言,其实都不是太大的问题了。不仅有大把的网站提供免费的图标下载,而且设计师自己改和设计都...
ICON
文章结合过往案例讲述如何通过设计要点和方法有效系统地进行界面图标设计。 作者: KongZhen@腾讯视频TVD
ICON
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
一、图标的定义 1. 什么是图标 图标是具有明确指代含义的计算机图形。从功能分类角度分为启动图标、应用图标、功能图标。 2. ...
ICO
在我接触交互设计之前,我一直把搜索功能的设计看作「搜索框+提示词+删除icon+取消button」的设计,但其实看似简单的搜索框背...
搜索
问对问题才能找对答案,这个逻辑并不复杂,但是在做产品设计的时候,要做到并不是那么容易的事情。如何提问,对于最终产品的...
Eugen Eşanu
我们每天都在设计图标,并且保持这样的状态超过15年。身为设计师,想必你已经阅读过很多关于图标设计的文章,但是今天的文章...
ICON