diff --git a/design/lightbox-mockup.html b/design/lightbox-mockup.html new file mode 100644 index 0000000..c303ca6 --- /dev/null +++ b/design/lightbox-mockup.html @@ -0,0 +1,310 @@ + + + + + +灯箱 v2.1 提案预览 · wait4x + + + +
+

图库 · 灯箱 v2.1 提案预览

+

预览稿 —— 交互为提案演示（非线上行为）· 图片为 content/photos 实拍，EXIF 为示例数据

+
+ 这是给浏览器直接打开的交互演示，对应《09-灯箱美化探索》提案 #1/#2/#3/#6/#7： + +
+
+
+ + + + + + + diff --git a/docs/research/09-灯箱美化探索.md b/docs/research/09-灯箱美化探索.md new file mode 100644 index 0000000..ee84854 --- /dev/null +++ b/docs/research/09-灯箱美化探索.md @@ -0,0 +1,119 @@ +# 灯箱美化探索：图片查看体验天花板五站研究（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`（焦点圈与归还，原生 `` 免费同款）。 + +### 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 | + +落地注：生产保持原生 ``（免费 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/` 仓内实拍（相对路径，需与仓库同置打开）