3.4 KiB
3.4 KiB
胶卷风格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、避免品牌相似符号
- 插画/装饰：暗色渐变+噪点、胶片孔洞/标尺式细节可点缀，勿喧宾夺主
- 可用性：高对比可读性、色弱可访问、交互状态清晰（禁用/加载/选中）