网格设计21天打卡

设计日记

第一课总结2022.6.7

一、定义

网格系统是一种用于对齐的工具，由一些平行排布的纵向和横向交错的线组成，常用于对齐图形、文字和图像，并建立这些内容之间的秩序和规则，是系列性设计保持一致性的基本骨架。
这些线只有设计师/印刷排版人员本人能看见，观众看不见。

二、基础要素

单元栏 栏间距 边距

三、常见网格类型

1.手稿型网格

常用于传统书籍，内容型产品设计（如新闻），定义四周边距即可。

2.栏式网格（重点）

栏间距（水槽）是不允许放内容的，如果想使用，就得将栏间距连着一起用。
由内容+水槽+边距组成，适用于杂志及绝大多数产品设计（UI设计、界面设计）。

3.模块式网格

适用于报纸、海报、PC端数据、表单类客户端。
与栏式网格的区别是有纵向水槽。

4.分层型网格

适用于图像展示类网站，一般是图片大的，轻奢性的网站。

四、网格的应用

1.用在什么地方

书籍、广告，网页、产品等等非常广泛的设计应用

2.服务于什么内容

3.传递出来的感受

网格的大小没有标准答案，根据要传递的感受，自行设定网格的大小

4.网格的工具

sketch、Photoshop，figma等都有各自对应的插件和工具

http://modulargrid.org/#app
https://quidequide.me/
http://gelobi.org/griddify/

5.设置网格参数

多少单元栏，多少栏间距，多少边距是没有标准答案的
常用的网格参数


手机端

6.对齐

把强调、重要的元素放置在整倍数的单元栏内，并让他们对齐

7.布局

根据需要，使用不同数量的单元栏，组合成想要的布局

五、关于网格的书及文章链接（在Bllifish）

https://mp.weixin.qq.com/s/jhL0Xg25UVnrUQbrxUllGA
https://mp.weixin.qq.com/s/1GqOqjmv1f-KCm-rpeQkbg
https://mp.weixin.qq.com/s/nHdQC3jjIs7Xk61YS7qOtQ
https://mp.weixin.qq.com/s/zmvx6cY83jD5hBx1-UiVKw
https://mp.weixin.qq.com/s/JFg4HWOiZEKRG7DEPIBCew
https://mp.weixin.qq.com/s/1GqOqjmv1f-KCm-rpeQkbg

第二课总结2022.6.12

一、前言

100小时定律，持续很好，持续进步。
康纳学习法：白纸一分为三，左上角：分享大纲，右边：详细解释，下边：行动清单。
学习五环法：

二、为什么学习网格

三、为什么学习网格

三、网格的基础概念

网格创建视觉一致性和统一布局，通过列和沟槽来组织内容 ；
一般WEB端网格分为12、16、24网格，大部分都是用12网格；
移动端分为4或者6网格，Web端大部分用于12网格；
GOOGLE MATERIASL 网格也是基于12列来设计布局的。

列是我们网格中最基本的单位，它的宽度取决于你正在查看的设备的大小；每一列在两侧都有一个填充，称做沟槽，一般情况下其大小是固定的

槽：一般不放内容，如果要放内容，那就需要和列连着一起
沟槽间距过大，几乎和内容一样了（避免这样的问题）

四、如何创建一套布局网格系统

第一步 定义最小原子单位

在创建网格系统之前我们需要先定一一个最小的单位来作为我们布局的基础，后面我们所有的系统间距都会以它作为基准来设计
最小单位是我们一切间距系统的基础，所以前期需要谨慎的选择，常用的最小单位有4、5、8
本例子中我选择8

AIRBNB的最小单位是8 NEVER的最小单位是5 GOOGLE的最小单位是8
MEDIUM的最小单位是8

第二步 定义边距和沟槽的大小

最小单位：8px
沟槽间距：24px
左右边距：96px
前面已经定义最小单位是8，那么这里我们优先定义边距，这里就基于1440的画布来做案例（我后面开始定义间距都是基于8的增量来设定）
这里我定义左右边距为96px 沟槽间距是24px 那么剩下的内容区域
【1440-（962）-1124】/12

五、如何建立一套间距系统

1、分析-站在巨人的肩膀上学习

案例：光子设计语言

2、定义最小原子单位

案例