▲点击"三分设"关注，回复"社群"加入我们
欢迎来到专业设计师学习交流社区
三分设｜连接知识，助力全球 1 亿设计师成长
转自：阿里云设计中心
编辑：章欣怡
共 2353 字 29 图预计阅读 6 分钟

“数学科学所展现出的秩序、对称和限制，正是美的最佳范式。”—— 亚里士多德

秩序是计算之美和逻辑之美在图形宇宙中最底层的制约和最基础的框架，是阿里云设计观点中不可或缺的设计表达。

我们是如何定义秩序在设计中的规则，以及如何将其应用在业务中的呢？这篇文章会为大家详细解答。

Part 1

设计规则

我们将秩序拆解，使用三个栅格维度来定义——空间栅格、基础栅格和混合栅格。

空间栅格 - 三维空间秩序

在阿里云设计的计算世界中，最核心的是秩序在空间中的体现，也就是空间栅格（Space Grid - The grid in three-dimensional）。

空间栅格用来约束设计在三维空间中的 一致性 和 统一性。它被运用在 云产品形象设计、营销活动设计、互动网页设计 等多种设计场景中。

在云产品形象设计中，为了保证所有产品形象透视的一致，以及后续对产品模型的灵活复用，我们规范了网格结构、模型尺寸和模型布局。

可以看到如上案例，我们将网格由平面转换到立体，将等角视图作为摄像机的投射方式，以保证所有物体都具有秩序感且便于拼接组合。

那么，我们是如何详细的去定义空间栅格规则的呢？以下是几个核心点：

从平面到空间

空间栅格从平面栅格推导而来，它经历了从平面到立体的转换。在平面的使用场景，它规定了文字、分栏、行距，而在空间中，它规范了格局的大小、模型复杂度、模型尺寸和布局。

分栏与排列

在空间删格之中，分栏和行数决定了模型的构成。你可以选择等分空间，并在同一产品系列中保持这种构成方式。

网格结构

网格在不同场景的应用中不尽相同，它取决于使用场景的大小、需要展示模型的体量、模型的尺寸以及场景中不同模型的应用特征。在云产品形象的规范中，我们使用了一致的立方体结构，保证模型规范化输出。

可视范围

模型的核心线都需要基于空间删格，利用这些形状为基线，模型更易于保持一致。

网格边距

模型常有不规则型的出现，为适应不同应用，常会距离网格边界留一些空间作为边距。

基础栅格 - 空间底层秩序

平面栅格是设计中构建秩序的最基础的方式，它的使用场景包含但不限于：页面布局、组件构成、标识、插画等。

不论是平面还是立体的空间，使用栅格不仅可以赋予其有节奏的秩序感，可以更高效且有序的完成视觉元素的结构搭建。也可以合理的指导更大范围上页面整体设计的布局，亦或挖掘和拓展出具有节奏感视觉创意。

基础序列

栅格序列的基础为 2 的 X 平方（X 大于等于 2），即最小数字单位为 4。基础序列为 2 的平方数。扩充序列基于基础序列，在 8-48 之间，每一级通过额外增加 4 来进行有序扩充，从而更好的应对电脑端及移动端的更多细分场景。更大的平方序列则用于较大显示尺寸场景，如智能大屏或者大面积的墙面喷绘等。