09 · 视觉风格选型与约束

适用：建立新视觉方向，或纠正 AI 生成页面的混搭。风格不是一个关键词，而是一组能够落实到 token、组件和素材的约束。

STY-01 · 用六个维度描述风格

字体与字重、间距与密度、形状与圆角、边界与表面、图片与图标、动效与语气。每个维度写“采用什么、在哪些地方使用、什么情况例外”。

不要只写“高级、科技、简洁”。可以写：“单一正文主栏；标题与正文用字号和字重区分；暖白表面；细边界；少量主题插画；控件变化短促；不使用持续背景运动。”

12 类风格的决策目录

风格可执行特征适用方向风险与边界
中性工具系统字体、紧凑网格、少装饰、稳定对齐管理、专业工具容易变成无层级的字段墙
编辑阅读明确标题层级、长文主栏、图文节奏文档、媒体、文化超大标题不能挤掉实际内容
温暖自然暖中性色、柔和曲线、真实纹理或插画学习、生活、服务低对比的米灰文字容易不可读
精密技术等宽数字、清晰网格、状态编码开发、数据、监控内部术语不应淹没用户任务
品牌极简克制色彩、少量强形象、严格尺度品牌、作品集留白过多导致入口难找
表现主义粗犷粗边界、大字、鲜明块面、少量硬阴影活动、文化、创意不能牺牲点击区域和阅读顺序
玻璃透明有控制的透明层、模糊背景、亮边界少量悬浮层、媒体背景变化导致对比不稳定；需不透明替代
柔和拟物柔和凸凹、材料感、轻阴影非关键展示、小范围装饰控件边界易模糊，不能只靠阴影
实物隐喻真实材质、熟悉物件结构音乐、仪器、教学装饰可能限制响应式和可访问性
像素复古像素插画、离散格点、有限色板游戏、主题活动正文仍需清楚，小字号慎用像素字体
轻快趣味明亮色块、圆润形状、角色化插画轻量学习、社区高频工作界面要减少跳动与庆祝
影像沉浸大图或视频主导、少量叠加信息摄影、展示、媒体首屏资源成本、文字对比、静音与暂停

“极简”不等于内容稀少，“技术”不等于满屏霓虹，“趣味”不等于所有控件都弹跳。实际产品可以混合特征，但应有主次和明确区域。

STY-02 · 一个主风格，有限的例外

style:
  direction: 编辑阅读
  typography: 正文易读，标题有明显层级；代码独立样式
  layout: 单一阅读主栏，目录辅助，正文连续
  shape: 小圆角控件；段落不包卡片
  surface: 暖白与细边界
  imagery: 有解释目的的图，固定图注策略
  motion: 控件反馈为主，无持续装饰动画
  exceptions: 交互实验区可采用独立主题，但标明范围

这份规格比风格名称更有用。它可以进入设计简报，让 AI 知道什么时候不该加卡片、渐变、徽标或悬浮动画。

STY-03 · 先用一个真实页面验证风格

同样内容、同样尺寸下制作少量候选，比较信息层级、可读性、任务效率与气质。确定后再沉淀 token、按钮、字段和状态套件，扩展到其他页面。

先做一个带真实长标题、数据、空态和失败态的代表页面。不要只用漂亮的首屏营销图决定整个管理系统的风格。

代表页面之后的列表、详情、编辑与异常页面必须继续引用相同设计语言，并保留各自页面模式；不能后续只补几个按钮交差。公共变更的影响范围与逐页证据见多页面一致性。

三种表面配方

/* 基础变量来自 tokens.css；只改变表面，不改变控件语义。 */
.surface-editorial { border-block: 1px solid var(--ui-border); }
.surface-soft { border: 1px solid var(--ui-border); border-radius: 1.25rem; }
.surface-bold {
  border: 2px solid var(--ui-text);
  border-radius: .25rem;
  box-shadow: 4px 4px 0 var(--ui-text);
}

三种表面效果可在演示实验室对比。它们只演示风格维度，不代表完整的三套设计系统。

检查

关闭图片和装饰后，层级是否仍成立？切到深色后是否仍像同一个产品？加入失败和长内容是否破坏节奏？共享组件是否保留相同语义与操作方式？