间距 #

间距系统是界面设计中的重要组成部分，它决定了元素之间的视觉关系和层次结构。TPower Design 采用 8px网格系统 作为基础单位，确保布局的一致性和节奏感。

为什么使用8px的网格系统？

• 一致性：8px是最常用的网格大小，能够保证元素之间的间距在不同屏幕尺寸下保持一致。

• 易于计算：8px的倍数能够快速计算出不同间距的大小，便于设计和开发。

• 易于理解：8px的倍数能够快速理解元素之间的间距关系，便于维护和修改。

基础间距 #

我们定义了7种基础间距规格：

间距参考示例 #

注：1P=4PX

文字行距 #

文字行距应当考虑文字行高，文字行高一般会设定为字号的1.5倍，具体值取决于字号大小。文字越小，行高就越大。所以文字行距在ui中需要通过直观的行高来体现，而非通过空隙手动计算出当前文本行高

字符间距 #

字符间距通常是设计工具的默认值，无需调整。但在设计卡片标题时，有时需要通过调整字符间距来提升界面的舒适度。相同层级的内容标题字间距应保持一致。

段落间距 #

一般习惯将段间距设定为字号的0.5倍，例如字号为32px，段间距为16px（不包含行高），但在业务场景和特定的文档需求中优先以UI的视觉效果高度为准，以保证阅读体验。