赞助商
立即赞助

从结构、类型和状态3个方面,帮你掌握搜索框设计

产品设计3年前 (2021)发布 流光
2.2K 0 0

“搜索”是产中一个非必要的功模,搜索就像为户供了一条捷的绿色通道,方户快速检索容。

搜索动在 App 中依靠搜索框来完成,用的搜索框很大程度上决定产品的搜索验何。大数搜索框存在相似,但正的搜索框在细节上为用户带来差异化的反馈,带来很暖很贴心的感。

搜索框结构分析

从验面上看,一个良的用户验需要具备完整的流程。搜索框的使用流程以简单划分为:

  • 使前-到搜索框入口;
  • 使用中-点击输内容;
  • 使用后-展示搜索结果。

从结构、类型和状态3个方面,帮你掌握搜索框设计

中使中会涉及到跳转和输入两种同的状态,在面的章里我会展开来分析。

搜索框的常见类型

想 App 的搜索框,好像它们的样式看起来差别并是很大,但实每个搜索框的细节都是经过精心设计的,面总结了几种见的搜索框类。

1. 搜索图标

页面上只供一个放大镜图标,通需要户点击图标后才跳转到搜索页面,例如小红书就将搜索图标放置在页面右上角。

从结构、类型和状态3个方面,帮你掌握搜索框设计

2. 基本搜索框

基本的搜索框组包括镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式,文字提示搜索,简洁清晰。

从结构、类型和状态3个方面,帮你掌握搜索框设计

3. 文提示类搜索框

和基本搜索框唯不地在于,这类搜索框文提示部分不再是搜索两个,而是根据品需求支持预多组文提示并在搜索框内循环展示。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 在大众评顶部搜索框,文提示部分循环展示了三组不内容,引导用户快速检索到好吃和好玩。

4. 功能类搜索框

所以叫做功能类搜索框,是在文提示类搜索框基础上根据品功能需要额添加了常用功能性图标,如扫码图标、照图标、语音图标等,赋予搜索框更多功能属性。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 经常使用瓣看书评学可能会注意到瓣主页搜索框有个扫码图标,击后可以快速扫描图书条码或维码,快速识书内容,省去检索麻烦。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 淘宝搜索框组成更复杂,除了支持扫码有相图标,便用户照识商品。

搜索框设计状态分析

使用搜索框搜索过程体可以分为四部分:搜索前、击搜索框、输入、搜索后。设计分析过程我们要先理体搜索流程,再考虑个状态应交互细节及反馈,这样才能保持逻辑晰。

1. 搜索前-默认状态

位置

大多数搜索框出现在页面顶部,作为一个大的触摸目标更符用户的认知习惯,更容易被用户发现和使用。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 在苹果带的地图应用中,搜索框放在页面中部偏下的位置,相比于顶部搜索框,这的位置布更方便用户操作。

式

搜索前的状除了前面讲的种常见的搜索框式外,有些产品会直在搜索框增加“搜索”按钮。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 阿系产品包括淘、支付、闲鱼等主页搜索框都额外添加了“搜索”按钮,相比于点击搜索框再点击键盘搜索内容推,直点击按钮简化了搜索流程。

2. 点击后-获取焦点

搜索框

点击搜索框,框内的放大镜图标消失,出现闪烁的光标引导用户输,搜索框右出现“取消”按钮。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 点击大众点评的搜索框,搜索页出现三个选项,点击每一个选项,搜索框内的文字提示改变,有效帮助用户提升搜索准确度,虽是很小的点但做的很用心。

键盘

点击搜索框弹键盘,在不输内容的情况下,点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

从结构、类型和状态3个方面,帮你掌握搜索框设计

搜索页

搜索页的容通包括历史搜索、搜索发现、热门推荐等版,记录户的搜索行为,推荐目标商或务,转率。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 豆瓣将最热门的容都展现在搜索页中,包括实时更的热门书影音榜单、热门小组、热门话题等,为户供有效的引导。

关历史搜索我们还以继续深分析,思考录怎么排序、最显示几条录……

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 网易云音乐的历史搜索最以留10条,采用横向滑动的手势互以节省屏幕空间。根据内容长短一屏一次以显示2-3条录,导致排在面的历史录不容易被用户快速现。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 淘宝的历史搜索以容纳更的数量,当搜索录超两行时有一个小的展开按钮,点击按钮以查看早期的录,样既能节省屏幕空间也能最大化容纳历史录。

3. 搜索中-输入内容

删除/取消

当开始输入容时,在搜索框的右侧会现删除图标,方户一键删除输入的容,这里要注意区分删除和取消的区别。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 在淘宝中点击“删除”图标,页面会返到上一级就是搜索页;

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 点击“取消”按钮,页面会直接返到页就是搜索前的状态。

搜索示

在户输入容时,产会根据户输入的容供相对应的搜索推荐,这是搜索框的必备的交互反馈。

通合理的词条推荐能极大降低用户的思考时间,提高搜索效率,同时省去次点击搜索按钮的流程,降低用户的操步骤。

字数

目前我所道的大数 App 在搜索时没有字数问题。

回顾一下搜索使用景会发现用户在搜索框内输入任何内容都是有可能的,尽量不要约束用户的输入内容。无论用户输入多少内容,点击都可以完成基本的搜索操作,这整个流程才完整。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 在百度中输入过多字符,会提示查询限制在38个汉字以内,多的字符会被忽略,虽然给出了提示但并未断用户的操作流程,可以让用户继续完成搜索。

4. 搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期,满用户的搜索需求,并把最吻合的搜索结果排在前面,为用户带来清晰的结果展示。

智能提示

智能提示是对用户输内容上的一种提示或纠正,果用户输的内容有问题或不够标准,在搜索结果中能给最贴切的搜索结果。

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 在淘宝中输“shouji”或“souji”,淘宝根据拼音给出“手机”的搜索结果,但仍留原标签,方便用户次点击搜索;输“手ji”时,直接给出“手机”标签,种差异化的反馈能更的为用户服务。

无结果提示

果没有搜索到用户输的内容,搜索页显示一个空状态,提示用户没有搜索结果。关空状态何设计以看我之前写的一篇文章:

从结构、类型和状态3个方面,帮你掌握搜索框设计

△ 相于直接显示搜索无结果的状态,拼多多的搜索结果首先会标明相商较,然后将搜索容拆分成同的标签进一步引导户来发现容。

最后

这里介绍了于搜索框设计的一些基本体验,会从整体到再到具体细节一步步分析,大会挖掘到更多更细的设计要点。

欢迎关注作者微信公众:「Clip设夹」

从结构、类型和状态3个方面,帮你掌握搜索框设计

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

相关文章

@Mockplus原型设计 :如今,越来越多的优秀 iOS 应用程序、MacOS 工具和网站争相出现,用户对产品质量的要求也水涨船高。在用...
ui设计
按钮在产品界面中是非常重要的元件之一,按钮作为用户引流和行动触发来说都是至关重要的。如何把按钮设计做到最好,是设计师...
ui设计
照片是记录生活的重要手段,在智能手机如此普及的今天,谁的手机里面又没有几百上千张照片呢?这些记录关键时刻的图片,对于...
Tubik Studio
最近发现有很多童鞋关心如何从UI进阶到UX的问题。那么我以一个非科班出身的UI到大厂资深UX的经历,不带黑话用4k字作文给大家...
ui设计
设计师的厉害之处不是设计方案有多么天马行空,而是是否有能将其落地的能力。 你们是否遇到过这种情况:自己做的设计方案在...
ui设计
最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发...
ui设计
编者按:一套 UI 界面当中,核心的 APP 图标是用户每天都要接触、经常使用的视觉组件和交互对象。设计图标的时候,要用到大家...
Tubik Studio
编者按:在进行 UI 设计的时候,很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。这篇来自Mark Andrew 的文章梳...
ui设计