使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条轮播图设计原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮...

使用轮播图对于在有限空间来提升用户阅读效率是很有用的，但现有大部分情况轮播图设计得并不好用。

遵守本文中提到的 10 条轮播图设计原则，可以提使用高轮播图的用户体验，在这篇文章中，作者首先会通过实例来过一遍 10 条 轮播图设计 原则，然后说明为什么以及怎样区别对待桌面端和移动端的轮播图，在文章最后，列举出一种相比于轮播图更好更易用的展示方式。

更多 轮播图 干货：

用好这4个设计建议，让你的轮播图点击率更高！ @腾讯ISUX - Jana：轮播图（Carousels）这样的交互方式，在web时代似乎已经司空见惯。

阅读文章 >

一、实际运用中的轮播图 在美国一份针对 50 家顶级零售电商网站的统计中，发现轮播图被广泛运用于电商网站：PC 端 52%的电商网站使用轮播图，而与此同时移动端 56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

这篇文章的重点旨在讲如何通过设计和交互细节，使首页轮播图更易用，而不是关注于轮播图本身应该放那些内容。此时，我们轮播图的内容应该注意以下几点：

如果轮播图的内容与网站本身不相关，且没有经过精心设计和使用高质量的图片，那么用户体验会很糟糕 —— 轮播内容应与网站主题相关 如果轮播图的内容看起来太像广告，那么用户会直接忽视它，即使轮播图的内容与用户所需相关 —— 轮播图内容不能过于商业化 轮播图的一个主要优势就是可以放专门设计过的图片，那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果，因为那些经过设计的高清大图能在首页给用户留下一个好印象，在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —— 轮播图片要精心设计 二、轮播图设计十原则 那么，怎样在实际运用中做好轮播图设计呢，作者将 10 原则分成了四个部分来进行阐述：

1. 滑动（轮播）顺序和点击后的落地页

大部分用户不会看完所有的首页轮播图，即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面，换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。

因此，只要轮播图不是展示网站特点和展示网站产品的唯一方式，那么用户即使不看完所有轮播图问题也不大。

我们之前做的轮播图可用性研究，发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了，而在手动轮播图网站里轮播图只会停留在第一帧，除非用户主动去找不然他们不会注意到那些有用的信息。所以，即使完善轮播图的细节设计是一个很好的想法，但这并不能成为用户获取网站信息的唯一方式。

两条原则：

原则 1： 轮播图的展示顺序特别是第一帧非常重要； 原则 2：把轮播图当成展示网站重要信息和特点的一种补充手段而非唯一方式。 2. PC 端自动轮播逻辑

自动轮播形式能够保证轮播图的每一帧都有一定的曝光量，并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%)，这是因为：像动态图片一样，自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来，因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读，此时要注意三个极其重要的自动轮播图设计原则：

原则 1：自动轮播不要太快

如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容；如果轮播太快那么用户就会因为不感兴趣的轮播内容而被骚扰。

轮播图的展示时间应该根据轮播图的文案内容来决定，尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放，这就意味着每个轮播图的展示时长都是独立的。

其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。

原则 2：用户 hover 内容时应该暂停自动轮播

用户鼠标的位置与他们在当前页面关注的内容有内在联系 ：

当用户鼠标悬停在某一帧轮播图时说明他们对它的内容感兴趣； 当用户悬停时轮播图暂停的第二个理由是防止用户在点击想看的那一帧轮播图时自动轮播到下一帧 ； 如果用户意识到他们点击后跳转到一个无关的页面那么用户会感觉很气恼和失落，并且会不得不重新回到主页，然后再次点击原来想要的那一部帧轮播图。 原则 3：用户有任何主动交互行为时应该停止自动轮播

当用户主动点击轮播图按钮来看前一帧或者下一帧内容时，这种行为是有意进行的并且 (当前轮播内容)不应该被改变，即使用户决定去查看主页的其他内容。

点击行为是用户的主动响应行为，它是反应用户意图和兴趣的一个强烈的信号。因此，当用户主动对轮播图进行交互时轮播图应该停止自动轮播，因为用户极有可能是有意要查看某一帧的内容。

3. 轮播图控件应该具备两项功能

原则 1：轮播图控件提示当前图片所在帧数位置

提示用户有更多帧数的图片，让用户有更多探索的可能； 提示用户轮播图到底有多少帧图片； 当轮播图自动播放到最后一帧时提示用户将循环到第一帧。 比较常用的设计是在一张五彩斑斓的图片上设置一组小点，但这通常会很难识别，把这些点放置在图片外面会好一点。

原则 2：轮播图控件允许用户进行前后帧内容的切换

这是使用箭头是比较好的方法，然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限，会导致用户容易忽视这些控件，那怎样避免进行前后切换的箭头被用户忽视呢：

展示部分下一帧或前一帧图片； 根据所识别的背景图片的颜色和明度进行相应的颜色改变。

通过展示前后一帧内容的部分内容，用户很容易感知到可以进行切换。

除了传统的设计样式像是用来感知位置的小点和前后切换的箭头，“table of contents”这种设计样式同样也能起到一样的效果 。

首先，它结合了位置感知和手动切换的控件为一个整体的 UI 组件； 其次，它能为用户提供了一定的轮播信息线索，让用户知道接下来会看到什么，因而可以让用户更有效的进行跨帧的切换。

4. 在移动端一切都如此不同

触屏设备上的轮播图与 PC 端有着很大的不同，之前列举的PC端上的交互逻辑在移动设备上是无效的，并且有很多新的规则：

原则 1：移动端没有 hover 状态因此尽量避免自动轮播

hover 状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号，这意味着如果没有 hover 状态来激活自动轮播暂停，那么自动轮播在移动设备上的使用就不那么合适了，自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换，这会使用户跳转到错误的页面。

原则 2：移动端支持滑动操作

用户在触屏设备上的操作预期就是滑动来进行导航切换 传统的轮播图操作控件同样重要（如进行前后切换的箭头和让用户感知位置的小点） 原则 3：移动端屏幕的图片需要特别优化

许多在 PC 端上使用的轮播图设计稿是直接缩放后在移动端上重复使用，这造成在移动端屏幕上许多文案的阅读性较差； 移动端用户对加载较慢的轮播图更没有耐心，用户在 PC 端可以边花费 1 到 5 秒钟来等待轮播图刷新边浏览网页的导航栏和其他信息，而在移动端有限的屏幕大小下用户只能看到轮播图 现在我们来总结一下：

三、轮播图的替代方案 单纯展示静态内容作为在主页的独立部分是替代轮播图的一种好方式：

它没有轮播图的那些用来控制切换图片的控件，因而尤其适合在移动端使用； 它高度符合用户与首页的交互方式，70%的移动端用户会下意识的拖动并浏览首页的内容，来获知他们来到了什么类型的网站； 相比于使用轮播图要遵守的那 10 条原则，它使用起来更加便捷，那些商家和公司会越来越认识到布局设计上的紧凑会有多重要。 更多设计原则：

这 7 个经典的用户体验设计原则，你可能用错了 编者按：我们看过太多关于设计原则总结梳理的文章，这篇出自 WebDesignDepot 的编辑 Ben Moss 的文章则是对这类文章的有效补充，他详细拆解了设计原则「不适用」的情况，用实际的分析和讲解避免设计师盲从「设计原则」： 在设计过程中，用户体验法则是非常宝贵的工具，它们为设计

阅读文章 >

 

本文全面总结了 B 端产品中的筛选功能设计。之前也有总结一篇简洁版的关于筛选的文章，回头查看原来总结的文章时才发现确实之前总结的有点太过简洁，很多筛选类型和使用场景都考虑得不够全面，这也是之前对该功能不够了解，局限于自己在工作中常见的场景，对于不了解的场景自然就不清楚。由于接触得比较片面，了解得不够全面，导致之前...

本文全面总结了 B 端产品中的筛选功能设计。之前也有总结一篇简洁版的关于筛选的文章，回头查看原来总结的文章时才发现确实之前总结的有点太过简洁，很多筛选类型和使用场景都考虑得不够全面，这也是之前对该功能不够了解，局限于自己在工作中常见的场景，对于不了解的场景自然就不清楚。由于接触得比较片面，了解得不够全面，导致之前总结的也不够完整。

更多 筛选功能 设计：

如何选择筛选控件？5000字+3个落地案例详细拆解 这篇文章又是小 5000 字，提供一些关于筛选控件选择的解决思路，同时辅助三个实际案例帮助理解。

阅读文章 >

产品本身也是随着实际业务场景的变化，从而考虑设计不同的形式来达到该功能的使用。产品需要优化，交互和布局同样需要优化，所以在 B 端产品中并不是一个同样的功能就仅限于只有一种解决方案。

对于产品而言，只有参与的项目越多，设计和思考的场景越全面，了解的产品越多，才能更好的掌握一个功能的多种类型和使用场景，这一次能够在原来的基础上更加全面的总结同一个功能的类型和场景，主要是在工作中也有遇到类似的业务场景，加上对其他产品的体验，从而让我更加全面的了解到该功能的多样性。

二、筛选的多种类型及排版布局使用场景 以下我对自己在实际工作中运用到的多种筛选类型再次做了总结，不同的筛选类型对应的排版布局各不相同，并且在实际业务中的使用场景也具有差异，下面我还是会通过不同的类型列举不同的场景案例，便于理解和运用到实际工作业务中。

现在总结文章的习惯是将需要总结的文章通过思维导图的形式画出整体的导线，这样让自己的脑海里面形成一个大致的方向，也是一个整体的构思，后期只需要根据导线一步一步往下描述具体的内容和案例即可。这个总结方式也可以运用到工作任务中，例如：当接到一个设计任务时，先理解该任务的整体方向，再细化每一个细节展开设计，这样能避免遗漏也能让自己对整体的把握更明确。

筛选的类型我分为以下四大类：

常规搜索筛选 按条件筛选 分类 tab 筛选 高级筛选

筛选的排版布局我分为以下三大类：

平铺选项筛选 隐藏选项筛选 折叠选项筛选

筛选的类型是根据业务场景而定，筛选的排版布局是根据筛选的类型而定，筛选的使用场景是根据实际业务场景而定，所以首先我们需要理解清楚真实的业务场景，再通过分析选择适合的筛选类型，当已经知道了筛选类型，我们只需要根据筛选的条件和页面的交互及空间利用情况选择合适的布局方式即可。

1. 常规搜索筛选

常规的搜索筛选不难理解，即常见的搜索框，根据输入文本关键词进行模糊搜索或者根据记忆准确输入完整的信息，精准搜索。文本关键词搜索需要通过用户的记忆来完成，只有当用户对需要搜索的内容（关键词）有记忆才能完成搜索筛选，搜索的结果范围根据关键词的精准度而定。

当搜索的关键词少且模糊时，搜索的结果数量就会很多，需要用户在众多的结果中再次查找自己的目标值，难度较大。而如果搜索的关键词多且准确时，搜索的结果数量就会较少，用户只需要在少量的结果集中查找自己的目标值，难度较小。

（注意：搜索结果的数量也会受到原本数据量的影响。）

例如在微信公众号发表记录中的搜索，当只输入“设计”关键词时，搜索结果一共有 202 条，需要在这 202 条数据中找到自己的目标值是比较难的。

当我将关键词改为“设计来源于生活”后，搜索结果只有 14 条，这样我在查找我的目标值时就变得容易很多。所以如果用户具有更深的记录，能够输入更多的关键信息，就可以缩短查到的时间，能更快的找到自己的目标值。

案例实操

下面我再列举一个关于搜索筛选在 B 端产品中的运用：（此例子将运用到后面所有案例，以下案例只作为简单举例，总数据量为 10 条，实际业务根据真实业务数据量而定）

需求背景：客户 A 需要在文件清单表格中，根据清单名称查找目标值。

设计要点：如果只需要在清单中通过清单名称来查看目标值的话，这里就可以选择直接使用搜索筛选来完成，因为清单名称复杂不清晰，是不确定的值。所以直接在表单上方加一个搜索框，用户只需要输入关键词即可完成搜索。

当输入关键词“策略”后，我们得到了三条名称带有关键词“策略“的数据结果，减小了数据范围，让用户在查找目标值时更加容易。

（注：搜索按钮根据数据量的多少决定是否需要，当数据量较多时，列表刷新负荷较大，建议增加搜索按钮，反之则不加）

2. 按条件筛选 按照条件筛选是对于数据内具有明确的条件分类，在筛选条件中将这些类单独作为筛选的条件，当选择某一个选项作为筛选条件时，筛选出现的数据结果集将是同类数据。筛选类型又分多种选择方式：下拉框选项筛选、平铺选框筛选、表头筛选、组合筛选。

下拉框选项筛选：

类别选项筛选，根据具体的选项在小范围内筛选。

下拉框选项展示提前预设好的选项，用户只需要选择需要筛选的类型，即可快速筛选出这类数据的数据结果集。此类筛选优点在于能快速筛选同类数据，不需要用户过多的记忆。缺点是无法快速达到精准筛查的效果，如果需要达到精准筛选的效果需要同时选择多项。

案例实操

需求背景：客户 A 想要快速筛选文件清单中发布状态为“审批中”的数据，能够快速统计审批中的数据量，并且完成后续任务操作。

设计要点：客户需要根据文件清单的状态快速筛选数据，文件的状态一共分为三类：已发布、审批中、未发布，虽然客户只说需要筛选审批中的数据，但是另外两个状态的数据也同样有筛选的场景，所以我们直接将状态类型作为选项，客户使用时只需要选择状态类型即可快速完成筛选。

（注：搜索按钮根据数据量的多少决定是否需要，当数据量较多时，列表刷新负荷较大，建议增加搜索按钮，反之则不加）

平铺选框筛选：

下拉框选项筛选的另外一种展示形式，将选项平铺展示，类别选项筛选，根据具体的选项在小范围内筛选。

案例实操

需求背景：客户 A 想要快速筛选文件清单中发布状态为“审批中”的数据，希望能够直接看到文件的状态类型，快速选择类型。

设计要点：这次客户的需求点是在上一个方案中提出的优化，由于上个方案是将状态选项放在下拉框中的，导致客户不能直观的看到状态选项，需要点击下拉框后才能看到，原操作路径为：点击展开下拉框→选择审批中选项→点击搜索。

为解决状态选项不直观的问题，我选择将状态选项直接平铺展示在外面，这样客户就可以直观的看到所有的选项。并且操作路径变成了：勾选审批中选项→搜索，操作路径和操作步骤也得到了优化。

表头筛选：

将筛选选项内置在表头中（更好地利用页面空间，隐蔽不直观）。当页面空间有限时，可以考虑此方案。另外当表格表头字段数据较多时，需要横向滑动查看数据时，建议还是直接将筛选条件单独放在外面。或者当需要筛选的选项太多时，表头字段都能筛选时，也可以考虑放在表头中。

案例实操

需求背景：客户希望界面更加干净、整洁，并且能够达到根据状态筛选的功能。

设计要点：平铺选项的方案直观，但是平铺与后面的搜索框排版在一起时，整体页面看着比较零散。将筛选选项直接放在表头字段后，通过 hover 展示下拉框，点击选项后不需要再次点击搜索按钮，直接进入搜索。操作路径为：图标 hover→选择选项。

这个方案缺点在于筛选的选项不直观，但是操作点击步骤只有一步。

组合筛选：

多种筛选类型组合为筛选组，组合筛选一般是是筛选的条件较多，选项较多时，将不同类型的筛选组件结合为一个筛选组。用户在使用时，只需要将所有的条件输入/选择后，点击搜索即可完成筛选，得到的结果将是多个条件组合后的并集/合集的值。

案例实操

需求背景：客户需要同时满足根据名称和编号关键词搜索筛选、状态类型筛选、责任人/责任部门筛选、类型和时间区间筛选。也就是说客户想要将表格中所有的表头字段作为筛选条件。

设计要点：由于这里包含多种筛选类型，名称和编号是关键词筛选，发布状态和、责任人、责任部门、类型是选项筛选，发布日期是时间区间筛选。所以我们需要采用组合筛选的模式。

（右侧箭头：组合筛选占据空间较大，可考虑展开和收起筛选组件）

延展思考：

这里的筛选条件都来自于表头，并且表头字段一屏能展示完整，我们也可以将表头部分字段筛选直接放在表头中，采用搜索筛选+表头筛选的模式组合。

（注：筛选类型选择需要根据实际业务场景而定，选择适合真实业务场景的，此处只是举例延展。）

3. 分类 tab 筛选 分类 tab 筛选在软件中一般是作为系统的全局搜索才会使用到，主要是通过搜索关键词后，分类展示不同类别下带有该关键词的数据信息。等同于全局搜索是一个大的漏筛，通过输入关键词后，将符合该范围内的数据筛选出来，并且分类展示，用户再到每个分类下再次通过其他条件筛选，从而得到自己的目标值。

（此类型案例不适用，另举例说明）

例如：在飞书文档中，通过搜索关键词后，分别展示该关键词在文档、表格、多维表格、思维笔记、文件五大类别中展示结果集，用户通过类别区分，再缩小范围寻找目标值。

4. 高级筛选

筛选条件自定义组合（灵活且占空间小）。高级筛选占用空间比较小，用户可以根据需要自定义筛选条件，不必将所有筛选条件都展示在界面中。使用更灵活，界面更美观。

案例实操

需求背景：客户需要同时满足根据名称和编号关键词搜索筛选、状态类型筛选、责任人/责任部门筛选、类型和时间区间筛选。并且页面简洁，筛选灵活度高。

设计要点：筛选的条件较多，并且还需要界面能够简洁，筛选灵活度较高，所以我们可以选择高级筛选模式，虽然这里可以直接用表头筛选，但是表头筛选的入口太多，不易查找，所以就采用高级筛选统一入口。如下图：

方案一：下拉选择式

通过下拉展示可筛选的条件类型，再根据类型选择具体的筛选条件，从而得到结果值。

交互细节：点击筛选→选择需要筛选的条件类型→选择具体的值

方案二：条件组合式

通过自定义条件，并且自定义筛选结果值。

当选择发布状态等于审批中中时，筛选的结果为数据中所有发布状态为审批中的数据。 当选择发布状态不等于审批中时，选的结果的数据中不包含状态为审批中的数据，只包含已发布和未发布的数据。

结语 此次案例并非真实案例，只是为了方便大家理解每一种筛选类型而列举的简单案例，实际工作需要根据实际需求及业务场景而选择最适合需求的类型。

欢迎关注作者的微信公众号：「设计小余」

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、着陆页设计范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项人工智能头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、 着陆页设计 范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项 人工智能 头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年11月精选实用设计干货合集 大家好，11 月的第 1 波设计干货来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费的多功能截图美化设计工具 https://gemoo.com/tools/screen-capture

Gemoo 是一个完全免费的截图优化和设计工具，它足够轻量级，完全免费，而且内置多个功能，可以帮你将粗糙的截图变得细致而漂亮，比如可以快速添加注释、添加统一背景和放大细节、添加营销元素、无干扰式截图，另外它还能作为灵感搜集工具来使用。

2、免费着陆页设计范例大合集 https://landings.dev/inspiration/

如果你日常做网页或者页面设计比较多，那么可能会比较需要一些大公司、大团队做的着陆页设计范例。那么这个网站就能够满足你日常的灵感需求，同时，网站提供更为深入的筛选功能，可以选择深色系或者浅色系，主色包含哪些颜色等等。选中感兴趣的页面之后，还可以点进去查看详细的配色、官网链接和页面具体的设计。

3、轻量级图像编辑器 Tinykiwi https://www.tinykiwi.co/

很多图像设计是的工作完全用不到 PS 这样大型的图形设计软件，所以大量的轻量级图形设计工具诞生了，Tinykiwi 就是其中之一，它的基础功能全部免费，常见的设计功能也都齐全，如果你的需求只是简单的排版处理，那么这个工具可以作为日常平面设计的一个备用方案。

4、免费的 Figma 可用无限插图组合 https://sliday.gumroad.com/l/illustrations-kit-for-figma

Figma 用户有福了。这是一个专门为 Figma 用户准备的插画生成套件，其中包含 300 多个不同的组件，当你将这个免费的素材导入到 Figma 之后，可以根据内置的引导快速生成多种多样的插画内容，这套插画套件包含的插画素材有角色、背景、实际物品还有抽象元素，相当丰富，足以应对绝大多数的场景和需求。限时免费，记得下载！

5、免费的浏览器在线建模平台 https://www.womp.com/

如果你曾经被各种 3D 软件丰富的菜单和海量功能吓退过，那么这个名为 Womp Alpha 的在线3D建模工具，应该会让你感觉更加轻松吧？它没有大量的按键，它的建模方式更接近于「雕刻」，你只需要按照自己的想法，拿着鼠标一路划拉就能够构建出你喜欢的物品或者角色。

6、免费的超萌高素质插画图库 https://popsy.co/illustrations

这是 Notion 和 Popsy 一通出品的一套免费矢量插画，完全免费可以商用，不过使用的时候，需要标识出来自 popsy.co 。这套图库当中每幅插画都包含有若干契合的场景关键词，并且其中的主色调都可以快速进行定制，你所需要做的就是搜索关键词，获得你需要的插画即可。另外值得一提的是，popsy 本身也是一个快速的网站构建工具，你如果使用 popsy 构建网站，那么可以更快调用这套插画图库。

7、人工智能生成的高素质渐变色 https://gradients.ray.st/

渐变色素材绝对是日常设计中最为百搭好用的一类素材，而这波借由 AI 生成的渐变素材素质就相当高，总计有 52 款，你可以在你的设计项目当中直接使用。这波素材使用的是大尺寸 PNG 格式文件，挑选你喜欢的类型，直接下载即可。

8、人工智能头像生成服务 https://www.profilepicture.ai/

这个真的就是为了制作头像而生的人工智能生成服务，而且这项服务可能比别的同类服务更加「个人化」，你所需要做的，是上传至少 10 张包含有你的面部和身体特征的的照片，然后会以这些图像数据为基础，经过可能超过 3 个小时的训练，帮你生成超过 120 张各种不同风格、不同角度、不同类型的头像照片。这是一项收费服务，不过对于有这类需求的同学而言，可能也是值得的。

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、着陆页设计范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项人工智能头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

大家好，11 月的第 2 波设计干货来了！这一期干货合集有很多相当不错的免费素材，其中包含截图美化工具、 着陆页设计 范例参考合集、轻量级的图像编辑工具、插画图库、还有特别容易上手的3D雕刻软件。此外，这次推荐的唯一付费服务，是一项 人工智能 头像生成服务，但是仔细看看它提供的服务内容，也相当超值哦。

当然，在此之前记得看看往期干货中有没有你感兴趣的素材：

第一波！2022年11月精选实用设计干货合集 大家好，11 月的第 1 波设计干货来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费的多功能截图美化设计工具 https://gemoo.com/tools/screen-capture

Gemoo 是一个完全免费的截图优化和设计工具，它足够轻量级，完全免费，而且内置多个功能，可以帮你将粗糙的截图变得细致而漂亮，比如可以快速添加注释、添加统一背景和放大细节、添加营销元素、无干扰式截图，另外它还能作为灵感搜集工具来使用。

2、免费着陆页设计范例大合集 https://landings.dev/inspiration/

如果你日常做网页或者页面设计比较多，那么可能会比较需要一些大公司、大团队做的着陆页设计范例。那么这个网站就能够满足你日常的灵感需求，同时，网站提供更为深入的筛选功能，可以选择深色系或者浅色系，主色包含哪些颜色等等。选中感兴趣的页面之后，还可以点进去查看详细的配色、官网链接和页面具体的设计。

3、轻量级图像编辑器 Tinykiwi https://www.tinykiwi.co/

很多图像设计是的工作完全用不到 PS 这样大型的图形设计软件，所以大量的轻量级图形设计工具诞生了，Tinykiwi 就是其中之一，它的基础功能全部免费，常见的设计功能也都齐全，如果你的需求只是简单的排版处理，那么这个工具可以作为日常平面设计的一个备用方案。

4、免费的 Figma 可用无限插图组合 https://sliday.gumroad.com/l/illustrations-kit-for-figma

Figma 用户有福了。这是一个专门为 Figma 用户准备的插画生成套件，其中包含 300 多个不同的组件，当你将这个免费的素材导入到 Figma 之后，可以根据内置的引导快速生成多种多样的插画内容，这套插画套件包含的插画素材有角色、背景、实际物品还有抽象元素，相当丰富，足以应对绝大多数的场景和需求。限时免费，记得下载！

5、免费的浏览器在线建模平台 https://www.womp.com/

如果你曾经被各种 3D 软件丰富的菜单和海量功能吓退过，那么这个名为 Womp Alpha 的在线3D建模工具，应该会让你感觉更加轻松吧？它没有大量的按键，它的建模方式更接近于「雕刻」，你只需要按照自己的想法，拿着鼠标一路划拉就能够构建出你喜欢的物品或者角色。

6、免费的超萌高素质插画图库 https://popsy.co/illustrations

这是 Notion 和 Popsy 一通出品的一套免费矢量插画，完全免费可以商用，不过使用的时候，需要标识出来自 popsy.co 。这套图库当中每幅插画都包含有若干契合的场景关键词，并且其中的主色调都可以快速进行定制，你所需要做的就是搜索关键词，获得你需要的插画即可。另外值得一提的是，popsy 本身也是一个快速的网站构建工具，你如果使用 popsy 构建网站，那么可以更快调用这套插画图库。

7、人工智能生成的高素质渐变色 https://gradients.ray.st/

渐变色素材绝对是日常设计中最为百搭好用的一类素材，而这波借由 AI 生成的渐变素材素质就相当高，总计有 52 款，你可以在你的设计项目当中直接使用。这波素材使用的是大尺寸 PNG 格式文件，挑选你喜欢的类型，直接下载即可。

8、人工智能头像生成服务 https://www.profilepicture.ai/

这个真的就是为了制作头像而生的人工智能生成服务，而且这项服务可能比别的同类服务更加「个人化」，你所需要做的，是上传至少 10 张包含有你的面部和身体特征的的照片，然后会以这些图像数据为基础，经过可能超过 3 个小时的训练，帮你生成超过 120 张各种不同风格、不同角度、不同类型的头像照片。这是一项收费服务，不过对于有这类需求的同学而言，可能也是值得的。

这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。所以我自己出一版，希望能帮助你们一次性解决这些问题。

这是一篇酝酿了比较久的内容了，即讲解 B 端 设计规范 和 组件库 的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。

所以我自己出一版，希望能帮助你们一次性解决这些问题。

之前的UI零基础系列也值得一看：

零基础 UI 入门七：教你快速上手APP适配 这是移动端规范的最后一篇，关于移动端适配相关原则的解析。

阅读文章 >

一、B端项目中的设计规范 1. 设计规范和组件库

B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。

所以，首先我们要先理清楚什么是设计规范和组件库。

设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。

换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。

组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。

严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。

组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。

对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。

所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。

设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：

任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。

项目规范是一个典型的 “**项目团队可以没有，但你不能不会**” 的基本招聘要求。

2. 开源组件库和项目规范

在今天搭建 B 端项目规范时，新手还有一个普遍的问题：

项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？

初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。

它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……

这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。

比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。

再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。

前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。

开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。

同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。

下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。

二、软件中的规范功能解析 1. 和规范有关的功能解析

之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。

但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。

所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。

① 样式功能

样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。

而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。

而每个样式分类独立生成记录的好处，就是可以为了方便让设计师自由进行样式的组合。比如填充制定了红、蓝、绿三种，投影制定了深、浅两种，使用者可以自由搭配这些选项。

② 响应式功能

响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。

例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。

或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。

图例，右下角放个问号，两个画布高度，画布不用太大

软件中的响应式并不等同于广义的网页响应式技术，它不能实现完整的删格布局和流体响应，只能帮助我们来解决一些最基本的响应需求，这在后面的章节中再具体介绍。

③ 自动布局功能

自动布局功，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。

它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。

自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。

掌握自动布局是 UI 设计类软件的灵魂，后面我们会解释它的具体功能和应用方法，然后再进入组件的具体使用环节，分析对应的实际应用场景。避免你们无法分清自动布局和组件的功能。

④ 组件功能

组件功能在不同软件有不同的叫法，如 Symbol、Component、Element 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。

例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。

在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。

组件的应用除了这种最基础的应用以外，还包含了很多特殊的功能，如将低级组件合并成一个高级组件的嵌套，或者 Figma 前两年发布的变体（Vriants），可以将一个组件的不同状态聚合到一起，通过属性面板来切换相关的状态。

Figma重大功能更新！学会用「变体组件」让设计效率翻一倍！ Figma作为一个线上协作设计平台，因其强大的组件功能，越来越受到设计团队的青睐。

阅读文章 >

组件功能是 UI 类软件最复杂的功能，它不仅本身设置很丰富，同时也可以结合样式、响应、自动布局，让本来死板的组件变得更灵活可控，应对复杂的设计环境。

在后面我们会针对这些功能一一进行解释。

结尾 理解 B 端设计规范的存在价值，和软件中的 4 个基本功能概念，那么后面学习起来就会变得很容易。

欢迎关注作者的微信公众号：「超人的电话亭」

这是一篇酝酿了比较久的内容了，即讲解 B 端设计规范和组件库的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。所以我自己出一版，希望能帮助你们一次性解决这些问题。

这是一篇酝酿了比较久的内容了，即讲解 B 端 设计规范 和 组件库 的分享。这几年网上出了不少类似的分享，虽然都写得很全，都还是觉得不够满意，缺了些细节。

所以我自己出一版，希望能帮助你们一次性解决这些问题。

之前的UI零基础系列也值得一看：

零基础 UI 入门七：教你快速上手APP适配 这是移动端规范的最后一篇，关于移动端适配相关原则的解析。

阅读文章 >

一、B端项目中的设计规范 1. 设计规范和组件库

B 端项目设计中，设计规范和组件库是一个绕不过去的槛。作为专业的 B 端设计师，必须有自己完成设计规范和组件库的能力。

所以，首先我们要先理清楚什么是设计规范和组件库。

设计规范是项目设计中要遵守的要求、细节、准则，规定了诸如色彩、字体、栅格、间距、圆角等要素的规则，这些内容都是可以在大量设计元素中应用的细节。

换句话说，设计规范就是提取在项目中会广泛使用的要素，并进行统一制定的过程，防止设计师在设计过程中随意发挥，导致项目统一性的崩坏。

组件库，是通过梳理项目中应用到的按钮、开关、滑块、日历、下拉菜单等控件、组件的设计样式、状态、交互规则，再将它们统一复用到项目的不同页面中去。

严格意义上来说也是设计规范的一部分，是基础规范的进一步延伸，但还是单拎出来讲。因为组件库的应用不仅仅是设计统一性的问题，还融合了 ”组件化“ 的编程思路在里面。

组件化：将复杂系统拆分成不同功能独立的模块并重组的过程，且每个模块包含对应的状态和属性。

对于程序员来说，一个项目就是若干功能模块的合集，往往是先开发这些功能模块，再搭建对应的完整页面，而不是看一个页面开发一个页面。

所以制定完善的组件库，除了提升设计质量外，还可以很好的提升开发效率，推进项目进度。

设计规范和组件库的搭建，就是一个由下至上的设计链路，通过对细节的制定来实现最终的项目表现层。可以借助广为流传的分子原理来理解：

任何成熟的 B 端项目都应该具备自己的设计规范和组件库，虽然有很多小团队在前期推进项目时，因为各种问题没有搭建或落地设计规范，但并不代表他们在招人的时候没有要求。

项目规范是一个典型的 “**项目团队可以没有，但你不能不会**” 的基本招聘要求。

2. 开源组件库和项目规范

在今天搭建 B 端项目规范时，新手还有一个普遍的问题：

项目规范和开源框架的规范有什么区别，如果选了一套开源框架做设计，设计师不就不用做规范了？

初级设计师会这么想并不奇怪，因为以 AntDesign 为首的开源框架做的实在是太完善了，不仅囊括了整套的 Web 色彩系统，还有各类常用的、不常用的交互组件。

它们不仅仅提供了相关的设计源文件，也给开发提供了对应的代码和接口，方便程序员应用。看起来我们只要拼拼组件就可以和开发无缝衔接了……

这显然是不可能的，正是因为开源框架太全面，可以产生无数种可能，我们才更应该整理自己的项目规范。就像我前面已经提到过的，设计规范是种 ”限制“，而不仅仅是设计风格的简单沉淀。

比如，不管你选了哪套开源框架，它提供了多少种色彩，你的项目都应该有自己的项目主色，适当的辅助色彩，而不可能把它的整套配色都应用进去。所以，即使颜色没有跳出原有色彩系统，也要筛选出你用到的颜色进行记录。

再比如，开源框架的很多控件，都提供了好几种样式和方案，并不是让你全部都用进去，而是选择自己觉得合适的。所以你每个控件中选择的方案，也需要做记录，统一后续的页面设计。

前面只是记录选择，都还比较简单，而最关键的问题在于，开源框架的组件不可能完美符合项目的全部需求。必然要在原有的基础上作出大量细节的优化，或者创建出新的业务组件出来，所以设计师还是要把这些内容整理出来。

开源框架，就是给我们提供了一个比较全面的设计范围，让我们站在别人的肩膀上做选择，提高设计规范的制作效率，而并不是让我们直接躺平，复制黏贴就可以了。

同时，设计规范和组件需要在软件中进行运用，我们也同样不能直接使用官方提供给我们的组件库展开自己的项目设计，要根据自己项目的规范独立进行搭建和使用。

下面，我们就要根据设计规范的内容，来讲解如何结合并使用即时设计、Figma 的相关功能。

二、软件中的规范功能解析 1. 和规范有关的功能解析

之所以 UI 设计软件能取代 PS 独立发展，就是因为 UI 设计中包含大量需要复用和批量修改的功能。而这些功能和设计规范有非常大的联系，也是 UI 设计中项目规范能被落地实践的重要保障。

但因为 Figam 和即时等次时代 UI 设计软件提供了越来越多的功能，用来支持设计规范的实践，且这些功能可以相互交叉、重叠、组合，导致很多人在前期学习中会被软件功能绕晕，导致很多人没有理解这些功能意义和价值，更不知道如何在项目中具体实践。

所以，我们先将这些功能整体理解一遍，再逐一来对它们的使用规则和应用场景进行拓展。

① 样式功能

样式功能是用来记录图层样式设置的功能。简单点理解，就是记录图层右侧的属性设置的功能。正常我们选择一个基础图层，软件右侧的属性面板会将图层样式拆解成若干的类别，包括填充、描边、字体、阴影、模糊。

而样式功能，就是帮助设计师对不同的样式类别进行记录和复用的过程，它会直接将该分类内的相关参数值记录下来，并进行命名，方便后续的调用。

而每个样式分类独立生成记录的好处，就是可以为了方便让设计师自由进行样式的组合。比如填充制定了红、蓝、绿三种，投影制定了深、浅两种，使用者可以自由搭配这些选项。

② 响应式功能

响应式功能是让图层随上级编组尺寸变动而自适应的功能，方便我们在修改组件的大小时不用重新调节里面的元素细节。

例如设计一个卡片，可以通过响应式的设置，让头部的元素左右对齐，下方的文本区域自动拓展，保持卡片的内间距不变。

或者页面右下角悬浮按钮，也可以通过响应式设置始终处于页面底部，这样我们在增加页面高度的时候不用重新设置该元素的 Y 轴位置。

图例，右下角放个问号，两个画布高度，画布不用太大

软件中的响应式并不等同于广义的网页响应式技术，它不能实现完整的删格布局和流体响应，只能帮助我们来解决一些最基本的响应需求，这在后面的章节中再具体介绍。

③ 自动布局功能

自动布局功，是通过前端布局思路来设置元素布局方法自动排版功能，是 Figma 开发的最重要的功能，也是让 Sketch 不再成为 B 端设计首选的核心因素。

它的主要功能如根据内容自动完成尺寸变更，并列排版和顺序的变更等。

自动布局可以极大的提升设计效率，正因为自动布局的出现，才让项目组件库可以真正被运用和落地实践起来。

掌握自动布局是 UI 设计类软件的灵魂，后面我们会解释它的具体功能和应用方法，然后再进入组件的具体使用环节，分析对应的实际应用场景。避免你们无法分清自动布局和组件的功能。

④ 组件功能

组件功能在不同软件有不同的叫法，如 Symbol、Component、Element 等，主要是将指定的图层或编组生成一个新的编组单位（类似智能对象），在后续设计中进行复用。

例如设计一个按钮、开关，我们只要将它们生成为组件，就可以在后续设计中快速从组件库里拖拽到设计页面中，不用重新画一遍，并且支持批量修改。

在组件应用中，生成的第一个组件也叫父级组件，其它调用它的组件都是它的子组件，这是一个非常清晰的从属关系。如果我们修改父级组件的内容，所有子组件都会被统一修改。

组件的应用除了这种最基础的应用以外，还包含了很多特殊的功能，如将低级组件合并成一个高级组件的嵌套，或者 Figma 前两年发布的变体（Vriants），可以将一个组件的不同状态聚合到一起，通过属性面板来切换相关的状态。

Figma重大功能更新！学会用「变体组件」让设计效率翻一倍！ Figma作为一个线上协作设计平台，因其强大的组件功能，越来越受到设计团队的青睐。

阅读文章 >

组件功能是 UI 类软件最复杂的功能，它不仅本身设置很丰富，同时也可以结合样式、响应、自动布局，让本来死板的组件变得更灵活可控，应对复杂的设计环境。

在后面我们会针对这些功能一一进行解释。

结尾 理解 B 端设计规范的存在价值，和软件中的 4 个基本功能概念，那么后面学习起来就会变得很容易。

欢迎关注作者的微信公众号：「超人的电话亭」

本文全面总结了 B 端产品中的筛选功能设计。之前也有总结一篇简洁版的关于筛选的文章，回头查看原来总结的文章时才发现确实之前总结的有点太过简洁，很多筛选类型和使用场景都考虑得不够全面，这也是之前对该功能不够了解，局限于自己在工作中常见的场景，对于不了解的场景自然就不清楚。由于接触得比较片面，了解得不够全面，导致之前...

本文全面总结了 B 端产品中的筛选功能设计。之前也有总结一篇简洁版的关于筛选的文章，回头查看原来总结的文章时才发现确实之前总结的有点太过简洁，很多筛选类型和使用场景都考虑得不够全面，这也是之前对该功能不够了解，局限于自己在工作中常见的场景，对于不了解的场景自然就不清楚。由于接触得比较片面，了解得不够全面，导致之前总结的也不够完整。

更多 筛选功能 设计：

如何选择筛选控件？5000字+3个落地案例详细拆解 这篇文章又是小 5000 字，提供一些关于筛选控件选择的解决思路，同时辅助三个实际案例帮助理解。

阅读文章 >

产品本身也是随着实际业务场景的变化，从而考虑设计不同的形式来达到该功能的使用。产品需要优化，交互和布局同样需要优化，所以在 B 端产品中并不是一个同样的功能就仅限于只有一种解决方案。

对于产品而言，只有参与的项目越多，设计和思考的场景越全面，了解的产品越多，才能更好的掌握一个功能的多种类型和使用场景，这一次能够在原来的基础上更加全面的总结同一个功能的类型和场景，主要是在工作中也有遇到类似的业务场景，加上对其他产品的体验，从而让我更加全面的了解到该功能的多样性。

二、筛选的多种类型及排版布局使用场景 以下我对自己在实际工作中运用到的多种筛选类型再次做了总结，不同的筛选类型对应的排版布局各不相同，并且在实际业务中的使用场景也具有差异，下面我还是会通过不同的类型列举不同的场景案例，便于理解和运用到实际工作业务中。

现在总结文章的习惯是将需要总结的文章通过思维导图的形式画出整体的导线，这样让自己的脑海里面形成一个大致的方向，也是一个整体的构思，后期只需要根据导线一步一步往下描述具体的内容和案例即可。这个总结方式也可以运用到工作任务中，例如：当接到一个设计任务时，先理解该任务的整体方向，再细化每一个细节展开设计，这样能避免遗漏也能让自己对整体的把握更明确。

筛选的类型我分为以下四大类：

常规搜索筛选 按条件筛选 分类 tab 筛选 高级筛选

筛选的排版布局我分为以下三大类：

平铺选项筛选 隐藏选项筛选 折叠选项筛选

筛选的类型是根据业务场景而定，筛选的排版布局是根据筛选的类型而定，筛选的使用场景是根据实际业务场景而定，所以首先我们需要理解清楚真实的业务场景，再通过分析选择适合的筛选类型，当已经知道了筛选类型，我们只需要根据筛选的条件和页面的交互及空间利用情况选择合适的布局方式即可。

1. 常规搜索筛选

常规的搜索筛选不难理解，即常见的搜索框，根据输入文本关键词进行模糊搜索或者根据记忆准确输入完整的信息，精准搜索。文本关键词搜索需要通过用户的记忆来完成，只有当用户对需要搜索的内容（关键词）有记忆才能完成搜索筛选，搜索的结果范围根据关键词的精准度而定。

当搜索的关键词少且模糊时，搜索的结果数量就会很多，需要用户在众多的结果中再次查找自己的目标值，难度较大。而如果搜索的关键词多且准确时，搜索的结果数量就会较少，用户只需要在少量的结果集中查找自己的目标值，难度较小。

（注意：搜索结果的数量也会受到原本数据量的影响。）

例如在微信公众号发表记录中的搜索，当只输入“设计”关键词时，搜索结果一共有 202 条，需要在这 202 条数据中找到自己的目标值是比较难的。

当我将关键词改为“设计来源于生活”后，搜索结果只有 14 条，这样我在查找我的目标值时就变得容易很多。所以如果用户具有更深的记录，能够输入更多的关键信息，就可以缩短查到的时间，能更快的找到自己的目标值。

案例实操

下面我再列举一个关于搜索筛选在 B 端产品中的运用：（此例子将运用到后面所有案例，以下案例只作为简单举例，总数据量为 10 条，实际业务根据真实业务数据量而定）

需求背景：客户 A 需要在文件清单表格中，根据清单名称查找目标值。

设计要点：如果只需要在清单中通过清单名称来查看目标值的话，这里就可以选择直接使用搜索筛选来完成，因为清单名称复杂不清晰，是不确定的值。所以直接在表单上方加一个搜索框，用户只需要输入关键词即可完成搜索。

当输入关键词“策略”后，我们得到了三条名称带有关键词“策略“的数据结果，减小了数据范围，让用户在查找目标值时更加容易。

（注：搜索按钮根据数据量的多少决定是否需要，当数据量较多时，列表刷新负荷较大，建议增加搜索按钮，反之则不加）

2. 按条件筛选 按照条件筛选是对于数据内具有明确的条件分类，在筛选条件中将这些类单独作为筛选的条件，当选择某一个选项作为筛选条件时，筛选出现的数据结果集将是同类数据。筛选类型又分多种选择方式：下拉框选项筛选、平铺选框筛选、表头筛选、组合筛选。

下拉框选项筛选：

类别选项筛选，根据具体的选项在小范围内筛选。

下拉框选项展示提前预设好的选项，用户只需要选择需要筛选的类型，即可快速筛选出这类数据的数据结果集。此类筛选优点在于能快速筛选同类数据，不需要用户过多的记忆。缺点是无法快速达到精准筛查的效果，如果需要达到精准筛选的效果需要同时选择多项。

案例实操

需求背景：客户 A 想要快速筛选文件清单中发布状态为“审批中”的数据，能够快速统计审批中的数据量，并且完成后续任务操作。

设计要点：客户需要根据文件清单的状态快速筛选数据，文件的状态一共分为三类：已发布、审批中、未发布，虽然客户只说需要筛选审批中的数据，但是另外两个状态的数据也同样有筛选的场景，所以我们直接将状态类型作为选项，客户使用时只需要选择状态类型即可快速完成筛选。

（注：搜索按钮根据数据量的多少决定是否需要，当数据量较多时，列表刷新负荷较大，建议增加搜索按钮，反之则不加）

平铺选框筛选：

下拉框选项筛选的另外一种展示形式，将选项平铺展示，类别选项筛选，根据具体的选项在小范围内筛选。

案例实操

需求背景：客户 A 想要快速筛选文件清单中发布状态为“审批中”的数据，希望能够直接看到文件的状态类型，快速选择类型。

设计要点：这次客户的需求点是在上一个方案中提出的优化，由于上个方案是将状态选项放在下拉框中的，导致客户不能直观的看到状态选项，需要点击下拉框后才能看到，原操作路径为：点击展开下拉框→选择审批中选项→点击搜索。

为解决状态选项不直观的问题，我选择将状态选项直接平铺展示在外面，这样客户就可以直观的看到所有的选项。并且操作路径变成了：勾选审批中选项→搜索，操作路径和操作步骤也得到了优化。

表头筛选：

将筛选选项内置在表头中（更好地利用页面空间，隐蔽不直观）。当页面空间有限时，可以考虑此方案。另外当表格表头字段数据较多时，需要横向滑动查看数据时，建议还是直接将筛选条件单独放在外面。或者当需要筛选的选项太多时，表头字段都能筛选时，也可以考虑放在表头中。

案例实操

需求背景：客户希望界面更加干净、整洁，并且能够达到根据状态筛选的功能。

设计要点：平铺选项的方案直观，但是平铺与后面的搜索框排版在一起时，整体页面看着比较零散。将筛选选项直接放在表头字段后，通过 hover 展示下拉框，点击选项后不需要再次点击搜索按钮，直接进入搜索。操作路径为：图标 hover→选择选项。

这个方案缺点在于筛选的选项不直观，但是操作点击步骤只有一步。

组合筛选：

多种筛选类型组合为筛选组，组合筛选一般是是筛选的条件较多，选项较多时，将不同类型的筛选组件结合为一个筛选组。用户在使用时，只需要将所有的条件输入/选择后，点击搜索即可完成筛选，得到的结果将是多个条件组合后的并集/合集的值。

案例实操

需求背景：客户需要同时满足根据名称和编号关键词搜索筛选、状态类型筛选、责任人/责任部门筛选、类型和时间区间筛选。也就是说客户想要将表格中所有的表头字段作为筛选条件。

设计要点：由于这里包含多种筛选类型，名称和编号是关键词筛选，发布状态和、责任人、责任部门、类型是选项筛选，发布日期是时间区间筛选。所以我们需要采用组合筛选的模式。

（右侧箭头：组合筛选占据空间较大，可考虑展开和收起筛选组件）

延展思考：

这里的筛选条件都来自于表头，并且表头字段一屏能展示完整，我们也可以将表头部分字段筛选直接放在表头中，采用搜索筛选+表头筛选的模式组合。

（注：筛选类型选择需要根据实际业务场景而定，选择适合真实业务场景的，此处只是举例延展。）

3. 分类 tab 筛选 分类 tab 筛选在软件中一般是作为系统的全局搜索才会使用到，主要是通过搜索关键词后，分类展示不同类别下带有该关键词的数据信息。等同于全局搜索是一个大的漏筛，通过输入关键词后，将符合该范围内的数据筛选出来，并且分类展示，用户再到每个分类下再次通过其他条件筛选，从而得到自己的目标值。

（此类型案例不适用，另举例说明）

例如：在飞书文档中，通过搜索关键词后，分别展示该关键词在文档、表格、多维表格、思维笔记、文件五大类别中展示结果集，用户通过类别区分，再缩小范围寻找目标值。

4. 高级筛选

筛选条件自定义组合（灵活且占空间小）。高级筛选占用空间比较小，用户可以根据需要自定义筛选条件，不必将所有筛选条件都展示在界面中。使用更灵活，界面更美观。

案例实操

需求背景：客户需要同时满足根据名称和编号关键词搜索筛选、状态类型筛选、责任人/责任部门筛选、类型和时间区间筛选。并且页面简洁，筛选灵活度高。

设计要点：筛选的条件较多，并且还需要界面能够简洁，筛选灵活度较高，所以我们可以选择高级筛选模式，虽然这里可以直接用表头筛选，但是表头筛选的入口太多，不易查找，所以就采用高级筛选统一入口。如下图：

方案一：下拉选择式

通过下拉展示可筛选的条件类型，再根据类型选择具体的筛选条件，从而得到结果值。

交互细节：点击筛选→选择需要筛选的条件类型→选择具体的值

方案二：条件组合式

通过自定义条件，并且自定义筛选结果值。

当选择发布状态等于审批中中时，筛选的结果为数据中所有发布状态为审批中的数据。 当选择发布状态不等于审批中时，选的结果的数据中不包含状态为审批中的数据，只包含已发布和未发布的数据。

结语 此次案例并非真实案例，只是为了方便大家理解每一种筛选类型而列举的简单案例，实际工作需要根据实际需求及业务场景而选择最适合需求的类型。

欢迎关注作者的微信公众号：「设计小余」

编者按：在搜索功能上，天花板级别的设计师还能玩出什么花样？本文梳理了众多大厂的搜索设计细节，一次性看个够！更多搜索设计方法：5000字干货！

编者按：在搜索功能上，天花板级别的 设计师 还能玩出什么花样？本文梳理了众多大厂的搜索 设计细节 ，一次性看个够！

更多 搜索设计 方法：

5000字干货！五大章节帮你掌握搜索设计 本文从搜索的基本属性与特征、搜索入口的样式及应用场景、常见的搜索方式、搜索流程状态解析和辅助模块/元素的妙用5个章节，帮你掌握搜索设计。

阅读文章 >

搜索的本质是什么？无疑是内容的召回和信息的推荐。

可随着时代的发展和行业公司的内卷，不少公司除了持续优化搜索结果与推荐外，在搜索的体验和彩蛋上也是下了不少功夫，从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些，那些有意思的大厂搜索交互。

大体上分为两类：彩蛋流和体验流。

一、彩蛋流 注重提升搜索过程中的趣味程度，以增加用户的好感度与产品印象/口碑。行业代表：谷歌浏览器、百度浏览器

1. 谷歌浏览器

可以说是搜索彩蛋的先行者，内置了很多搜索关键词的有趣彩蛋，如娱乐角色：搜索「灭霸」，页面右边会打响指，相关字段会被“毁灭”掉

搜索「马里奥兄弟」，右边也有游戏里一样的点击彩蛋

还有各种有意思的搜索结果比如搜：is google down（谷歌关闭了吗），搜索结果优先显示：NO

再如搜索《银河系漫游指南》的一句话：the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。

而且在日常的节日、活动、热点运营上，谷歌也从不缺席。都会在搜索框上用「插画、动效」等形式承载各种活动入口、吸引用户参与，可以已经形成一个稳定、具有品牌感的企业文化了。

如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例。

2. 百度浏览器

百度在搜索彩蛋里下的的功夫也不少，最著名的应该是搜索「黑洞」时，页面上会出现黑洞的吸入特效。

而且和谷歌相同，在其他的搜索关键词上，百度也是埋下了不少彩蛋，比如：搜索「翻转」，页面会左右翻过来

搜索「跳跃」，页面会在上下跳动

搜索「失重」，页面上的字会飘起来‍

而在「活动运营」上，百度也是很有心地进行着创新设计，力求给用户一种眼前一亮的感觉。比如每年的愚人节，搜索结果页上都有“调戏”用户的创意设计，各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。

还有在「活动入口」的设计上也是特别有想法：在某年的圣诞节上，百度创新性地将活动入口嵌套在结果页卡片中间，用活动里的IP形象雪人「抬着」结果页卡片和在上面「滚动」。

用这种充满创意+应景的的入口设计与引导方式，最大限度地降低漏斗，吸引让更多用户参与该活动。另外，百度搜索框上面的运营活动入口，也和谷歌有异曲同工之妙。

二、体验流 注重提升搜索过程中的交互体验，以增加用户的操作效率与产品易用性。

代表：苹果产品、夸克浏览器

1. Apple/苹果产品

iPhone

iPhone的「桌面搜索」除了能查询手机上的各种信息、文件，它还自带了「汇率转换和计算器」。在搜索框输入「数学公式、汇率转换」时会自动计算对应的结果。无需用户额外打开计算器、浏览器，大大减少操作链路。

在iOS的原生键盘里，可以根据输入词检测+搜索对应的手机号码：当你输入 「打+我或通讯录好友+电话」时，键盘上会自动显示自己或好友的电话号码，点击号码就能自动粘贴在输入框中。

用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码，大大提升操作体验与效率。

Mac

在Mac电脑的工具栏上搜索相关帮助时，系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里，并减少寻找的操作路径，免去多余操作。

在Mac电脑的系统偏好设置里搜索帮助，在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时，该入口的聚光灯会更清晰些，特别容易找到搜索结果。

2. 夸克浏览器

夸克浏览器除了传统的「点击搜索框」唤出输入栏外，在屏幕任意位置下滑手势同样可以唤出搜索框。

降低「需要往上手指移动，才能点击搜索框」的操作成本，让用户更快、更精准地触达搜索。

而且在输入网址或英文等字段时，搜索框下方会出现一个滑块区。点击就会变成长条的滑块，拖拽滑块即可改变光标位置。

让用户更方便地将光标快速移动到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克还会前置搜索结果， 比如在搜索框中输入“某城市+天气”的关键词，上方就会以卡片的形式显示该地区最近一周的天气。

用户无需触发搜索、进入结果页才能看到想要查询的信息。

欢迎关注作者的微信公众号：「和出此严」

编者按：在搜索功能上，天花板级别的设计师还能玩出什么花样？本文梳理了众多大厂的搜索设计细节，一次性看个够！更多搜索设计方法：5000字干货！

编者按：在搜索功能上，天花板级别的 设计师 还能玩出什么花样？本文梳理了众多大厂的搜索 设计细节 ，一次性看个够！

更多 搜索设计 方法：

5000字干货！五大章节帮你掌握搜索设计 本文从搜索的基本属性与特征、搜索入口的样式及应用场景、常见的搜索方式、搜索流程状态解析和辅助模块/元素的妙用5个章节，帮你掌握搜索设计。

阅读文章 >

搜索的本质是什么？无疑是内容的召回和信息的推荐。

可随着时代的发展和行业公司的内卷，不少公司除了持续优化搜索结果与推荐外，在搜索的体验和彩蛋上也是下了不少功夫，从而进一步加强自有产品的竞争力与用户黏性。因此今天就来盘点一些，那些有意思的大厂搜索交互。

大体上分为两类：彩蛋流和体验流。

一、彩蛋流 注重提升搜索过程中的趣味程度，以增加用户的好感度与产品印象/口碑。行业代表：谷歌浏览器、百度浏览器

1. 谷歌浏览器

可以说是搜索彩蛋的先行者，内置了很多搜索关键词的有趣彩蛋，如娱乐角色：搜索「灭霸」，页面右边会打响指，相关字段会被“毁灭”掉

搜索「马里奥兄弟」，右边也有游戏里一样的点击彩蛋

还有各种有意思的搜索结果比如搜：is google down（谷歌关闭了吗），搜索结果优先显示：NO

再如搜索《银河系漫游指南》的一句话：the answer to life, the universe, and everything。此时搜索结果页会自动计算成42。貌似也只有读过《银河系漫游指南》的人才能明白其中的奥秘。听说是生命、宇宙与万事万物的终极解答。

而且在日常的节日、活动、热点运营上，谷歌也从不缺席。都会在搜索框上用「插画、动效」等形式承载各种活动入口、吸引用户参与，可以已经形成一个稳定、具有品牌感的企业文化了。

如各种复活节、开学季、母亲节动效。而且更多有趣、创意的设计案例。

2. 百度浏览器

百度在搜索彩蛋里下的的功夫也不少，最著名的应该是搜索「黑洞」时，页面上会出现黑洞的吸入特效。

而且和谷歌相同，在其他的搜索关键词上，百度也是埋下了不少彩蛋，比如：搜索「翻转」，页面会左右翻过来

搜索「跳跃」，页面会在上下跳动

搜索「失重」，页面上的字会飘起来‍

而在「活动运营」上，百度也是很有心地进行着创新设计，力求给用户一种眼前一亮的感觉。比如每年的愚人节，搜索结果页上都有“调戏”用户的创意设计，各种轻松调皮的画风 给不少用户带来了新鲜感和趣味性。

还有在「活动入口」的设计上也是特别有想法：在某年的圣诞节上，百度创新性地将活动入口嵌套在结果页卡片中间，用活动里的IP形象雪人「抬着」结果页卡片和在上面「滚动」。

用这种充满创意+应景的的入口设计与引导方式，最大限度地降低漏斗，吸引让更多用户参与该活动。另外，百度搜索框上面的运营活动入口，也和谷歌有异曲同工之妙。

二、体验流 注重提升搜索过程中的交互体验，以增加用户的操作效率与产品易用性。

代表：苹果产品、夸克浏览器

1. Apple/苹果产品

iPhone

iPhone的「桌面搜索」除了能查询手机上的各种信息、文件，它还自带了「汇率转换和计算器」。在搜索框输入「数学公式、汇率转换」时会自动计算对应的结果。无需用户额外打开计算器、浏览器，大大减少操作链路。

在iOS的原生键盘里，可以根据输入词检测+搜索对应的手机号码：当你输入 「打+我或通讯录好友+电话」时，键盘上会自动显示自己或好友的电话号码，点击号码就能自动粘贴在输入框中。

用户无需前往通讯录就能轻松「获知+想起」谁谁的电话号码，大大提升操作体验与效率。

Mac

在Mac电脑的工具栏上搜索相关帮助时，系统会直接把该结果所对应的页面位置调取出来并悬浮展示。用户可以直观地该结果在哪里，并减少寻找的操作路径，免去多余操作。

在Mac电脑的系统偏好设置里搜索帮助，在结果列表上会以聚光灯的形式展示各个结果入口。选择具体某个结果时，该入口的聚光灯会更清晰些，特别容易找到搜索结果。

2. 夸克浏览器

夸克浏览器除了传统的「点击搜索框」唤出输入栏外，在屏幕任意位置下滑手势同样可以唤出搜索框。

降低「需要往上手指移动，才能点击搜索框」的操作成本，让用户更快、更精准地触达搜索。

而且在输入网址或英文等字段时，搜索框下方会出现一个滑块区。点击就会变成长条的滑块，拖拽滑块即可改变光标位置。

让用户更方便地将光标快速移动到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克还会前置搜索结果， 比如在搜索框中输入“某城市+天气”的关键词，上方就会以卡片的形式显示该地区最近一周的天气。

用户无需触发搜索、进入结果页才能看到想要查询的信息。

欢迎关注作者的微信公众号：「和出此严」