以下是针对百子柜电子书设计的PSD/AI文件结构建议与补充章节设计规范，确保设计团队高效协作与风格统一：
一、PSD/AI文件图层结构规范
封面PSD示例（层级从下到上）：
1. 背景组
- 渐变天空 [智能对象]
- 双子塔水墨剪影 [矢量路径]
- 雾霾粒子效果 [叠加模式]
2. 中景组
- 百子柜抽屉（带药材飘散动效）[智能对象+蒙版]
- 养生壶热气书法字 [文字转路径+外发光]
3. 文字组
- 主标题 [文字层+斜面浮雕图层样式]
- 副标题 [文字层+纹理叠加]
4. 品牌组
- 认证飘带 [形状图层]
- LOGO+二维码 [链接智能对象]
5. 特效组
- 全局光效 [叠加模式]
- 装饰金线 [矢量路径+图案画笔] AI矢量元素包内容：
装饰元素.ai- 马来西亚特色图标（榴莲/椰树/雨林叶脉）
- 中医符号（阴阳鱼/经络图简笔/药杵药臼）
版式框架.ai- 标准页边距参考线
- 交互热区标记（蓝色#0000FF 30%透明度）
动态组件.ai- 可编辑食谱步骤模板
- 悬浮产品卡样式（含hover态）
二、其他章节增补设计说明
1. 雨季祛湿篇
视觉主题：雨滴涟漪+根系生长隐喻
核心元素：
- 页眉：连绵雨丝动态GIF（导出为APNG格式）
- 侧边栏：木棉花剖面图（标注祛湿成分）
- 产品植入：四神汤料包3D旋转展示（需嵌入Sketchfab代码）
交互细节：
- 点击食材图片→弹出采购Tips弹窗
- 长按食谱步骤→触发”语音朗读”功能
2. 旱季清热篇
视觉主题：火焰渐隐+水波纹冷却动效
创新组件：
- 热感地图：马来西亚各州燥热指数可视化（SVG交互图表）
- 冷知识浮层：手指滑动触发”为什么凉茶要热饮”科普动画
微交互设计：
- 茶方表格hover效果：行高亮+药材缩略图浮动显示
- 倒计时组件：特惠商品动态折扣（需接入API）
三、响应式设计断点规范
| 设备 | 画布尺寸 | 文字缩放 | 交互适配要求 |
|---|---|---|---|
| 手机竖版 | 375×812 | 正文14→12pt | 按钮最小点击区域44x44px |
| 平板横版 | 1024×768 | 标题24→28pt | 悬浮窗位置锁定右下角 |
| 桌面端 | 1440×900 | 保持原尺寸 | 侧边栏固定+主内容区滚动 |
四、动效参数库（供开发参考）
- 页面过渡：
- 类型：模拟药材抽屉滑动
- 参数：X轴偏移300px + 缓动曲线easeOutQuint
- 时长：400ms
- 悬浮产品卡：
- 初始态：投影深度3px
- Hover态：Y轴上移5px + 投影深度8px
- 动效曲线：spring(300, 25, 10)
- 扫码提示：
- 呼吸灯效果：透明度30%↔100%，周期2s
- 触发方式：滚动到元素位置后延迟0.5s启动
五、印刷/数字双版本输出规范
| 属性 | 印刷版 | 数字版 |
|---|---|---|
| 色彩模式 | CMYK（潘通补充色库） | RGB（支持P3广色域） |
| 分辨率 | 300dpi（关键元素600dpi） | 72dpi（@2x倍图） |
| 出血 | 3mm | 无 |
| 特殊工艺 | 局部UV+触感膜 | Lottie动画嵌入 |
| 文件格式 | PDF/X-4 | EPUB3+PDF交互式 |
六、设计交付清单
- 核心文件：
- 封面.psd（含字体Outline备份）
- 内页模板.ai（链接所有矢量元素）
- 动效说明.json（Lottie/Bodymovin格式）
- 辅助资源：
- 品牌字体包（思源宋体/吕建德行楷商用授权证明）
- 药材摄影图库（需包含Alpha通道）
- 开发交接：
- Figma交互原型链接（含自动布局规范）
- 雪碧图生成脚本（Python+Photoshop动作）
需要为您生成特定页面的设计标注文档（如间距/色值标注），或提供印刷工艺样品参考图吗？请随时告知具体需求！ 🎨
Leave a Reply