原创设计指南

Codex 背景图构图:兼顾首页与任务页的安全区方法

不要只为一张首页截图构图;从首页横幅和任务页背景的共同约束出发,让同一张原图在两个页面都保持主体完整和文字可读。

先理解两个页面的冲突

Codex 首页更像超宽横幅,具有大标题、项目卡片和较多横向空间;任务页则更高、更密集,正文、代码、状态、导航和底部输入框会占用大部分画面。同一张图会在两个页面被不同缩放、裁切和遮挡。只看首页截图设计,任务页可能出现人脸被切掉、地平线穿过正文、关键元素落在输入框下面等问题。正确顺序是先满足长时间阅读,再考虑空白页面的视觉冲击。背景的职责是支持工作,而不是迫使用户为了看清内容不断调整窗口。

  • 同时检查内容丰富的任务页和首页。
  • 按真实使用的宽、中、窄窗口测试。
  • 把母版保存在主题目录之外。
  • 每次只改变一个构图变量。

把 20:9 当作实用工作画布

20:9 能为超宽首页保留横向空间,又不会强迫主体进入左侧阅读列。这是 CodexSkin 的实践建议,不是官方文件要求。源图条件允许时建议宽度至少 2000 像素,并保留未经裁切的原始母版。不要把普通 16:9 照片直接拉伸到目标比例,应通过扩展、重新裁切或重新设计保持人物与形体自然。导入前再做一份临时 16:9 预览,用它模拟任务页对上下边缘和主体的压力。所有导出文件应带版本号,避免覆盖已经验证过的好版本。

  • 保留原始母版和创作记录。
  • 导入前预览 20:9 与 16:9。
  • 避免放大小尺寸噪点图片。
  • 为每次导出保留版本号。

把主体放进右侧焦点安全区

人物图可先把人脸中心放在画面宽度 70% 至 82%、高度 35% 至 50% 的范围,垂直方向以约 45% 作为初始值;完整头部要可见,人物总高度尽量不超过画面 45%。这些范围为响应式裁切留下头顶和右侧余量,并把视觉重量移出左侧阅读区。没有人物时同样适用:产品、建筑、星球、云团或抽象焦点可放在右侧三分之一,但不要紧贴边缘。静态设计稿看到的完整边缘,在较窄窗口中可能会被进一步裁掉。

  • 横向焦点位于 70% 至 82%。
  • 纵向焦点位于 35% 至 50%。
  • 主体高度不超过约 45%。
  • 保留头顶和右侧裁切余量。

左侧 55% 不是空白,而是阅读空间

低细节负空间不等于纯黑。它可以有缓慢渐变、柔和阴影和大面积气氛色,但应控制亮度变化、纹理密度和类似文字或控件的形状。建议把左侧约 55% 作为安静阅读区,避免星点、树叶、发丝、城市窗格、细小粒子和生成的伪文字进入其中。这些元素会制造与字形竞争的局部对比。模糊并不总能解决问题,强烈亮点模糊后仍可能形成光晕。若阅读区依然嘈杂,应直接简化原图或压缩明暗范围。

  • 使用大形状和缓慢渐变。
  • 让明亮边缘远离文字列。
  • 删除伪文字、符号和界面形状。
  • 检查弱化小字而不只看标题。

把底部输入框区域视为不可用空间

任务页输入框会遮住图片下部,并在窄窗口占据更高比例。人脸、手部、Logo、地平线、说明文字和剪影的关键转折都不应放在该区域。纹理可以延续到下方,但下部被遮挡后构图仍应完整。预览时可用临时矩形遮住底部 18% 至 24%,如果主体故事或视觉平衡因此崩溃,就把关键元素上移或缩小。还要检查同一图片在窄窗口中是否因为横向裁切而靠近输入框。原图中不要生成边框、按钮或界面元素,它们会与真实控件产生误导。

  • 预览时遮住底部 18% 至 24%。
  • 把关键元素向上移动。
  • 检查最窄的日常桌面窗口。
  • 原图不包含任何界面控件。

提示词只负责起点,人工复核决定能否使用

可用的中立提示词是:20:9 超宽电影感桌面壁纸,较小主体位于右侧三分之一,完整头部与充足头顶空间,人脸中心位于宽度 70% 至 82%、高度约 45%,主体高度不超过 45%,左侧 55% 为暗色低细节负空间,重要细节远离底部输入框,无文字、Logo、边框和界面。提示词无法保证人体结构、裁切、授权与可读性。应检查全尺寸结果,删除意外标记,确认使用权,比较两种裁切,再用副本导入真实界面;任何一个页面失败,都应编辑或重新生成。

  • 拒绝意外文字、标记与界面形状。
  • 公开前确认图片权利。
  • 导入后比较首页与任务页。
  • 任一页面失败就继续修改。

相关阅读

Codex 主题的可读性、对比度与真实任务检查Codex 主题背景的图片权利、许可与发布记录Codex Dream Skin 主题不显示:可逆的诊断路径