搜索框设计 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

作品集指导

优设设计专家语音在线指导

开通VIP

领取更多设计师实用特权

投稿

搜索框设计话题

首页
设计文章
搜索框设计

2022 年的 Google 是如何重塑搜索体验的？官方总结了5个方面！

产品

2022 年的 Google 是如何重塑搜索体验的？官方总结了5个方面！

谷歌正在彻底改变搜索引擎的运作方式。

2022/11/03

7000字干货！帮你全方位掌握搜索功能设计

交互

7000字干货！帮你全方位掌握搜索功能设计

本文总结梳理了搜索功能，从搜索方式、元素，到搜索流程，再到搜索过渡，都进行了阐述。

2021/07/27

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

UI

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

本文从搜索框结构分析、搜索框的常见类型和设计状态分析三个方面，帮你掌握搜索框设计。

2021/04/15

从这3个方面，帮你大幅度提升用户的搜索体验

UI

从这3个方面，帮你大幅度提升用户的搜索体验

可能很多人认为搜索设计很简单，但搜索前、中、后的体验大家有没有仔细考虑过呢？本文将介绍搜索设计需要了解的内容，以及在不同App和案例中的搜索体验。

2020/09/03

如何做好浏览器搜索设计？我总结了这9个建议

UI

如何做好浏览器搜索设计？我总结了这9个建议

看似简单的搜索设计，实则有很多你没注意到的细节可以探讨。本文分享了浏览器搜索设计过程中的9个建议，围绕这9个设计建议，可以展开很多具体的设计优化点。

2020/07/24

搜索框设计

如何设计移动端搜索？来看我总结的这四个部分！

教程

如何设计移动端搜索？来看我总结的这四个部分！

小溜Epik：目前搜索功能是每个应用产品不可缺少一部分，同时也是用户经常光顾到的功能。一个好的搜索设计能够提高转化率，提升用户体验。下面我们来看看搜索设计的一些套路。

2018/10/21

搜索和筛选有什么区别？来看顺丰UED 的总结！

教程

搜索和筛选有什么区别？来看顺丰UED 的总结！

本文作者将从用户诉求、信息层级、界面表现三个层次上，试图对搜索和筛选两者的边界进行理清，并分别给出一些设计切入点。一、问题产生一次设计评审会上，作为设计师的我们和研发方针对「搜索和筛选到底是不是一回事？」这一问题产生了认知差异。

2018/09/28

如何搞定搜索框的视觉设计？来看这篇总结！

教程

如何搞定搜索框的视觉设计？来看这篇总结！

洋洋Leony：搜索框是我们经常使用的组件，但是我们在设计时通常只是粗略地参考别家的搜索框并没有仔细去思考搜索框样式之间的差异性，本篇整理和分析了在默认状态下的搜索框该如何选择外观样式，希望对大家有所帮助。目录外框展示样式外框圆角大小默认内容的对齐方式一、外框展示样式这里一共整理搜集了5种，分别为：填充色线框投影透明度无外框1. 填充色最常用的外框使用方案，通常选用与页面背景颜色反差较大的颜色作为搜索框的填充色，方便用户查找与识别。（例如：彩色页面背景下使用白色为填充色，白色页面背景使用浅灰色作为搜...

2018/08/22

交互基础小课堂！移动端「搜索功能」设计超全面总结！

教程

交互基础小课堂！移动端「搜索功能」设计超全面总结！

在我接触交互设计之前，我一直把搜索功能的设计看作「搜索框+提示词+删除icon+取消button」的设计，但其实看似简单的搜索框背后拥有十分复杂的场景，复杂的逻辑还有复杂的算法规则等。Peter Morville 有一本书《搜索模式》里面将搜索剖析得十分细，从搜索结构到行为模式到设计模式再到发现引擎都拆解开来一一讲解，不过偏 web端，而且有点复杂，建议阅读方法是只看目录，知道搜索功能设计有哪些要点，然后自己结合案例分析总结即可。这篇文章主要还是介绍移动端的搜索功能设计，根据用户对搜索框的使用场景，...

2018/07/08

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

产品

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

随着我们产品承载的内容越来越多，搜索功能在大多产品中都成了一个必不可少的功能。最初我们在看搜索框的时候，都会把它当作是一个常规的UI控件来对待，但随着我们对产品的用户体验越来越重视的情况下，搜索框在设计时还是有许多需要我们注意的地方。不管用户带着什么目的去使用搜索功能，其使用行为都是点击搜索框，弹出搜索中间页，输入搜索内容，最后查看结果页。

2018/01/04

搜索框设计

如何让搜索框的体验更好？我总结了这些设计套路！

教程

如何让搜索框的体验更好？我总结了这些设计套路！

无论网站或是App，搜索功能几乎成了标配，在其间占据着或轻或重的位置。一方面，搜索可以帮助用户节约时间、直达目的；另一方面，它也是用户主动表达意愿的一个窗口，可以帮助搜集用户需求、引导用户行为。在不同业务类型、不同场景下，搜索的定位和形式可能大不相同，有没有一种通用的思路，可以cover住各类搜索的体验设计呢？

2017/12/31

搜索框设计

这篇搜索功能设计的总结，帮你从产品的角度看问题

教程

这篇搜索功能设计的总结，帮你从产品的角度看问题

王M争：在之前的好几篇文章中，我都提到了设计师如果想完成自我提升，就应该懂产品。但是设计师如何去跨越那条“鸿沟”，学习站在产品的角度去构思设计，我却很少提及。不是我高冷，故意卖关子，因为我也不是很懂，所以也不敢乱说。

2017/11/04

淘宝京东这10个搜索细节，你最喜欢哪个？

教程

淘宝京东这10个搜索细节，你最喜欢哪个？

Jorri（译者）：618、双 11……有朋友说，买买买是 Ta 认识世界的方式。现在无论是电子产品还是生鲜食品，你都能上网买。

2017/09/08

资深交互设计师经常强调的「场景」到底是什么？

教程

资深交互设计师经常强调的「场景」到底是什么？

编者按：资深设计师经常强调的「场景」是什么？今天@拉瓦像阿拉蕾通过5个搜索的案例，带你认识场景的魅力。在toB类的系统设计中，表格页面应该是比较常用的用于展示数据信息的方式之一了。

2017/08/29

看似一模一样的搜索框，在设计师眼里有这么多细节！

教程

看似一模一样的搜索框，在设计师眼里有这么多细节！

彬彬：搜索几乎是现在所有网站，APP甚至操作系统的标配，不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。在不同的系统，不同用途的网站上搜索呈现的方式都有所不同。

2017/08/06

搜索框设计

深入浅出！5个方面解析移动端电商的搜索框设计

UI

深入浅出！5个方面解析移动端电商的搜索框设计

一个好的搜索功能设计能够很好的帮助客户直达想要的地方，实现完美的用户体验，今天分享几个搜素框的设计技巧，希望可以給大家带来启发。你无法去卖一个用户找不到的产品。搜索是用户最基本的行为，也是构建一个可盈利的app或网站的重要元素。

2017/08/02

搜索框设计

交互设计基本功！聊聊搜索框设计的8个技巧

教程

交互设计基本功！聊聊搜索框设计的8个技巧

@Mockplus原型设计：许多人可能认为搜索框不需要设计，毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们会立即寻找搜索框，已达到最终目的。

2017/06/27

这10个关键点，让你的搜索结果页看起来足够专业

产品

这10个关键点，让你的搜索结果页看起来足够专业

编者按：Nick Babich 的UI/UX系列文章是目前最实在的设计系列文章，设计规则、最佳实践和实战案例三者兼顾，颇为值得学习。今天的文章聊的是搜索结果页的设计，和上一篇《设计一个完美的搜索框，你需要注意这9个要素》结合起来看，风味更佳~搜索就像用户和系统之间的对话：用户将他们的信息需求提交上来查询，系统针对提交的信息进行检索，再从界面上给用户以反馈，呈现为一组结果。所以，搜索结果页是搜索的最重要的组成部分之一，它满足了用户对于特定信息的需求。

2017/03/05

实例分析！聊聊UI界面中搜索入口的设计

UI

实例分析！聊聊UI界面中搜索入口的设计

搜索几乎是现在所有网站，APP甚至操作系统的标配，不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。在不同的系统，不同用途的网站上搜索呈现的方式都有所不同。

2016/11/01

专业干货！一个特别好用的搜索框必须考虑的五个方面

教程

专业干货！一个特别好用的搜索框必须考虑的五个方面

编者按：今天@励定洲这篇译文开门见山，从搜索框的可见性、范围搜索、局部搜索、高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能，内附大量实例（想知道谷歌搜索有哪个交互不好吗），结合实践，深入浅出，帮你掌握在线搜索的这五个方面。可见性在UX领域，可见性是其根本概念之一：由物体的外形特征推导出其行为上潜在的可能。比如大门上的推板意味着门是可以推的；把手则说明门是可以拉的。

2015/10/04

30有吸引力的搜索框设计PSD免费下载

下载

30有吸引力的搜索框设计PSD免费下载

网页中其实有个很重要的设计元素常常被大家忽视，呃！它就是搜索框！别看一个搜索框就是一个小盒子、一个小方框！

2013/04/12

没有更多内容了

热门频道

设计灵感

支持与服务

优设微博

@
优设AIGC
400W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营