split-layout-technical

name	split-layout-technical
description	创建一套技术分屏设计系统：双面板、细框线、等宽元数据、安静的编辑风排版，以及高级内嵌面板。

技术分屏布局技能

何时使用

• 创建一套技术分屏设计系统：双面板、细框线、等宽元数据、安静的编辑风排版，以及高级内嵌面板。

工作流程

适用范围

• 当界面应组织为两个清晰面板或两半时，把它作为一个整页布局和设计系统方向来应用。
• 用于产品页、展示、作品集、编辑技术风布局，或受益于纪律化分屏结构的概念呈现。
• 这首先是一个布局系统：它应控制框架、间距、排版、元数据处理和面板行为，而不仅仅是加一条垂直分隔线。

视觉目标

• 围绕一个有力的分屏布局构建页面，桌面端通常是两个相等或近似相等的垂直面板，每一侧承担不同角色。
• 一侧应作为主视觉或沉浸式焦点面板，另一侧处理解释、规格、元数据、辅助内容或导航。
• 使用细框线、内嵌边界分割线、微小角部标记和精确间距，让每个面板都像一个技术显示面板。
• 把安静的编辑风排版与等宽实用标注配对，让系统显得智能、建筑化、可控。
• 保持配色克制，用中性面板和一种从设计中派生（而非硬编码色相）的择选强调色。

实现指引

• 桌面端优先使用 flex-row、分栏列或清晰的双面板网格，然后在较小屏幕上垂直堆叠面板，同时不失分区感。
• 给每个面板自己的内部框架：内嵌垂直分割线、边缘偏移、角部方块、细边框，或量度化的内边距以形成一个包裹外壳。
• 顶部导轨、元数据条、标签、坐标、系统标记、规格或状态文案用等宽或实用文本。
• 主标题应保持干净自信而非喧哗；用受控的字距、克制的层级和充裕的间距来支撑它们。
• 至少在一个面板内呈现一个高级嵌入面板，如带边框的媒体框、canvas 区、可视化区或图像窗口。
• 让一个面板显得更密、更信息化，而另一个更视觉、更空间、更有氛围，以创造有用的对比。

推荐模式

• 左右分屏主视觉：一侧是沉浸式艺术作品或媒体，另一侧是解释内容和结构化细节。
• 技术导轨：纤细的顶部标签、页脚元数据、坐标、版本标记、时间戳，或出版商风格的等宽微文案。
• 规格块：紧凑的两列事实、细分隔线、分行分隔的行，以及克制的表格式呈现。
• 带框面板：渐变边框包裹器、内嵌阴影、裁切的媒体窗口，或置于安静外壳内的深色技术 canvas。
• 面板非对称：保持整体分屏平衡，但允许每半内部有不同的内容密度和垂直节奏。

调节旋钮

• 分屏比例：默认用 50/50，但当一侧需要更强主导时略作偏移。
• 框架密度：根据系统应有多技术，增减内嵌分割线、角部标记和分隔线的数量。
• 排版情绪：偏编辑风就用更大的类衬线展示时刻，偏产品技术就用更干净的无衬线和等宽强调。
• 面板纵深：调节边框渐变、内嵌阴影强度和内部面板对比，让嵌入面板显得高级而不厚重。
• 强调克制：把强调色用于激活细节、系统提示或焦点内容，而非作为整片色彩铺陈。

避免

• 缺乏结构框架和技术细节的通用两列营销布局。
• 让两个面板同等过度拥挤，使分屏失去层级和目的。
• 明亮的多色处理，破坏沉静、技术化的调性。
• 圆润俏皮的 UI 模式，与精确的建筑化布局相冲突。
• 只把分屏当装饰，而不给每半赋予不同的功能角色。