用途
这是一个可选择的网页美术指导方向,仅在用户明确要求高级、奢华或高端机构风格时使用。它的目标是在不覆盖用户既有品牌、内容、授权素材、无障碍约束和现有技术栈的前提下,提供一套协调的视觉方向。技能明确说明:这些选项用于支持美术指导,不会覆盖已确立的字体、组件或用户要求的布局;只有在被要求时才组合命名风格。
主要能力
技能提供若干可选的视觉方向起点:
- 空灵玻璃:OLED 黑、克制的发光点缀、细腻的半透明边缘、几何字体。模糊需谨慎使用,并提供可读的不透明回退。
- 编辑式奢华:暖奶油色、鼠尾草绿或浓缩咖啡色、用于标题的授权表现力衬线字体、充裕留白,可选细微纸张颗粒。
- 柔和结构主义:银灰或白色、粗体排版、通透间距、在有助于澄清深度时使用的柔和环境阴影。
构图方面,非对称便当式布局可用于组织多样内容;编辑式分栏可将强标题与图像配对;重叠卡片可在保持阅读顺序和触控目标清晰的前提下营造深度。这些均为选项,而非必须采用的菜单。技能建议使用可用的授权字体和一致的图标家族,并优先使用有意的边框与阴影,而不是给每个表面都添加装饰。
可选组件处理
仅在能强化所选方向时应用:
- 双边框:在内层表面外包裹一层细微外壳,可用于框住主视觉图像或功能卡片。半径需保持同心(内半径 = 外半径减去内边距)。扁平卡片、普通输入框和未装饰内容仍然有效。
- 内嵌 CTA 图标:胶囊按钮可包含一个视觉上内嵌的圆形箭头包裹层。需保持为一个语义按钮,绝不嵌套交互按钮。现有按钮形状和简单的文字加图标处理同样有效。
- 空间节奏:充裕的分区间距和偶尔的眉标可支持层级。间距应来自内容和响应式令牌,而不是强加一个最小内边距或在每个标题上方都加徽章。
- 浮动导航:分离式胶囊适合短导航。当常规页眉更符合信息架构时,应使用常规页眉。
动效与响应式行为
动效应用于澄清交互,需明确动画属性并采用合适的时序。简单的颜色反馈和即时状态变化同样有效。可选的按压缩放、图标移动或汉堡菜单到关闭的形变,必须保留焦点、键盘/触控操作和减少动效替代方案。
移动菜单可以是面板或覆盖层,取决于其内容。不应强制要求重度模糊、全屏展开或交错链接。导航需保持立即可用。偶尔的滚动显现必须在 JavaScript 失败时仍保留可见内容,并在减少动效下省略装饰性位移或延迟。
在内容需要时折叠非对称布局;移除阻碍移动端目标的遮挡或旋转。使用项目断点和间距令牌。选择 svh 以获得稳定的小视口高度,或选择 dvh 以跟踪浏览器界面,但需先检查预期的滚动和键盘行为。
验证
在桌面和移动尺寸下渲染重要状态。检查层级、真实内容、焦点、键盘/触控交互、减少动效,以及适合该变更的加载/失败状态。使用现有堆叠层级处理覆盖层;纹理层不得拦截输入或遮挡内容。
在能保持几何形状时优先使用 transform/opacity。在必要时测量代价高昂的模糊、阴影、裁剪或布局效果;固定定位和 will-change 并不保证加速。为半透明表面测试不透明回退。报告未测试的状态和视觉推断,而不是根据装饰效果清单声称一个通用的质量分数。
适用场景
适用于用户明确要求高级、奢华或高端机构级网页美术指导的场景,例如精品品牌网站、高端作品集或需要精致视觉语言的营销页面。
限制
技能不覆盖用户既有品牌、内容、授权素材、无障碍约束和现有技术栈。不强制使用任何特定风格、组件处理或动效。未提供具体价格、收费、平台或效果数据。