设计尺寸一直都是设计师最热衷讨论的问题 间距Space 那么我们今天讨论到一下设计中间距的设计,间距设计背后的逻辑以及设计尺寸如何去定义。耐心看完,你一定有所收获~ ……
设计尺寸一直都是设计师最热衷讨论的问题
间距Space
那么我们今天讨论到一下设计中间距的设计,间距设计背后的逻辑以及设计尺寸如何去定义。耐心看完,你一定有所收获~
设置界面元素中的间距与尺寸提供指导,减少决策成本。同时也方便开发工程师理解。该指南包含容器间距、横向(水平)间距以及纵向(垂直)间距,适用于元素、组件以及页面布局的设计Web端大多数应用场景下间距的值为偶数(4的倍数),尽量避免出现奇数值。
设计原则
- 通过间距差异,准确表达信息与信息之间的关系:内容越相关,间距越小。
- 通过间距差异,准确体现信息间的主次关系,同时传递给用户既符合逻辑又舒适的信息读取节奏感。
间距尺度表
间距尺度的定义,跟设计系统中文本紧密关联,也就是 text-based-size。同字体规范,间距同样以 16 px作为基准参考,以 4 px 作为起点及最小增长单位。
容器间距
容器间距以盒子模型为基础,基本类型:等宽、矩形。
等宽
矩形
间距规范不适用的场景
间距规范在某些特定场景下不适用,此时不需要严格按照间距规则来设计,根据实际规则设计间距即可。
栅格:优先考虑栅格规范,再考虑间距规范。
- 居中:间距往往由容器实际大小决定,因此不完全受间距规范限制。
- 自适应:可能会按比例缩放间距。
Powered by Froala Editor
还没有评论呢,快来抢沙发~