Studio
在浏览器中实现非破坏性RAW处理：真正的难题在于色彩。
- 年份
- 2026
- 制作周期
- 12 周
- 技术栈
- Next.js · React · TypeScript · Tailwind · Vercel
- 产品设计
- 界面设计
- 开发
- 图像处理
Kayzen Web自主开发的产品，在启用正式域名之前，暂以Vercel预览地址提供服务。
- 端到端色彩管理链路
- ICC
- Lighthouse 无障碍
- 97/100
- Lighthouse 最佳实践这是我们在该指标上的最低分：浏览器内的 RAW 处理依赖于 Lighthouse 会标记的 API；我们选择如实公布，而不是删除这项功能，相关评审已排入计划。
- 73/100
需要解决的问题。
背景
Studio 是一款在线照片冲印处理应用：RAW 导入、非破坏性调整、端到端 ICC 色彩管理，以及多格式导出。
限制
摄影师不会为了舒适而更换工具。有两个关键障碍：色彩保真——导出后出现色偏的文件就无法使用；以及非破坏性——也就是在六个月后仍能回退任何一项调整。
对策
先处理色彩，再做界面。相机输入配置文件、线性工作色彩空间、导出时选择的输出配置文件：整条色彩链路清晰明确，并展示给用户。所有调整都以操作列表的形式保存，从不直接作用于源文件。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布：若某项分数偏低，其原因与改进计划会在下文写明，而不是避而不谈。
每一个设计取舍，及其理由。
中性的深色界面
图像周围是严格中性的灰色，没有任何偏色。带色调的界面会扭曲对白平衡的感知：这是修图软件的第一条规则，优先于任何审美考虑。
直方图始终可见
固定在调整面板顶部，并附有溢出警告。这是摄影师的测量仪器；把它藏在某个标签页后面，就好比把水平仪收进工具箱。
沿用行业通用快捷键
快捷键沿用主流专业软件的设定。强迫专家用户学习一套新语法，就是要他们先忘掉旧的——切换成本将超过收益。
项目配色
中性灰 900
#18181B
工作区背景
中性灰 700
#3F3F46
面板
淡紫
#A78BFA
强调色、选中状态
溢出红
#EF4444
高光溢出警告
字体系统
标题字体
Inter 600
正文字体
Inter 400
数值采用等宽字形：数值宽度跳动的滑块，会让人觉得不够精确。
幕后的技术实现。
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
以 WebAssembly 解码 RAW
专有格式（CR3、NEF、ARW）的解码在 worker 中通过 WebAssembly 运行。主线程始终可用：在解码一个 6,000 万像素文件的同时，滑块依然响应灵敏。
通过 WebGL 进行 GPU 渲染
所有调整都以着色器（shader）的形式在显卡上执行。如果交给 CPU 处理，在这种分辨率下预览将无法使用。
记录操作历史，而不是像素
每项调整都是一个可序列化操作栈中的一条记录。撤销、将处理批量应用到一组照片、导出预设：一切都源于这一结构。
网站如何被搜索到。
SEO 用于获客，而不是产品本身
应用本身无法被索引，也无需被索引。SEO 聚焦于产品介绍页和对比评测页——用户正是在那里发现产品的。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
专业级界面仍达 97/100
每个滑块都是原生 input，带有标签、会播报数值，并支持键盘步进。几乎所有修图界面都省掉了这一步；但在技术上，没有任何理由这样做。
交付了哪些内容。
- 产品介绍
- 修图应用
- 格式与兼容性
- 价格
项目的推进过程。
色彩管理链路
输入配置文件、工作色彩空间、输出配置文件。
解码
WebAssembly、worker、快速预览。
渲染
WebGL 着色器、直方图、溢出提示。
界面
面板、快捷键、历史记录。
