影像居中，
设计保持分寸。

01 / 色彩规范

以 PANTONE Black 6 C 为深色背景参照（屏幕近似值 #101820），7541 C 为浅灰文字参照（#D9E1E2），5455 C 为雾蓝强调参照（#BFCED6）。以冷色系与明度差建立层级：大面积深底、浅灰阅读、少量雾蓝用于选中态和主要操作。以上 HEX 是网页屏幕近似值，不等同于印刷专色标准。

摄影画面保留自身的色温、饱和度与对比度。白底产品可以在白色图像画布中完整呈现，透明产品素材的背景单独控制。状态色预留给后续真实交互，首页原型不增加无关状态组件。

02 / 中英文字体与排版

展示标题：Iowan Old Style / Noto Serif SC / 宋体 / Georgia，使用衬线字形，字重400。中文正文：苹方 / 微软雅黑；英文正文：Segoe UI / 系统无衬线；英文标签和元信息：SF Mono / Menlo / Consolas。使用系统回退，正式阶段如需跨平台统一字形，再加入授权明确的自托管字体。

9—11px只用于演示素材标签和重复的英文辅助标签。项目名称、媒介类型、操作入口及案例正文保持清晰的可读字号。英文展示标题允许 −0.04em，中文正文不使用紧缩字距。中文为主叙述，英文辅助建立编辑层次；不以全大写英文代替必要的中文说明。

03 / 布局网格与间距

内容容器最大1512px；长正文最大720px。采用4px基础尺度，常用间距为8、12、16、20、24、32、40、48、64、80、104px。图片可以大于文字区宽度，但标题、图注与正文有稳定对齐线。

1920px屏幕中容器居中，单侧边距约204px；1440px屏幕中边距约64px。手机先保持画面完整与阅读顺序，再调整视觉密度。

04 / 首页首屏

桌面采用左文字、右作品的4.8∶7.2双栏。左侧依次为英文能力标签、两行主标题、简短介绍、图片/视频入口；右侧为单张静态大图和图注。品牌标识为临时文字标，导航直接区分图片作品与视频作品。

• 桌面导航104px高，首屏上间距30px，双栏间距48px；右侧画面约1.3∶1，仅封面允许单独配置裁切。
• 首屏约60%的横向空间用于图片。主标题不覆盖产品文字、人物面部或关键构图。
• 手机首屏按“定位—标题—短说明—两个入口—代表图”重排；图像4∶3，若真实素材不适合裁切，则保留原比例。
• 首屏使用静态图，不自动播放视频；优先加载首图，图片区与视频区都有直接入口。

05 / 作品网格与媒介区分

桌面两列图片间64px，首页第二列可下移152px，平板降至100px；手机取消所有错位，统一单列、间隔40px。作品封面没有圆角卡片、阴影或背景装饰。标题位于图片下方18px处，手机13px；图注与类型始终可见。

图片以内容顺序浏览；视频使用专属播放符号、时长与画幅信息。时长必须来自真实文件，缺少时不显示。当前原型只有静态封面，点击后明确说明尚未提供视频。

06 / 项目详情与图片编排

• 图片详情：标题与摘要之后先给最终大图，再显示项目目标、原始素材、思路、对比、最终系列与职责。缺少的过程模块不占位。
• 大图容器最大1512px，正文720px；正文块上下间距64—80px，手机32—40px。
• 单图默认完整展示，双图允许3∶2配3∶2、纵图配纵图；混合比例按各自完整高度排列，不硬拉齐。
• 前后对比保持相同画幅与对齐。桌面可拖动分隔线，手机提供“原图 / 成片”切换，键盘同样可操作。
• 图注与图片间距12px，说明包含必要的制作阶段、本人职责与AI参与范围。
• 视频详情：16∶9播放器为主视觉；9∶16播放器桌面最大宽420px，右侧配文字，手机按容器宽度排列；播放区使用中性深底并保留原画幅。
• 前后项目导航位于页末：桌面左右各一半，明确“上一个 / 下一个”、名称及可选封面；手机上下排列。返回对应的图片库或视频库。
• 图片放大采用中性背景，默认完整适配；关闭按钮至少44px可点击，支持Escape、焦点锁定和关闭后返回原位置。

07 / 组件规范

08 / 滚动与动效

不使用滚动劫持、强制横向浏览、光标追踪、加载倒计时或跟随光斑。动画只用于提示可点击性、解释状态与维持浏览位置。

09 / 手机端独立规则

1. 首屏文字在上、主图在下；缩短辅助说明，图片和视频入口均直接可见。
2. 作品列表单列，保留标题、类别和项目性质；取消桌面错位，不隐藏核心信息。
3. 正文16px；图片与视频按自身比例显示，关键主体不得因手机裁切缺失。
4. 所有操作目标至少44×44px；图上箭头在触屏常驻，不要求长按或悬停。
5. 竖屏视频保持9∶16，不用横屏黑框包住小画面；横屏片允许全屏观看。
6. 不拦截系统缩放手势；放大层保留明确关闭入口和返回位置。
7. 筛选条允许横向滑动，页面主体不能产生横向溢出；无意义的悬浮控件不常驻。
8. 设计验收宽度为320、390、768、1024、1440、1920px；200%文字缩放时仍能阅读和操作。

10 / 关键页面线框与视觉说明

首页已有可运行原型。以下线框用于确定后续页面的视觉关系，本阶段不实现作品库、项目详情、后台或联系表单。

辅助页面

11 / 本阶段验收