64 lines
3.4 KiB
Markdown
64 lines
3.4 KiB
Markdown
|
# 胶卷风格AI工具设计规范（二次创适用版）
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **核心风格定位**
|
|||
|
|
「复古胶片暗调+现代代工具极简感」，以黑色基底为核心，叠加入胶片颗粒肌理，整体视觉克制而有质感，突出「剪辑工具的专业感」与「胶卷复古的氛围感」，避免与现有工具同质化。
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **1. 颜色规范**
|
|||
|
|
- **主色**：
|
|||
|
|
- 背景：#0D0D0D（深黑，带1%青灰调，区别纯黑）
|
|||
|
|
- 主功能色：#00B030（低饱和苔藓绿，用于按钮/选中态，与已知品牌色差异明显）
|
|||
|
|
- **辅助色**：
|
|||
|
|
- 交互蓝：#1A66E0（用于预览/保存等次级操作）
|
|||
|
|
- 强调橙：#FF6A30（用于标记点/警告，低明度避免刺眼）
|
|||
|
|
- **中性色**：
|
|||
|
|
- 模块底：#1A1A1A（比背景亮5%，区分层级）
|
|||
|
|
- 文本：#F2F2F2（正文）、#CCCCCC（次要文本）
|
|||
|
|
- 边框：#333333（1px细线条，弱化割裂感）
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **2. 质感与阴影**
|
|||
|
|
- **肌理**：全局叠加原创胶片颗粒（3%灰度噪点，随机生成，非真实胶卷扫描图）
|
|||
|
|
- **阴影**：
|
|||
|
|
- 卡片/模块：内阴影（0 2px 4px rgba(0,0,0,0.4)），无外阴影
|
|||
|
|
- 按钮hover：轻微发光（0 0 6px rgba(0,176,48,0.3)，主色低饱和光晕）
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **3. 图标选型**
|
|||
|
|
- **风格**：线性几何风，线条粗细1.5px，圆角2px
|
|||
|
|
- **载体**：统一使用 SVG（图标文件与 SVG Sprite/Icon 组件），禁止使用位图作为图标
|
|||
|
|
- **禁用**：避免使用与知名剪辑工具高度相似的图标（如剪映、Pr的标志性符号）
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **4. 卡片规范**
|
|||
|
|
- **形态**：圆角6px（非直角/大圆角），边框1px #333333
|
|||
|
|
- **内容区**：内边距16px，底部可加「胶片式参数条」（黑底白字小文本，如“1080p | 30fps”，纯装饰）
|
|||
|
|
- **状态**：
|
|||
|
|
- 活跃态：边框改为主色#00B030
|
|||
|
|
- hover态：背景色加深至#161616
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **5. 布局规范**
|
|||
|
|
- **整体结构**：顶部导航（高52px）+ 左侧功能栏（宽60px图标/200px展开）+ 主内容区（占比70%）+ 右侧参数面板（占比30%）
|
|||
|
|
- **间距**：模块间margin 20px，元素内padding 12-16px，避免拥挤
|
|||
|
|
- **移动端**：左侧栏转为底部悬浮按钮组（4个核心功能+居中主按钮）
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **6. 标题与文本**
|
|||
|
|
- **标题**：字体「Montserrat」（半粗体，20px），字间距0.5px，颜色#F2F2F2
|
|||
|
|
- **正文**：字体「Inter」（常规，14px），行高1.5，颜色#F2F2F2
|
|||
|
|
- **辅助文本**：字体「Inter」（常规，12px），颜色#CCCCCC
|
|||
|
|
|
|||
|
|
|
|||
|
|
## **7. 设计提示词（供生成式设计/插画参考）**
|
|||
|
|
- **总体风格**：复古胶片暗调、现代极简 UI、低饱和高级质感、专业剪辑工具氛围、控色节制
|
|||
|
|
- **质感**：微颗粒胶片噪点（3% 灰度随机）、内阴影层次、金属磨砂、磨光边缘
|
|||
|
|
- **配色**：深黑 #0D0D0D 背景、模块底 #1A1A1A、主色 #00B030、交互蓝 #1A66E0、强调橙 #FF6A30、细边界 #333333
|
|||
|
|
- **光影**：按钮 Hover 轻微发光（0 0 6px rgba(0,176,48,0.3)）、卡片内阴影（inset 0 2px 4px rgba(0,0,0,0.4)）
|
|||
|
|
- **形态**：圆角 6px、1px 细边、紧凑留白（内边距 12–16px，模块间距 20px）
|
|||
|
|
- **图标**：线性几何、1.5px 描边、统一 SVG、避免品牌相似符号
|
|||
|
|
- **插画/装饰**：暗色渐变+噪点、胶片孔洞/标尺式细节可点缀，勿喧宾夺主
|
|||
|
|
- **可用性**：高对比可读性、色弱可访问、交互状态清晰（禁用/加载/选中）
|
|||
|
|
|