pm-workflow-studio 0.1.0 → 0.1.2

package/.codex/role-skills/ui-prototype-design/references/b-end-ui-design-spec.md

@@ -0,0 +1,2339 @@
+# B 端 UI 设计参数参考
+
+本参考用于 B 端网页、后台、运营台、管理系统和 SaaS 产品的界面设计。参数优先服务信息密度、对齐、复用和开发可还原。除非产品明确是大屏展示或 C 端营销页面，否则 B 端网页默认参考本规范。
+
+## 使用原则
+
+- B 端网页默认应用本参考，特殊业务场景可在 `docs/ui-design.md` 中说明偏离原因。
+- 参数优先保证信息密度、对齐关系、组件复用和开发还原，不追求单纯放大或装饰性效果。
+- 优先保证最小适配尺寸；小画布向大屏适配更容易，大画布向小屏适配更容易产生拥挤和溢出。
+- 大画布不作为常规默认，只有明确的大屏、全屏观看或监控展示场景才使用。
+- 同类控件尺寸应收敛，避免一个页面出现过多尺寸档位；常规项目中输入框尽量只保留 2 种高度。
+- 所有尺寸单位默认按 CSS px 理解。
+
+## 配色流程与色彩系统规则
+
+B 端配色必须先明确品牌调性和产品风格，再进行灰度设计和颜色填充。颜色不是第一步，不能用颜色掩盖布局、层级和功能路径问题。配色目标是专业、稳定、可读、可复用，而不是单纯鲜艳或炫技。
+
+### 配色决策顺序
+
+适用场景：设计方向确认、视觉风格定义、页面首稿、组件库和主题色制定。
+
+执行规则：
+
+- 先明确品牌调性和产品风格，例如专业、可信、效率、科技、稳重、安全、数据感、年轻或开放。
+- 再用灰度稿确定布局、视觉层级、信息主次、操作路径和可读性。
+- 灰度稿通过后，再选择主色、语义色、强调色和灰度色阶。
+- 最后把颜色填回灰度稿，并检查同类组件、同类状态和同类文本是否保持一致。
+- 如果品牌调性与业务效率冲突，B 端后台优先保证可读性、识别效率和状态准确性。
+
+禁止事项：
+
+- 不要在没有明确产品风格时直接挑选颜色。
+- 不要用大面积高饱和色块解决页面层级不清的问题。
+- 不要让颜色选择先于页面结构、信息架构和操作路径。
+- 不要为了品牌表达牺牲表格、表单、审批和配置页面的信息密度。
+
+验收标准：
+
+- 能说清产品风格为什么选择这组主色。
+- 灰度状态下仍能看出页面结构、主次层级和主操作。
+- 上色后只强化结构，不改变原本的信息优先级。
+
+### 灰度优先
+
+适用场景：页面布局、信息层级、组件层级、文字层级、边框、背景、禁用态和分割线。
+
+执行规则：
+
+- 先用灰度完成标题、正文、辅助信息、主按钮、次按钮、边框、背景和禁用态的层级。
+- 主要文本使用深灰，次要文本使用中灰，辅助说明、占位提示和元信息使用浅灰。
+- 背景、描边和弱分割使用更浅灰度，避免页面被线框和分割线切碎。
+- 灰度命名建议数字化，例如 `gray-98`、`gray-90`、`gray-80`、`gray-50`、`gray-40`、`gray-20`、`gray-8`。
+- 设计稿和开发实现应使用同一套灰度 token，不临时取近似颜色。
+
+禁止事项：
+
+- 不要让所有文字都使用纯黑或同一深灰。
+- 不要把浅灰正文用于主要阅读内容。
+- 不要在一个页面内临时创建过多相近灰色。
+- 不要依赖颜色本身弥补灰度层级不清。
+
+验收标准：
+
+- 去掉品牌色后，页面仍能正常阅读和操作。
+- 用户能区分主要文本、次要文本、辅助信息、背景和边框。
+- 灰度 token 少而稳定，能被复用到全站。
+
+### 主色选择
+
+适用场景：品牌主色、主按钮、当前导航、选中态、链接、重点数据和关键入口。
+
+执行规则：
+
+- 主色必须来自品牌调性、产品价值观、目标用户、业务场景和使用环境。
+- B 端后台主色应优先稳定、克制、可读，常见选择为蓝色、蓝紫、绿色或深灰系。
+- 主色只用于关键入口、主按钮、选中态、当前导航、重要链接和重点数据。
+- 页面中主色面积应受控，不能把所有高频组件都染成主色。
+- 如果使用红、橙、黄、粉等高情绪色作为主色，必须有明确品牌原因，并降低饱和度控制风险。
+
+禁止事项：
+
+- 不要把主色大面积铺满后台页面背景。
+- 不要让主色和错误、警告、成功等语义色混淆。
+- 不要在同一产品中频繁更换主色。
+- 不要为了“活泼”引入多个互相竞争的主色。
+
+验收标准：
+
+- 用户能稳定识别主按钮、当前导航和可点击重点。
+- 主色表达品牌，但不压过业务内容。
+- 主色规则能沉淀为组件 token，而不是页面级临时样式。
+
+### 语义色与强调色
+
+适用场景：错误、成功、警告、信息提示、进行中、禁用、风险提示、审批状态和系统反馈。
+
+执行规则：
+
+- 语义色必须比品牌表达更稳定，错误、成功、警告、信息、禁用等含义不能随页面变化。
+- 错误通常使用红色，成功通常使用绿色，警告通常使用橙色或黄色，信息通常使用主色或蓝色，禁用使用灰色。
+- 语义色可以降低饱和度以适配 B 端气质，但必须保持含义清晰。
+- 强调色应少量使用，用于补充主色无法表达的重点，不参与所有组件染色。
+- 状态标签、Toast、表单校验、审批结论和数据异常应共享同一套语义色规则。
+
+禁止事项：
+
+- 不要把红色同时用于错误和普通强调。
+- 不要把绿色同时用于成功和当前选中，除非产品主色就是绿色且状态区分足够清楚。
+- 不要使用过灰、过脏、过低饱和的反馈色，导致错误和警告不醒目。
+- 不要让语义色跟着页面风格随意变化。
+
+验收标准：
+
+- 用户不读文字也能初步判断成功、失败、警告和禁用。
+- 同一种状态在全站颜色一致。
+- 状态颜色既醒目又不破坏后台页面的专业感。
+
+### 可访问性对比规则
+
+适用场景：按钮、输入框、选择器、图标、可点击区域、边框、状态标签、Tab、分页和工具栏。
+
+执行规则：
+
+- 非文本界面元素和可点击控件的可感知对比度至少达到 `3:1`。
+- 浅色按钮、幽灵按钮、输入框边框和图标按钮应通过边框、背景或更深图标颜色保证可识别。
+- 禁用态与可用态必须有清楚差异，但可用态不能低对比到像禁用态。
+- 主要正文和关键状态应使用高于控件最低标准的对比度，确保长时间阅读可用。
+- 设计和验收时应使用对比度检查工具验证关键控件，而不是仅凭肉眼判断。
+
+禁止事项：
+
+- 不要让浅灰按钮或浅灰图标低对比到无法判断是否可点击。
+- 不要只靠很淡的边框表示输入框、按钮或卡片边界。
+- 不要为了轻盈感降低错误、警告、主操作和当前选中态的识别度。
+
+验收标准：
+
+- 用户能清楚识别按钮、输入框、图标和可点击区域。
+- 可用、禁用、选中、错误和普通状态不会互相混淆。
+- 低视力用户仍能分辨关键控件形状和边界。
+
+### 颜色不可作为唯一指标
+
+适用场景：选中态、错误、警告、成功、禁用、审批状态、状态标签、Tab、图表和表单校验。
+
+执行规则：
+
+- 状态和选中不能只靠颜色表达，必须叠加文字、图标、边框、下划线、背景、字重或位置等至少一种非颜色提示。
+- Tab 选中态除颜色变化外，应使用下划线、背景块、字重变化或边框。
+- 表单错误除红色外，应提供错误文案，必要时加错误图标。
+- 状态标签除颜色外必须有文字说明，例如成功、失败、待处理、已禁用。
+- 图表除颜色区分外，应提供图例、标签、数值、纹理或形状差异。
+
+禁止事项：
+
+- 不要只用红、绿、黄区分状态而不写状态文本。
+- 不要只用颜色深浅表示 Tab 是否选中。
+- 不要在图表中只靠颜色区分关键数据系列。
+
+验收标准：
+
+- 色弱或低视力用户不依赖颜色也能理解状态和选中关系。
+- 所有关键信息都有颜色以外的识别线索。
+- 状态、风险和选中关系在黑白截图中仍基本可判断。
+
+### 色阶与状态色
+
+适用场景：按钮 hover/active/disabled、选中态、浅色背景、深色强调、标签背景、图表辅助色。
+
+执行规则：
+
+- 主色应派生出浅背景、默认色、悬停色、按下色、描边色和深色强调。
+- 可通过调整亮度创建色阶，例如在主色亮度上按固定步长增减，形成浅色和深色状态。
+- 浅色背景用于弱强调和选中底色，默认主色用于主按钮和当前状态，深色用于按下态或深色强调。
+- 色阶命名应可理解，例如 `primary-10`、`primary-50`、`primary-60`、`primary-70`，避免只用随机色值。
+- 图表辅助色应服务数据区分，不应抢占主操作和状态反馈的颜色语义。
+
+禁止事项：
+
+- 不要每个组件单独调一个 hover 色或 active 色。
+- 不要让浅色背景和禁用态、弱提示混淆。
+- 不要创建过多高饱和辅助色导致页面花。
+- 不要只提供一个主色，没有状态色和浅色背景。
+
+验收标准：
+
+- 主按钮、选中态、链接、标签和图表能共享清晰色阶。
+- hover、active、disabled 的颜色变化可预测。
+- 开发能用少量 token 还原颜色状态。
+
+### 配色一致性
+
+适用场景：全站页面、组件库、表格、表单、弹窗、导航、标签、图表和状态反馈。
+
+执行规则：
+
+- 主要文本、次要文本、辅助文本、背景、边框、主色、语义色必须使用统一 token。
+- 同一种交互状态使用同一种颜色规则，例如选中、悬停、禁用、错误和成功。
+- 页面局部可以有业务强调色，但必须说明语义，不能只为装饰。
+- 设计完成后，应把颜色从灰度稿回填到组件和页面中，并检查同类元素是否一致。
+- 新增颜色前先判断能否复用现有主色、语义色或灰度色阶。
+
+禁止事项：
+
+- 不要在不同页面为同一种状态使用不同颜色。
+- 不要让图表颜色、状态颜色和主操作颜色互相抢语义。
+- 不要让品牌色、语义色、强调色混成一套无法解释的调色盘。
+- 不要在没有业务原因的情况下新增颜色。
+
+验收标准：
+
+- 任意页面都能识别同一套主色、语义色和灰度色阶。
+- 用户不会因为颜色变化误解状态、入口或风险。
+- 颜色命名和使用规则能交给开发复用。
+
+## 格式塔设计原则
+
+格式塔理论指出，人类视觉会自动把零散元素组织成有结构的整体。B 端界面信息密度高，设计时必须主动利用分组、相似、重复和截断线索，帮助用户快速判断信息关系，而不是依赖装饰性线框堆出结构。
+
+### 邻近性
+
+原则说明：距离近的元素会被自然理解为一组，距离远的元素会被理解为不同组。
+
+B 端含义：字段、指标、状态、说明、操作按钮应按业务语义聚合。相关内容靠近，不相关内容拉开，让用户不看分割线也能判断信息归属。
+
+执行规则：
+
+- 同一字段的标签、输入框、说明、错误提示应靠近。
+- 同一指标卡内的标题、数值、单位、趋势和操作应形成紧凑信息组。
+- 同一表格行内的主要信息、状态和操作应保持稳定的近邻关系。
+- 不同业务模块之间的间距必须明显大于模块内部元素间距。
+- 能用间距表达分组时，不优先增加过多分割线、描边和卡片嵌套。
+
+禁止事项：
+
+- 不要让同一字段的标签和输入框距离过远。
+- 不要让不同模块之间的间距和组内元素间距相同。
+- 不要用大量线框弥补混乱的空间关系。
+
+验收标准：
+
+- 用户扫一眼就能判断哪些内容属于同一组。
+- 组内关系紧凑，组间边界清楚。
+- 去掉部分分割线后，页面结构仍然可识别。
+
+### 相似性
+
+原则说明：外观相似的元素会被自然归为一组。
+
+B 端含义：同类入口、按钮、标签、卡片、表格操作和状态信息应使用一致样式；不同类别的信息要通过形状、颜色、尺寸或布局建立差异。
+
+执行规则：
+
+- 同一页面内，同级按钮的高度、圆角、颜色语义和图标尺寸保持一致。
+- 同类状态标签使用统一尺寸、字重、颜色语义和排列方式。
+- 同类卡片保持一致的标题位置、操作区位置和信息排列方式。
+- 同级导航项、工具项和筛选项使用统一的视觉结构。
+- 不同类型信息可通过形状、色彩、尺寸或布局差异区分，但差异必须服务识别，不做无意义装饰。
+
+禁止事项：
+
+- 不要让同类按钮、同类标签或同类卡片样式各不相同。
+- 不要把不同功能类型做成完全一样的样式，导致用户无法区分。
+- 不要在同一个操作区混用过多颜色语义。
+
+验收标准：
+
+- 用户能一眼识别哪些控件属于同类操作。
+- 同类模块的视觉规律稳定，用户看到第一个后能预测后续结构。
+- 关键差异能帮助用户区分类型、状态或优先级。
+
+### 连续性
+
+原则说明：用户发现一个视觉规律后，会倾向于沿着这个规律继续理解后续内容。
+
+B 端含义：列表行、表格列、卡片、功能区和表单区应保持重复结构和视觉节奏，降低用户理解成本。
+
+执行规则：
+
+- 同类列表行保持一致的列顺序、对齐方式、状态位置和操作位置。
+- 同类表格列保持稳定宽度和固定语义，不在同一页面频繁改变列结构。
+- 同类卡片保持一致的信息层级，例如标题、说明、数据、按钮的位置关系。
+- 功能类型一致的信息元素或按钮应按同样规律展示。
+- 一旦建立布局规律，只有在表达明确层级变化或业务差异时才打断。
+
+禁止事项：
+
+- 不要让同类卡片结构忽左忽右、忽大忽小。
+- 不要在同一列表中随意改变操作按钮位置。
+- 不要在没有业务原因的情况下打断已建立的视觉节奏。
+
+验收标准：
+
+- 用户看懂一个条目后，可以无额外学习成本理解同类条目。
+- 页面重复结构稳定，扫读路径顺畅。
+- 视觉节奏被打断的位置都能解释清楚业务原因。
+
+### 封闭性
+
+原则说明：人的视觉系统会自动尝试补全未封闭的图形，把它感知为完整物体。
+
+B 端含义：可以用截断式设计暗示横向滚动、卡片流、feed 流或更多内容，但不能截断关键文字、主操作或核心状态。
+
+执行规则：
+
+- 横向滚动内容可以在容器边缘露出部分卡片，提示右侧还有更多。
+- 标签筛选、快捷入口和卡片流可以用截断暗示可继续滑动或展开。
+- feed 流底部可以露出下一条内容的一部分，提示持续加载。
+- 截断只用于暗示更多内容，不能影响当前内容的主要判断。
+- 截断区域附近应保留足够留白或渐隐，让用户理解这是有意设计。
+
+禁止事项：
+
+- 不要截断主按钮、关键状态、核心数值和主要标题。
+- 不要让截断看起来像布局错误、遮挡或内容丢失。
+- 不要在表单填写、审批确认、危险操作等严肃流程中滥用截断。
+
+验收标准：
+
+- 用户能明确知道还有更多内容可继续查看。
+- 当前卡片或当前行的核心信息完整可读。
+- 截断效果不会阻碍点击、阅读和状态判断。
+
+## 原则到设计动作速查
+
+| 原则 | 设计动作 | B 端落点 |
+|---|---|---|
+| 邻近性 | 相关靠近，不相关拉开；组内间距小于组间间距 | 表单字段、指标卡、表格行、筛选区、详情区 |
+| 相似性 | 同类控件统一样式，不同类别建立可识别差异 | 按钮、标签、状态、卡片、导航、工具栏 |
+| 连续性 | 重复结构保持相同节奏、顺序、对齐和操作位置 | 列表、表格、卡片组、表单区、功能宫格 |
+| 封闭性 | 用截断提示更多内容，但保留关键信息完整 | 横向滚动、卡片流、feed 流、标签筛选 |
+| 少用装饰分割 | 优先用间距、对齐和层级表达结构 | 高密度后台页面、运营台、管理系统 |
+
+## 视觉动线与页面布局模型规则
+
+本章节用于指导 AI 在 B 端页面布局阶段选择视觉动线。视觉动线决定用户先看哪里、沿什么路径扫描、最后在哪里完成操作。B 端后台默认优先服务任务判断和操作效率，不为了制造版式变化而打断用户的自然扫读路径。
+
+### 动线模型选择
+
+适用场景：页面清单设计、首页/工作台布局、表格页、列表页、表单页、详情页、弹窗和登录页。
+
+执行规则：
+
+- 表格页、列表页、搜索结果页、审批列表、任务列表默认优先使用 F 型动线。
+- 表单页、弹窗、确认页、单任务编辑页默认优先使用古腾堡动线。
+- 工作台、概览页、卡片流、登录页和图文混合页可使用 Z 型动线。
+- 同一页面只能选择一种主导动线，局部模块可以有自己的小动线，但不能互相冲突。
+- 页面主信息、关键判断、主操作必须落在动线高注意力区域或动线终点。
+
+禁止事项：
+
+- 不要把关键状态、主判断字段或主操作放在低注意力角落。
+- 不要为了排版变化在同类页面之间频繁切换动线模型。
+- 不要让装饰图、广告位、弱信息占据第一视觉区。
+
+验收标准：
+
+- 用户能自然从页面主题扫到关键内容，再扫到下一步操作。
+- 页面首屏能解释当前任务、当前对象和主操作。
+- 动线选择能对应页面类型，而不是只服务视觉新鲜感。
+
+### F 型动线：高密度列表优先
+
+适用场景：表格页、列表页、搜索结果页、数据管理页、审批列表、任务列表、内容管理页、左侧导航加主内容布局。
+
+执行规则：
+
+- 顶部横向区域放页面标题、核心筛选、搜索、主操作和全局状态。
+- 左侧纵向区域放高频导航、分类、状态筛选或列表主识别字段。
+- 表格第一列和列表项开头放对象名称、任务标题、编号、头像、业务主字段等识别信息。
+- 行内关键判断信息尽量靠左，右侧可放状态、时间、更多字段和操作。
+- 如果右侧信息很重要，应通过固定列、强调样式或布局重排提高可见性。
+
+禁止事项：
+
+- 不要把对象名称、审批结论、异常状态等主判断信息全部放到右侧。
+- 不要让表格第一列只放低价值序号或复选框而缺少识别信息。
+- 不要在 F 型页面顶部堆满低频入口，挤压搜索、筛选和主操作。
+
+验收标准：
+
+- 用户扫顶部和左侧即可理解页面内容和主要任务。
+- 每行从左向右能快速判断对象、状态和下一步操作。
+- 长列表中，用户不需要逐列读完整行才能找到关键记录。
+
+### 古腾堡动线：单任务完成优先
+
+适用场景：创建表单、编辑表单、详情处理页、弹窗确认、登录页、单任务配置页。
+
+执行规则：
+
+- 左上第一视觉区放页面标题、当前对象、任务说明、关键状态或步骤信息。
+- 右下最终视觉区放主操作，例如保存、提交、确认、下一步。
+- 右上强休息区可放关闭、帮助、更多、次级入口，不放主操作。
+- 左下弱休息区只放低优先级说明、辅助提示、版权或补充链接。
+- 危险操作应与主操作区分，必要时放入更多菜单或二次确认，不与推荐操作并列抢焦点。
+
+禁止事项：
+
+- 不要把主提交按钮放在左下弱休息区。
+- 不要把关键错误、风险提示或审批结论放在右上或左下角落。
+- 不要让多个同等权重的按钮同时占据右下最终视觉区。
+
+验收标准：
+
+- 用户能从左上理解任务，在右下完成操作。
+- 主操作位置符合阅读和填写后的自然落点。
+- 关闭、帮助、更多等辅助操作不会抢主路径。
+
+### Z 型动线：概览和卡片流优先
+
+适用场景：工作台首页、数据概览、卡片流、快捷入口区、登录页、图文混合的低密度页面。
+
+执行规则：
+
+- 左上放上下文信息，例如产品识别、页面标题、欢迎语、当前对象或核心任务。
+- 右上放全局导航、快捷入口、全局搜索或次级工具。
+- 中部放核心卡片、关键指标、主要图表或主要说明。
+- 右下或末端区域放下一步行动，例如进入详情、处理任务、查看更多、开始配置。
+- 卡片流中，第一张卡片应承载最高优先级信息，末端卡片可承载补充入口。
+
+禁止事项：
+
+- 不要让 Z 型路径穿过大量装饰元素，导致用户扫不到核心信息。
+- 不要把工作台做成营销页式大图首屏，挤压任务、指标和待办。
+- 不要让右下末端区域只放弱信息，导致页面没有明确下一步。
+
+验收标准：
+
+- 用户能按左上、右上、中部、右下的顺序理解概览页。
+- 工作台首屏能看到上下文、核心指标和下一步入口。
+- 卡片优先级与动线顺序一致。
+
+## 视觉动线速查
+
+| 页面类型 | 推荐动线 | 关键布局动作 |
+|---|---|---|
+| 表格页 / 列表页 / 搜索结果 | F 型 | 顶部放筛选搜索和主操作，左侧或第一列放主识别信息 |
+| 审批列表 / 任务列表 | F 型 | 左侧放对象和任务标题，靠左呈现状态和异常，操作保持稳定位置 |
+| 表单页 / 创建页 / 编辑页 | 古腾堡 | 左上说明任务和对象，右下完成保存、提交或下一步 |
+| 弹窗 / 确认页 | 古腾堡 | 左上说明风险和对象，右下放确认，辅助操作降权 |
+| 工作台 / 概览页 | Z 型 | 左上建立上下文，右上放快捷入口，中部放指标，末端放下一步 |
+| 卡片流 / 快捷入口 | Z 型 | 第一卡片最高优先级，末端提供查看更多或后续行动 |
+
+## 视觉层级与组件表现规则
+
+本章节用于指导 AI 生成 B 端 UI 原型时的具体表现。目标不是增加装饰，而是让页面更容易扫读、更容易判断主次、更容易完成操作。
+
+### 文本对齐与换行
+
+适用场景：表单说明、协议说明、复选框说明、单选项说明、错误提示、帮助文本、多行描述。
+
+执行规则：
+
+- 文本必须有清晰稳定的左侧起点。
+- 复选框、单选框、图标与其说明文本必须形成同一信息组。
+- 多行说明文本换行后，应保持与第一行文本左侧对齐。
+- 协议链接、重点词可以加粗或变色，但不能破坏整段阅读节奏。
+- 辅助说明应靠近对应控件，避免用户无法判断说明归属。
+
+禁止事项：
+
+- 不要让第二行文本回到控件左边，导致阅读起点混乱。
+- 不要让控件和说明文字距离过远。
+- 不要把同一段说明拆成多个互不对齐的文本块。
+- 不要为了突出链接而让整段说明失去连续阅读路径。
+
+验收标准：
+
+- 用户扫一眼能知道控件对应哪段说明。
+- 多行文本的阅读路径连续、稳定。
+- 重点链接清楚，但不会压过主句。
+
+### 标题与正文权重
+
+适用场景：页面标题、模块标题、卡片标题、表单分组标题、弹窗标题、说明正文。
+
+执行规则：
+
+- 标题字号、字重或颜色权重必须明显高于正文。
+- 页面标题、模块标题、卡片标题应帮助用户快速定位内容区域。
+- 正文用于解释和补充，应比标题弱一层。
+- 辅助说明、元信息、提示文本应继续降权，避免抢主信息。
+- 同一页面内相同层级标题应使用一致的字号、字重和颜色规则。
+
+禁止事项：
+
+- 不要让标题和正文使用同等视觉权重。
+- 不要只靠换行区分标题和正文。
+- 不要让辅助说明比标题更醒目。
+- 不要在同一页面内让同级标题忽大忽小。
+
+验收标准：
+
+- 用户能先看到标题，再顺势阅读正文。
+- 标题可以作为页面扫读和导航锚点。
+- 正文不会与标题争夺第一视觉焦点。
+
+### 主次操作按钮
+
+适用场景：表单底部操作、登录注册、弹窗确认、批量操作、详情页保存/取消、列表行操作。
+
+执行规则：
+
+- 一个操作区内通常只保留一个主按钮。
+- 如果当前区域没有明确的推荐下一步，不要强行设置主按钮，应使用次按钮或文字按钮保持中性。
+- 主按钮使用更强的填充色、字重、面积或位置优势。
+- 次操作使用文字按钮、浅色按钮、弱边框或灰色文本。
+- 主按钮位置应符合用户下一步路径，例如保存、提交、确认、登录。
+- 危险操作应与普通主操作区分，使用明确警示语义，不与推荐操作混淆。
+
+禁止事项：
+
+- 不要让两个并列按钮使用同样强的填充色。
+- 不要让取消、返回、其他方式等次操作抢主操作权重。
+- 不要把危险操作设计成和普通主操作一样。
+- 不要在一个操作区堆叠多个同等权重的主按钮。
+
+验收标准：
+
+- 用户不需要思考就能识别推荐点击的主操作。
+- 次操作可见但不抢焦点。
+- 危险操作和确认操作不会被误认为同类操作。
+
+### 嵌套圆角
+
+适用场景：卡片内嵌卡片、容器内嵌按钮、输入框、标签、选项卡、选中态背景。
+
+执行规则：
+
+- 嵌套容器的圆角应遵循外圆角大于内圆角的关系。
+- 外圆角应约等于内圆角加上内外层间距或填充，例如 `20px = 16px + 4px`。
+- 内层元素靠近外层边界时，内外圆角弧线要保持协调。
+- 同一页面内同类容器圆角应收敛到少数几个档位。
+
+禁止事项：
+
+- 不要让内外层圆角完全无关，导致边角弧线冲突。
+- 不要在同一卡片里混用过多圆角半径。
+- 不要让内层圆角大于外层圆角。
+- 不要为了柔和感过度放大圆角，导致 B 端界面幼稚或失去效率感。
+
+验收标准：
+
+- 内外容器边角看起来协调，不别扭。
+- 嵌套结构清晰，但不会因圆角冲突显得粗糙。
+- 圆角风格统一，能被开发复用。
+
+### 阴影层级
+
+适用场景：普通卡片、悬浮卡片、弹窗、抽屉、下拉菜单、浮层提示。
+
+执行规则：
+
+- 阴影用于表达层级，不用于装饰炫技。
+- 普通卡片阴影要轻、散、柔，避免页面厚重。
+- 弹窗、浮层、下拉可比普通卡片阴影稍强，但仍应保持柔和。
+- 优先使用环境色或灰蓝色低透明阴影，避免纯黑高透明阴影。
+- 阴影应配合背景色和边框使用，保证层级清楚但页面透气。
+
+禁止事项：
+
+- 不要使用过黑、过硬、过重的投影。
+- 不要让阴影影响文字可读性。
+- 不要在高密度表格和列表里给每一行都加明显阴影。
+- 不要用阴影替代必要的布局层级和间距。
+
+验收标准：
+
+- 页面看起来清爽、有层级，但不脏、不厚重。
+- 用户能区分普通内容、浮层、弹窗的层级。
+- 阴影不会成为第一视觉焦点。
+
+### 间距统一
+
+适用场景：页面区块、卡片组、表单组、表格工具栏、筛选区、详情区、弹窗内容。
+
+执行规则：
+
+- 同一容器内，同级模块之间使用统一间距。
+- 横向间距和纵向间距应来自同一套 spacing token。
+- 常用间距建议收敛到 `8 / 12 / 16 / 20 / 24 / 32`。
+- 高密度 B 端页面优先使用稳定间距，而不是随内容临时调整。
+- 如果确实需要不同间距，必须用于表达层级差异，例如组内、组间、页面边距。
+
+禁止事项：
+
+- 不要出现同级卡片上方 24、左右 16、下方 24 等无规则混用。
+- 不要让横向间距和纵向间距没有规律。
+- 不要用不稳定间距弥补元素尺寸不统一。
+- 不要让间距变化看起来像布局误差。
+
+验收标准：
+
+- 页面整体规整，模块之间节奏一致。
+- 用户能通过间距判断层级，而不是感觉页面松散。
+- spacing token 少而稳定，便于开发复现。
+
+### 重点内容卡片化
+
+适用场景：套餐选择、规格选择、权限选择、容量选择、配置选择、方案对比、价格对比。
+
+执行规则：
+
+- 当用户需要比较多个方案、规格、套餐、权限或配置时，优先考虑卡片化展示。
+- 卡片内应突出核心值，例如容量、价格、权限名、状态或关键指标。
+- 辅助信息应降权，不抢核心值。
+- 选中态必须明显，例如边框、背景、角标、勾选图标或强调色。
+- 普通列表适合低权重选择；高价值、高比较成本选择更适合卡片。
+
+禁止事项：
+
+- 不要把高价值选择项只做成难扫读的普通文字列表。
+- 不要让选中态只依赖很小的单选圆点。
+- 不要让卡片内所有信息同等突出。
+- 不要让卡片样式过重，压过核心信息本身。
+
+验收标准：
+
+- 用户能快速比较选项差异。
+- 当前选中项一眼可见。
+- 核心值最突出，辅助信息清晰但不抢焦点。
+
+## 后台界面质感细节规则
+
+本章节只收录适合 B 端后台、管理系统、运营台和 SaaS 产品的细节技巧。官网大首屏、营销轮播、大面积氛围图和纯展示型包装不默认适用后台页面，不应为了“高级感”牺牲信息密度、可读性和任务效率。
+
+### 图片文字遮罩
+
+适用场景：素材管理、内容审核、商品库、头像墙、封面图卡片、附件预览等需要在图片上叠加标题、状态或操作的场景。
+
+执行规则：
+
+- 当文字、状态标签或操作按钮叠在图片上时，应增加半透明深色渐变遮罩。
+- 遮罩优先从文字所在边缘向图片中心渐隐，保证文字可读且不遮挡主体。
+- 图片上叠加的信息应少而关键，例如标题、状态、数量、审核结论或主操作。
+- 如果图片本身是被用户检查的核心内容，应把状态和操作放在图片外或边缘，避免遮罩影响判断。
+
+禁止事项：
+
+- 不要直接把浅色文字压在复杂图片上。
+- 不要用大面积实色遮罩覆盖需要识别的图片主体。
+- 不要在图表、截图、证据图片等需要精确阅读的内容上叠加重遮罩。
+
+验收标准：
+
+- 图片上文字在浅色、深色、复杂背景下都清晰可读。
+- 遮罩不会影响用户判断图片主体内容。
+- 图片卡片的状态和操作不会看起来像漂浮在图上。
+
+### 局部同色系深色背景
+
+适用场景：深色指标卡、重点状态卡、数据概览模块、局部强调区域、深色侧栏或浮层。
+
+执行规则：
+
+- 深色背景应使用接近黑的深灰或品牌色深色版本，不直接使用纯黑。
+- 当卡片或按钮使用蓝色、绿色等强调色时，局部深色背景可采用同色系降低明度后的颜色，形成统一气质。
+- 深色背景只用于局部强调或导航区域时，应保证正文、图标、状态色有足够对比。
+- B 端页面整体仍应优先保持清爽和可扫描，深色区域不能压过核心工作内容。
+
+禁止事项：
+
+- 不要把 `#000000` 作为默认背景色。
+- 不要让整页都被单一深色或单一品牌色占满。
+- 不要在深色背景上使用低对比灰字。
+- 不要为了质感把普通表格、长表单做成大面积深色模式，除非产品明确需要。
+
+验收标准：
+
+- 深色区域有层次，不脏、不闷、不像纯黑块。
+- 文字、图标、状态标签在深色背景上可读。
+- 深色只强化重点，不降低后台页面的工作效率。
+
+### 多卡片浅色优先
+
+适用场景：指标卡组、模板卡片、配置卡片、权限卡片、功能入口卡片、方案选择卡片和工作台卡片。
+
+执行规则：
+
+- 当页面存在多张并列卡片时，默认优先使用浅色背景、轻边框、弱阴影和少量强调色。
+- 深色卡片只用于少量重点指标、强状态或品牌化强调，不应大面积成组使用。
+- 多卡片场景应通过标题、核心数值、状态标签、图标和操作区建立层级，而不是依赖强色块。
+- 如果每张卡片都需要颜色区分，应使用低饱和浅色底，并保证文字和图标可读。
+- 卡片之间的颜色差异必须服务分类、状态或优先级，不做随机装饰。
+
+禁止事项：
+
+- 不要让多张卡片全部使用高饱和深色背景。
+- 不要让卡片颜色比核心业务信息更抢眼。
+- 不要在同一组卡片中混入过多无语义的颜色。
+- 不要为了“高级感”降低长时间阅读的舒适度。
+
+验收标准：
+
+- 多卡片区域整体清爽、易扫描。
+- 用户能快速识别重点卡片，但普通卡片不会互相抢焦点。
+- 深色或高强调卡片数量受控，并能解释业务原因。
+
+### 视觉对齐与光学校正
+
+适用场景：图标与文字、头像与文字、圆形与方形图标、状态点、按钮内容、卡片内指标、空状态插图。
+
+执行规则：
+
+- 对齐应以视觉平衡为准，不只依赖数值完全相等。
+- 圆形元素与方形元素并排时，圆形可略大一点，使视觉大小接近。
+- 图标与文字同行时，应按视觉中心对齐，必要时微调 `top`、`line-height` 或容器对齐方式。
+- 卡片内多个指标、头像、按钮或状态点应看起来在同一视觉基线或视觉中心线上。
+- 表格中的数字、金额、百分比仍应使用严格的数字对齐规则，优先右对齐或小数位对齐。
+
+禁止事项：
+
+- 不要只看尺寸数值相等就认为视觉上已经对齐。
+- 不要让图标看起来上浮、下沉或偏离文字中心。
+- 不要为了光学校正破坏表格数字、金额和时间等结构化数据的对齐。
+
+验收标准：
+
+- 图标、文字、头像和状态点在视觉上稳定、不别扭。
+- 卡片和按钮内部元素看起来平衡。
+- 结构化数据仍保持严格、可比较的对齐方式。
+
+### 柔和投影参数
+
+适用场景：普通卡片、悬浮卡片、下拉菜单、弹窗、抽屉、提示浮层。
+
+执行规则：
+
+- 投影应轻、散、柔，优先表达层级，不制造厚重装饰。
+- 常规投影的模糊值建议不小于 Y 轴偏移的 2 倍，例如 `0 8px 16px` 这类关系。
+- 普通卡片使用低透明度浅投影；弹窗、抽屉、下拉浮层可以稍强，但仍需柔和。
+- 背景已经有边框或灰底分区时，优先减弱投影，避免页面显脏。
+
+禁止事项：
+
+- 不要使用硬边、高透明、纯黑投影。
+- 不要给表格每一行、列表每一项都加明显投影。
+- 不要用投影替代间距、分组、层级和边框。
+
+验收标准：
+
+- 浮层层级清楚，但阴影不是第一视觉焦点。
+- 页面看起来干净、有呼吸感，不厚重。
+- 投影参数在同类组件中可复用。
+
+### 按钮内边距与内容平衡
+
+适用场景：主按钮、次按钮、文字按钮、带图标按钮、表格操作按钮、弹窗底部按钮。
+
+执行规则：
+
+- 文本按钮的水平内边距通常应大于垂直内边距，常规可按水平约为垂直 2 倍理解。
+- 主按钮、提交按钮和确认按钮应有足够点击面积，不只包住文字。
+- 带图标按钮应保持图标与文字间距稳定，图标不应贴边。
+- 图标按钮可以接近正方形，但必须保证图标位于视觉中心。
+- 同一操作区内同级按钮的高度、内边距和圆角应保持一致。
+
+禁止事项：
+
+- 不要让按钮左右太窄，像文字外面勉强套了一个框。
+- 不要让同一组按钮的内边距忽大忽小。
+- 不要让图标贴到按钮边缘或与文字挤在一起。
+
+验收标准：
+
+- 按钮看起来稳、可点击、不过分臃肿。
+- 文字、图标和按钮边界之间有平衡留白。
+- 同一操作区按钮节奏统一。
+
+### 视觉对比与文字层级
+
+适用场景：页面标题、卡片标题、说明文字、状态信息、空状态、错误提示、审批结论、数据指标。
+
+执行规则：
+
+- 标题、正文、辅助说明和元信息应通过字号、字重、颜色和间距建立清晰层级。
+- 主要信息使用更深颜色或更高字重，辅助信息使用较浅颜色，不与主信息抢焦点。
+- 异常、风险、失败、待处理等关键状态必须有足够视觉对比。
+- 同一页面内相同层级的文字样式应稳定复用。
+
+禁止事项：
+
+- 不要让所有文字都使用同一颜色、同一字重和同一大小。
+- 不要为了“轻盈”把正文和关键状态做得过浅。
+- 不要让提示、备注、元信息比核心数据更醒目。
+
+验收标准：
+
+- 用户能快速分辨标题、正文、辅助说明和关键状态。
+- 页面可扫描，不需要逐字阅读才能找到重点。
+- 文字层级帮助理解，而不是制造噪音。
+
+### 多标题弱装饰
+
+适用场景：分组列表、卡片列表、图片内容列表、表单分组、详情分区、配置分区和数据看板模块标题。
+
+执行规则：
+
+- 同类标题数量较多时，优先用字重、字号、间距、浅色底或左侧细色条表达层级。
+- 标题装饰应轻量，避免每个标题都使用大面积色块、重背景或复杂标签。
+- 标题附近有图片、图表或大量内容时，标题本身应简洁，避免与内容争抢视觉焦点。
+- 同一页面的同级标题应保持统一样式，只有层级变化或状态变化时才增加差异。
+- 分组标题应帮助用户识别模块归属，不应成为比内容更强的视觉主体。
+
+禁止事项：
+
+- 不要给每个分组标题都加重色块背景。
+- 不要在同一页面里让同级标题有多套装饰样式。
+- 不要让标题装饰压过图片、数据、字段和操作。
+- 不要为了突出标题牺牲列表或表单的连续扫读。
+
+验收标准：
+
+- 用户能快速识别分组标题和内容归属。
+- 标题样式清楚但克制，不造成视觉噪音。
+- 多标题页面仍保持统一节奏和信息密度。
+
+### 指标数值层级
+
+适用场景：指标卡、统计概览、趋势数据、同比环比、金额、百分比、排行、配额和用量展示。
+
+执行规则：
+
+- 指标卡中核心数值应是第一视觉焦点，单位、百分号、正负号、约等号和说明文字应降权。
+- 单位和符号可以使用更小字号、更浅颜色或较低字重，但必须与数值保持清楚归属关系。
+- 同一指标组内，数值、单位、说明和趋势标识的层级规则必须一致。
+- 金额、数量、百分比等可比较数据应使用稳定数字字体或等宽数字能力，提升对齐和比较效率。
+- 特殊字体或强字重只用于核心数值、模块标题或品牌化概览，不用于表格正文、长说明和密集字段。
+
+禁止事项：
+
+- 不要让单位、百分号和符号与核心数值等大等重。
+- 不要在同一指标组里随机改变单位位置和字号。
+- 不要使用装饰字体显示表格、表单或长文本。
+- 不要为了视觉冲击把数字放大到挤压上下文说明。
+
+验收标准：
+
+- 用户先看到数值，再看到单位、趋势和说明。
+- 多个指标并排时，数字和单位规则一致且易比较。
+- 数字突出但不脱离业务上下文。
+
+### 数据图形化辅助
+
+适用场景：数据概览、工作台、仪表盘、完成率、比例、趋势、分布、排行、任务进度和质量评估。
+
+执行规则：
+
+- 比例、完成度、趋势和分布类数据可使用进度条、环形进度、迷你折线、迷你柱状图、状态点或热力块辅助理解。
+- 图形用于增强可读性，必须保留关键数字、单位、标题和状态文本。
+- 简单单值指标不必强行图形化，只有图形能降低理解成本时才使用。
+- 图形颜色应遵循主色、语义色和图表辅助色规则，不与状态语义冲突。
+- 小型图形应结构简单，避免在卡片中塞入复杂坐标轴和过多图例。
+
+禁止事项：
+
+- 不要用图形替代数字和文字标签。
+- 不要为了装饰给每个指标都加环形图或复杂图表。
+- 不要让图形颜色抢过异常、风险和主操作。
+- 不要在小卡片中放入难以阅读的复杂图表。
+
+验收标准：
+
+- 用户能更快理解比例、趋势、进度或分布。
+- 图形、数字和标签共同表达同一含义，不互相矛盾。
+- 图形化后页面仍保持清爽和可扫描。
+
+### 图标风格与导出边界
+
+适用场景：导航栏、工具栏、表格操作、状态图标、空状态图标、按钮图标、设置入口。
+
+执行规则：
+
+- 同一导航或工具栏内的图标必须保持一致风格，例如统一线性、统一面性或统一双色规则。
+- 图标应放在统一画布或 `viewBox` 内，保持视觉中心和边界一致。
+- 同类图标应统一线宽、圆角、端点、填充方式和尺寸。
+- 图标与文字组合时，图标尺寸、间距和对齐规则应稳定复用。
+- 重要导航图标可以略强，低频工具图标应降权，不与主操作争抢焦点。
+
+禁止事项：
+
+- 不要在同一个导航栏里混用线性、面性、粗细差异很大的图标。
+- 不要让图标导出边界大小不一致，导致排列时视觉不齐。
+- 不要用图标风格差异表达无业务意义的装饰变化。
+
+验收标准：
+
+- 图标组看起来像同一套系统，而不是临时拼凑。
+- 导航、按钮和工具栏的图标在视觉上对齐、平衡。
+- 图标不会因为边界不一致造成跳动或错位。
+
+### 横向内容露出提示
+
+适用场景：快捷入口、指标卡组、模板卡片、权限包、横向标签组、横向滚动表格或可滑动卡片组。
+
+执行规则：
+
+- 当横向内容可滚动时，可在容器边缘露出下一项的一部分，提示还有更多内容。
+- 露出部分应足以让用户判断还有下一项，但不能大到干扰当前内容阅读。
+- 表格横向滚动可使用边缘阴影、固定列或滚动条提示，而不是让用户误以为内容被裁掉。
+- 横向卡片组必须保证当前卡片的核心标题、状态、数值和主操作完整可读。
+- 后台核心流程不应依赖自动轮播；需要查看更多时优先提供明确滚动、查看更多或分页入口。
+
+禁止事项：
+
+- 不要把关键业务信息藏在自动轮播里。
+- 不要截断当前卡片的核心数值、标题、状态和主操作。
+- 不要让露出提示看起来像布局错误或内容溢出。
+
+验收标准：
+
+- 用户能知道横向还有内容，并知道如何查看。
+- 当前可见内容完整可读。
+- 横向滚动不会阻碍核心任务完成。
+
+### 容器圆角与内容匹配
+
+适用场景：列表项、人员卡片、头像卡片、文件卡片、内嵌图片、标签、输入框、按钮和卡片内小容器。
+
+执行规则：
+
+- 卡片圆角必须与卡片内部内容的圆角关系协调。
+- 内嵌图片、头像背景、标签和输入框靠近卡片边缘时，圆角应比外层卡片略小。
+- 同一列表或卡片组中，头像、缩略图、状态标签和按钮的圆角应收敛到少数几个固定档位。
+- 方形缩略图、圆形头像和胶囊标签可以共存，但必须有明确语义，不随机混用。
+
+禁止事项：
+
+- 不要让外层卡片是小圆角，内部图片或标签却使用过大的圆角。
+- 不要让同一组列表项里圆角半径忽大忽小。
+- 不要为了柔和感把所有后台控件都做成过度圆润的胶囊形。
+
+验收标准：
+
+- 卡片和内部内容看起来属于同一套组件系统。
+- 圆角不会造成卡片边界、图片边界和按钮边界互相冲突。
+- 开发可以用少量 token 复现圆角层级。
+
+### 多行文本行高
+
+适用场景：说明文本、表单帮助、错误提示、审批意见、详情描述、空状态说明、弹窗正文。
+
+执行规则：
+
+- 多行正文行高建议接近字号的 `1.5` 倍，保证阅读舒适且不松散。
+- 高密度表格、单行列表和导航文本可以更紧凑，但不应影响识别。
+- 多段说明之间的段间距应大于行间距，帮助用户区分段落。
+- 较长说明应控制行宽，避免单行过长导致回读困难。
+
+禁止事项：
+
+- 不要让多行文本行高过小，导致文字挤成一团。
+- 不要让行高过大，导致后台页面信息密度被无意义拉低。
+- 不要在同一说明区域混用多套行高。
+
+验收标准：
+
+- 用户能顺畅阅读 2 行以上说明文本。
+- 行与行之间有呼吸感，但页面仍保持 B 端信息密度。
+- 同类文本行高稳定，可被复用。
+
+### 克制使用渐变
+
+适用场景：主按钮、选中态、重点指标卡、深色模式局部强调、状态强调区。
+
+执行规则：
+
+- B 端后台中渐变只用于少量重点位置，例如主按钮、选中态或关键指标强调。
+- 矩形按钮和卡片优先使用线性渐变，渐变方向应稳定，不频繁变化。
+- 渐变色应来自同一品牌色或相邻色系，避免突兀的多彩过渡。
+- 渐变上方文字、图标和状态必须保持足够对比。
+
+禁止事项：
+
+- 不要在普通表格、长表单、筛选区和基础卡片中滥用渐变。
+- 不要用径向光斑、强发光或复杂渐变制造装饰噪音。
+- 不要让渐变影响按钮状态、禁用态、危险态的识别。
+
+验收标准：
+
+- 渐变只强化关键操作或重点信息，不成为页面主角。
+- 同一产品内渐变方向、色系和强度稳定。
+- 用户仍能清楚识别按钮文字、状态和交互反馈。
+
+### 轻量渐变与背景融合
+
+适用场景：工作台欢迎区、空态背景、局部指标背景、模块头部、重点引导区和低密度概览区域。
+
+执行规则：
+
+- 渐变背景应使用低饱和、低对比、过渡柔和的色彩，优先服务区域融合和层级过渡。
+- 背景渐变只用于局部区域，不能成为后台页面的默认大面积底色。
+- 渐变边界应自然消退，避免出现硬切分、脏色带或明显色块断层。
+- 渐变上方若承载文字、图标、按钮或图表，必须先保证对比度和可读性。
+- 高密度表格、长表单、筛选区和配置页默认使用纯色或浅灰分区，不依赖渐变。
+
+禁止事项：
+
+- 不要使用高饱和、多颜色、强对比的大面积渐变背景。
+- 不要用渐变掩盖信息层级混乱的问题。
+- 不要让渐变影响文字、图表、状态和操作的识别。
+- 不要在密集工作页面中制造氛围型背景噪音。
+
+验收标准：
+
+- 渐变让局部区域更柔和、更有层次，但不抢业务内容。
+- 用户能清楚阅读渐变区域上的所有信息。
+- 去掉渐变后，页面结构和主次关系仍然成立。
+
+### 响应式导航等分
+
+适用场景：窄屏后台、移动端管理视图、底部导航、顶部图标导航、快捷工具栏。
+
+执行规则：
+
+- 当使用底部导航或等宽图标导航时，应按整个导航容器宽度等分每个导航项。
+- 每个导航项内部再居中放置图标和文字，而不是只让图标之间距离相等。
+- 同级导航项应保持相同点击区域、图标尺寸、文字层级和选中态样式。
+- 桌面 B 端默认仍优先使用侧边导航、顶部导航或工具栏，底部导航只用于窄屏或移动端管理视图。
+
+禁止事项：
+
+- 不要只调整图标之间的距离，忽略每个导航项的点击区域宽度。
+- 不要在桌面后台页面强行使用移动端底部导航模式。
+- 不要让导航项宽度不同，导致点击区域和视觉节奏不稳定。
+
+验收标准：
+
+- 每个导航项的点击区域均匀、稳定。
+- 图标和文字在各自导航项内居中对齐。
+- 响应式导航不会破坏桌面后台的主导航结构。
+
+### 表单标签置顶
+
+适用场景：登录表单、创建表单、编辑表单、筛选表单、配置页、审批页、设置页。
+
+执行规则：
+
+- B 端表单默认优先将标签放在输入框上方，形成稳定的纵向阅读路径。
+- 标签、输入框、帮助文本、错误提示应按上下关系形成同一字段组。
+- 多字段表单中，同级字段的标签起点和输入框起点应保持一致。
+- 只有在空间极其紧张、字段很短且业务需要横向比较时，才使用左侧标签布局。
+
+禁止事项：
+
+- 不要在同一张表单中混用左标签、右标签和上标签。
+- 不要把标签放在输入框右侧。
+- 不要让标签和输入框距离过远，导致字段归属不清。
+
+验收标准：
+
+- 用户能按从上到下的顺序连续填写。
+- 每个标签都能明确对应一个输入控件。
+- 表单字段组在视觉上整齐、可扫描。
+
+### 表单控件高度一致
+
+适用场景：输入框、下拉框、日期选择、搜索框、主按钮、提交按钮、筛选按钮、弹窗底部按钮。
+
+执行规则：
+
+- 同一表单或同一筛选区内，输入框、下拉框、日期选择和主要操作按钮高度应尽量一致。
+- 筛选区常用高度应收敛到 `28px-36px`，普通表单和弹窗可收敛到 `32px-44px`。
+- 主按钮如果与输入框同处一行，应优先与输入框等高。
+- 不同尺寸档位必须服务明确层级，例如紧凑筛选、普通表单、重要提交。
+
+禁止事项：
+
+- 不要让同一表单中输入框是 48px，主按钮却明显矮一截。
+- 不要让筛选区内不同控件高度随机变化。
+- 不要为了突出主按钮而破坏同一行表单控件的对齐。
+
+验收标准：
+
+- 表单和筛选区控件在视觉上成行、整齐。
+- 用户能快速区分字段和操作，但不会觉得控件高低不齐。
+- 控件高度可沉淀为少量复用 token。
+
+### 开关即时生效
+
+适用场景：权限开关、通知设置、支付设置、功能启停、显示隐藏、轻量配置项。
+
+执行规则：
+
+- 当开关切换后会立即生效，且风险较低时，应使用开关组件承载操作。
+- 开关旁必须有清楚标签，说明开关控制的具体对象。
+- 切换后应立即展示状态变化；必要时使用轻量提示说明已生效。
+- 高风险开关可增加确认弹窗、权限校验或撤销入口。
+
+禁止事项：
+
+- 不要在低风险即时生效开关后再强制用户点击保存。
+- 不要用开关处理需要多字段确认、复杂校验或不可逆的危险操作。
+- 不要让开关标签模糊，例如只写“启用”而不说明启用什么。
+
+验收标准：
+
+- 用户知道开关控制什么，以及切换后是否已经生效。
+- 低风险设置操作路径短，不出现多余保存按钮。
+- 高风险设置有明确确认或保护机制。
+
+## 交互效率与认知负荷规则
+
+本章节用于把交互心理学原则转成 B 端原型可执行规则。AI 设计页面时，应优先降低寻找成本、选择成本、记忆成本和等待不确定性，让用户能在高密度信息中快速判断下一步。
+
+### 重要操作可见性
+
+适用场景：列表行操作、详情页操作、工具栏、卡片操作、审批处理、导出、分享、收藏、保存、提交和批量处理。
+
+执行规则：
+
+- 高频操作、关键业务操作和当前流程的下一步操作应优先直接可见。
+- 低频操作、辅助操作、危险操作或空间成本高的操作可以放入更多菜单。
+- 操作是否外显应根据频率、重要性、风险和空间成本决定，不只为了界面简洁。
+- 当空间允许时，保存、提交、审批、导出、分享、收藏等用户容易寻找的操作应清晰展示。
+- 被隐藏到更多菜单中的操作，应在用户预期的位置可找到，并使用清楚的菜单命名。
+
+禁止事项：
+
+- 不要把核心主操作默认藏进更多菜单。
+- 不要为了页面干净隐藏用户完成任务必须使用的操作。
+- 不要把高频操作和低频操作全部混在同一个更多菜单里。
+
+验收标准：
+
+- 用户不用猜就能找到完成当前任务所需的关键操作。
+- 更多菜单只承载低频、辅助或需要收纳的操作。
+- 操作外显与隐藏的理由能从业务频率和风险解释清楚。
+
+### 点击热区与视觉尺寸
+
+适用场景：按钮、图标按钮、表格行操作、分页、开关、复选框、单选框、Tab、下拉触发器和移动端管理视图。
+
+执行规则：
+
+- 桌面 B 端按钮视觉高度可以紧凑，但点击热区不能小到难以命中。
+- 触控场景的目标热区建议至少 `44x44`，空间允许时可使用 `48x48`。
+- 相邻可点击目标之间至少保留 `8px` 间隔，降低误触和误点风险。
+- 高频操作、危险操作和弹窗确认按钮应有更清楚的点击边界。
+- 图标按钮如果视觉尺寸较小，应通过内边距扩展实际热区。
+
+禁止事项：
+
+- 不要让图标只有图形本身可点击，而周围留白不可点击。
+- 不要把多个小图标操作紧贴排列。
+- 不要为了节省空间牺牲表格行操作、分页和筛选按钮的可点击性。
+
+验收标准：
+
+- 用户能稳定点击控件，不需要精细瞄准。
+- 相邻操作之间不容易误点。
+- 视觉尺寸紧凑时，实际热区仍满足操作需求。
+
+### 费茨定律：目标大小与距离
+
+适用场景：主操作按钮、表格行操作、工具栏按钮、筛选提交、弹窗确认、分页、常用快捷入口。
+
+执行规则：
+
+- 高频操作和主操作应放在用户视线与鼠标移动路径更短的位置。
+- 主按钮、确认按钮、提交按钮的点击区域必须足够大，优先使用常规按钮或大按钮高度。
+- 表格行内高频操作应固定在同一列或同一侧，避免用户每行重新寻找。
+- 相邻可点击目标之间应保留足够间距，避免误点。
+- 危险操作应与常规操作拉开距离，必要时放入更多菜单或二次确认。
+
+禁止事项：
+
+- 不要把最常用操作放在页面角落、远离内容主体或需要长距离移动的位置。
+- 不要把多个小图标操作密集挤在一起。
+- 不要让主操作点击区域只覆盖文字本身。
+- 不要把删除、停用、清空等危险操作紧贴主确认按钮。
+
+验收标准：
+
+- 用户完成核心任务时，鼠标移动路径短且操作目标清楚。
+- 高频按钮不需要精细瞄准也能稳定点击。
+- 普通操作和危险操作不会因距离过近造成误触。
+
+### 希克定律：减少选择与分步决策
+
+适用场景：创建流程、配置流程、筛选条件、批量操作、弹窗选择、导航入口、复杂表单。
+
+执行规则：
+
+- 同一时间只暴露当前决策需要的关键选项。
+- 复杂任务应拆成分步流程、分组表单、折叠面板或渐进展开。
+- 选项过多时，应先按业务语义分组，再提供搜索、筛选或推荐项。
+- 默认选项必须服务最常见场景，减少用户从零判断。
+- 低频高级设置应降权展示，不与核心设置抢第一层空间。
+
+禁止事项：
+
+- 不要在首屏一次性铺满所有配置项。
+- 不要把核心选项、高级选项、危险选项放在同一视觉层级。
+- 不要在没有分组的情况下给用户大量同级按钮或入口。
+- 不要让用户必须读完整页才能知道下一步该选什么。
+
+验收标准：
+
+- 用户能先完成主决策，再处理补充设置。
+- 每个区域的选择数量可控，选项分组清楚。
+- 页面不会因为入口过多而让主路径变弱。
+
+### 米勒定律：控制短期记忆负担
+
+适用场景：表单填写、数据核对、审批流程、配置向导、指标看板、详情页、搜索筛选。
+
+执行规则：
+
+- 长表单应分组，并为每组提供明确标题。
+- 需要对照的信息应放在同屏邻近位置，避免用户记住一处再去另一处比较。
+- 关键上下文应持续可见，例如对象名称、当前状态、当前步骤和已选条件。
+- 指标、字段、操作入口应按业务块聚合，不让用户记忆零散信息。
+- 流程型页面应展示步骤、进度或已完成状态。
+
+禁止事项：
+
+- 不要要求用户记住上一页、上一弹窗或上一段内容才能完成当前操作。
+- 不要把强相关信息分散在多个远离区域。
+- 不要让筛选条件提交后完全消失。
+- 不要在长流程中隐藏当前对象、当前步骤或当前状态。
+
+验收标准：
+
+- 用户无需依赖记忆即可完成核对、填写和提交。
+- 当前页面始终能说明“我在处理什么、现在到哪一步、已经选了什么”。
+- 强相关信息在空间上可直接对照。
+
+### 接近原则：空间分组与卡片范围
+
+适用场景：信息卡片、详情区域、表单字段组、筛选区、统计指标、权限配置、设置页。
+
+执行规则：
+
+- 相关字段、说明、状态和操作必须放入同一空间范围。
+- 卡片范围应只承载一个明确主题，不把多个弱相关主题塞进同一卡片。
+- 组内间距应小于组间间距，必要时通过标题或背景轻微分区。
+- 操作按钮应靠近其作用对象，例如行操作靠近对应行，卡片操作靠近对应卡片。
+- 筛选项与筛选结果之间应保持明确的上下文关系。
+
+禁止事项：
+
+- 不要让按钮远离它实际影响的对象。
+- 不要把多个业务主题混在同一个无标题区域。
+- 不要让所有区块使用相同间距，导致分组边界消失。
+- 不要只靠描边解决语义分组问题。
+
+验收标准：
+
+- 用户能直接判断每个操作影响哪个对象。
+- 卡片或区域主题单一，边界清楚。
+- 去掉装饰线后，分组关系仍然成立。
+
+### 相似原则：统一风格与必要区分
+
+适用场景：按钮组、导航项、状态标签、表格列、卡片列表、操作菜单、筛选条件。
+
+执行规则：
+
+- 相同功能类型必须保持相同尺寸、颜色语义、图标风格和交互状态。
+- 不同层级或不同风险的操作必须通过权重、颜色、位置或形态区分。
+- 状态标签应使用稳定的颜色语义，例如成功、警告、失败、处理中、禁用。
+- 同类列表、卡片和表格行应复用同一结构，让用户能快速预测。
+- 只有存在业务差异时才引入视觉差异。
+
+禁止事项：
+
+- 不要让同类按钮在同一页面出现多套高度、圆角或颜色。
+- 不要用同一种样式表达不同风险等级的操作。
+- 不要为装饰目的随机改变卡片结构。
+- 不要让状态颜色语义前后不一致。
+
+验收标准：
+
+- 用户能根据外观判断控件类别、状态和风险。
+- 同类元素可复用，视觉规律稳定。
+- 差异化样式都有明确业务原因。
+
+### 视觉层次原则：引导扫读顺序
+
+适用场景：仪表盘、列表页、详情页、配置页、审批页、弹窗、空状态、异常状态。
+
+执行规则：
+
+- 页面必须有明确第一视觉焦点，通常是页面标题、核心指标、当前对象或主任务。
+- 标题、核心数据、状态、说明、操作应按重要性建立权重梯度。
+- 主要内容区应比辅助区更突出，辅助筛选、说明和元信息应降权。
+- 关键状态和异常信息必须在用户做决定前可见。
+- 页面扫读顺序应符合从标题到内容、从主信息到操作、从概览到细节的路径。
+
+禁止事项：
+
+- 不要让所有模块同等醒目。
+- 不要让装饰、背景、阴影或插图抢过核心数据和主操作。
+- 不要把关键错误、风险提示或审批状态放在低可见区域。
+- 不要让首屏出现多个互相竞争的第一焦点。
+
+验收标准：
+
+- 用户能在 3 秒内判断页面主题、当前状态和下一步主操作。
+- 主次层级清楚，辅助信息不会抢焦点。
+- 异常、风险和关键状态在决策前可见。
+
+### 反馈原则：及时明确响应
+
+适用场景：按钮点击、表单提交、保存、上传、删除、批量操作、异步任务、加载、校验、权限受限。
+
+执行规则：
+
+- 用户触发操作后，界面必须立即给出状态变化，例如 loading、禁用、进度、成功或失败提示。
+- 表单校验错误应靠近对应字段，并说明如何修正。
+- 保存、提交、删除、批量处理等关键操作应给出明确结果反馈。
+- 异步任务应展示处理中状态，耗时任务应展示进度或可返回查看的结果入口。
+- 空状态、错误状态、无权限状态应给出下一步可执行动作。
+
+禁止事项：
+
+- 不要让用户点击后界面毫无变化。
+- 不要只用全局 Toast 承载字段级错误。
+- 不要让 loading 状态覆盖关键信息且没有说明。
+- 不要在失败后只提示“操作失败”，不给原因或下一步。
+
+验收标准：
+
+- 用户每次操作后都知道系统是否接收到请求。
+- 成功、失败、处理中、无权限和空数据状态都可区分。
+- 错误反馈能指导用户完成修正，而不是只报告失败。
+
+## 交互规则速查
+
+| 原则 | 设计动作 | B 端落点 |
+|---|---|---|
+| 重要操作可见性 | 高频和关键操作直接可见，低频和辅助操作收进更多菜单 | 工具栏、详情页、列表行、审批处理、批量操作 |
+| 点击热区与视觉尺寸 | 视觉可紧凑但热区要可点，相邻目标至少保留 `8px` | 图标按钮、分页、Tab、开关、移动端管理视图 |
+| 费茨定律 | 高频操作靠近任务对象，点击目标足够大，危险操作拉开距离 | 主按钮、表格行操作、工具栏、弹窗确认 |
+| 希克定律 | 减少同屏选择，复杂配置分步或分组，低频设置降权 | 创建流程、筛选区、配置页、批量操作 |
+| 米勒定律 | 强相关信息同屏对照，关键上下文持续可见 | 长表单、审批、详情页、指标看板 |
+| 接近原则 | 操作靠近作用对象，卡片只承载一个主题 | 卡片、详情区、筛选区、设置页 |
+| 相似原则 | 同类控件统一，不同风险和层级明确区分 | 按钮、标签、导航、表格、菜单 |
+| 视觉层次 | 建立第一焦点和主次梯度，关键状态前置 | 仪表盘、列表页、弹窗、异常状态 |
+| 反馈原则 | 操作后立即响应，错误贴近字段，异步任务有状态 | 表单、上传、保存、删除、批量处理 |
+
+## 尼尔森可用性原则补充规则
+
+本章节把尼尔森十大可用性原则转成 B 端后台、运营台、管理系统和 SaaS 产品可执行的原型规则。若与前文原则有重合，本章节只补充更具体的设计动作，不重复解释基础理论。
+
+### 系统状态可见性
+
+适用场景：保存、提交、审批、上传、导入、导出、批量处理、报表生成、AI 生成、定时任务和异步计算。
+
+执行规则：
+
+- 用户触发操作后，界面必须立即展示系统已接收请求，例如按钮 loading、进度条、任务状态、禁用重复提交或结果入口。
+- 耗时超过短暂等待的任务，应展示处理中、成功、失败、取消、排队中等明确状态。
+- 批量、导入、导出和报表生成应展示影响范围、处理数量、失败数量和可下载或可查看的结果。
+- 异步任务离开页面后仍会继续时，应提供任务中心、通知、列表状态或结果入口。
+- 状态反馈应靠近触发位置或任务对象，不只依赖全局 Toast。
+
+禁止事项：
+
+- 不要让用户点击后页面无变化。
+- 不要只显示转圈，不说明正在处理什么。
+- 不要让长任务只能停留在当前页等待。
+- 不要在任务失败后只提示失败，不提供失败原因和结果去向。
+
+验收标准：
+
+- 用户知道系统当前处于空闲、处理中、成功、失败还是可继续处理。
+- 用户知道任务是否还能离开页面、是否可取消、结果在哪里查看。
+- 每个关键操作都有状态反馈链路。
+
+### 匹配现实与业务语言
+
+适用场景：导航、菜单、按钮、字段名、状态名、筛选项、表格列、错误文案、空态文案和帮助说明。
+
+执行规则：
+
+- 使用目标用户熟悉的业务词汇，而不是数据库字段、接口参数、技术缩写或内部黑话。
+- 状态命名应符合业务流程，例如待审批、已通过、已驳回、处理中、已停用。
+- 字段命名应贴近用户任务，例如负责人、所属部门、有效期、审批人、创建时间。
+- 技术概念必须出现时，应配合解释、示例或业务含义。
+- 文案语气应稳定、清楚、可执行，不让用户猜系统含义。
+
+禁止事项：
+
+- 不要直接暴露 `user_id`、`pending_review`、`sync_failed_code_500` 等技术表达作为用户界面文案。
+- 不要同一概念在不同页面使用不同说法。
+- 不要使用只有内部团队理解的简称或流程代号。
+- 不要把错误文案写成开发日志。
+
+验收标准：
+
+- 目标用户不看培训文档也能理解字段、状态和操作含义。
+- 同一业务概念在全站命名一致。
+- 技术原因被翻译成用户能采取行动的业务说明。
+
+### 用户控制与自由
+
+适用场景：编辑、删除、审批、批量操作、配置变更、流程向导、弹窗、抽屉、导入和草稿保存。
+
+执行规则：
+
+- 用户应能取消、返回、关闭、撤销、恢复草稿或重新编辑，尤其是长流程和高风险操作。
+- 删除、停用、清空、覆盖、批量变更等危险操作必须提供二次确认或撤销机制。
+- 多步骤流程应提供上一步、保存草稿、退出确认和当前进度。
+- 弹窗、抽屉和全屏任务应有明确关闭入口，并说明关闭后内容是否保留。
+- 执行成功后的短时间内，低风险误操作可提供撤销入口。
+
+禁止事项：
+
+- 不要让用户进入流程后找不到退出方式。
+- 不要让关闭弹窗直接丢失已填写内容且不提醒。
+- 不要把危险操作和普通操作放在同等视觉权重且无确认。
+- 不要让批量操作执行后无法理解影响范围，也无法补救。
+
+验收标准：
+
+- 用户能随时判断如何退出当前流程。
+- 高风险操作在执行前知道影响范围，执行后有必要的补救路径。
+- 长表单和长流程不会因为误关闭导致无提示丢失。
+
+### 一致性与标准化
+
+适用场景：组件库、导航、表格、表单、状态标签、按钮、弹窗、Toast、空态、错误态和页面模板。
+
+执行规则：
+
+- 相同功能使用相同组件、相同位置、相同文案结构和相同交互反馈。
+- 相同状态使用相同颜色、图标、标签尺寸和命名。
+- 常见页面模式应标准化，例如列表页、详情页、创建页、编辑页、审批页、配置页。
+- 同类操作的顺序应稳定，例如取消在左、确认在右，危险操作与普通操作分离。
+- 如果业务必须打破标准，应在设计说明中写明原因。
+
+禁止事项：
+
+- 不要一处叫启用，另一处叫开启，第三处叫生效，除非业务含义不同。
+- 不要同类弹窗的确认按钮位置和颜色随机变化。
+- 不要让同级页面使用完全不同的信息结构。
+- 不要用视觉变化表达没有业务意义的差异。
+
+验收标准：
+
+- 用户学会一个页面后，能预测同类页面如何使用。
+- 组件和状态能沉淀为复用规范。
+- 不一致的位置都有明确业务理由。
+
+### 防错原则
+
+适用场景：表单填写、密码设置、权限配置、批量处理、删除、导入、金额输入、日期范围和审批提交。
+
+执行规则：
+
+- 在提交前提前暴露规则，例如必填、格式、长度、范围、权限、影响数量和不可逆后果。
+- 对不满足条件的操作应禁用、限制输入、实时校验或给出前置提示。
+- 高风险操作应要求确认对象、数量、范围或关键字段，必要时输入确认词。
+- 导入和批量操作应先预检，展示可成功、可跳过、会失败的数据数量和原因。
+- 默认值应服务常见安全场景，减少用户手动犯错。
+
+禁止事项：
+
+- 不要等用户提交后才第一次告诉规则。
+- 不要允许明显无效的日期、金额、格式或权限组合继续提交。
+- 不要让危险操作只差一次误点就立即生效。
+- 不要让批量导入失败后才暴露模板格式要求。
+
+验收标准：
+
+- 用户在操作前能知道关键限制和风险。
+- 常见错误被输入限制、实时校验或确认流程提前拦截。
+- 失败成本高的动作都有预检或二次确认。
+
+### 识别而非回忆
+
+适用场景：搜索、筛选、配置、流程向导、详情对照、审批、报表分析和跨页面任务。
+
+执行规则：
+
+- 当前对象、当前步骤、已选条件、已选范围、上次输入和关键上下文应持续可见。
+- 搜索和筛选可提供历史记录、最近使用、常用条件、推荐条件或保存视图。
+- 复杂配置应把可选项展示出来，配合默认值、示例、说明和分组。
+- 需要对照的信息应同屏展示或提供固定摘要，不要求用户记住上一页内容。
+- 跨页面流程应使用面包屑、步骤条、对象标题或悬浮摘要保持上下文。
+
+禁止事项：
+
+- 不要让用户必须记住上一页的字段值才能完成当前操作。
+- 不要提交筛选后隐藏当前筛选条件。
+- 不要把关键选择藏在不可见的历史步骤中。
+- 不要只给空白输入框，却不给示例、历史或可选项。
+
+验收标准：
+
+- 用户不用依赖记忆即可继续任务。
+- 当前页面能说明正在处理什么、已选择什么、下一步是什么。
+- 常用输入和选择能被识别、复用或快速恢复。
+
+### 灵活性与效率
+
+适用场景：高频后台操作、熟练用户工作台、批量处理、表格配置、筛选视图、快捷创建和模板复用。
+
+执行规则：
+
+- 默认路径应让新手按步骤完成任务，快捷路径应让熟练用户减少重复操作。
+- 高频操作可提供批量处理、快捷入口、快捷键、保存筛选、列配置、默认视图和最近使用。
+- 重复创建类任务应提供模板、复制、复用上次配置或草稿。
+- 高级功能可以收纳，但应在熟练用户预期位置可找到。
+- 快捷方式不得替代基础路径；新手不使用快捷方式也应能完成任务。
+
+禁止事项：
+
+- 不要为了效率把基础流程隐藏到只剩快捷入口。
+- 不要让新手必须先学快捷键、模板或高级配置才能完成任务。
+- 不要把低频高级能力放到第一层干扰常规任务。
+- 不要让保存视图、列配置、批量操作缺少恢复默认入口。
+
+验收标准：
+
+- 新手能按默认流程完成任务，熟练用户能用快捷方式提速。
+- 高频重复操作有减少步骤的机制。
+- 高级效率功能存在但不干扰主路径。
+
+### 审美与简约设计
+
+适用场景：列表页、表单页、详情页、仪表盘、工作台、弹窗、空态和配置页。
+
+执行规则：
+
+- 每个页面只保留完成当前任务需要的信息、操作和说明。
+- 低频字段、高级设置、历史记录、日志和补充说明应折叠、分组或放到详情区。
+- 装饰元素必须服务层级、分组、状态或品牌，不占用关键工作区。
+- 表格、表单和配置页优先减少视觉噪音，保留清楚的主次层级。
+- 如果删除某个信息不影响当前任务，应考虑隐藏、降权或移到次级区域。
+
+禁止事项：
+
+- 不要把所有字段、所有操作和所有说明一次性铺在首屏。
+- 不要让插图、渐变、阴影或装饰图抢过业务内容。
+- 不要为了页面显得丰富而增加弱信息。
+- 不要让每个模块都同等醒目。
+
+验收标准：
+
+- 用户能快速找到当前任务的核心信息和主操作。
+- 页面没有明显无关信息抢占注意力。
+- 视觉层级帮助聚焦，而不是制造负担。
+
+### 帮助用户识别并修正错误
+
+适用场景：表单校验、导入失败、权限失败、网络失败、保存失败、审批失败、支付失败和系统异常。
+
+执行规则：
+
+- 错误信息应说明发生了什么、哪里出错、为什么出错、用户可以怎么修。
+- 字段级错误必须靠近对应字段，复杂错误可提供错误列表并支持定位。
+- 系统级错误应提供重试、刷新、返回、联系管理员、查看日志或下载失败明细。
+- 导入和批量处理失败应标出失败行、失败字段、失败原因和修复建议。
+- 错误文案应使用用户能理解的语言，不直接暴露错误码作为主要内容。
+
+禁止事项：
+
+- 不要只写操作失败、保存失败、参数错误。
+- 不要只用全局 Toast 告诉用户某个字段错了。
+- 不要让错误码替代人能理解的错误说明。
+- 不要提供无法执行的建议，例如只说请稍后再试但没有重试入口。
+
+验收标准：
+
+- 用户能定位错误发生在哪里。
+- 用户知道如何修正或下一步找谁处理。
+- 错误反馈能推动问题解决，而不是只报告失败。
+
+### 帮助和文档
+
+适用场景：导入模板、权限配置、审批规则、报表口径、AI 参数、自动化流程、复杂配置和首次使用。
+
+执行规则：
+
+- 复杂功能应在用户操作位置附近提供说明、示例、模板、字段解释或帮助入口。
+- 帮助内容应优先回答当前任务问题，例如怎么填、填错会怎样、在哪里查看结果。
+- 导入、配置、规则类页面应提供可下载模板、示例数据或可复用配置。
+- 新手引导应短而可跳过，后续可在帮助入口再次找到。
+- 帮助文档入口应放在用户遇到问题的位置，不只放在全局帮助中心。
+
+禁止事项：
+
+- 不要把关键操作规则只写在外部文档里。
+- 不要在复杂页面只放一个问号图标，但没有具体说明。
+- 不要让帮助内容脱离当前页面上下文。
+- 不要用长篇说明替代清楚的界面结构和默认值。
+
+验收标准：
+
+- 用户在不离开当前任务太远的情况下能找到帮助。
+- 帮助内容能直接解决当前操作问题。
+- 模板、示例和说明能减少配置、导入和理解成本。
+
+## 包容性与可理解性补充规则
+
+本章节用于把包容性设计转成 B 端后台可执行规则。B 端界面常涉及用户、员工、客户、审批人、金额、权限和异常状态，设计时应避免无必要的身份假设、技术黑话和无法行动的错误提示。
+
+### 中性头像与身份表达
+
+适用场景：用户头像、员工头像、客户头像、审批人头像、负责人头像、未登录头像和默认占位头像。
+
+执行规则：
+
+- 默认头像应使用中性图形、姓名首字母、组织色块或抽象占位图。
+- 头像占位不应默认表达性别、年龄、肤色、职业或身份等级。
+- 列表、评论、审批流和详情页中的身份表达应优先使用角色或姓名，例如申请人、审批人、负责人、操作人。
+- 当用户没有头像时，应保持占位头像与真实头像尺寸、圆角和对齐一致。
+- 如果需要区分组织、角色或权限，应使用标签、图标或文案，不用人物形象暗示。
+
+禁止事项：
+
+- 不要默认使用明显男性、女性、职业制服或特定年龄形象作为通用头像。
+- 不要用头像风格表达用户价值、等级或可信度，除非业务明确存在认证规则。
+- 不要让默认头像在表格、卡片和详情页中尺寸不一致。
+
+验收标准：
+
+- 默认头像不带身份偏见，适用于所有用户。
+- 头像缺失时仍能识别对象和角色。
+- 用户身份通过业务字段表达，而不是通过刻板图像暗示。
+
+### 中性角色称谓与业务文案
+
+适用场景：系统通知、审批流、任务分派、权限提示、帮助文案、错误文案、空态和用户详情。
+
+执行规则：
+
+- 文案优先使用用户、成员、员工、客户、申请人、审批人、负责人、操作者等角色称谓。
+- 无明确必要时，不使用“他、她、它”等带性别或拟人倾向的称谓。
+- 面向业务用户的文案应清晰准确、友好尊重、简洁有效。
+- 专业术语、缩写和内部代号必须出现时，应补充业务解释或示例。
+- 按钮和提示应直接说明动作和结果，例如申请权限、重新导入、下载失败明细。
+
+禁止事项：
+
+- 不要用性别代词指代用户、员工、客户或审批对象。
+- 不要用内部项目代号、接口名或错误码替代用户可理解文案。
+- 不要为了显得专业而使用业务用户无法理解的术语。
+
+验收标准：
+
+- 文案不预设用户性别、身份或技术背景。
+- 用户能理解当前提示影响什么、需要做什么。
+- 同一角色在全站称谓稳定。
+
+### 中英文混排与术语可读性
+
+适用场景：产品名、英文缩写、版本号、API、SKU、ID、Key、Token、日期、单位和技术配置项。
+
+执行规则：
+
+- 中文句子中出现英文词、缩写、版本号或技术名时，应保留可读间距，例如 `API Key`、`SKU 编码`、`iOS 13`。
+- 英文产品名、配置项和代码类字段应避免与中文紧贴，防止扫读困难。
+- 表格列名、筛选项和表单标签中的中英文混排应保持同一写法。
+- 专业英文术语应在首次出现或复杂配置处提供中文解释。
+- 代码、密钥、ID 等不可翻译内容应使用等宽或清晰可复制的表现方式。
+
+禁止事项：
+
+- 不要让中文、英文、数字和单位挤在一起导致难以读懂。
+- 不要同一术语在不同页面一处翻译、一处不翻译、一处缩写。
+- 不要把需要复制的 Key、Token、ID 做成难以选择或辨认的普通长文本。
+
+验收标准：
+
+- 中英文混排文本可快速扫读。
+- 技术术语对业务用户有解释，对技术用户可复制。
+- 同一术语写法一致。
+
+### 金额与数字格式
+
+适用场景：金额、价格、预算、成本、数量、百分比、时长、额度、余额、统计指标和财务表格。
+
+执行规则：
+
+- 金额、数量、百分比、时长等可比较数字在表格和对比列表中应右对齐或按小数位对齐。
+- 金额应使用千分位分隔符，例如 `18,750.23`。
+- 同一列金额的小数位、币种符号和单位位置必须一致。
+- 大数字指标中，核心数值应突出，币种、单位、正负号和百分号应降权但仍清晰。
+- 不同币种、不同口径或不同单位必须显式标注，不让用户自行推断。
+
+禁止事项：
+
+- 不要让金额列左对齐或居中导致难以比较。
+- 不要同一列混用 `¥18,750.23`、`18750.2 元`、`1.875 万` 等不同格式。
+- 不要省略币种、单位或口径，导致业务判断错误。
+
+验收标准：
+
+- 用户能快速比较同一列数字大小。
+- 金额格式统一，币种和小数位清楚。
+- 数值、单位和口径不会互相混淆。
+
+### 权限与异常提示的解决路径
+
+适用场景：权限不足、摄像头/文件/定位等授权失败、保存失败、导入失败、导出失败、审批失败、接口异常和网络错误。
+
+执行规则：
+
+- 异常提示必须同时说明问题和解决方案。
+- 权限类错误应说明缺少什么权限、影响什么功能、如何申请或开启。
+- 导入、导出、审批、保存等业务失败应提供重试、查看原因、下载失败明细、联系管理员或返回上级。
+- 操作入口应靠近提示内容，例如申请权限、去开启、重新导入、下载失败明细。
+- 无法立即解决的问题，应提供结果入口、任务记录或支持渠道。
+
+禁止事项：
+
+- 不要只提示“无权限”“操作失败”“网络错误”，却不给下一步。
+- 不要让用户在错误页里只能退出，不能重试或求助。
+- 不要把复杂失败原因只放在后台日志中，前台没有可读摘要。
+
+验收标准：
+
+- 用户知道失败原因、影响范围和下一步。
+- 权限、网络、接口、业务校验错误能被区分。
+- 错误提示能推动问题解决，而不是形成死路。
+
+### 长时间加载与超时处理
+
+适用场景：列表加载、报表生成、数据导入、文件上传、批量处理、AI 生成、导出任务和跨系统同步。
+
+执行规则：
+
+- 加载不能无限转圈，应在超过合理等待时间后转为明确状态。
+- 短任务可用局部 loading；较长任务应展示进度、排队中、后台处理中或预计耗时。
+- 长时间无响应时，应提供重试、取消、返回、稍后查看、任务中心或联系管理员入口。
+- 如果任务已进入后台处理，应明确告诉用户离开页面是否影响结果。
+- 超时和失败状态应保留用户已输入内容或任务上下文，避免用户从头开始。
+
+禁止事项：
+
+- 不要让用户长时间面对无说明 loading。
+- 不要在超时后只显示空白页或静态错误图标。
+- 不要让重试清空用户已填写或已上传的信息。
+
+验收标准：
+
+- 用户知道当前是加载中、排队中、后台处理中、超时还是失败。
+- 长任务有可离开和可追踪的结果路径。
+- 超时后用户仍有明确恢复或继续操作的方式。
+
+## 后台数据页面补充规则
+
+本章节用于补充表格、筛选、详情、批量处理和状态反馈等高频后台页面规则。只保留能直接指导 AI 生成 B 端原型的设计动作，不收录偏营销、偏移动端或纯装饰性的技巧。
+
+### 表格列优先级与数据对齐
+
+适用场景：数据管理页、审批列表、任务列表、订单列表、用户列表、日志列表和报表明细。
+
+执行规则：
+
+- 表格第一信息列应承载对象名称、任务标题、编号、用户、订单号等主识别字段。
+- 文字类字段默认左对齐，金额、数量、百分比、时长等可比较数字默认右对齐或按小数位对齐。
+- 状态列应靠近主判断路径，操作列应固定在右侧或稳定出现在同一位置。
+- 列宽应按业务优先级分配，主识别字段和关键状态优先保证完整可读。
+- 次要字段可以省略、折叠、移入详情或通过 Tooltip 展示完整内容。
+
+禁止事项：
+
+- 不要让所有列都居中，导致文本和数字都难以扫读。
+- 不要把主识别字段挤到很窄，反而给低价值字段过多宽度。
+- 不要让同一类表格的操作列位置来回变化。
+- 不要把关键状态藏在需要横向滚动后才能看到的位置。
+
+验收标准：
+
+- 用户能先识别对象，再判断状态，最后找到操作。
+- 数字列便于上下比较，文本列便于横向阅读。
+- 低优先级字段被收纳后，不影响完成当前任务。
+
+### 筛选区收敛与已选条件
+
+适用场景：列表筛选、报表筛选、订单查询、人员搜索、日志检索、任务分派和内容管理。
+
+执行规则：
+
+- 筛选区默认只外显高频条件，例如关键词、状态、时间、负责人、类型和组织范围。
+- 低频筛选应放入高级筛选、折叠区或更多筛选，不抢占列表首屏。
+- 查询、重置、展开高级筛选等操作应靠近筛选条件，并保持稳定位置。
+- 筛选提交后，应用条件应以标签、摘要或保留输入值的方式持续可见。
+- 当筛选条件很多时，应按业务语义分组，而不是把所有字段平铺成一行或一大片。
+
+禁止事项：
+
+- 不要让筛选区高度超过首屏主要内容，导致用户先看到一大块表单而不是结果。
+- 不要把低频高级条件和高频条件做成同等权重。
+- 不要提交筛选后清空条件，让用户忘记当前列表为什么变少。
+- 不要只提供重置，不提供明确的查询或条件应用状态。
+
+验收标准：
+
+- 用户能快速找到最常用筛选条件并发起查询。
+- 当前列表受哪些条件影响是可见的。
+- 高级筛选存在但不压过数据结果。
+
+### 批量选择与批量操作
+
+适用场景：批量审批、批量删除、批量导出、批量分配、批量启停、批量打标和批量移动。
+
+执行规则：
+
+- 表格或列表支持批量处理时，应清楚展示已选数量。
+- 未选择任何对象时，批量操作应禁用、隐藏或以空状态提示选择对象。
+- 选择对象后，批量操作栏应靠近列表顶部或选择区域，避免用户到处寻找。
+- 跨页选择、全选当前页、清空选择等状态必须用明确文案说明。
+- 高风险批量操作必须二次确认，并说明影响范围和对象数量。
+
+禁止事项：
+
+- 不要在未选择对象时让批量操作看起来可以直接执行。
+- 不要只用复选框状态表达已选数量。
+- 不要让跨页全选含义模糊，导致用户误操作更多数据。
+- 不要把批量删除、停用、清空等危险操作和普通导出操作混在同一视觉权重里。
+
+验收标准：
+
+- 用户始终知道自己选中了多少对象。
+- 批量操作出现、禁用和执行状态清楚。
+- 高风险批量操作不会因为范围不清而被误触发。
+
+### 表格密度与可读分隔
+
+适用场景：高密度表格、运营列表、日志列表、审批列表、财务明细和监控明细。
+
+执行规则：
+
+- 表头、行高、单元格内边距和操作按钮尺寸应统一，形成稳定扫读节奏。
+- 高密度页面优先使用轻分割线、浅底表头、hover 高亮或弱斑马纹辅助阅读。
+- 表头在长表格中应固定或保持可回到视野，避免用户滚动后忘记列含义。
+- 单元格内容过长时，应优先单行截断加完整查看方式；关键字段不得只显示无意义省略。
+- 行详情可用展开行、抽屉或详情页承载，不把所有详情塞进表格主行。
+
+禁止事项：
+
+- 不要给每一行都做重卡片、重阴影或大圆角，破坏高密度阅读。
+- 不要让表格行高因为内容多少随机变化。
+- 不要在没有完整查看方式的情况下截断关键业务字段。
+- 不要把过多操作按钮直接堆在行内，导致列宽被操作区占满。
+
+验收标准：
+
+- 用户能连续扫描多行数据而不疲劳。
+- 滚动时仍能理解每列含义。
+- 表格保持紧凑，但关键内容有完整查看路径。
+
+### 空态、加载态与错误态
+
+适用场景：空列表、空搜索结果、首次使用、加载中、保存中、上传中、接口异常、权限受限和任务失败。
+
+执行规则：
+
+- 空态必须说明原因，例如暂无数据、筛选无结果、无权限、尚未创建或数据加载失败。
+- 空态应提供下一步动作，例如新建、调整筛选、刷新、申请权限、查看帮助或返回上级。
+- 加载态应贴合内容结构；表格使用表格骨架，卡片区使用卡片骨架，避免全局空白等待。
+- 错误态应说明可理解原因，并提供重试、刷新、返回、联系管理员或查看日志等可执行动作。
+- 局部加载优先局部反馈，避免用整页 loading 打断用户对其它区域的操作。
+
+禁止事项：
+
+- 不要只写“暂无数据”而不说明用户下一步能做什么。
+- 不要用大幅装饰插图占据后台核心工作区。
+- 不要让加载态遮住全部页面且没有进度、范围或说明。
+- 不要把无权限、无数据、接口失败三种状态做成同一种文案。
+
+验收标准：
+
+- 用户知道当前是没有数据、没权限、加载中还是失败。
+- 每个异常状态都有可执行下一步。
+- 状态反馈不会破坏后台页面的信息密度。
+
+### 详情页主从结构
+
+适用场景：订单详情、用户详情、审批详情、任务详情、项目详情、设备详情、内容详情和配置详情。
+
+执行规则：
+
+- 详情页顶部应先展示对象名称、核心状态、关键摘要和主操作。
+- 次级信息按业务主题分区，例如基础信息、处理记录、关联数据、权限、日志和附件。
+- 重要状态、风险、审批结论和待办动作应靠近页面顶部或固定在可见区域。
+- 长详情页应提供锚点、Tab、分组标题或目录，帮助用户快速跳转。
+- 与当前对象相关的操作应靠近对象摘要或对应分区，不放到难找的角落。
+
+禁止事项：
+
+- 不要让详情页一开始就是大量字段平铺，用户看不到对象状态和下一步。
+- 不要把所有分区做成同等权重，导致主信息被埋没。
+- 不要让编辑、审批、导出、关闭等关键操作分散在多个不稳定位置。
+- 不要把日志、附件、备注等低频信息放在主摘要之前。
+
+验收标准：
+
+- 用户进入详情页后能立即知道对象是谁、当前状态是什么、下一步能做什么。
+- 长详情可以快速定位到目标分区。
+- 主信息和辅助信息层级清楚，不需要通读全页才能判断。
+
+## 基础组件体系与布局参数规则
+
+本章节用于指导 AI 在 B 端原型设计前先判断页面类型、组件类型和布局计算方式。不要先画页面再临时补控件，应先确定页面模式、栅格区域、固定区域和组件层级，再进入具体页面设计。
+
+### 组件体系选择
+
+适用场景：设计系统梳理、页面首稿、组件选型、原型组件清单和开发还原说明。
+
+执行规则：
+
+- 基础组件用于建立全局视觉参数，包括色彩、字体、间距、圆角、分割线、布局和栅格。
+- 展示组件用于承载信息浏览，包括全局导航、面包屑、分页、标签页、步骤条、表格、列表、标签、日历、树形图和可视化图表。
+- 录入组件用于承载用户输入，包括输入框、选择框、单选、多选、时间选择、日期选择、开关、滑动条、穿梭框、树形选择和按钮。
+- 反馈组件用于承载系统响应，包括文字提示、气泡提示、全局提示、通知提醒、警告提示、进度条、确认框、对话框、抽屉和结果页。
+- 页面模式应先从工作台、详情页、表格页、列表页、表单页、看板页、数据可视化页中选择，再组合组件。
+
+禁止事项：
+
+- 不要在未判断页面模式时随意堆表格、卡片和弹窗。
+- 不要用录入组件承载展示信息，或用展示组件伪装可编辑操作。
+- 不要为每个页面临时发明组件形态，导致组件库无法复用。
+
+验收标准：
+
+- 每个页面能说明自己属于哪种页面模式。
+- 页面中的组件能归入基础、展示、录入或反馈类别。
+- 组件选择能解释业务任务，而不是只解释视觉喜好。
+
+### 栅格计算与固定区域扣除
+
+适用场景：布局计算、左右布局、上下布局、侧栏页面、右侧详情栏、筛选面板、属性面板和数据看板。
+
+执行规则：
+
+- 复杂 B 端页面默认优先使用 `24` 栅格；较简单页面可使用 `12` 栅格。
+- 使用 `24` 栅格时，可按公式计算：`24 * 栏宽 + 23 * 水槽宽 + 2 * 页边距 = 内容区宽度`。
+- 栏宽计算方式为：`栏宽 = (内容区宽度 - 23 * 水槽宽 - 2 * 页边距) / 24`。
+- 上下布局若为满屏布局，页面主体宽度可作为栅格区；若为版心布局，版心宽度作为栅格区。
+- 左右布局必须先扣除固定区域，例如侧边导航、右侧详情栏、筛选栏、属性面板，再计算主内容栅格区。
+- 当页面存在多个固定宽度模块时，栅格区宽度 = 页面宽度 - 所有固定模块宽度 - 固定模块间距。
+
+禁止事项：
+
+- 不要在有侧边栏和右侧面板时仍按整页宽度计算主内容栅格。
+- 不要把固定宽度模块混入栅格区，导致主内容对齐失真。
+- 不要为了填满页面临时改变栏宽、水槽和页边距。
+
+验收标准：
+
+- 页面能说清栅格区到底是整页、版心还是扣除固定模块后的主内容区。
+- 固定区域与主内容区边界清楚，不互相挤压。
+- 栅格计算能支撑开发复现，而不是只在视觉上近似。
+
+### 侧边栏参数分层
+
+适用场景：后台侧边导航、运营台菜单、SaaS 多模块导航、组织切换、菜单搜索和多级菜单。
+
+执行规则：
+
+- `208px-240px` 适合高密度后台窄侧栏、短菜单和一级导航较稳定的运营台。
+- `240px-280px` 适合多层级菜单、菜单文案较长或包含图标加文字的常规后台。
+- `300px` 适合复杂产品、长菜单、带组织切换、菜单搜索、空间切换或折叠面板的侧栏。
+- 一级菜单行高可参考 `40px-44px`，一级字号可参考 `14px`。
+- 二级菜单字号可参考 `12px-14px`，层级应通过缩进、颜色、背景或字重区分。
+- 菜单图标可参考 `16px`，图标与文字间距可参考 `8px`。
+
+禁止事项：
+
+- 不要所有后台都默认使用超宽侧边栏。
+- 不要让长菜单文案在窄侧栏中频繁截断且无完整查看方式。
+- 不要让一级、二级、三级菜单在字号、缩进和选中态上无法区分。
+
+验收标准：
+
+- 侧边栏宽度与菜单复杂度匹配。
+- 菜单层级、当前项和展开状态清楚。
+- 图标、文字、行高和缩进形成稳定节奏。
+
+### 表格参数补充
+
+适用场景：资源列表、用户列表、审批列表、订单列表、内容列表、报表明细和运营管理表格。
+
+执行规则：
+
+- 高密度表格左右内边距可参考 `16px`，但应随页面边距和列密度调整。
+- 表头行高可参考 `40px-48px`，普通表格行高可参考 `48px-56px`。
+- 表格正文可以使用 `12px-14px`，密集数据表可用 `12px`，常规管理表格优先 `13px-14px`。
+- 表格内按钮可使用小按钮或常规按钮，常见高度为 `28px-32px`，不要撑高整行。
+- 表格内开关、标签、图标按钮应比主按钮降权，并保持行内垂直居中。
+
+禁止事项：
+
+- 不要让表格行高被封面图、按钮、开关或多行文本随机撑开。
+- 不要在同一张表中混用过多按钮尺寸。
+- 不要让表头、行内容和操作区字体层级混乱。
+
+验收标准：
+
+- 表格行高稳定，连续扫读不跳动。
+- 表格操作清楚但不抢主数据。
+- 密集表格仍然可读、可点、可比较。
+
+### 弹窗参数补充
+
+适用场景：删除确认、提交确认、风险提示、轻量表单、审批确认、结果反馈和二次确认。
+
+执行规则：
+
+- 小确认弹窗可参考 `320px-420px` 宽度，内容复杂时再增大，不默认做成大弹窗。
+- 弹窗标题区高度可参考 `48px-56px`，标题字号可参考 `14px-16px`。
+- 正文主文案可参考 `14px`，补充说明可参考 `12px-13px`。
+- 底部按钮高度可参考 `32px-36px`，确认与取消按钮应保持同高。
+- 危险操作弹窗必须说明操作对象、影响后果、取消入口和确认入口。
+
+禁止事项：
+
+- 不要让轻量确认弹窗占满大面积屏幕。
+- 不要只写“是否删除”，却不说明删除对象和后果。
+- 不要让取消和确认按钮视觉权重完全相同，导致用户难以判断推荐动作。
+
+验收标准：
+
+- 用户能在弹窗中明确当前对象、风险和下一步。
+- 弹窗尺寸与内容复杂度匹配。
+- 按钮层级和危险语义清楚。
+
+### 日期与时间控件
+
+适用场景：日期选择、日期范围、月份切换、报表周期、排期、预约、日志查询和筛选条件。
+
+执行规则：
+
+- 日期单元格应保持稳定尺寸和对齐，常见日期数字字号可参考 `12px-14px`。
+- 单日选中态、范围起点、范围终点和范围中间态必须有不同但连续的视觉表达。
+- 不可选日期应降权，并避免看起来像可点击状态。
+- 双月范围选择适合报表、订单、日志和跨月查询；简单日期选择不必默认使用双月面板。
+- 日期控件必须提供清楚的上月、下月、当前月份和已选日期反馈。
+
+禁止事项：
+
+- 不要只用颜色深浅表达日期范围，导致起点和终点不清楚。
+- 不要让不可选日期与普通日期对比不足。
+- 不要在简单单日选择中使用过重、过大的日期面板。
+
+验收标准：
+
+- 用户能清楚看出当前月份、可选日期和已选范围。
+- 日期范围状态连续，不像多个孤立选中点。
+- 日期控件尺寸与筛选或表单场景匹配。
+
+### 通知提醒参数补充
+
+适用场景：成功提示、警告提示、信息提示、错误提示、系统通知、升级公告和表单页顶部反馈。
+
+执行规则：
+
+- 通知提醒应包含状态图标、短文案、必要动作或关闭入口。
+- 高密度后台中的通知高度可参考 `32px-40px`，字号可参考 `12px-14px`。
+- 通知左侧内容间距可参考 `12px-16px`，图标与文案间距保持稳定。
+- 成功、警告、信息、错误应使用稳定语义色和浅色背景。
+- 长文案通知应提供展开、查看详情或跳转入口，不强行塞进单行。
+
+禁止事项：
+
+- 不要只靠背景色表达通知类型。
+- 不要让全局通知覆盖核心操作区且无法关闭。
+- 不要把复杂错误详情塞进一条横幅通知里。
+
+验收标准：
+
+- 用户能快速识别通知类型、内容和下一步。
+- 通知不打断无关区域操作。
+- 同类通知尺寸、图标、颜色和文案结构稳定。
+
+### 文字层级与行高补充
+
+适用场景：页面标题、模块标题、正文、说明文字、表格文本、弹窗正文和表单帮助。
+
+执行规则：
+
+- B 端 Web 正文优先按 `14px` 思考；高密度表格、注释和辅助文本可降到 `12px-13px`。
+- 区分文字层级时，优先使用颜色和字重，其次使用字号，不要只靠字号大小区分层级。
+- 常用字号与行高可参考 `12/20`、`14/22`、`16/24`、`20/26`、`24/32`、`30/36`。
+- 间距优先使用 `8px` 倍数；细节微调、图标文字间距、紧凑控件内部可使用 `4px` 倍数。
+- 系统字体栈应优先使用主流无衬线字体，避免设计稿字体与开发实现完全脱节。
+
+禁止事项：
+
+- 不要在同一页面使用过多相近字号制造层级。
+- 不要为了突出层级把正文做得过大，破坏信息密度。
+- 不要使用设计稿专有字体作为开发必须完全一致的前提。
+
+验收标准：
+
+- 用户能通过颜色、字重和字号判断信息层级。
+- 正文阅读舒适，辅助信息不抢焦点。
+- 字号、行高和间距能沉淀为开发 token。
+
+## B 端适配与响应式规则
+
+本章节用于指导 AI 在设计 B 端网页原型时处理不同桌面宽度下的布局变化。B 端适配不是把桌面页面改成移动端样式，而是在常见办公屏幕中保证核心任务、表格数据、筛选条件、主操作和状态反馈可见、可读、可操作。
+
+### 适配优先级
+
+适用场景：页面首稿、响应式说明、开发还原说明、原型审核和多分辨率检查。
+
+执行规则：
+
+- 默认先按 `1440x900` 建立信息架构、组件密度和主路径，再检查 `1280x800` 下是否完整可用。
+- `1280x800` 是后台页面必须优先保障的下限，至少应保留页面标题、主筛选、核心数据区和主操作。
+- `1920x1080` 只做增强展示，不应在大屏才出现关键功能或关键状态。
+- 适配顺序应先收紧间距和列宽，再折叠低频区域，最后才考虑隐藏次要信息。
+- 每个页面都应说明哪些区域固定、哪些区域自适应、哪些区域可滚动、哪些区域可折叠。
+
+禁止事项：
+
+- 不要以 `1920` 宽画布作为普通后台页面的唯一设计基准。
+- 不要让 `1280` 宽度下主操作、关键状态或主要表格列被挤出可见区域。
+- 不要用移动端底部导航、单列大卡片流替代桌面后台的主结构。
+- 不要把适配理解为等比例缩小所有字号、按钮和间距。
+
+验收标准：
+
+- `1280x800` 下用户仍能完成页面核心任务。
+- `1440x900` 下页面密度、留白和操作路径均衡。
+- `1920x1080` 下页面利用空间增强效率，但不制造无意义空旷。
+
+### 固定区与自适应区
+
+适用场景：侧边导航、顶部栏、筛选区、表格区、右侧详情栏、属性面板和底部操作栏。
+
+执行规则：
+
+- 侧边导航、顶部栏、右侧详情栏、属性面板等固定区应先确定宽高，再计算主内容自适应空间。
+- 主内容区应承担宽度变化，固定区不应随着窗口变化反复跳动。
+- 当宽度不足时，优先收起低频侧栏、右侧面板或高级筛选，而不是压缩主数据区到不可读。
+- 固定顶部栏或底部操作栏时，应给内容区预留对应空间，避免遮挡表格行、表单字段和分页。
+- 有右侧详情栏的页面，主表格和详情栏之间应保持稳定分隔和最小可用宽度。
+
+禁止事项：
+
+- 不要让侧边导航、主内容和右侧面板都同时自由伸缩，导致布局不可预测。
+- 不要让固定操作栏遮住表单底部错误提示、分页或最后一行数据。
+- 不要在空间不足时继续保留所有辅助面板，挤压主任务区域。
+
+验收标准：
+
+- 页面能清楚区分固定区和自适应区。
+- 窄屏时主内容仍保留最低可读宽度。
+- 固定栏不会遮挡用户正在阅读或操作的内容。
+
+### 表格与列表适配
+
+适用场景：数据表格、审批列表、任务列表、日志列表、报表明细和内容管理页。
+
+执行规则：
+
+- 表格适配应先明确列优先级：主识别列、状态列、关键数值列和操作列优先保留。
+- 窄屏时可隐藏低优先级列、合并次要信息、使用列配置或放入详情抽屉。
+- 操作列应保持稳定位置，必要时固定在右侧；主识别列可固定在左侧。
+- 横向滚动只用于列数量确实无法减少的专业数据表，并应提供固定列、滚动条或边缘提示。
+- 列内容过长时可截断加 Tooltip 或详情入口，但主识别字段、异常状态和关键数值必须可判断。
+
+禁止事项：
+
+- 不要让所有表格列等宽压缩，导致主字段、状态和金额都不可读。
+- 不要把核心状态藏到横向滚动末端。
+- 不要在窄屏下把表格强行改成大量卡片，除非页面本身是低密度对象列表。
+- 不要为了适配隐藏操作列而没有替代操作入口。
+
+验收标准：
+
+- 用户在窄屏下仍能识别对象、判断状态、完成主要操作。
+- 被隐藏或折叠的信息有可发现的查看方式。
+- 横向滚动存在时，用户能明确知道左右还有内容。
+
+### 筛选区适配
+
+适用场景：列表筛选、报表筛选、日志查询、订单查询、人员搜索和内容管理。
+
+执行规则：
+
+- 筛选区默认保留高频条件，例如关键词、状态、时间、类型、负责人或组织范围。
+- 宽屏可以展示更多筛选项，窄屏应把低频条件收进高级筛选、展开面板或抽屉。
+- 查询、重置、展开高级筛选等操作应与筛选条件保持同一行或相邻区域，不随换行漂到难找位置。
+- 筛选项换行时应保持字段起点、控件高度和行间距一致。
+- 已应用条件应持续可见，避免窄屏收起筛选后用户不知道当前列表受哪些条件影响。
+
+禁止事项：
+
+- 不要让筛选区在 `1280x800` 下占据过高首屏，挤掉主要结果列表。
+- 不要把所有筛选字段都强行放在一行，导致控件过窄。
+- 不要在收起高级筛选后丢失已选条件提示。
+
+验收标准：
+
+- 窄屏下用户仍能完成最常见查询。
+- 高频筛选和查询按钮保持可见、可操作。
+- 高级条件被收纳后，当前筛选结果仍有清楚上下文。
+
+### 表单与详情适配
+
+适用场景：创建页、编辑页、设置页、审批页、详情页、抽屉表单和弹窗表单。
+
+执行规则：
+
+- 表单在宽屏可使用两列或多列布局，窄屏应优先回落为单列或主次分区。
+- 必填字段、错误提示、帮助文本和控件必须保持同一字段组，不因换行或分栏而分离。
+- 详情页宽屏可使用主从布局，窄屏应优先保留对象摘要、核心状态和主操作，再折叠日志、附件和低频信息。
+- 长表单应保留页面标题、当前对象、步骤状态或底部操作栏，避免用户滚动后失去上下文。
+- 弹窗和抽屉宽度应随内容复杂度和屏幕宽度设置最大值，不应在窄屏中超出视口。
+
+禁止事项：
+
+- 不要让两列表单在窄屏下继续硬挤，导致输入框和说明不可读。
+- 不要让错误提示与对应字段被分到不同列或不同区域。
+- 不要让详情页窄屏首屏只剩低频信息，看不到对象状态和主操作。
+
+验收标准：
+
+- 用户在不同宽度下都能理解字段归属、错误位置和提交路径。
+- 详情页始终先呈现对象、状态和下一步动作。
+- 表单和详情布局变化后，阅读顺序仍然自然。
+
+### 宽屏空间利用
+
+适用场景：`1600px` 以上桌面屏、双栏工作区、数据看板、详情页、配置页和审批处理页。
+
+执行规则：
+
+- 宽屏增加空间时，优先用于并排对照、固定摘要、右侧详情、图表扩展、列配置或操作预览。
+- 内容最大宽度应受控，避免正文、表单和详情字段被拉得过长。
+- 表格可以利用宽屏展示更多列，但仍应保持列优先级和阅读路径。
+- 看板和概览页可增加卡片列数，但卡片宽度、标题行数和指标层级应保持稳定。
+- 宽屏增强应服务效率，例如减少跳转、减少弹窗、提升对照，不只增加留白或装饰。
+
+禁止事项：
+
+- 不要把表单输入框和文本段落无限拉宽。
+- 不要为了填满宽屏而增加无业务意义的卡片、插图或背景装饰。
+- 不要让宽屏布局和普通桌面布局的信息顺序完全不同。
+
+验收标准：
+
+- 宽屏能提升查看、对照或处理效率。
+- 内容不会因为过宽而降低可读性。
+- 同一页面在不同宽度下保持一致的信息优先级。
+
+## 画布与适配
+
+| 类型 | 尺寸 | 使用建议 |
+|---|---:|---|
+| 最小画布 | 1280x800 | 适配普通 14 寸或以下笔记本，必须保证核心布局完整展示。 |
+| 推荐画布 | 1440x900 | B 端网页默认设计画布，兼顾主流中小屏显示和向下适配成本。 |
+| 最大画布 | 1920x1080 | 只在明确大屏、全屏观看或监控展示场景中使用。 |
+
+默认优先按 `1440x900` 设计，同时检查 `1280x800` 下是否仍能完整展示核心内容。不要轻易使用 `1920` 宽画布作为默认设计基准。
+
+## 页面基础参数
+
+| 参数 | 建议值 | 说明 |
+|---|---:|---|
+| Navigation | 300 | 常规 B 端侧边导航宽度。 |
+| Page width | 1440 | 默认设计画布宽度。 |
+| Gutter | 12 | 页面栅格间距参考值。 |
+| Margin | 20 | 页面左右边距参考值。 |
+
+常规页面文字层级参考：
+
+| 层级 | 字号 |
+|---|---:|
+| 大标题 | 16 |
+| 中标题 | 14 |
+| 小标题 | 13 |
+| 正文 | 13 |
+| 注释文本 | 12 |
+
+## 栅格与间距
+
+| 参数 | 范围 | 使用建议 |
+|---|---:|---|
+| 页面边距 Margin | 12-40 | 页面左右预留空间，用于形成栅格主要应用范围。 |
+| 栅格数量 Count | 12-24 | `24` 最主流，方便被 2、3、4、6、8 整除；`12` 次之。熟悉响应式时也可使用 16、20。 |
+| 栅格间距 Gutter | 8-20 | 板块左右间距应小于页面边距，最大不应超过 20，避免页面过度松散。 |
+| 元素间距 | 2-20 | 用于模块内间距和元素间距，建议使用合理偶数；低层级间距不应大于页面边距。 |
+
+## 字体选择
+
+| 类型 | 推荐字体 |
+|---|---|
+| 中文字体 | 苹方、微软雅黑、思源黑体、其他常见黑体 |
+| 英文/数字字体 | Arial、Helvetica、SF Pro、Roboto |
+
+网页中文字体通常直接调用系统默认字体，无法保证用户本地拥有设计稿所用字体。设计稿里的字体应视为参数效果示意，实际交付时优先使用主流黑体和常见无衬线字体栈。
+
+## 文本参数
+
+| 参数 | 建议值 | 使用建议 |
+|---|---:|---|
+| 中文最小字号 | 12 | 浏览器和可读性限制下的中文最小字号。 |
+| 英文/数字最小字号 | 10 | 英文和数字可略小于中文。 |
+| 注释字号 | 10-13 | 中英文注释字号通常落在此范围。 |
+| 正文字号 | 13-16 | B 端正文常用范围；再小难以看清，再大占用空间过多。 |
+| 标题字号 | 13-24 | 标题等级跨度较大；极少数场景才使用超过 24 的特大标题。 |
+| 字重 | Light / Medium / Bold | 分别代表细体、默认和粗体三类常用字重。 |
+| 字间距 | 0 | Web 端通常不需要设计师主动调整字间距。 |
+| 行高 | 1.2-1.8 | 信息密集的单行文本可用 1.2；多行文本通常不超过 1.8。 |
+
+## 图标参数
+
+| 类型 | 尺寸 | 使用建议 |
+|---|---:|---|
+| 小图标 | 12-20 | 控件内低权重简约图标，尺寸不应大于 20。 |
+| 常规图标 | 24-40 | 高频工具图标和按钮图标，通常不大于 40。 |
+| 大图标 | 36-80 | 装饰图标或视觉强化图标，用于提高页面视觉效果。 |
+
+图标是 B 端设计的重要组成部分，虽然整体风格不应过度花哨，但必须控制尺寸统一。同一类操作中的图标尺寸应保持一致。
+
+## 按钮参数
+
+B 端按钮可以包含文本、图标或图片，但常规操作按钮通常由几何背景和上方信息组合而成。按钮尺寸主要关注高度，宽度通常由内容决定。
+
+| 类型 | 高度 | 使用建议 |
+|---|---:|---|
+| 大按钮 | 36-44 | 只用于权重最高、最需要用户关注且使用频次不高的位置；最大建议控制在 44 左右。 |
+| 常规按钮 | 28-36 | 高频常用按钮的推荐高度，鼠标操作舒适且不明显影响排版。 |
+| 小按钮 | 20-28 | 较极端的小尺寸，再小不推荐使用。 |
+| 标签 | 16-32 | 标签样式接近按钮，有些可点击、有些只展示信息；最大不应超过常规按钮尺寸。 |
+
+## 输入框参数
+
+输入框是按钮之外最重要的表单控件，其尺寸会影响下拉、日期选择等更高级控件的尺寸定义。
+
+| 类型 | 高度 | 使用建议 |
+|---|---:|---|
+| 小输入框 | 20-28 | 权重较低的输入框，高度与小按钮保持一致，便于水平并排。 |
+| 大输入框 | 32-44 | 高度通常由常规按钮或大按钮尺寸决定。 |
+| 下拉菜单/日期选择等 | 20-44 | 使用输入框样式的其它控件应沿用输入框高度，保证表单高度和视觉统一。 |
+
+常规项目中，输入框只需要使用 2 种尺寸就够了，并应尽可能复用到同类控件中，方便且统一。