视觉审核完成30%

2026-07-16 18:12:59 +08:00
parent cb25317412
commit 23cfd365a1
89 changed files with 3740 additions and 403 deletions
@@ -0,0 +1,101 @@
+# A01 公用卷轴云纹皮肤设计规格
+
+> 日期：2026-07-16  
+> 状态：用户已确认第 2 套卷轴云纹四件套视觉，待用户复核本规格后进入实施计划。  
+> 初选视觉源：`docs/design/assets/a01-vnext/A01-shared-skin-family-option-2-selected.png`  
+> 最终视觉源：`docs/design/assets/a01-vnext/A01-shared-scroll-skins-with-dialog-approved.png`
+
+## 1. 目标与范围
+
+本轮只重新设计并落地 A01 的公用视觉皮肤，不改登录流程、文案、图标、字号、按钮槽位或接口状态。
+
+需要形成同一视觉家族中的四个独立成品：
+
+1. 朱砂主按钮皮肤：用于登录等主操作。
+2. 暖宣纸次按钮皮肤：用于微信登录等次操作。
+3. 暖宣纸提示框皮肤：用于项目自定义 Toast；与次按钮同族，但更轻、更简洁并允许内容增高。
+4. 暖宣纸验证弹窗皮肤：用于安全验证弹窗；使用同族卷轴金线、祥云和底部淡墨山水。
+
+按钮版和提示版不强行共用同一张最终 PNG。它们共享纹样语言、色板和生产组件，但分别适配自己的槽位与伸缩行为。
+
+## 2. 选定视觉语言
+
+- 方向：第 2 套卷轴云纹。
+- 主按钮使用深朱砂纸面、古金双线、左右卷轴端头、清晰祥云角花和上下中心盘长结。
+- 次按钮使用暖宣纸纸面和同构古金纹样，边线对比度必须高于当前按钮，缩到 320px 屏幕仍能识别花纹。
+- Toast 使用同族暖宣纸和祥云，但减少卷轴端头与边线层级，避免抢占错误文案；不能看成缩小的微信按钮。
+- 验证弹窗使用清晰的祥云角花和古金双线，淡墨山水仅占底部约 22%，中央保持安静，不能干扰标题、说明和操作按钮。
+- 文字、微信图标和提示文案全部由 Vue 保持为活内容，不烘焙进资产。
+- 不引入现代渐变、玻璃拟态、高亮白外圈、绿色残边或与宗祠头图冲突的重阴影。
+
+## 3. 公用资产结构
+
+### 3.1 按钮皮肤
+
+按钮采用“横向三段式主皮肤 + 独立中心结饰”的结构：
+
+- 左端：固定宽度，保存卷轴端头、左侧祥云和角线。
+- 中段：只保存连续朱砂／宣纸纹理与直线，可横向伸缩。
+- 右端：固定宽度，保存卷轴端头、右侧祥云和角线。
+- 中心结饰：单独透明叠加，始终几何居中，不随中段拉伸。
+
+这样既忠实保留选定图中的端头、祥云和中心结，又不会把花纹整体横向拉扁。定位只用于皮肤层、结饰层和文字层叠放；按钮本身仍参与正常文档流。
+
+### 3.2 Toast 皮肤
+
+Toast 使用独立的轻量九宫格／三段式皮肤：
+
+- 左右祥云和折角固定。
+- 中央纸面与直线允许横向伸缩。
+- 上下方向允许在字体放大或文案换行时增高。
+- 不使用按钮卷轴端柱，避免提示框显得过重。
+
+如果 Android WebView 对九宫格表现不一致，则由同一 master 通过 Python 离线导出项目已知槽位尺寸，不允许回退到 `scaleToFill` 整图拉伸。
+
+### 3.3 验证弹窗皮肤
+
+验证弹窗使用独立九宫格皮肤：
+
+- 四角祥云、折角和双层金线固定，不随弹窗宽高变化而拉伸。
+- 中央暖宣纸区域允许双向伸缩，用于活标题、说明文案和操作区。
+- 底部淡墨山水作为独立安全区，只能在水平方向延展或按目标槽位离线导出，不能侵入正文区域。
+- 弹窗内容与操作按钮保持代码原生；遮罩、关闭交互和验证流程不改变。
+- 现有 `a02-login-panel.png` 约为 `944×1668px` 竖版图，却被 `scaleToFill` 铺进 `620×520rpx` 横向槽位，属于明确比例变形；新资产不得沿用该比例和渲染方式。
+
+## 4. 尺寸合同
+
+| 成品 | 逻辑槽位 | 3× 基准输出 | 伸缩策略 |
+| --- | --- | --- | --- |
+| 主按钮 | `622×92rpx` | `1866×276px` | 左右端固定，中段横向伸缩，结饰独立居中 |
+| 次按钮 | `622×100rpx` | `1866×300px` | 左右端固定，中段横向伸缩，结饰独立居中 |
+| Toast | `590×82rpx` 起 | `1770×246px` 起 | 四角固定，中部可横向和纵向扩展 |
+| 验证弹窗 | `620×520rpx` | `1860×1560px` | 四角与底部山水固定安全区，中央双向伸缩 |
+
+320×568 下按钮允许随页面自然滚动，不为同屏展示压缩按钮高度。Toast 宽度不得超出安全区，字体放大后不得裁字。
+
+## 5. 生产方法
+
+1. 以选定视觉图作为艺术方向，不直接从带展示背景的整图粗裁最终资产。
+2. 使用 ImageGen 分别生成无文字、无图标、无展示阴影的主按钮、次按钮、Toast 和验证弹窗 master。
+3. 用 Python/Pillow 完成透底、去白边／绿边、对称校正、切片、sRGB 与精确尺寸导出。
+4. Node manifest 记录 master、切片安全区、消费者、槽位和输出；禁止页面重复定义同一合同。
+5. A01 先作为唯一试点，Android 和用户确认前不推广到其他页面。
+
+## 6. 验收标准
+
+- 320px 宽真实运行截图中，卷轴端头、祥云和金线能够清楚识别。
+- 左右纹样对称；中心结不偏移、不拉伸；按钮文字与微信图标不被纹样干扰。
+- 主／次按钮没有白边、绿边、黑边、透明 RGB 或比例变形。
+- Toast 在短文案、长文案和字体放大状态下均不裁字、不拉坏角花。
+- 验证弹窗在 `620×520rpx` 槽位中不得出现横向压扁、模糊角花或山水侵入正文；标题、说明和两个操作入口必须保持清晰。
+- `320×568`、`360×640`、`360×800`、`412×915` H5 检查通过。
+- Android/HBuilderX 真机或模拟器复核通过后，才具备公用推广资格。
+- 用户没有明确说“通过”前，A01 始终保持 `[~]`。
+
+## 7. 非目标
+
+- 不修改 A01 以外页面的按钮。
+- 不清理旧按钮资产或历史截图。
+- 不对接登录接口。
+- 不制作深色主题。
+- 不把内部 H5 截图写成用户验收证据。