UI设计中的网格系统是由一系列水平和垂直交叉参考线构成，将页面分割成若干个有规律的列或格子，再以这些格子为基准，控制页面元素之间的对齐和比例关系，从而搭建出一个具有高度秩序性的页面框架 。那么UI设计如何设置网格系统呢？下面我们一起来学习一下设置网格的方法 。
文章插图
列
· 列通常被定义为网格系统在垂直方向上的块，它们是从页面顶部到底部具有相同大小的垂直部分，目的是用来规定宽度和每行元素的数量 。
· 最常用的系统是PC端的 12 列网格、平板电脑的 8 列网格和移动设备的 4 或 2 列网格 。
· 单个列单元的宽度通常在 60-80px 之间，这将进一步确定所需的容器宽度 。
行
行是从页面左侧到右侧的相同大小的水平单位，它们很少与列网格系统一起使用，因为元素的高度通常由它们的内容量来定义 。
边距（或容器边距）
· 边距是指页面左侧和右侧、网格列之外的空白区域，为包含的元素提供了呼吸的空间，并与屏幕尺寸一起缩小，直到下一个断点 。
· 在PC端和平板电脑上，边距的大小取决于列网格系统的宽度 。对于移动设备上，它们的宽度范围在 10-20 像素之间 。
【UI设计如何设置网格？设置方法是什么？】以上就是关于UI设计中网格系统的设置方法，网格系统在我们设计的过程中可以起到很好的辅助作用，希望大家可以熟练掌握运用网格的设置方法 。
推荐阅读
- ui交互设计师用什么软件？分别有什么作用？
- Axure如何制作一个可以自动化菜单？制作方法是什么？
- Axure如何实现图像变换的交互设计？实现方法是什么？
- Axure如何实现鼠标移入移出的交互设计？实现方法是什么？
- 如何用axure动态面板制作返回顶部按钮？制作步骤有哪些？
- 如何用Axure快速绘制图标？?如何绘制流程图？
- 如何使用动态面板实现三级菜单？制作步骤有哪些？
- InDesign如何创建等间距的参考线？
- InDesign如何设置文档网格？有哪些设置内容？
- InDesign如何调整文本间距？调整方法有什么？