Flowspace · 交互状态 · 方案取舍

用不同反馈区分任务悬停与选中

整理日期：2026年10月4日

当时的情况

Today 页点击任务卡片后，会在右侧打开详情抽屉。抽屉打开时，列表仍可操作；如果选中和悬停都改变整行背景，鼠标经过另一项时就会出现两处同样突出的反馈。

抽屉关闭时保留背景悬停。抽屉打开后，选中行保持反色背景，其他行弱化文字；悬停另一行时只恢复它的文字强调，不再改变背景。关闭抽屉后恢复普通列表状态。

优点：选中位置容易辨认

缺点：描边太重，与页面的极简风格不协调

优点：悬停和选中可以通过不同底色区分

缺点：需要为一种交互状态增加颜色，不符合既有七色体系的约束

优点：不改变卡片背景，也不增加控件

缺点：卡片副字较多，只改标题不够明显；标题已经是纯黑，无法继续加深

优点：反馈简洁，不与选中背景竞争

缺点：提示偏弱，需要确认是否容易注意到

优点：比单独的箭头更容易理解

缺点：卡片上多了一处控件，界面会更繁杂

优点：两个状态使用不同的标记

缺点：需要重新调整现有选中反馈，返工最多

背景用来标记正在查看的任务，悬停则提示鼠标当前指向的位置。给两种状态分配不同反馈，可以保留选中行的辨识度，又让其他任务继续可操作。弱化后再恢复文字强调，也不需要增加新的基础颜色或加粗描边。

目标方案是把未选中行的文字降到约 50% 不透明度，悬停恢复到 100%，过渡 150ms。实际实现没有用不透明度，而是用已有的灰色文字层级来区分。

详情抽屉继续允许操作左侧列表，不加遮罩；不为悬停新增基础颜色，也不增加加粗描边。

2026 年 10 月 13 日同步的原型采用“选中保留背景、悬停只恢复文字强调”的区分方式。抽屉打开后，未选中行的标题、交付要求正文、负责人和日期使用已有灰色，悬停或键盘聚焦时恢复纯黑；描述等副字保持原有层级，文字颜色已随当前动效规范统一为 200ms 过渡。

这和目标方案还有点区别：现在是拿已有的灰色调整文字层级，没有用 50% 不透明度；反色背景是白色和浅灰互换。这些是对着本地预览和源码核对的，目标里的不透明度还没有做进去。

如果文字强调还是不明显，就按“› 箭头 → 详情文字入口 → 改选中标记”的顺序往后退。这里只记备选顺序，不代表已经用上。