作为深耕 UI/UE 设计的专业团队，兰亭妙微在企业信息化、互联网产品、大数据软件的表单设计实践中，始终坚信细节决定体验。Web 表单作为产品与用户数据交互的核心载体，看似只是标签、输入框的简单组合，却藏着诸多易被忽视的设计细节 —— 标签末尾是否加冒号、标签与输入框如何对齐、必填字段该如何标记…… 这些看似 “无关紧要” 的冷知识，实则直接影响用户的填写效率与体验感受。
作为深耕 UI/UE 设计领域十余年的专业团队，兰亭妙微始终秉持 “设计优秀，不断超越” 的核心理念，从清华主创团队的专业积淀出发，将用户心理洞察融入每一次数字化产品的设计实践中。我们深知，优秀的设计从不只是视觉上的美感呈现，更要触达用户内心，通过对心理学原则的精准运用，在屏幕端为用户创造兼具实用性与情感共鸣的交互体验。唐・诺曼的情感设计三层理论 —— 本能、行为、反思，是兰亭妙微所有设计工作的底层逻辑，本能层打造视觉吸引力，行为层保障产品可用性，反思层赋予产品深层价值，而这一切的落地，都离不开对设计心理学法则的熟练驾驭。以下便是兰亭妙微在千余次企业信息化、大数据软件、互联网产品设计中，反复验证并沉淀的 10 大设计心理学知识，掌握这些，便能让产品与用户建立第一眼的情感连接。
我发现很多人设计主按钮，只会用主题色。而兰亭妙微 ui 设计公司在服务大量企业级产品过程中发现，很多大厂设计的主按钮，并不统一用主题色。
注意，这里讲的不是作为陪衬的次按钮，而是一个页面上最显眼的主按钮 CTA (Call to Action) 按钮。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
那好话不多说，我们正式开始～
在开始之前先来说说 什么是 B 端产品，我们通常也叫做管理后台。
这里会有两个问题：“它管理什么？到底如何管理？”给大家三秒钟可以思考一下。
首先它管理的是数据，无论是 ERP 系统的订单数据、CRM 的客户数据、OA 的流程数据，你都会发现管理后台就是在不停的对数据进行补充、整合。
那到底应该如何管理？简单来说就是 数据的“增删改查”，筛选其实就是查询的一种重要方式。
比如一个客户关系管理系统（CRM），销售人员去拜访客户就会提前查询客户信息，来了解客户关注内容进而去组织销售话术。
那这里的筛选应该如何设计？怎样设计既能高效便利，同时也具备扩展性？那今天我们系统盘点筛选组件究竟应该如何设计？
这里我们先来讲讲筛选的邻居“搜索”，因为很多同学其实对于这两者之间的差别不太了解，只知道它们都是在工具栏当中，都是在做查询数据的工作。但在功能上是有明显的区分：
搜索是对系统的关键词进行精准匹配，比如用户 ID、手机号、昵称、地址等信息内容
筛选则是给出产品的固定条件选项，比如归属人、状态、类型 等，你可以按需勾选条件，就能得出对应数据
这里稍微多说一句，因为所有的 B 端系统都是由字段组成，而在大的分类上，字段主要包含有输入、选择、上传三大类型。
搜索服务于输入类字段，比如刚才讲到了 用户 ID、手机号、昵称、地址等 都是得让用户自行输入才会得到，因此在表单里输入，在表格当中也是输入搜索，所以系统是关联的。
筛选则是选择类字段，也就是归属人、状态、类型 等，在 B 端系统当中，选择字段尤为重要，所以在表单处选择同样在筛选处也是相同逻辑。
理解筛选与搜索的差异后，我们再来说说筛选～
在筛选的过程当中，有着非常多重要的逻辑需要提前掌握，我们通过简单的快问快答，帮助大家快速拆解。
第一题：什么是 且、或、非
这是筛选当中必须要了解的基础运算条件。
且就是筛选的条件必须同时满足才能出结果，比如一个电商数据分析师，需要筛选潜在高意向客户，在筛选条件为「时间在近 30 天有支付订单、近 30 天累计消费金额≥800 元、近 30 天订单次数≥2 次」，必须同时满足才会满足用户需求。
或就是这些条件满足任意一个就能出结果，比如还是电商数据，需要寻找对产品有兴趣的潜在客户，就需要筛选「近 90 天内有过人工咨询记录、近 30 天内访问产品详情页≥6 次、近 180 天内提交过试用申请」，三个条件满足任意一个，这样就能涵盖更为全面。
非就是这些条件必须排除掉才能出结果，比如电商数据，因为涉及到刷单、退款的情况，需要将其进行清洗，因此在筛选条件上就需要满足「订单状态≠测试订单、支付状态≠已退款、客户类型≠内部员工」，需要同时排除这些数据。
所以对应的筛选运算规则，其实背后都是用户在使用时需要深度分析使用的最为重要的工具～
第二题：在B端系统当中多个筛选条件默认的运算规则是什么？
A：且 B：或 C：非
在 B 端系统当中，最常用的运算规则就是且，也就是取多个筛选当中的交集。
比如下面这三个筛选项，所计算的呈现规则就是 「销售负责人是李强」且「销售时间是 近一个月」且「价值为高价值」的客户，这样就是一个典型的且的关系。
因为这种思维方式是最符合用户的思考逻辑，这也是众多 B 端系统当中的常见逻辑。
第三题：且、或、非可以同时存在于一个筛选组合当中吗？
A.可以
B.不可以
它们可以出现在同一个筛选组合当中，因为实际的业务往往是“多条件、多逻辑” 的复合场景。
比如在教育管理系统当中，班主任要筛选 初三年级且数学月考不及格 或 非 住校生 的学生，来针对这两类人群进行重点管理与监控。
但在筛选的设计当中，为了让用户理解逻辑，我们需要通过 条件组（如括号、层级缩进、虚线框）让用户直观感知分组关系，避免依赖抽象的优先级规则。
第四题：如果你是一个设计师，应该如何降低成本表达这个关系？
因为逻辑较为复杂，所以在筛选时有些基础办法可以降低门槛。
① 可视化展示筛选运算，如果用户对于且、或逻辑不太了解，可以使用图标快速表示
② 实时校验逻辑规则，不要出现相互矛盾的筛选逻辑
这个功能其实不太好做，但 ONES 做了一个最简单的逻辑判断。在且条件当中，同一筛选条件不得选择两次，这样用于避免在且条件当中经常出现的相互矛盾的筛选逻辑。
好的，准备工作已经完成，我们就可以顺利了解筛选的类型。
由于筛选的类型众多，我们会按照 业务复杂度、容器差异 两个维度，来对筛选进行归类。
通过业务复杂度，将其分为：基础筛选、高级筛选、自定义筛选
按照容器差异，将其分为：标签筛选、折叠筛选、浮窗筛选、抽屉筛选、表头筛选、AI 筛选
基础筛选是将 高频使用（使用频率≥80%）的筛选条件进行固定，一直保持在页面中的核心位置，不折叠、不隐藏，让用户能够直接看到的筛选类型。
这是一个最为基础的筛选方式，在常见的 Ant Design、Arco Design 的页面模板当中都会有基础筛选的身影。
使用基础筛选最为重要的便是 快速触达，用户打开页面就会查看筛选条件，不需要点击“更多”“展开” 等入口，这能满足 B 端用户 高效完成日常操作 的核心需求。
在使用基础筛选时，我们需要注意以下问题：
① 基础筛选条件的数量不宜过多，一般 3-4 个最为合适
因为筛选条件过多，就失去了常驻的意义。但在实际业务当中，我们也需要考虑 5 个、7 个这类极端场景，毕竟常驻是最为基础的方案，难免会遇到特殊情况。（需要在筛选的规则当中进行梳理，将交互逻辑呈现清楚）
② 基础筛选当中，排序规则会非常重要
一般按照 高频-低频 的方式，从左到右依次排列，对于高频低频的获取方式，我们可以数据埋点、卡片分类、问卷调研等多种方式进行搜集。
③ 筛选基础，样式就不基础
基础筛选有着较多的筛选样式，大家可以结合自身业务进行选择，这里推荐样式一与二，因为展示效率更高～
这里列举一些常见的基础筛选产品，大家可以一并查看：
高级筛选是较为复杂的筛选形式，它为了满足更多 低频、复杂、个性 的业务需求，通常会提供相对独立筛选面板，展示更多的筛选条件。
独立面板也就是我们后续会提到的 浮窗筛选、抽屉筛选、表头筛选...，所以它们的关系也会相对复杂。
高级筛选与基础筛选最大的区别在于：
基础筛选只能覆盖 3 个左右的高频筛选，而高级筛选可支持 10 + 维度的灵活组合；常驻只能使用且的逻辑相对简单，而高级可以有条件组嵌套支持复杂业务逻辑；常驻位置较为固定，而高级则有面板加持，可以更为灵活。
其实选择高级筛选或者基础筛选，最大的话语权还是场景。
如果你的筛选是简单筛选几个条件，那基础筛选就已经足够，反之对筛选条件、筛选效率有着更高要求，我们则会考虑更为复杂的筛选方式。
在使用高级筛选时，这些问题尤为重要：
① 因为高级筛选需要访问独立面板，因此在入口的设计就会尤为重要。一般会用文字链接或者图标来提示用户，便于寻找。
② 基础筛选与高级筛选可以并存，因为角色不同、使用场景不同，常驻可以作为高频使用的固定模块，高级则作为特定角色需要更多筛选的补充，这部分放在下面 筛选的原则-筛选角色化 给大家详细说明。
这里列举一些常见的高级筛选产品，大家可以一并查看：
自定义筛选则是在高级筛选的基础上，进一步业务化。
它是为了满足 字段不固定、需求差异化 的业务场景，用户能够自定义选择 筛选字段，配置字段的筛选规则。
使用自定义字段最重要的核心要素就是 突破固定字段限制，因为高级筛选是针对产品预设好的固定字段进行筛选，自定义则是用户可以自行选择字段，用于适配更为灵活、多变的业务场景，如 CRM 的客户自定义字段、OA 的流程表单（因为不同的公司对于 流程、客户信息的管理不太相同，因此需要提供自定义字段进行支持）
在设计自定义筛选时，我们的方案选择主要受到“筛选频率、条件复杂度、界面空间”的影响。
① 小入口+大弹窗，以筛选图标作为入口，点击过后弹窗展示所有筛选条件。这种方式适合 中低频（每天 1-3 次）使用筛选，界面空间紧张用大弹窗容纳复杂配置
② 展开收起式，当用户点击筛选后，将表格与工具栏之间的部分展开，用于呈现筛选条件。它能够避免弹窗的跳转感，筛选时用户的视线可以无需离开表格区域，适用于 筛选条件数量多、高频使用的场景
③ 固定常驻式，在顶部区域固定，默认展开，这样就无需点击入口，这样更适合“筛选是核心工作流” 的场景
自定义筛选是最难设计的，在使用过程中会有 四大基本元素。
筛选入口：需要让用户快速找到入口，同时不干扰主界面。
逻辑运算区：主要就是 且、或 逻辑的展示，只是在运算区域里面，需要考虑切换时究竟应该如何做？
神策数据是通过文字方式，快速展示 且、或 逻辑，并且支持手动直接切换，这个方案目前看来是用户最容易理解的。
字段选择区：选择你所需要筛选的字段，点击 添加、选择，整体逻辑较为简单。
条件组管理区：筛选条件全部展示过的后续动作，比如保存，批量录入 等相关动作都可以放在条件组管理当中，进行呈现。
接下来的 标签筛选、折叠筛选、浮窗筛选、抽屉筛选，都是对容器进行分类。因此我们需要进行展开讲解，穷举一下不同容器的形式和变化。
先来说说标签筛选（外露筛选）
标签筛选是将重要的筛选选项设计成“可点击的标签按钮”，将筛选过程当中的选项直接来进行展示，目的是为了能够让筛选条件，直接暴露出来给到用户进行使用。
它最重要的是提升效率，针对高频使用的筛选维度将其外露展示，将多步操作压缩为 一步点击，同时能够凸显当前的筛选状态，避免用户忘记自己选了什么。
在使用标签筛选时，需要注意这些内容：
比如我想外露的内容是各种状态，我就可以将其放在顶部，进行指标图+筛选功能的杂糅，像在小红书千帆系统当中，对于订单的多种状态，就会使用这一技巧，进行呈现。
折叠筛选则是用隐藏的方式，按照使用频率将筛选条件分层。高频条件平铺展示、低频条件收折在面板当中，点击展开的筛选类型。
它最重要的价值是要平衡“空间与效率”的问题，当筛选条件 4-8 个时，如果全部平铺页面就会过于冗余，如果全部隐藏又会增加操作步骤，折叠筛选通过 “高频展示 + 低频折叠”，让用户既能快速操作高频条件，又能按需调用低频条件，兼顾 “便捷性” 与 “功能完整性”。
正因为这样的特性，所以很多基础固定的筛选一旦变多后，通常就会使用折叠的方式进行呈现。
浮窗其实是将筛选包起来，用浮窗进行承载，临时唤起，用完即走。
在设计时首先会有一个统一的筛选入口，浮窗弹出后设置对应条件，然后点击确认、取消，浮窗自动收起，不占用页面只提示有筛选条件。
对于系统而言，它为什么需要浮窗筛选？本质上会有三个原因：
我们之前就有相同的业务，需要将桌面端的部分移植到 Pad 端与移动端，使用浮窗性价比就会更高。
抽屉筛选就是浮窗筛选的另一种表达，它主要是平衡 筛选条件与界面空间 的另一种选择。
但确实会发现现在的抽屉筛选已经没有当年的雄风，感觉大家就避之不谈，基本不会使用它。其实也会有几个原因：
很多之前沿用抽屉筛选的产品，现在都在调整自己的交互方案。
并且因为抽屉的不稳定性，我们其实不太建议同学们使用抽屉进行选择自己的选项条件。
表头筛选是一种相对特殊的筛选形式，它是将筛选入口放置在头部，提供给到用户进行快捷的筛选操作。
本质上是在满足长时间使用 Excel 用户的使用习惯，因为在 Excel 当中表格众多，对于筛选只能使用一种影响较小，最为通用的做法，随着 B 端产品的发展，也会发现很多设计方式都被得到了延续。
在理解表头筛选时，会有两种使用场景：
① 空间较少，使用表头筛选可以进行轻量的筛选动作。
这样点击筛选过后便可直接选择筛选选项，执行筛选操作。你可以看到飞书文档，在主页列表中就会这样设计便可以轻量满足筛选需求。
② 字段太多，需要表头筛选带入更多筛选值，进行筛选安排。
这种方案本质上是针对高级筛选的体验补充，记住！是需要高级筛选 or 自定义筛选时才会用到筛选策略。
因为在这两种筛选当中，需要选择筛选字段，有大量的选项，这对用户来说会十分影响其正常使用，通过表头处的点击，就能够将字段默认带入，缩短筛选路径，提高筛选效率。
这种方案的表头筛选也会有相应弊端，首先是表头空间问题，因为表头本身需要展示的信息就相对较多，比如冻结、排序、等等，过多的操作会导致表头过于复杂，如果还加上筛选，表头空间就会更大，更不适合进行使用。
其次用户理解成本也会相对过高，因为很多行业属性相对较为简单的 B 端产品并不会使用这类筛选，对于用户初次使用也会有不小的负担。但表头筛选目前的普及率仍然比较低，使用比较频繁的便是纷享销客。
来到重点，AI 筛选。它不仅仅是未来筛选设计的大趋势，更是能够在产品层面解决 筛选复杂化的问题。
比如刚才的高级筛选、自定义筛选，无疑都是在增加用户的操作层面，他们需要不断的选择，才会得到自己想要的结果。而 AI 筛选的价值在于它解决了 用户自然语言与程序逻辑执行 之间的壁垒，让筛选能够响应用户的自然语言诉求。
比如我想筛选最近一个月的高价值客户，就只需要在 AI 输入框中说出自己想法，然后就能得到筛选结果。
程序逻辑执行，程序就可以根据自身知识库，对高价值客户进行拆解，逻辑变为 客户时间为：最近创建一个月客户、类型为高价值。
这样一来，其得到的结果就会更为简单合理，但是在设计 AI 筛选时，它的难度还是会相对较大。
因为 AI 的结果可能会出现差错，那对应的修改策略就会极为重要。
所以我们可以看到，像 Jira 对于 AI 筛选就会有更多的修改入口让用户对于筛选结果进行快速修正，同时在入口上也需要做更多的设计进行提示。
转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
| 互联网阶段 | 核心设备 | 设计核心 | 设计师职能特征 |
|---|---|---|---|
| Web1.0（萌芽期） | 固定显示器 | 信息密度优先，美观与交互次要 | 平面设计师，聚焦静态信息排列 |
| Web2.0（爆发交互期） | 固定显示器 + 笔记本电脑 | 网页风格、视觉效果与互动形式创新 | 网页设计师，基于虚拟世界的创意设计 |
| 移动互联网时代 | 智能手机触摸屏 | 以手机为核心的用户体验设计 | UI / 交互 / 动效设计师，逐步融合为体验 / 产品设计师 |
| 万物互联时代 | 多类型屏幕（平板 / 可穿戴 / 智能家居 / VR/AR） | 以人为核心的多设备协同场景化体验 | 全场景设计师，兼具多端适配与协同思维 |
| 鸿蒙断点梯度 | 对应设备类型 |
|---|---|
| XSmall | 智能手表、小屏穿戴设备 |
| Small | 手机、竖屏折叠屏 |
| Medium | 横屏手机、小平板、展开折叠屏 |
| Large | 平板设备、车机 |
| XLarge | PC、智慧屏 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
今天，兰亭妙微 ui 设计公司分享的是「等待时刻的交互体验」。打开 APP 一直在加载转圈、快递位置长时间不更新、预计时间到了外卖还没送达 —— 这些时刻是不是让你越等越烦躁？这些场景一旦卡住，我们都会很着急：系统怎么没反应？继续等下去有用吗？
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
优秀的 UI 设计从来不是单纯的视觉美化，而是基于用户心理的逻辑表达。兰亭妙微设计团队深耕商业 UI 设计多年，结合格式塔心理学、色彩心理学、形状心理学等核心理论，提炼出 12 个大厂通用的 UI 设计法则，从视觉引导、元素组织、心理感知三个维度拆解设计逻辑，让设计不仅美观，更能精准引导用户行为、提升产品体验，成为设计师落地商业项目的实用指南。
在人机交互体验不断升级的当下，UI 设计早已突破单纯的功能性与视觉性边界，情感化设计成为连接产品与用户的核心纽带。兰亭妙微设计团队深耕用户体验设计多年，结合经典设计理论与商业项目实战经验，拆解 UI 情感化设计的底层逻辑、核心价值与落地方法，让设计不止于美观，更能触达用户内心，打造有温度、有记忆点的产品体验。
蓝蓝设计的小编 http://www.lanlanwork.com