← 返回项目
PROJECT · 03

FRAME / COMPARE

并排比较界面版本,让每一次视觉变化都可以被看见。

状态
内部工具原型
角色
工具设计、前端工程
周期
3 周
年份
2024
2-up并排比较
50%默认分割线
4键盘快捷键
CASE STUDY
ToolingImagesUX

背景

设计评审中最难讨论的往往不是“大改版”,而是间距、字重和对齐方式的微小漂移。依靠记忆切换两个页面,很容易错过这些变化。

方案

Frame / Compare 提供并排、分割和闪切三种模式。任何模式都保持同一套观察逻辑,让讨论集中在变化本身。

工程重点

图片解码、缩放和拖拽被拆成独立状态,避免在高分辨率截图上重复计算。键盘快捷键覆盖主要操作,便于在设计评审中快速切换。

收获

工具最重要的不是呈现更多数据,而是让团队形成同一种观察方式。明确的比较模式让“我感觉不一样”这类模糊讨论更容易被转成具体观察。

SANDBOXED EXPERIENCE

可交互 Demo

Demo 在隔离的沙箱中运行。