PS设计教程网欢迎你!

UI设计师必学栅格设计原理和技巧(2)

文章来源于 优设,感谢作者 马小晴 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2018-11-29
三、怎么样建立网页栅格 1. 确定屏幕尺寸,确定安全范围 当我们开始着手做一个项目时,首先应考虑在多大的尺寸范围内做设计,也就是确定栅格区域的宽度范围。 2. 确定关键数据:列的数量、水槽的宽度 常见的栅格系

三、怎么样建立网页栅格

1. 确定屏幕尺寸,确定安全范围

当我们开始着手做一个项目时,首先应考虑在多大的尺寸范围内做设计,也就是确定栅格区域的宽度范围。

UI设计师必学栅格设计原理和技巧

UI设计师必学栅格设计原理和技巧

2. 确定关键数据:列的数量、水槽的宽度

常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量,划分的格子越多,承载的内容越精细。通常,在信息繁杂的后台系统常用24栅格,而一些商业网站、门户网站通常划分成12栅格。

栅格不是划分的越细越好,24栅格精细,但也容易显得琐碎,内容排布的规则太多,也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格,也是可以的。

UI设计师必学栅格设计原理和技巧

△ 槽的数值越大,页面留白越多

需要注意的是,槽的区域不可以放置内容。通常,我们会给槽设定一个定值,用来确定栏的大小。

计算公式

我们假设内容区宽度为W(Weight),列宽为C(Column),列数为n,槽为定宽G,可以得出:W=C*n。由于槽不可以放置内容,可见内容区为:W=C*n-G。

举例:我们为一个屏宽1440的项目划分栅格,首先确定内容区宽度为1440,24列,槽为定值16;那么可以得出列宽60,栏为48。

UI设计师必学栅格设计原理和技巧

内容区应从水槽开始到水槽结束:

UI设计师必学栅格设计原理和技巧

附:sketch 栅格工具

目前,很多软件提供自动栅格设置功能,sketch也提供这样的功能:Layout Settings。

UI设计师必学栅格设计原理和技巧

Total Width:相当于 Container,是内容区的宽度。

Offset:表示栅格的偏移量,表示栅格从哪里开始。

Number of Columns:表示栅格的数量。

Gutter on outside:记得勾选。勾选以后栅格的设置才是跟前端的栅格算法匹配。

Gutter Width:槽的值,通常是定值,控制页面留白间隙。

Column Width:列的值(栏+槽),也就是栅格单个内容区的宽度。

欢迎关注「宜信大数据用户体验设计部」公众号:

UI设计师必学栅格设计原理和技巧

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa