如何运用网格系统来设计
时间：2023-09-06 23:54:01 | 来源：网站运营
时间：2023-09-06 23:54:01 来源：网站运营
如何运用网格系统来设计：
网格系统的核心内容
认识网格的基本类型有哪些主结构由大文本块和边距定义，这些块将块定位在格式中。它的二级结构定义了作品集，脚注，运行标题和其他辅助信息的位置和比例。
手稿网格适用于广泛且连续的文本块。它们被用在书籍和长篇论文中，也许适合博客文章。它们不仅限于文字。图像可用于填充块。
更宽的边距 - 导致更窄的文本块，这有助于将注意力集中在文本上，并创造一种平静和稳定的感觉。
较窄的边距 - 强制文本块到格式的边缘，因为两者彼此靠近而产生张力。
右图Villard de Honnecourt 画的图表是最早的网格原型，其中的比例布局十分和谐，直到现在也依旧应用在书籍设计当中。
列可以相互依赖，彼此独立，并由设计元素交叉。在页面上组织信息时，这会带来很大的灵活性。
您可以通过将信息块放在不同的列中来分隔信息块，但仍然显示它们之间的连接。也许文本在一列中，图像和标题位于图像所涉及的文本旁边的不同列中。
如淘宝页面（上图）练习中的知道淘宝APP在一倍图中是以边距12px，水槽9px，12列，最小单位为3px网格进行设计，以12列网络可以在一排有1，2，3，4，5，6，6种排序方式，满足淘宝复杂内容的需求，能以12列网格布局多种板式。
特殊情况只要父级元素对齐栅格，子级可以不完全对齐列，参见
如何更好地使用栅格系统模块化网格就像列网格，增加了由行标记的水平分隔。列和行以及每个之间的排水沟创建了一个单元格或模块矩阵。
模块化网格适用于表格信息的设计，如图表，表格，导航，时间表，当然还有数据表。它们可以帮助标准化表格中的空间，并帮助将表格与任何周围的文本或图像集成。
分层网格通常在网络上找到。它们更多地基于元素的直观放置，这仍然符合信息的需要。
网格好处- 网格系统为设计师提供了版式的骨架，可以让设计师在调整中找到方向，同时也让页面里的元素有了统一的规律和秩序。网格系统更多是为版面的秩序工具，并不是唯一，审美始终是设计中重要的环节。
- 提高设计水平3年
网格推荐的书籍及扩展阅读- 《平面设计中的网格系统》
- 《秩序之美》
- 如何运用四种网格
- 网格的历史
- 我理解的栏状网格
- 谷歌的响应式网格布局
运用网格的插件- ps-guide
- sketch-flavor
- ketch自带设置网格工具
优秀的APP推荐- 29cm
- 淘宝（12栏布局，最小单位3px，）
- jtbc now
- naver
- airbnb
- Facebook
- ins
- ssg
网格常用比例黄金比例0.618
4:6
6:9
8:13
12:18
德国工业标准比例1.414
3:4
5:7
7:10
10:14
网格运用的逻辑是什么
快速确定页面的栏式网格的方法确定页面的左右边距x，中间的间隙即水槽y距（如果页面没有明显的色块或卡片布局，可以找其他有明显卡片布局的页面），然后用4，6，8，12列去推算改网格有多少列。在非375比例尺寸的手机可能会有些偏差。然后推算页面的最小单位，然后查看页面之间的布局是如何运用间距节奏。
以网格化为核心的方法，可以试试以下的的作业练习。网格系统更好的帮助设计师将页面元素之间达到和谐的视觉观感
作业1：做一个一排一，一排二，一排三，一排四的商品首页页面要点
通过12个网格进行对页面布局排版
一排一，用12个栅格
一排二，每个占6个栅格
一排三，每个占4个栅格
一排四，每个占3个栅格
作业2：对一排二，一排三，一排四，一排五，一排六的布局各做个Tab 页面要点
通过网格布线整理出每个图标所占的位置
难点
一排五
可以对网格进行10列栅格分割，每个图标占2个栅格
一排六
可以对网格进行12列栅格分割，每个图标占2个栅格
作业3：做一个一排二，一排三的消息页面模仿或创作淘宝的消息页面要点
对一排三可以让每个内容占四个栅格
对于消息的一排二布局，头像可以占两个栅格，文字信息占10个
作业4：做顶部tab和底部tab通过网格布局，如淘宝商品详情图要点（12栏网格或8栏网格）
对顶部tab左右靠齐栅格，一个tab的图标可以占一个或者两个栅格
12栏网格中，对于底部tab按钮，左边的每个icon可占2个栅格，右边的两个按钮可各占3个栅格，共六格。
8栏网络中，对于底部tab按钮，左边的每个icon可占1个栅格，右边的两个按钮可各占2个栅格，共4格。
作业5：设计一个时尚潮流海报，内容不限，可临摹或者原创，内容形式不限，每个设计元素需要把栏式网格运用进去要点
在手机海报当中布局网格不需要设置水槽，直接设置6栏或12栏
作业6：定义一套pp网格系统（最小原子、间距等）和一个西餐厅菜单定好App产品的网格系统（最小原子，运用几栏，每栏数值定义）确定好骨架，需要有设计思考，为什么这么定义，以及西餐厅菜单灵感收集
网格系统的疑问和启发网格系统可以应用到哪些地方书籍，杂志，产品包装，报纸等印刷内容排版
网页，App界面，硬件显示器，车载UI布局排版
海报平面设计
网格应如何应用到设计当中网格需要考虑所有页面的场景，即是所有页面场景都能应用该网格系统。需要寻找一个通用的网格去满足所有场景。
- 定义最小原子，一般是3，4，5间距（1x图）。
- 定义大概5种间距（XS，S，M，L，XL），避免太多间距选择。
- 用最小原子定义间距和网格，定义元件尺寸都是最小单元格的倍数。
- 考虑到最极限的文字或间距布局，定义展示最大值。
- 保证所有页面有一个统一的规律当中。
特殊技巧6栏和12栏其实是可以相互切换的，间距一致，水槽一致，包括10栏，也同属一个网格系统。
网格运用的局限网格是解决有规律页面的排版局部问题，如果过于复杂的情况是很难遵循网格系统，如运营活动。
实际开发中发现并没有运用到网格的原因- 在开发过程前端没有按设计稿进行
- 产品经理的强制要求导致页面布局不一
网格在网页上如何响应落地的在不同尺寸页面有对应的栏式网格，一般情况有两种响应式布局
1、固定网络
当网页缩小到临界值时会突然改变栏式网格布局，页面内容也跟着突然变化。
2、流动网络
网页的尺寸缩小过程中，栏式网格会随着变化尺寸，列宽，水槽，边距也跟着变化。页面内容也随之变化，完全适配不同尺寸的显示器。
在应用网格的时候，我们如何正确运用网格去整理页面，让页面合理。利用格式塔原理布局
网格应用的思维模型是什么
最小原子理论原子：页面中最小的设计单位
分子：设计中的一个组件
组织：通过不同分子形成一个具有功能性的组织
模块：通过不同且能协同的组织构架的功能模块，如选择模块，消息模块，错误模块等
页面：将实际内容套件到原子，分子，组织，模块当中，形成一个完整性页面。
网格化管理思维瓷砖规范格式塔原理格式塔是作为心理学术语的格式塔具有两种含义：一指事物的一般属性，即形式；一指事物的个别实体，即分离的整体，形式仅为其属性之一。
它可以帮助我们，梳理界面的信息结构、层级关系，提升界面的可读性，主要有几个特性，即相似性、接近性、封闭性、连续性、主体与背景关系、均衡原理。
在线咨询
