image-first-grid-layout

name	image-first-grid-layout
description	创建一个以图像为主导的网格设计系统，带有满版摄影、结构引导线、锚定的内容块与克制的技术叠层。

Image First Grid Layout Skill

何时使用

• 创建一个以图像为主导的网格设计系统，带有满版摄影、结构引导线、锚定的内容块与克制的技术叠层。

工作流程

范围

• 将其作为一套完整的设计系统方向，贯穿主视觉图像处理、布局网格、叠层框架、排版、辅助卡片与运动。
• 当体验应由一个主导性的摄影或电影感视觉场引领，内容以精准的叠层块排布而非堆叠的营销区块时使用。
• 这不是画廊布局，也不是普通的编辑排版极简主义。图像应充当舞台，而网格与内容叠层赋予其产品级结构。

视觉目标

• 围绕一张填满大部分或整个视口的大型沉浸式背景图或媒体面来构建页面。
• 添加暗色渐变冲刷、方向性叠层或色调暗角，使文字保持可读，同时图像仍显得在场且开阔。
• 使用可见的结构线，如外层导轨、中心引导线与小角标，在图像场之上施加秩序。
• 将主内容锚定在视口低处或沿着刻意的边缘，使图像保持主导，而非被居中 UI 挤占。
• 保持调色板克制且随图像响应：使用中性色、白、烟灰，以及需要时从图像或品牌派生的一种微妙强调色。

实现指引

• 优先使用全屏或大舞台主视觉，把背景图当作基础层处理，而非小卡片或缩略图。
• 用一套精量的网格系统覆盖图像，采用竖向容器线、微妙的框架引导，或保持可见但安静的分栏骨架。
• 把主标题与 CTA 组放在一个锚定的网格列中，然后用另一个次级盒子承载引言、佐证、指标或辅助叙事。
• 辅助卡片应显得轻框且透明或低填充，使其叠在图像之上，而非用厚重的容器边框与之争夺。
• 在有用时引入微妙的技术氛围，如淡淡的 WebGL 线条、加法条纹、缓慢的背景运动，或图像平面上极简的视差。
• 排版应保持干净高级：自信的无衬线标题、柔和的低对比正文，以及克制的微标签或导航文字。
• 运动应强调显现与漂移而非繁忙交互，采用遮罩文字入场、缓慢的线条移动与温和的悬停扫掠。

推荐模式

• 满版的风景或建筑图像，叠加分层的从左到右与从下到上的暗色渐变以保证可读性。
• 竖向引导轨，带微小的方形标记或微妙的边界点贯穿舞台。
• 底部锚定的主视觉文案，配以浮在相邻网格通道中的次级引言、证言或指标盒。
• 稀疏的顶部导航，带轻透明外壳，使图像保持主角地位。
• 淡淡的 WebGL 或 canvas 线场，以滤色或加法混合模式漂移在图像之上。
• 使用半透明暗色填充、纤细边框与小的移动高光扫掠的按钮，而非喧闹的色块。

调节旋钮

• 图像主导度：让媒体占据近乎整个体验，然后围绕它调节内容密度，而非反过来。
• 叠层暗度：调整渐变强度，直到可读性足够强而不压平图像。
• 网格可见度：让导轨与标记刚好可见以显得刻意，但又不重到分散对摄影的注意。
• 技术氛围：根据页面应有的产品感与纯电影感，增删微妙的动画线条或辉光。
• 内容锚定：把文案与次级盒子在视口中左移、右移或下移，以保留强烈的负空间。

避免

• 把图像变成传统居中 SaaS 布局背后的装饰性背景。
• 用卡片、小组件或文字塞满视口，抹去以图像为先的构图。
• 破坏舞台平静电影基调的明亮多色强调。
• 切断叠层与底层图像关系的厚重实心容器。
• 把网格当作隐形的；结构应安静地组织构图。