UI设计必备，分层命名、分栏参考线与标题正文分层规范指南

分层命名规范：构建可维护的设计资产体系 在复杂的UI项目中，混乱的图层命名往往导致团队协作效率低下，甚至引发版本回滚的风险。有效的命名规范应当遵循“组件名-状态-属性”的逻辑结构，例如使用 `btn-primary-hover` 或 `card-item-active` 这样的格式。这种命名方式不仅直观地反映了元素的功能与当前状态，还能通过前缀快速筛选特定类型的组件，极大提升了设计系统的可检索性

分层命名规范：构建可维护的设计资产体系

在复杂的UI项目中，混乱的图层命名往往导致团队协作效率低下，甚至引发版本回滚的风险。有效的命名规范应当遵循“组件名-状态-属性”的逻辑结构，例如使用 `btn-primary-hover` 或 `card-item-active` 这样的格式。这种命名方式不仅直观地反映了元素的功能与当前状态，还能通过前缀快速筛选特定类型的组件，极大提升了设计系统的可检索性。

实际操作中，建议利用Figma或Sketch等主流工具的图层管理插件，自动化执行命名规则。通过设定统一的命名模板，确保所有设计师在创建或复制图层时遵循一致的标准。当图层名称能够清晰指示其用途而非其外观特征时，设计文件的内部结构便具备了逻辑上的自洽性，为后续的开发对接提供了清晰的映射关系。

分栏参考线：确立视觉秩序与栅格逻辑

栅格系统是UI设计中构建页面骨架的核心工具，它决定了内容在屏幕上的分布比例与阅读节奏。采用12栏或1200px宽度的栅格体系，能够灵活应对从移动端到桌面端的多种屏幕尺寸。参考线的设置不应随意摆放，而需基于严密的数学比例，如黄金分割或等分逻辑，确保每一栏的宽度与间距（Gutter）在不同断点下保持和谐的视觉平衡。

在实际布局过程中，参考线的作用在于约束元素的对齐方式，避免视觉上的松散与错位。通过设定明确的边距基准，例如左侧固定16px，右侧自适应，可以引导用户视线沿预设路径流动。这种基于网格的布局逻辑，使得页面在视觉上具有内在的秩序感，即便内容复杂多变，整体结构依然保持稳定与统一。

标题与正文分层：构建清晰的信息层级

信息层级的构建依赖于字体大小、字重、颜色深浅及行高等多重视觉变量的协同作用。标题作为信息的入口，需具备足够的视觉权重以吸引注意力，通常使用较大字号与较高字重，并通过适当的留白与正文形成区隔。正文则需保证极佳的易读性，常规字号维持在14px至16px之间，行高设置为字号的1.5至1.8倍，以缓解长时间阅读带来的视觉疲劳。

除了基础的文字样式，色彩对比度也是强化层级的关键手段。标题与正文之间应保持足够的对比度差异，避免使用相近的灰色阶造成视觉混淆。此外，通过段间距的微调，可以在不改变字体大小的情况下，进一步区分段落间的从属关系。这种严密的排版规范，确保了用户能迅速捕捉核心信息，同时顺畅地阅读细节内容，提升了整体界面的信息传达效率。