split-layout-technical

分屏布局技术规范

适用场景

• 创建技术感的分屏设计系统，采用双面板、精细边框线、等宽元数据、克制的编辑式排版和高级内嵌表面。

工作流

范围

• 当界面需要划分为两个清晰的面板或区域时，将其作为完整的页面布局和设计系统方向。
• 适用于产品页面、展示页、作品集、编辑式科技布局或概念演示等适合采用严谨分屏结构的场景。
• 这首先是一套布局系统：它应控制边框、间距、排版、元数据处理和面板行为，而不只是添加一条竖向分隔线。

视觉目标

• 围绕醒目的分屏布局构建页面，桌面端通常采用两个大小相等或近似相等的竖向面板，每侧承担不同的角色。
• 一侧应作为主视觉或沉浸式焦点面板，另一侧则用于说明、规格、元数据、辅助内容或导航。
• 使用纤细的边框线、内嵌边界线、细小的角标和精准的间距，让每个面板都像技术显示表面。
• 将克制的编辑式排版与等宽的实用标签结合，让整个系统显得睿智、具有建筑感且井然有序。
• 保持配色克制，采用中性色表面，并使用一种从设计中自然提取、而非硬编码指定的强调色。

实现指南

• 桌面端优先使用 flex-row、分栏布局或清晰的双面板网格；在较小屏幕上则将面板纵向堆叠，同时保留分区感。
• 为每个面板设置独立的内部边框，例如内嵌竖向线、边缘偏移、角部方块、细边框或经过计算的内边距，以形成封闭的外壳。
• 使用等宽字体或实用型文本呈现顶部导轨、元数据条、标签、坐标、系统标记、规格或状态说明。
• 主标题应简洁而笃定，不要过于张扬；通过适度的字距、克制的层级和充裕的间距来衬托。
• 至少在一个面板中加入一个高级嵌入式表面，例如带边框的媒体框架、画布区域、可视化区域或图像窗口。
• 让一个面板的信息更密集，另一个更具视觉感、空间感或氛围感，从而形成实用的对比。

推荐模式

• 左右分屏主视觉：一侧放置沉浸式艺术作品或媒体，另一侧展示说明内容和结构化详情。
• 技术导轨：使用等宽字体呈现精简的顶部标签、页脚元数据、坐标、版本标记、时间戳或出版方风格的微文案。
• 规格信息块：采用紧凑的双栏事实信息、细分隔线、逐行排列和克制的表格化呈现。
• 带框表面：在简洁的外壳中放置渐变边框容器、内嵌阴影、裁切媒体窗口或深色技术画布。
• 面板的不对称性：保持整体分屏平衡，但允许两侧内部的内容密度和纵向节奏有所不同。

调整项

• 分屏比例：默认使用 50/50；如果某一侧需要更突出，可略微调整比例。
• 边框密度：根据系统所需的技术感，增加或减少内嵌线、角标和分隔线的数量。
• 排版氛围：可通过更大的衬线风格展示字体来增强编辑感，或通过更简洁的无衬线字体和等宽字体强调产品技术感。
• 表面层次：调整边框渐变、内嵌阴影强度和面板内部对比度，让嵌入式表面显得高级但不厚重。
• 克制使用强调色：将强调色用于激活状态、系统提示或焦点内容，不要大面积铺色。

避免

• 缺乏结构框架和技术细节的通用双栏营销布局。
• 两个面板同样拥挤，导致分栏失去层次和意义。
• 过于鲜艳的多色设计，破坏沉稳、专业的氛围。
• 与精确架构布局格格不入的圆角趣味 UI 样式。
• 仅将分栏作为装饰，而不赋予两侧各自明确的功能角色。