转载：优设
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
谷歌Material Design的图标设计标准正在重新定义界面视觉语言。兰亭妙微UI设计公司深度解析从简洁性、几何形状到风格统一的三大核心原则，详解24dp标准尺寸下的网格系统与布局规范，并揭秘复杂图标的细节处理技巧。无论是圆角控制还是描边粗细，这套方法论让零基础设计师也能快速掌握专业级图标设计。
今天分享的是「图标设计准则」。图标是界面设计里的 “刚需元素”，一个小图标能快速传递很多信息。好的图标需要兼顾简洁、现代、友好。但图标的尺寸很小，设计时既要严格遵守设计规则，又得清晰表达信息，这样才能保证整套图标的风格统一、辨识度高。
今天就来聊聊大厂在用的图标设计原则和设计规范，配合案例进行设计分析~
给大家举个例子，就说下面的小船图标，想让图标清晰好认，就得做减法，那么用正面的简约船身造型最合适。
如果图标设计的过于细致，例如图标中添加了船帆、桅杆或者旗帜等细节，太写实的图标不仅会降低识别速度，还会破坏整套图标的视觉统一性。
设计总结：
✅ 简化图标造型，提升清晰度和辨识度
❌ 拒绝过度写实，避开复杂繁琐的设计
使用几何图形和统一的基础形状来设计图标，能打造出清晰醒目的视觉感受。哪怕结构简单，也能保持清晰的形态，缩小到小尺寸时也照样容易分辨。
反过来讲，尽量少用那些纤细、松散的不规则形状，它们会破坏线条的连贯性，让整套图标看起来乱糟糟的，没个统一的调性。
设计总结：
✅ 靠几何图形和统一的造型，打造醒目视觉效果
❌ 少用纤细、不规则的形状
这里给大家看一组风格统一的图标示例。对品牌识别和系统适配来说，保持图标集的视觉一致性太重要了。
要是把不同风格的图标混在一起用，用户根本没法把它们当成“一家人”。所以同一套图标里，不管是形状、线条粗细，还是比例、边角处理，都得按同一个标准来。
设计总结：
✅ 单套图标集里视觉风格要保持统一
❌ 千万别混搭不同风格的图标
在谷歌的Material Design 3 设计规范中，标准 (基线) 图标尺寸是24dp×24dp，设计时建议按100%的比例来做，这样能保证像素级的精准度。
除了这个标准尺寸，还有20dp、40dp、48dp这几种常用尺寸可以选：
20dp：适合用在桌面端、紧凑布局，或者那些小尺寸的视觉元素
40dp/48dp：针对显示器、大屏幕，还有标题栏这类特殊场景
设计图标时，内容需要放在有效区域内里。有效区域是指页面滚动或适配不同设备时图标不会被遮挡的“安全可视区域”。
如果想让图标的视觉冲击力更强，可以让内容延伸到有效区域和裁剪区域之间的留白处，但不能超出裁剪区域，不然图标很容易被裁剪显示不全。
具体要怎么布局呢？看下面这两点就够了：
① 有效区域：图标内容要放在20dp×20dp的范围内，四周各留2dp的边距
② 边距：给有效区域留出2dp边距，既能让图标和周围元素拉开视觉距离，又能让整体看起来更平衡
接下来通过一个图标案例来简单总结一下：
上图从左到右分别代表了在有效区域、在有效区域和裁剪区域、在裁剪区域之外创建的图标案例。
设计总结：
✅ 图标内容保持在20dp×20dp的有效区域里，记得留2dp边距⚠️ 想加视觉冲击力？内容可以延伸到边距区域
❌ 任何情况下，图标都不能超出裁剪区域
① 网格和关辅助线
一套图标中可能有的是圆形，有的是方形，那怎么才能保证形状不同的图标保持视觉大小的一致性呢？
这种情况大家在设计图标时应该都碰到过，解决方法可能大多是通过眼睛对比查看，把看着小的图标调大一些或者把看着大的图标调小一点。这种方法效率不高，而且设计出来的图标大小不容易保持一致性。
这里提供一个更科学和高效的辅助图标设计方法——使用网格和辅助线，照着这些辅助线来设计图标，能轻松保持比例一致。
例如常用的24dp×24dp图标网格，由正方形、圆形、竖矩形、横矩形这四种基础辅助线构成。它们就像图标的“骨架”，能帮所有图标保持统一的比例和对齐效果，哪怕放大10倍看，结构也照样清晰。
给大家拆解一下这四种辅助线：
方形辅助线：边长18dp，是图标的基础平衡基准。比如图表类图标就可以照着这个方形来画，保证比例稳定。
圆形辅助线：直径20dp，用来设计圆润平衡的图标。像地球图标用这个圆形打底，就能和其他图标和谐搭配。
垂直矩形辅助线：高20dp、宽16dp，适合强调纵向比例的图标。比如文档图标围着这个竖矩形设计，比例会特别清晰。
水平矩形辅助线：高16dp、宽20dp，适合横向比例的图标。像邮件图标用这个横矩形当基础，形状会很均衡。
一个完整的图标，由圆角、起始/结束点、内部形状、外部轮廓等组成。
这里重点说下大家容易踩坑的“圆角”的设计：例如下图的银行卡图标，采用外角2dp圆角、内角尖角的设计，这样既柔和又利落。
如果把圆角做得太大，如下图左侧文档图标，图标的辨识度就会下降；如果一个图标中混用不同半径的圆角，如下图右侧的图标，整个图标看着就会很杂乱。
设计总结：
✅ 按规则设置圆角，统一圆角半径
❌ 避免圆角半径过大/半径混用的情况
推荐的图标描边粗细是2dp或常规 (400)，也可以根据需求灵活调整，例如在MD3设计规范中就提供了100 (细)到700 (粗)的多种选择。
这里有两个小技巧：
设计直角线性图标时，描边的末端尽量做成直角，例如下图左侧的箭头图标，45度切割的直角就很清晰；在下图右侧的添加图标中，内部的加号也采用了2dp的描边粗细，与外轮廓保持一致。
另外要注意一套图标需要保持相同的描边粗细。如果描边x粗细不一致，不仅会模糊图标形状，还会破坏视觉一致性。
设计总结：
✅ 描边粗细保持统一，直角图标末端也用直角
如果图标需要一些精细的细节，可以通过一些灵活的调整来提升辨识度，但不能扭曲基础的几何形状或破坏整体比例。
比如回形针图标，为了在24dp的空间里放下多个曲线，可以把 2dp的标准描边粗细微调成1.5dp；再比如拉面图标，下面的碗作为托底采用2dp的粗描边，上面的筷子拉面等元素细节更多，则采用1.5dp的细描边，让细节更清晰。
还有一个小原则：设计复杂图标时，尽量保持正面视角，别做倾斜、旋转的等距或者3D效果——多余的深度感会增加识别难度。
设计总结
✅ 正面视角设计，细节微调不跑偏
❌ 少用倾斜、旋转的等距/3D呈现方式
图标是一种高效的视觉语言，能打破语言壁垒，快速传递信息。但它的优势，必须建立在清晰的结构和统一的规则之上。
设计时基于标准的辅助网格走，保持比例均衡、视觉重量一致，设计出的图标才不会喧宾夺主，反而能提升整个产品的用户体验。
转载：人人都是产品经理
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
表单是 B 端产品核心信息载体，优秀的表单设计能直接提升填写效率、降低错误率、减少业务成本，是 B 端体验与数据流转的关键环节。兰亭妙微ui设计公司在上篇基础上，用 14 个可落地章节，帮你掌握高易用性表单设计。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
体验或交互设计师知晓用户行为分析有什么用？
答：我们所处的行业下，各类产品变得成熟精细，大家开始拼细节卷服务，市场竞争激烈。对于产品的各种优化改版也就开始变得谨慎，往往需要经过用户研究或是数据分析等工作来验证或决策，不再是由设计师或产品经理凭借过往经验办事或对标竞品照抄了，恰好用户行为分析就是用户洞察中具有代表性的一项；
体验或交互设计师为什么要掌握这些呢？
答：回归到用户体验相关设计，本身就是一项细致活儿，处处需要用户研究或数据洞察来辅助设计工作，了解其相关甚至熟悉搭建分析，从职能发展趋势来看，可能是迟早的事；
所以即使你目前用不上用户行为分析相关，也不要急着关掉文章，先简单了解一下吧，说不定你会有兴趣呢，说不定不久后刚好用上呢？
作为一名ToB设计师，你是否有遇到过这些问题：明明设计都遵循了用户体验设计的则，或是贴合了业务背景，但用户依旧反馈“不好用”或“不直观”？
这正是兰亭妙UI设计公司每天都在思考与破解的核心命题。我们认为，真正的B端设计不是将原则生搬硬套，而是深入业务场景，理解用户的“心智模型”，在复杂的流程中寻找平衡点。接下来的阅读材料将带你走进我们的设计哲学，看看兰亭妙微如何用同理心与专业力，将“正确”的设计打磨成用户口中“真好用”的解决方案。
用户行为分析是数据分析的一个重要领域，特别是在数字化服务行业中，主要目的是通过深入研究用户群体的流量动向以及操作行为特征等，来了解用户与产品间的关系、效果、趋势，以帮助我们优化产品设计、提升用户体验并驱动业务决策。
说人话就是：
监测用户在产品上做出了哪些行为、是否符合预期、有什么特征、问题在哪里，然后看看产品上需要做些什么调整或迎合用户的特征偏好来决策啥的。
具备一定的客观性与真实性
被动采集的行为数据有时候比用户口述反馈的信息要更真实有效，一方面更加直接，另一方面也少了些用户心理设防（霍桑效应）；
具备一定的代表性与准确性
由于是群体性的大数据，所以更有代表性，并且是即时的数据记录，不容易记混记错，准确性也更好；
具备可持续性与可追溯性
通过数字化技术实现，可以伴随产品发展持续的采集数据，可以较为方便的调取过往数据进行比对追溯分析；
具备一定的 AI 不可代替性
用户行为的背后依旧是人文心理等方面的内容分析或业务场景化决策，往往离不开人工的加持介入；
以下是对用户行为分析的工作流图解，由于不同企业的诉求有差异，以下工作流仅代表大部分用作交流；
此次主要聊聊基础的上手运用与注意事项，不涉及过深或难以理解的部分，如果说用户行为分析可以到达高等数学的程度，那么此次就讲讲加减乘除好了，师父领进门，修行靠个人，各位看客请上座！
① 什么时候开始？
首先你的产品得有流量，然后得有一个关乎到用户行为的目标，例如想看看用户流量分布、了解功能使用频率、任务执行的漏斗关系、用户行为偏好、用户数据画像构建等，这个时候就可以考虑开始了，不然就可能南辕北辙费力不讨好。
② 界定一个范围？
首先构建一套完善的用户行为分析系统并持续的维护与应用并不是一个轻松的事情，所以最好是针对性构建+多迭代，不要上来就想着做全盘搭建，表面的工作或问题往往可能只是浮冰，逐步的深入后问题会越来越多，个人深有体会！
③ 由上而下，找准路线？
通过业务目标向下拆解，一般上层目标无非是商业转化、用户活跃留存、任务通过率这些，向下拆解则是通过业务目标去锁定核心的业务场景或任务线路，这些核心的页面、场景或是任务线路，就是你前期可以界定的一个范围，后续的重点工作则是将核心功能的入口或路径穷举出来，避免数据对不上或找不到异常源头的情况。
在我的认知里，用户行为分析建设不是一锤子买卖，步伐走小一点，基础搭好一些，以后的迭代建设或维护也会轻松许多；
概括一下就是，不要追求全面，靠拢业务价值，关联上指标或者核心业务场景即可。
之前网上看到有大佬给了一个建设思路，这里搬来大家参考一下；
数据埋点技术已经很成熟了，甚至有很多第三方的埋点+分析的服务，以及采集用户行为数据的不仅仅只有埋点技术方案，哪怕你做一个录屏技术都可以，只不过从数字化产品视角出发，埋点技术更有性价比，以及符合用户隐私权益，所以这里专门讲一下“埋点”这个老技术，熟悉的大佬们可以跳过埋点这部分。
① 埋点是什么
数字化应用大多有个特征，就是需要用户进行界面交互，有交互就有行为动作发生，而数据埋点就是将用户在界面交互时产生的各种类型的监控日志上报到产品后台去，这样业务团队就可以知道到用户在不同页面或业务场景下操作了什么，去往过哪些页面，当结合业务后台的订单等数据时，就可以还原出更加清晰的用户行为全貌。
通常这些埋点会分为“页面访问(PV、UV)、区块曝光(区域、时长)、按钮操作(动作、状态)”三大类型，并携带交互元素和操作者的各类特征信息参数，便于我们知晓更多的场景细节与用户情况，例如知晓这个「免费试用」按钮是对应了那个产品？点击的用户是否已开通这个产品？这个用户是否为付费用户？是否个人还是商家类型？用户从哪个渠道进来的等，而且这些植入在产品代码中的埋点可以不间断持续的采集和配套产品迭代进行维护，可以帮助业务团队获取大量有效数据用作业务分析决策。
② 什么时候派上用场
这些数据埋点主要是为业务目标的洞察分析服务，也就是说业务目标中需要采集用户行为数据时，埋点就要派上用场了，相比传统的业务日志，埋点可以收集到更加全面的界面交互的行为数据，能够简易的还原出一套线上用户的使用情景，而不仅限于一些业务后台就能统计出的转化率或基础数据等；
并且埋点数据可以与业务数据分开存储运维，这意味着埋点数据可以更迅速的根据设定的指标公式统计出期望的数据或视图，并且不会干扰业务访问的性能质量，因此产品迭代后的新老数据对比、营销活动的效果评估、用户行为的特征偏好识别等，数据埋点都以可以派上用场的。
③ 怎么提埋点需求？
首先埋点需求没有固定的文档格式，其次不同埋点服务平台的要求也有差异，就移动端来讲，很多服务商已经支持可视化埋点、全埋点、无埋点服务，可以实现自动识别交互元素并进行埋点操作，大大减少了开发工作量，那么再聊回埋点需求怎么提。
核心结论就是由上而下，通过业务目标或核心指标进行拆解，然后关联到核心的任务流程上，对于一个页面或一套流程没有必要进行全篇埋点，技巧我概括为以下几点；
埋点需求的主要内容基本包含以下，根据业务或埋点平台的差异，可以自行调整；
④ 业务扩参怎么一回事儿
扩参即扩展参数，指在当前用户界面中可以请求到的业务数据，并将这些业务数据绑定到埋点日志中一并上报给埋点数据后台，通常为一些用户属性参数、业务属性参数、设备属性参数、网络环境参数，这样我们就可以通过这些额外的参数进行数据分析或是过滤，举个典型案例；
① 为什么要治理？
简单说就是提升数据质量与准确性，在庞大的一套数据中，我们需要弄清楚数据之间的映射关系，即不同的数据参数代表了什么元素什么动作什么含义，数据是否有缺漏或冗余、报错漏报乱报、是否有无效的脏数据（例如内部的测试数据或脚本爬虫等带来的数据），如果我们不去将这些数据进行治理，则统计出的数据指标特征或趋势都将不可靠，无法被商业应用。
简单讲就是元数据没治理准确，得到的数据指标也就失去了实用价值。
② 怎么去治理？
本质是查缺补漏将无效的数据过滤掉或纠错，再把数据涵义映射成具体的指标或描述，用作进一步的指标计算与分析，如果数据又多又杂，你会发觉这一步要你老命，例如埋点就需要逐个查询原始埋点的位置、触发条件、埋点用途、埋点含义甚至与关联业务数据的关系校对等。
不过还好，一般来讲这些工作都是数据建模（BI）相关人员去负责的，作为应用层的我们，更多的是能够根据业务目标提出埋点需求、提出指标与数据报表需求，以及通过数据核算或查看数据趋势等手段找出异常让 BI 修复，所以这里就不展开埋点数据治理的方法了。
③ 数据维护不易
就埋点监控用户行为的方式来讲，除了平时的治理与报表问题修复，每次迭代改版还要做好相关埋点信息的管理与维护更新，保证不出错，不影响关联指标，甚至是线上用户偏好的推荐算法等应用，特别是数据规模越来越大后，又密切关联着业务决策时，数据更不容出错，且要求准确。
1. 内容产出的先后
在用户行为分析内容构建的过程中，除非是有特定场景特定诉求，通常个人认为都是先出指标、再完善行为链路、再逐步丰满用户画像的一个过程，原因如下；
2. 基础指标构建
所谓指标可以理解成是产品某项业务的成绩，例如我是卖包子的，那么我的指标大概率就是每天卖出去多少包子、利润有多少、哪款包子销量高，根据这些信息我就可以知道我平时应该准备多少包子、哪些品类的包子需要多做一些、我靠卖包子能赚多少钱。
① 指标构建的原理
实际上指标的构建逻辑可以很简单，例如 A 占 B 的百分比、ABC 的总和、连续多天 A 占 B 的变化等，很多加减乘除的算法就能搞定，主要是能拿到真实数据，不然我怀疑你在做烂账......
常见指标：
3. 行为链路分析
用户行为路径是一种数字化的旅行地图，相比较传统服务的旅行地图，场景会更纯粹、意图更准确、数据采集更便捷，主要作用有以下几点；
这些行为我们可以大致分为浏览、消费、互动三大类，根据不同的业务类型，可以选择性采集和分析相关数据，例如电商产品就比较关注用户的浏览与消费行为，常见的有商品浏览、添加购物车到下单；
而社交应用就更关注用户的互动行为，如不同类型的内容访问、评论点赞、关注收藏分享等；
这些数据最终可能由可视化的数据报表呈现出来，以便于业务团队快捷的找到数据问题或特征，如常见的漏斗图、桑基图、雷达图、树状图、散点图、决策树等；
小话题延展
最近在 UXRen 的一场分享会中，听罗浩讲了体验营销的话题，虽然是关于用户研究在职能岗位上挖掘新的商业能力的内容，但是其中有一段是关于如何在旅行地图中挖掘新的营销触点，有一些体会，这里结合用户行为链路分析简单聊一下；
背景与问题：
产品功能与业务增多，引流渠道多样化，不同渠道流量的撬动关键是什么，核心场景具备哪些能力，哪些渠道的流量能吃掉，这些流量所处的触点或场景能支持什么，用户意图是什么，产品能力能满足什么，产品发展可以支持哪些？如何分流或匹配各类流量的意图，并提供路径分发，这些用户流量数据有何趋势或特征，是否能与场景或触点进行根因分析，是否沉淀行为或偏好模型？
行为路径的重点：
在于观察不同触点下的客户意图，展开业务所能触及的部分或新的机会，并匹配合适的关键路径，以提升转化或用户粘性等，然后做数据回归分析，抓取有效的用户特征信息，并应用到产品的内容推荐或外部引流投放信息优化上。
流程过程：
触点展开与机会洞察，触点场景——意图识别——结果匹配（关键路径）——（根因回归）画像更新——算法推荐——广告优化
这一套下来，是不是感觉有点儿似成相识？后来一想这不就是一套用户增长的设计思路嘛。
4. 用户数据画像
主要是帮助了解和理解用户，使得我们可以划分用户群体和识别偏好特征，最终以提供精准营销或是洞察用户诉求来迭代改善产品。
其中偏好特征我们还可以根据业务属性细分为兴趣偏好、行为偏好、消费偏好等，并为不同偏好特征的群体提供个性化的内容服务，例如常见的内容标签标记，通过识别用户常看内容的标签，来推荐类似的标签的内容或是有潜在兴趣的标签内容来抓住用户的兴趣。
常见画像指标构建
这些指标会通过用户行为、设备信息、个人资料的完善来逐步获取，主要可以了解到用户的地域分布、年龄与性别分布、设备与活跃度情况，相应的数据在业务后台基本上都能够获取到，只需要将某个时间分区的数据拉出来，经过 Excel 之类的软件把数据加工一下，就能够获取到相关数据视图。
如果将多个数据指标结合起来分析，便可以获取一些复合型数据指标，例如哪些年龄段的用户群体消费能力更强、活跃度更高、不同教育背景的兴趣爱好是否有一定的关联性等等；
进阶画像指标构建
进阶的数据画像会完善更多的用户特征信息，便于业务团队找到用户群体的特征，做进一步的精细化运营或内容推荐，常见的画像指标如下；
此外就是在收集用户数据的过程中，保证用户隐私安全、合法性和安全性。
用户分层模型应用
当我们采集到一定的用户数据后，就可以在数据画像的构建阶段进一步完成用户分层工作，这一步是为了将用户分类，因为不同用户群的目的是有差异的，例如闲逛、精准采购、参与活动的等等，以提供差异化的服务做精准营销、识别用户群体特征做业务策略决策、或是优化产品体验相关，不过当你的用户规模尚小，运营模式简单，你也不用迫切去进行用户分层相关，因为收益不大。
那么通常都有哪些用户分层模型呢？其实你并不陌生，一些给你列举了一些；
相信你也发现了，用户行为分析的构建与产出并不只是行为链路的数据，同时会包揽很多其他的有价值的指标与数据，所以不要被用户行为四个字迷惑，或许你此刻正需要构建相关数据。
当你准备构建或整理用户行为分析前，记得目标或问题先行，针对性采集数据或建设指标，在你有了相对准确或清晰易懂的数据后，那些数据报表或图表根本难不倒你，说白了无非是将纯纯的一堆数据换了形式展示，如果你数据可视化的形式与应用不够了解，你可以看看 AntV 官网的介绍说明了解一下，其实你也不用每个都研究个遍，实用的就那么几个，酷炫是要代价的，报表搭建平台支不支持、Excel 支不支持、时间精力够不够研发给你整，都是问题～
AntV 官网 ：https://ant-design-charts.antgroup.com/examples
你可能疑问没有完整的教程手把手教你啊，其实不然，构建的前提、流程、要点、建设方向均在此篇中交代过，当你按照这套流程框架去做，基本上不会有啥大问题，一般来讲这些内容也够用，至于选用哪些数据埋点平台、数据分析平台、报表搭建平台、视自家公司情况而定吧。
也不要担心在数据报表搭建或分析的过程中，你搞不定，是不是你执行先不说，多问问百度或平台客服总能解决，如果就是觉得很难上手，那么大概率是工具你不熟，或者工具不好用
转载：优设
兰亭妙微（蓝蓝设计）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。
今天，兰亭妙微 ui 设计公司分享的是「等待时刻的交互体验」。打开 APP 一直在加载转圈、快递位置长时间不更新、预计时间到了外卖还没送达 —— 这些时刻是不是让你越等越烦躁？这些场景一旦卡住，我们都会很着急：系统怎么没反应？继续等下去有用吗？
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
在数字化产品设计愈发注重用户体验的当下，界面反馈早已不是单纯的“操作提示”，而是串联用户行为、产品功能与体验感知的核心纽带，更是决定产品易用性、专业性与用户留存度的关键细节。作为深耕UI/UE全链路设计十余年的专业团队，兰亭妙微UI设计公司（蓝蓝设计）长期聚焦B端后台管理、大数据可视化、工业软件、智能设备界面等多元场景，累计服务数百家中大型企业与行业龙头客户，在各类实战项目中沉淀了一套完整、可落地的反馈设计方法论。
在界面设计中， 反馈（Feedback）是系统对用户操作做出的即时、可感知的回应 。系统通过界面元素、动效、声音或震动等方式，告知当前操作已被识别、系统状态如何，以及后续可采取的行动。
用户完成任务所需的关键反馈节点
用户在过程中可能产生的系统判断或用户选择其导致的反馈分支
状态反馈：系统对用户主动操作的即时状态确认，消除用户对操作是否生效的疑虑。
进度反馈：当操作无法即时生效且需一定时间处理时，通过进度反馈告知用户当前任务进度。
确认反馈：对可能产生负面后果的操作，可以通过确认反馈向用户提供上下文信息来解释操作的后果，向用户进行确认，从而防止发生错误。
结果反馈：用户完成任务节点后，系统明确告知操作成功或失败。
及时：反馈应在操作后即刻发生，让用户感知到系统已响应。
清晰：反馈信息应准确无误，一目了然，明确告知“发生了什么”及“下一步行动”。
适度：反馈强度应与信息重要程度相匹配，避免过度干扰。
视觉反馈：通过界面元素的视觉变化传达系统状态，例如颜色变化、动画效果、图标提示、文字提示及高亮标记。
听觉反馈：通过声音信号增强用户感知，例如系统音效、操作音效及语音提示。
触觉反馈：通过设备震动提供物理层面的反馈，例如短震确认、长震警告。
接下来我“创作者音色复刻”项目中以两个具体场景来真实项目中设计反馈表现的应用以上原则的设计与决策过程：
朗读错误的具体位置在哪里？
下一步应该做什么？
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
| 样式规范 | 字号 | 行距 (折行) | 核心使用场景 |
|---|---|---|---|
| 大标题级 | 40px | 60px | 模块标题、核心数据、页面大标题 |
| 小标题级 | 32px | 48px | 内容标题、板块小标题 |
| 正文级 | 28px | 42px | 正文内容、按钮文字、副标题 |
| 辅助说明级 | 24px | 36px | 金刚区文字、Tab 栏、辅助说明 |
| 微提示级 | 24px | 36px | 容器标签、弹窗提示、小红点数字 |
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
蓝蓝设计的小编 http://www.lanlanwork.com