文章介绍了B端设计中的特殊组件，包括动态时间选择和动态组织架构选择组件，分享了其业务背景及设计解法，旨在帮助设计师解决复杂多变的组件设计问题。

对于 B 端设计师的日常工作中，组件一定是一大难点。

因为组件复杂多变，所以组件的设计是其内部的精华。我们准备输出一个系列，讲讲大家见到过的特殊组件，讲讲我在试用产品过程当中，经常遇到的奇葩组件类型，一方面是了解它的设计思路，同时也能够用在工作当中服务自己。

动态时间选择

业务背景：

在系统当中，本身就会存在静态数据与动态数据两种情况。

比如在筛选模块当中，选择昨天既可以代表是上一天（静态的，代表的就是 2025-05-14）；同时也可以被理解为是你打开系统当前时间的上一天（动态的，代表你每次登录的前一天的数据），这种情况在BI 系统、研发管理系统当中非常常见。

组件解法：

首先在时间的设计时，就需要考虑将两种类型的选择进行拆分。

比如在神策数据当中，首页的数据筛选就会有相同功能，因此在时间选择上，会提供两个不同 Tab 分别呈现不同的数据逻辑，一个静态、一个动态。

同时大家留意，在静态数据与动态数据中，两者的呈现内容其实并不一致。

静态更多为固定时间段，较为常规；动态则为 前X天 ，这种方式其实最为通用，可以满足不同用户的实际场景，同时开发落地时逻辑也较为简单。（不然前一周的动态数据，那周末需不需要？时间节点到底如何算，这些都是问题！）

这似乎也是动态数据最通用的设计方法～

动态组织架构选择

这个问题已经被众多同学问到数次，那就再来说说吧～业务背景：

同样会有动态数据与静态数据概念的还会有组织架构选择，你会发现它的解法又会有所不同。

首先组织架构是一个复杂的层级选择，我们把这个组织定义为银行，会更容易理解。

现在我们有 青年银行>西南分区>成都分行>双流支行

其中成都分行与双流支行都可以单独选择，也就是单独存在的实体。在用户的选择上，我既可以选择 成都分行单独一个数据；同时也可以选择成都分行及分行下的子数据；甚至是选择成都分行下的子数据，但不包含成都分部，三种情况。

其中成都分行及分行下支行为动态，也就是后续再加入对应支行可以自动选中，其他则为静态数据。

没有理解的同学回过头重新再阅读一遍。

那这种情况这个选择组件到底应该如何设计？组件解法：

在我们课程当中会讲到，基础的业务组件都是通过改造而来，同样这个情况也不例外，我们可以用基础的组件进行改造优化。

当用户提到需求过后，我会优先建议 使用树形选择， 因为这是一个最为基础、简单的 层级选择逻辑。其整体结构大致如下：

其实有这个想法，也是源自 Coding 的产品（这部分，其实是飞蛾这款产品的遗霜）

不过你会发现它经过动态的加持，整体的呈现效果会更为优秀。

同时需要考虑如何呈现两个选择路径的展示逻辑：

我们会将分行的选择入口进行拆分，这里最好的做法就是展示到 前侧与后侧

只是入口过于小众，需要一定程度培训用户，所以会考虑 tooltips 进行提醒会更好~

但是除了树形选择之外，我们也可以考虑其他的层级选择方式，因此使用面包屑选择，可以考虑将特殊选择入口，固定到底部 footer 处，让其能够承担更多的选择空间。

这就是关于这部分组件，大家有什么看法也欢迎在评论区我们聊聊，毕竟创作灵感都是来源于你们的工作，就这样～ 拜～