苏州相城区UI设计培训班哪家好

1. 为什么要学习网格?

有效有规律的设计布局是设计的一个基本原则，网格无处不在，可能是你并没有注意到它的存在。简单理解就是：把一个页面，它能让你的设计更有规整次序也更加的有规律。简单的来说，就是用更加科学的方法去排版。根据版心划分为无数统一尺寸的网格，广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。

谷歌Material响应基于12列网格布局。该网格在布局之间创建视觉一致性，同时各种设计的灵活性。网格列的数量根据断点系统而变化。

2. 网格的基础概念

- 列 -

“列”是网格的垂直部分也可以理解为内容区域。网格中的列越多，其灵活性越大。但是列并不是越多越好，PC端一般是12列，移动端一般是6列，特别是移动端不适合列太多，列太多会让页面更碎，这里大家只要记住，PC用12列，移动用6列。

970为案例分为12列

移动端一般分为6列

- 行 -

行是网格的水平部分。也是横向部分，他们通常在网页设计中被省略。具有行和列的网格称为模块化网格。移动端行间距用的比较少可以忽略，一般在UI设计师中就是横向的间距。

- 内容模块 -

也叫做内容区域，填充设计内容，模块是用由行和列交叉创建的空间单位。

- 组合区域 -

区域是形成组合元素的列，行或模块的分组。

- 水槽 -

列和行有水槽分隔。沟渠越紧，视觉张力就越大。如果你希望你界面间距大点，水槽就可以留大，相反水槽越小，越紧凑。注意一点：水槽里面不要放内容，除非和区域一样组合使用，内容尽量放在模块里。

图中橙色区域就是水槽，这里做设计的时候是模块和模块之间的间距，最好不要放内容

- 屏幕边距 -

边距是网格列月行之外的空间。不要填充内容，移动端主要是两侧空间和屏幕边缘的距离，这里设计的时候切记不可填充内容，保持页面骨架边界。

橙色区域就是屏幕边距，设计的时候切忌填充内容，保持设计骨架统一

上述基本就是网格的一些常用单位，当然还有更细分的流线，标记，还有各种网格类型，但是今天我们主要学习移动端的网格，只需要掌握：

移动端一般分为6列，内容区域(ui设计元素、内容)一般放置到内容模块和组合模块，水槽和屏幕边距保持留白，不放任何内容。

3. 如何定网格，各模块大小

问题来了，我们知道了网格的基础概念，那么我们如何自己定义一套科学标准的网格系统，和骨架，来保证骨架的科学性和设计连续性呢?

第一步：定最小的设计单位

我们都学过化学，在化学里面有最小单位原子，原子可以组成分子，分子可以组成更多的化学元素，那么在UI系统中其实也一样，我们先要保证你的这个世界里面的元素是有个基础的，常用的单位有3(淘宝、天猫、蘑菇街等最小单位)，4(funcy)，5(raby、亚马逊、pinterest等)这个具体看你们产品的复杂程度，目前整体设计区域是最小单位越来越大，像Airbnb，pinterest等都是大留白，单位都是5甚至6

第二步：定边距和水槽大小

前面说过，先定最小单位，加入我们最小单位是5，总宽是375(sketch1倍设计尺寸)那我们产品内容我希望整个系统设计风格别那么满，留白稍微多点，我们左右边距是10，中间内容和内容之间我也想留10，这里注意，单位一定是前面我们定的5的倍数。

掏出计算器：

(375屏幕总宽- 边距左右两边20 - 水槽五个50)?(6内容移动端是6)= 51(四舍五入)

边距：10

水槽：10

内容：51

这就是我们定的栅格，系统骨架，设计时候必须保证每个设计元素，在我们框架内，保持规则，边距不要出现内容，水槽也不要放内容，如果放，尽量以组的形式。

必然会出现除不尽的情况，这个避免不了，取整数，必然有个内容区域面积会少1个px，但是这个木有什么关系。

也可以根据不同情况做不同的组合网格，这个具体还是要看是什么的业务场景。

第三步：定横向间距

前面我们虽然说过，我们在定骨架时候可以忽略横向，但是在我们UI系统中需要对横向的设计间距进行统一，我们需要保证横向的所有设计产品是有规律的，这里有个科学的方法：

斐波那契数列

在数学上，斐波那契数列是以递增的方法来定义：

用文字来说，就是斐波那契数列由0和1开始，之后的就是由之前的两数相加而得出。首几个斐波那契数列是：

0，1，1，2，3，5，8，13，21，34，55，89，144，233

研究过很多国外设计系统，都是类似有节奏的设计间距来搭建系统，并不是我YY出来的，结合前面我们定的5的栅格，我们可以得出

当然这个间距只是一个运用斐波那契数列的一个参考，如果在运用过程中觉得间距不够用，完全可以去添加或者调整，但是一定要再系统的原则基础上加有规律的间距。

4. 国外运用案例

5. 网格制作工具

ps推荐辅助线工具：guideguide

http://guideguide.me/

sketch推荐：craft插件

http://www.invisionapp.com/craft

汪清，苏州英豪教育室内设计培训课程，毕业亍江西师范大学美术学院，从业 12 年，曾担仸南昌原点建筑公司效果表现设计师，湖南鸿丰印刷公司主案设计师，上海(株)RIA 都市建筑设计主案设计师；周天雷，苏州英豪教育室内设计培训课程，毕业亍同济大学建筑系，从业 10 年，曾担仸上海荣欣装饰主案设计师，上海居于集团主案设计师，上海城乡建筑集团景观设计师，上海非凡进修学院室内设计高级讲师苏州英豪职业培训学校由浅入深、借助实例帮助学员；邰家庆，苏州英豪教育室内设计培训课程，资深室内讲师，毕业于山东艺术学院环境艺术设计系专业，7年室内外设计经验，装饰设计行业资深设计师，有着丰富的施工经验,熟悉施工现场各种工艺流程，有着良好的施工设计,周春龙，苏州英豪教育web前端开发培训课程，精通网页制作软件及网站开发语言，七年网页前端美工设计，动态网站开发教学经验，拥有成熟癿网站开发技巧，幵使教学与实际工作接轨。陶征祎，苏州英豪教育机械模具设计培训课程，资深产品及模具讲师；毕业亍郑州轻工业大学机械丏业，先后供职亍美癿集团，上海安博英豪教育机械讲师；潘老师，苏州英豪教育机械模具设计培训课程，资深产品及模具讲师；毕业亍苏州大学机械丏业，先后供职亍苏州卫宁精密仪器设备有限公司 高级机械设计工程师，宜兴市顺洲机械制造有限公司 技术主管/车间管理，东风汽车；刘帅，苏州英豪教育室内设计培训课程，高级室内讲师；毕业亍武汉纺织大学环境艺术设计（本科），2015.9-2016.9 武汉纺织大学 环艺设计协会会长；2015.9-2016.2 禾田软件科技有限公司。