Kaneo 触觉按压反馈Press Feedback实现解析按钮与任务卡片的物理触感设计【免费下载链接】app All you need. Nothing you dont. Open source project management that works for you, not against you.项目地址: https://gitcode.com/GitHub_Trending/app116/app导读本文深入解析开源项目管理应用 Kaneo 中触觉按压反馈tactile press feedback的设计与落地实现。该方案来源于仓库 plans/004-press-feedback.md 这一动画改进计划目标是为看板看板上的按钮与任务卡片增加按压缩放响应让交互表面具备真实的物理触感。读完本文你将掌握按压反馈的数值基准0.95–0.98 缩放区间、150ms ease-out 过渡的取舍逻辑、active与data-pressed两类按压状态的正确用法以及它与拖拽库、键盘无障碍的共存方案。问题定义为什么交互表面需要按压感plans/004-press-feedback.md以一句结论开头No interactive surface presses.没有任何交互表面具备按压响应。在实施该计划之前Kaneo 的前端存在两类典型的静态交互表面问题按钮只变色、不缩放共享按钮组件 apps/web/src/components/ui/button.tsx 中的 variants 虽然定义了:active/data-pressed状态下的颜色与阴影变化如 default 变体的data-pressed:bg-primary/90、[:active,[data-pressed]]:shadow-none但整个元素从未发生形变scale。用户按下按钮时界面只是换了个颜色没有按下—回弹的物理过程。看板任务卡片零按压响应任务卡片是看板视图的主要点击目标点击即打开任务详情见 apps/web/src/components/kanban-board/task-card.tsx它只定义了 hover 样式hover:border-border/90 hover:bg-background hover:shadow-sm按下瞬间没有任何反馈。从设计工程design engineering的角度看缺乏按压反馈会带来两个可感知的体验问题鼠标用户无法确认这一击是否真的生效触屏/触控笔用户则完全感受不到物理按键的咔嗒感。这是交互物理性Physicality origin维度上的典型缺陷因此该计划被评定为 MEDIUM 严重度。目标设计两条改动、一个统一基准计划为两类交互表面分别设定了精确的改造目标核心参数如下交互表面按压缩放过渡属性时长/缓动按钮基类共享类字符串active:scale-[0.97]、data-pressed:scale-[0.97]由transition-shadow扩展为transition-[box-shadow,scale]duration-150 ease-out看板任务卡片active:scale-[0.98]scale纳入既有过渡属性列表依赖计划 002duration-150 ease-out关键设计决策是缩放幅度的差异化按钮属于小尺寸元素视觉上需要更明显的压缩取0.97缩小 3%任务卡片是更大的元素按压缩放必须更克制取0.98缩小 2%且明确以 0.95–0.98 为允许区间。计划同时强调过渡时长取约150ms 的 ease-out按下时快速压缩释放时以 ease-out 曲线干脆地回弹避免廉价、弹跳感bouncy的动画。按钮按压反馈的落地实现改造后的共享基类位于 apps/web/src/components/ui/button.tsxbuttonVariants的基类字符串完整形态截取核心部分为relative inline-flex ... transition-[box-shadow,scale] duration-150 ease-out active:scale-[0.97]>--ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);按钮与卡片使用的ease-out因此统一映射为cubic-bezier(0.23, 1, 0.32, 1)——一种快速启动、平滑收尾的强出曲线。按压反馈的按下即压、释放即回弹手感正是建立在这个全局缓动纪律之上的。**计划 002scope transitions**将按钮的transition-shadow升级为transition-[box-shadow,scale]并为卡片预留了scale过渡属性同时移除了全库范围内的transition-all滥用。没有 002 的铺垫004 的scale就无法被平滑过渡键盘聚焦环也会继续以 200ms 的延迟淡入淡出。因此plans/README.md中004 depends on 002s card transition property list的表述是理解本计划落地顺序的关键。验证方法机械检查与手感验收计划给出的验证路径分为两层均可复现机械层面——执行构建命令确认改动可编译pnpm --filter kaneo/web build手感层面——逐项验收以下交互行为长按任意按钮元素应压缩缩小至 0.97颜色/阴影同步进入 pressed 态释放瞬间元素快速回弹至原始尺寸不产生弹跳bounce感任务卡片按下有明显但克制的压缩0.98触感明确但不弹键盘激活Enter/Space通过 Base UI 注入的data-pressed呈现与鼠标完全一致的按压状态——这是无障碍键盘操作与鼠标手感对齐的关键验收点。从当前仓库源码transition-[box-shadow,scale] duration-150 ease-out active:scale-[0.97] contenteditable="false">【免费下载链接】app All you need. Nothing you dont. Open source project management that works for you, not against you.项目地址: https://gitcode.com/GitHub_Trending/app116/app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考