文章介绍了B端设计中的特殊组件，包括动态时间选择和动态组织架构选择组件，分享了其业务背景及设计解法，旨在帮助设计师解决复杂多变的组件设计问题。
对于 B 端设计师的日常工作中，组件一定是一大难点。
因为组件复杂多变，所以组件的设计是其内部的精华。我们准备输出一个系列，讲讲大家见到过的特殊组件，讲讲我在试用产品过程当中，经常遇到的奇葩组件类型，一方面是了解它的设计思路，同时也能够用在工作当中服务自己。
业务背景：
在系统当中，本身就会存在静态数据与动态数据两种情况。
比如在筛选模块当中，选择昨天既可以代表是上一天（静态的，代表的就是 2025-05-14）；同时也可以被理解为是你打开系统当前时间的上一天（动态的，代表你每次登录的前一天的数据），这种情况在BI 系统、研发管理系统当中非常常见。
组件解法：
首先在时间的设计时，就需要考虑将两种类型的选择进行拆分。
比如在神策数据当中，首页的数据筛选就会有相同功能，因此在时间选择上，会提供两个不同 Tab 分别呈现不同的数据逻辑，一个静态、一个动态。
同时大家留意，在静态数据与动态数据中，两者的呈现内容其实并不一致。
静态更多为固定时间段，较为常规；动态则为 前X天 ，这种方式其实最为通用，可以满足不同用户的实际场景，同时开发落地时逻辑也较为简单。（不然前一周的动态数据，那周末需不需要？时间节点到底如何算，这些都是问题！）
这似乎也是动态数据最通用的设计方法～
这个问题已经被众多同学问到数次，那就再来说说吧～业务背景：
同样会有动态数据与静态数据概念的还会有组织架构选择，你会发现它的解法又会有所不同。
首先组织架构是一个复杂的层级选择，我们把这个组织定义为银行，会更容易理解。
现在我们有 青年银行>西南分区>成都分行>双流支行
其中成都分行与双流支行都可以单独选择，也就是单独存在的实体。在用户的选择上，我既可以选择 成都分行单独一个数据；同时也可以选择成都分行及分行下的子数据；甚至是选择成都分行下的子数据，但不包含成都分部，三种情况。
其中成都分行及分行下支行为动态，也就是后续再加入对应支行可以自动选中，其他则为静态数据。
没有理解的同学回过头重新再阅读一遍。
那这种情况这个选择组件到底应该如何设计？组件解法：
在我们课程当中会讲到，基础的业务组件都是通过改造而来，同样这个情况也不例外，我们可以用基础的组件进行改造优化。
当用户提到需求过后，我会优先建议 使用树形选择， 因为这是一个最为基础、简单的 层级选择逻辑。其整体结构大致如下：
其实有这个想法，也是源自 Coding 的产品（这部分，其实是飞蛾这款产品的遗霜）
不过你会发现它经过动态的加持，整体的呈现效果会更为优秀。
同时需要考虑如何呈现两个选择路径的展示逻辑：
我们会将分行的选择入口进行拆分，这里最好的做法就是展示到 前侧与后侧
只是入口过于小众，需要一定程度培训用户，所以会考虑 tooltips 进行提醒会更好~
但是除了树形选择之外，我们也可以考虑其他的层级选择方式，因此使用面包屑选择，可以考虑将特殊选择入口，固定到底部 footer 处，让其能够承担更多的选择空间。
这就是关于这部分组件，大家有什么看法也欢迎在评论区我们聊聊，毕竟创作灵感都是来源于你们的工作，就这样～ 拜～
本文由人人都是产品经理作者【CE青年】，微信公众号：【CE青年Youthce】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。