rain
102 lines
5.8 KiB
Markdown
102 lines
5.8 KiB
Markdown
# 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 截图写成用户验收证据。
|