TOB产品设计-间距

设计尺寸一直都是设计师最热衷讨论的问题

间距Space

那么我们今天讨论到一下设计中间距的设计，间距设计背后的逻辑以及设计尺寸如何去定义。耐心看完，你一定有所收获～

设置界面元素中的间距与尺寸提供指导，减少决策成本。同时也方便开发工程师理解。该指南包含容器间距、横向（水平）间距以及纵向(垂直)间距，适用于元素、组件以及页面布局的设计Web端大多数应用场景下间距的值为偶数（4的倍数），尽量避免出现奇数值。

设计原则

• 通过间距差异，准确表达信息与信息之间的关系：内容越相关，间距越小。

• 通过间距差异，准确体现信息间的主次关系，同时传递给用户既符合逻辑又舒适的信息读取节奏感。

间距尺度表

间距尺度的定义，跟设计系统中文本紧密关联，也就是 text-based-size。同字体规范，间距同样以 16 px作为基准参考，以 4 px 作为起点及最小增长单位。

容器间距

容器间距以盒子模型为基础，基本类型：等宽、矩形。

等宽

矩形

间距规范不适用的场景

间距规范在某些特定场景下不适用，此时不需要严格按照间距规则来设计，根据实际规则设计间距即可。

栅格：优先考虑栅格规范，再考虑间距规范。

• 居中：间距往往由容器实际大小决定，因此不完全受间距规范限制。
• 
  
• 自适应：可能会按比例缩放间距。

Powered by Froala Editor