blog/docs/research/09-灯箱美化探索.md

灯箱美化探索：图片查看体验天花板五站研究（v2.1 输入）

只读调研 + 提案，不动代码。基线 = 灯箱 v2 车道（fit-contain / 滚轮锚点缩放 0.5–5x / 拖拽平移 / 双击 1x↔2.5x / caption+EXIF 分层 / ←→ 与触摸快滑），提案全部叠加在 v2 之上，不推翻缩放引擎。 配套可交互演示：design/lightbox-mockup.html（浏览器直接打开，交互为提案演示）。 标记：✅ = 静态抓取并核对源码/文档；◐ = 站点可达但查看器 JS 渲染，基于已知稳定形态记录。

一、五站笔记

1. PhotoSwipe（photoswipe.com）✅ 业界标杆 lightbox

• A 开合过渡：showHideAnimationType: zoom（默认）= 从缩略图原位起飞到舞台、关闭回落原位； 无缩略图时降级 fade；prefers-reduced-motion 自动 none。时长 333ms ×3（show/hide/zoom 同拍）， 曲线 cubic-bezier(.4,0,.22,1)，双击缩放共用同曲线（节奏统一的关键）。 cover 裁切缩略图路线：object-fit:cover + data-cropped —— 我们的 masonry 正是这种缩略图。
• B 舞台纯净度：底色实色 + bgOpacity（默认 .8，透明度走 JS 合成不走 rgba，性能纪律）； 文档明示禁止 backdrop blur（重性能坑）。tapAction:'toggle-controls'：单击即隐全部 chrome，纯看图。
• C 信息层：核心无 caption（a11y 原因删出 v5），官方 dynamic-caption 插件——"依剩余空放置于 图下或图侧"：竖图自动把 caption 挪进侧边 letterbox，横图回底部。计数器 n / N 极简。
• D 导航：边缘箭头 + loop + arrowKeys；幻灯片间距 spacing:.1（10% 视口，换片有"路过"感）； allowPanToNext：放大态继续滑 = 翻页（先耗尽平移余量再走片）。
• E 微交互：preload:[1,2] 相邻预载；preloaderDelay:2000——加载指示 2s 后才出现（快图不打扰）； maxWidthToAnimate:4000 超宽图不做起飞动画（防掉帧）。图标自带描边阴影，深浅底通吃。
• F 移动端：pinchToClose（捏合关闭）、closeOnVerticalDrag（竖拖关闭）、双指缩放到 max 档； trapFocus + returnFocus（焦点圈与归还，原生 <dialog> 免费同款）。

2. medium-zoom（francoischalifour.com）✅ Medium 的克制哲学

• A：点击 = 从缩略图位置 FLIP 放大到视口居中（margin 默认 0 贴边），关闭回落原位。 与 PhotoSwipe 同为"原位起飞"，但它只有这一种动画——整库只做一件事。
• B：默认底色 #fff（Medium 白，页面即舞台）；无任何 chrome、无 caption、无导航。 克制到"查看器不存在"：这就是它的设计立场。
• C：零信息层；template 选项可注入自定义布局（Facebook / Dropbox Paper 官方范例）—— 证明"纯放大内核 + 自定义信息壳"是可行分层。
• D：无连拍导航（单图语义）；scrollOffset:40：滚动页面即关闭，把"关"交给最顺手的手势。
• E：HD 模式 data-zoom-src：页内小图、开箱瞬间换高清（同宽高比前提），预览零等待。
• F：移动端点按开/点按关，无多余手势；无缩放（一档即满）。

3. Unsplash 照片页 ◐（curl 被 bot 墙拦截，未逐项复核）

• A：列表→详情是页面跳转非灯箱；大图页首屏即图主体，顶部细导航浮层滚动隐现。
• B：图外留白极小，信息全靠悬浮层：右侧竖排操作列（下载/尺寸选择/点赞/加合集/ⓘ）， 不占图也不占底。
• C：ⓘ 召唤 Info 面板：相机/镜头/光圈/快门/ISO/焦距/发布时间/浏览数全量 EXIF； 平时全隐——"轻常驻 + 重召唤"的范本。下载默认给适配尺寸，原图藏在尺寸菜单。
• D：集合/相册内 ←→ 键连续浏览；相关照片网格殿后（发现回路）。
• E：渐进加载 + blur-up 占位是全站基建；L 键点赞的快捷键 affordance。
• F：移动端操作列收进底部栏，Info 面板变全屏抽屉。

4. 图虫 ◐（主站可达，查看器 JS 渲染未复核）

• A：信息流点击 → 全屏查看器直开（社区产品重内容直达，弱化过渡本身）。
• B：舞台全黑，chrome 依赖手势（边缘滑动）而非常驻按钮。
• C：摄影师视角分层：caption/描述 + 醒目完整 EXIF（机身/镜头/参数条） + 作者卡（头像/ 关注）+ 标签 + 社区数据（赞/藏）——信息密度最高，但靠 JS 分层收纳（常驻只留作者卡）。
• D：同组连拍左右滑 + 组内缩略导航；键盘支持弱于 PhotoSwipe/Flickr。
• E：加载有占位图（信息流即高清小图，开箱升级）。
• F：App 化手势（快滑翻页带跟手位移）；双指缩放齐全。
• 教训面：信息全堆常驻会让暗房变"仪表盘"——我们只取它的 EXIF 完整度，不取密度。

5. Flickr（自选）✅ SSR 复核 + ◐ 视觉层

• A：照片 URL 直接开进 lightbox（无中间页）：暗房全屏沉浸，从网格进入有原位起飞感。
• B：舞台近纯黑（#212121 系）；chrome 默认轻常驻：底部左侧 title/作者小卡（可隐）， 其余全靠召唤。
• C：三段式：常驻小卡（title+作者）→ 右缘动作列（收藏/加画册/分享/下载尺寸/ⓘ）→ ⓘ 滑出右侧 EXIF 全量面板（机身/镜头/参数/软件/日期）。20 年沉淀的"常驻最轻、重的全召唤"。
• D：边缘 hover 箭头 + ←→/Esc/f/i 全键盘；f=收藏的键位文化。
• E：大图渐进加载；浏览数/评论在下折区（不抢舞台）。
• F：移动端 swipe 翻页、双指缩放、上滑收 chrome——三手势覆盖 95% 操作。
• 选它的理由：唯一同时满足"成熟产品 + SSR 可复核 + 键盘流 + 信息分层范本"。

二、差距矩阵（现状 v2 vs 天花板）

维度	我们现状（v2）	天花板做法（出处）	差距
A 开合	dialog 直开直关，零过渡	原位起飞+回落 333ms 单曲线（PS/MZ）	大
B 舞台	backdrop .95 常驻；meta 恒占底条	toggle-controls 沉浸（PS）；轻常驻重召唤	中
C 信息层	一层底条：caption+title+EXIF+动作平铺	双层：常驻轻卡 + 召唤 EXIF（FL/US）；caption 就空放置（PS 插件）	中
D 导航	←→ 键/两侧钮/触摸滑动/loop ✅	同款 + spacing 换片节奏 + 放大态滑透翻页（PS）	小
E 微交互	切图 160ms 淡入；光标三态 ✅	相邻预载 [1,2]、2s 延迟加载指示、缩放档位语义（PS）；HD 交换（MZ）	中
F 移动端	快滑翻页 + 双击缩放；无双指缩放	pinch 缩放/捏合关/竖拖关（PS）三件套	大

三、v2.1 增强提案（叠加式，不动 v2 引擎）

#	提案	做法	灰阶适配	工作量	优先级
1	原位起飞开合	点击缩略图：FLIP 动画双盒（外盒=裁切窗从缩略图矩形→舞台矩形，内图=cover 几何→contain 几何同步过渡，等价 PS data-cropped 路线）；300ms cubic-bezier(.4,0,.22,1)（与站 --ease 同族）；关闭回落到当前缩略图位置；reduced-motion 直开直关	起飞的是图不是 chrome；backdrop 照旧恒深	0.5–1 天	P0
2	背景点击关闭	点击落在图外区域即关（PS bgClickAction:'close' 同款），Esc 保留	无新增视觉	0.5h	P0
3	chrome 双层淡入 + 召唤	开箱：层1（关闭/箭头/计数）+140ms、层2（caption/EXIF/动作）+300ms 淡入；i 键或图上单击 toggle 全隐（toggle-controls）；zoom>1 自动隐、回 1x 淡回	淡入只有 opacity，无位移无色彩	0.5 天	P1
4	相邻预载	开箱后 idle 预载 ±1 张 fullSrc（PS preload 精神，我们取 [1,1] 克制档）	纯网络层	数行	P1
5	双指缩放（移动端）	pointer events 双指距离比→锚点缩放（复用 v2 zoomAt 数学）；v2 已有 touch-action:none 地基	同 v2	0.5 天	P1
6	换片过渡	切片：旧图 140ms 淡出、新图自侧向 10% 位移淡入（PS spacing:.1 节奏）；v2 换图已回正缩放，天然兼容	仅 opacity/transform	0.5 天	P2
7	缩放指示 + 首开提示	缩放停稳后右下 90% 淡入 168% 900ms 淡出；首开箱 hint 胶囊"滚轮缩放 · 双击放大 · Esc 关闭"2.6s 自隐	mono 小字，与 EXIF 同语言	数行	P2
8	长图侧置 meta	竖图（ratio<0.9）且视口 ≥820px：caption+EXIF 移入侧 letterbox（PS dynamic-caption"就空放置"）；横图维持底部条	文字色不变，只挪位	0.5–1 天	P2
9	HD 交换	zoom>1.5x 懒换 /photos-originals/ 原图，<1.5x 回 1440（MZ data-zoom-src 模式）；404 兜底留 1440	纯数据层	0.5 天	P2
10	移动竖拖关闭	zoom=1 时竖向拖 >80px 关闭并回落缩略图（PS closeOnVerticalDrag）	同关闭回落	0.5 天	P2

落地注：生产保持原生 <dialog>（免费 focus-trap/returnFocus，PS 同款能力）；起飞动画在 dialog 内 用 fixed 双盒实现，mockup 用 fixed 覆盖层纯为演示等价几何。

四、明确不做清单（与灰阶克制冲突）

• 粒子/彩光/视差/自动播放/轮播——舞台只属于照片
• backdrop blur——PhotoSwipe 文档明示重性能坑，且暗底已够沉浸
• 缩略图条（thumbstrip）——21 张规模用不上，常驻 chrome +1 与克制冲突（>50 张再议）
• 社交分享按钮——PS v5 自己都删了；博客无此回路
• tile deep-zoom / 万像素级缩放——仓内照片 2400px 封顶，用不到
• 全屏按钮——PS v5 已删（浏览器 F11 更顺）；Esc + 沉浸足够
• 音效、进度条、弹跳物理回弹——动效纪律：全站唯一曲线
• chrome 染 accent 色——灯箱恒深恒灰，强调色止于站内链接

五、验证记录

• PhotoSwipe：photoswipe.com 七页 + unpkg v5.4.4 photoswipe.esm.js defaultOptions 源码核对（✅）
• medium-zoom：francoischalifour.com options/HD 指南 + GitHub README（✅）
• Unsplash：curl 被 bot 检测墙拦截，标记 ◐；图虫：详情页 JS 渲染不可静态复核，标记 ◐
• Flickr：照片页 SSR 抓取成功（photo-model/person-model JSON 在源码中），视觉层标 ◐
• mockup：单文件无依赖；图片引用 ../content/photos/ 仓内实拍（相对路径，需与仓库同置打开）