1. 兔课网
  2. 资讯
  3. 平面设计教程
  4. 设计师应该知道的栅格系统基础知识

设计师应该知道的栅格系统基础知识

4424人阅读 2020-07-14 收藏

很长一段时间以前,我都不知道网格是什么,但是听了很多解释后,还是很模糊。后来,我发现很多朋友也有这样的问题,所以我决定分享我对网格系统的理解。首先,我们必须对网格系统有一个基本的了解。我把这四个词分成“网格”和“系统”来分别解释。

关于栅格

grid是从grid演化而来的另一种说法,意思是—— grid,所以不要认为grid有多深多复杂。如果你把它描述成网格,你仍然认为它很难理解吗?事实上,我们都是网格专家,因为当我们几岁的时候,我们接触过许多网格,比如方格书:

设计师应该知道的栅格系统基础知识


另一个例子是飞机网格:

设计师应该知道的栅格系统基础知识


关于系统

我个人理解系统是一种规则。例如,ios有自己的规则:屏幕大小规则、代码语言规则等。如果你想在系统中创建一个应用,你需要遵循它的规则。网格有规则,这就形成了我们所说的网格系统。所以今天的焦点来了。网格系统(规则)到底包含什么?通过研究草图软件中的一些网格设置选项,对网格系统的内容进行了反求,得到了网格系统的六个基本元素。轮廓如下:网格的最小单位,屏幕的总宽度,栏宽,水槽的安全边界,

1. 栅格的最小单位

。最小单位需要首先确定,因为以下所有规则都是基于它的。下图是在草图中设置网格大小的页面:

设计师应该知道的栅格系统基础知识


如果你用的是草图,但是不知道上面的界面在哪里,请出去左转到百度!这里有一个简单的介绍:pc中常用的最小单位是10,手机中常用的最小单位是3、4和5,但这些不是固定的。尽管如此,解决工作中的实际问题是正确的。

2. 屏幕总宽度

作为接口,设计将首先连接到一个尺寸。由于内容是不确定的,我们不能确定高度,但内容区域的宽度可以确定。sketch给我们的默认屏幕宽度是960,这是网页设计:

设计师应该知道的栅格系统基础知识

中最流行的尺寸



3. 列数

仅仅意味着整个界面被垂直分成几列。默认情况下,sketch帮助我们划分为12列。这是网页端常用的划分方法,移动端一般分为6等份。

设计师应该知道的栅格系统基础知识



4. 列宽

当960宽的界面被分成12个纵剖面时,我们很容易计算出每个剖面的宽度是80,而80的宽度实际上包含两个内容,一个是列宽,另一个是下沉,如下图所示:

设计师应该知道的栅格系统基础知识


每个灰色区域就是我们所说的列宽。草图的默认列宽为60:

设计师应该知道的栅格系统基础知识


5. 水槽(间隔)

灰色区域是列宽,所以红色区域自然是下沉(间隔)。

设计师应该知道的栅格系统基础知识


毕竟,界面的内容需要分开,不能堆在一起,所以接收器的功能是更规范地区分内容。当

6. 安全边距

被用作应用程序界面时,我们将设置一个屏幕安全余量,因为当信息被张贴在屏幕边缘时,不仅会影响可读性,还会影响美观。网络方面也将有一个安全边际。它是怎么发生的?或者这张照片:

设计师应该知道的栅格系统基础知识


我们看一下图片,屏幕的最右边是一个水槽,这表明右边有一个安全余量(水槽的宽度),并且屏幕的左边没有间隙,那么我们可以将最右边的水槽分成两部分,并在最左边放置一个吗?下图:

设计师应该知道的栅格系统基础知识

当然,这是可能的,因为草图已经为我们做了这个设置选项,如下图所示设计师应该知道的栅格系统基础知识

至于网格的颜色和形式,也可以自己调整,并且有所有的设置选项。这是对网格系统的基本认识和基本六要素。只有彻底理解这些基本概念,网格系统才能得到更好的应用。

举例验证

最后,我们将通过以上解释来验证您是否真正理解这些元素。例如,现在我们将开发一个宽度为1920的网络网格系统。如果使用常用的12列,每列的宽度为1920,12等于160,包括列宽和下沉,我们可以将列宽设置为120,下沉设置为40(列宽:下沉=3: 1)。安全系数是水槽的一半,也就是20。这样一个1920年的网格系统基本上问世了。很简单吗?每个人都必须学会生活和使用,许多价值观是不固定的,例如,12列是不够的,那么16列;另一个例子是柱子和水槽的宽度必须是3: 1吗?不一定,所以不要一意孤行!


相关文章推荐

梦幻效果,打造紫色花季唯美梦幻效果教程
这有帮你成为优秀设计师的10个好习惯
Photoshop教程:打造环绕身体的星光特效
私房照,私房摄影后期调色教程
蓝色调,调出偏暗的蓝色婚纱照片实例
工具教程,自由变换工具的使用技巧
奇幻场景,在PS中合成小男孩和恐龙合影
学平面设计可以做什么
色彩知识,色彩与设计之间的联系
一张图告诉你流行品牌的LOGO演变史

特别推荐

上一篇>> 点线面的运用!设计的骨骼(一)

下一篇>> 详细解析中文字体图形化设计技巧

新人大礼包

1
咨询客服

交流Q群

微信公众号
返回顶部