B端设计思考 | 自定义功能设计

最近做了一个自定义颜色区间功能的设计，趁热打铁，把设计过程中的一些思考整理下来，当作小结分享，如果大家有更好的想法，欢迎交流。

• 使用者： 部门领导
• 使用场景： 在后台管理系统中，根据近期部门工作量的实际分布情况，于上班时段进行调整；
• 用户行为： 设定多个颜色及其对应的数值区间，保存后实时应用于热力图展示；
• 用户目标： 高效完成配置，从而更准确地识别员工在特定阶段的工作负荷分布；

1. 设计目标：

   设计丝滑的操作流程，让用户轻松、无歧义地定义每个区间的边界条件。
2. 方案探索

收藏

• 操作流程：

  调节/输入数字 → 选择关系符 → 选择关系符 → 调节/输入数字 (例如： 0 < 颜色一 ≤ 5)。
• 优点：

  设定过程精确，符合数学上的区间定义逻辑。
• 缺点：

  单行包含四个操作元素（两个数字输入、两个关系符选择），视觉呈现冗余，初次接触会感觉复杂度高，容易造成认知负担。

收藏

• 操作流程：

  直接输入/调节区间的下限和上限数值 → 通过勾选框明确是否包含该端点 (例如：0 至 5，并勾选“含0”、“不含5”)。
• 优点：

  操作步骤更简洁（主要操作为输入两个数字和勾选），更符合用户对“范围”的直观认知（从某数到某数），视觉负担显著降低。

• 首区间下限默认填充0，并置灰步进器减少按钮；当用户修改为大于0的数值后，恢复步进器的减少功能。避免用户输入负值，相当于在过程中及时制止，而不是事后提醒。

收藏

• 勾选框仅在用会户填写完当前区间的两个端点数字后才显示。避免界面过早出现冗余元素，降低认知负荷。
• 当用户完成上一区间的上限值时，下一区间的下限输入框自动填充该值。用户可手动修改联动值，但需满足 下一区间下限 ≥ 上一区间上限。减少重复输入，强制保证区间连续性。

收藏

• 底部添加实时预览模块，在配置过程中，动态显示区间规则预览。即时反馈配置效果，降低试错成本。

收藏

• 封闭区间：X 至 Y (例如：20 至 30)
• 开放上限区间：X 以上 (例如：20 以上)

收藏

1. 设计目标：

   提供引导或约束机制，保证最终颜色配置符合直观的深浅认知。
2. 方案推演过程

• 基础预设

    

• 自定义需求

    

收藏