Super Productivity 项目中的按钮悬停文本优化实践

在 Super Productivity 项目的任务规划模块中，用户界面存在一个细节体验问题：部分功能按钮缺乏悬停提示文本。本文将从技术实现角度分析该问题的解决方案，并探讨交互设计中的相关最佳实践。

问题背景分析

在 Planner 页面中，存在两个关键交互元素未提供悬停文本：

1. 任务抽屉按钮（展开/折叠任务详情）
2. 重复任务编辑按钮

这种设计缺陷会导致新用户难以理解按钮功能，降低操作效率。良好的悬停提示（Tooltip）是提升界面可用性的重要手段，特别是在生产力工具中，清晰的引导能显著降低学习成本。

技术解决方案

基于 Angular Material 的现有架构，可通过以下方式实现优化：

1. 任务抽屉按钮

<button mat-icon-button 
        [matTooltip]="'TASK_DRAWER.TITLE' | translate" 
        matTooltipPosition="right">
  <mat-icon>unfold_more</mat-icon>
</button>

关键点：

• 使用 Angular 的国际化管道（translate）支持多语言
• 设置 tooltip 显示位置为右侧（避免遮挡其他UI元素）

2. 重复任务编辑区域

原实现存在工具提示位置错误的问题（仅附加在重复图标上），应调整为整个可点击区域：

<div class="repeat-task-wrapper"
     [matTooltip]="'PLANNER.EDIT_REPEAT_TASK' | translate:{title: task.title}">
  <mat-icon>repeat</mat-icon>
  <span>{{ task.title }}</span>
</div>

优化要点：

• 移除原图标上的独立 tooltip
• 使用插值语法动态显示任务名称
• 通过 CSS 确保整个区域具有可点击视觉反馈

交互设计考量

在实现过程中需注意以下设计规范：

1. 延迟显示：建议设置 500ms 的显示延迟，避免鼠标掠过时频繁触发
2. 响应式定位：在小屏幕设备上自动调整 tooltip 显示位置
3. 内容简洁：提示文本不超过 20 个字符（中文）或 40 个字母（英文）
4. 无障碍访问：确保 tooltip 可通过键盘导航触发，符合 WCAG 2.1 标准

技术决策背后的思考

选择将 tooltip 附加到整个可点击区域而非单个图标，是基于 Fitts' Law（费茨定律）的实践：

• 增大有效点击区域提升操作效率
• 统一提示内容避免碎片化信息
• 符合用户对交互元素的心理模型（整个区域作为功能入口）

对于重复任务这类复合控件，这种实现方式能更好地传达"编辑整个重复序列"的操作语义，而非仅针对图标本身的功能说明。

兼容性处理

方案需考虑以下边界情况：

1. 超长任务名称的截断处理（CSS text-overflow）
2. 触摸设备上的替代交互方案（长按触发）
3. 与现有键盘快捷键的协同工作

通过这组优化，Super Productivity 的 Planner 模块在保持简洁界面的同时，显著提升了功能的可发现性。这种模式也可推广到项目中其他类似场景，形成统一的设计语言。