B端设计师要知道的栅格设计.docxVIP

B端设计师要知道的栅格设计 大家好，我是子璐。今天为大家分享的是栅格系列，结合我自己后台设计的经验，关于栅格文章我分为上下两篇。 本篇文章跟大家聊聊栅格的概念以及栅格是如何搭建的。 下篇将会分享栅格在响应式设计中的运用，脱离了开发其实栅格的意义并不大。 一、栅格简述 1. 栅格的由来 栅格最早来源于平面设计中的网格系统，英文Gird Systems。 在 1692 年时，法国国王路易十四因为国家印刷水平差强人意，命人成立了一个管理印刷的皇家特别委员会。 他们以罗马体为基础，采用方格为设计依据，每个字体方格分为 64 个基本方格，每个方格再分为 36 个小格，一个印刷版面就有 2304 个小格组成。 再后来，逐渐演变成运用固定的格子设计版面的平面设计风格，平面设计中称之为网格，这就是栅格的雏形。 互联网发展之后，界面设计将这一概念借用过来，简易的理解栅格就是一种有规则的参考线。 2. UI中的栅格 网格与栅格的本质其实是相同的，都以英文单词“Grid”来表示，平面设计中称为“网格”，而在网页端或移动端中称为“栅格”。 其区别在于： 网格尺寸是固定的：平面设计一般用到的纸张规格（尺寸），不管是英国、美国、日本或ISO采用的德国DIN纸张规格全部都是固定的尺寸，宽度和高度都是固定的，也就是绝对的。 栅格尺寸是变化的：而网页或App的设备尺寸不是固定的，其横向宽度受限于设备宽度，由设备屏幕宽度来决定，而纵向高度则是随着内容的多少来决定的。 考虑到真实设计场景下，可能会使用无限下拉交互方式承载复杂内容的规则。 所以往往只需要制定纵向列式分割规则，以规范 X 轴向内容的对齐、比例等布局效果。 3. 栅格的价值 1）对用户：提高内容布局规律性，减少认知成本。 设计更有秩序和节奏感，页面信息的展现更加清晰，从而提高用户的阅读和浏览效率，提供更好的用户体验。 2）对设计师：提高效率与规范化。 帮助设计师快速校准元素在界面内的位置，节省了基础操作上的时间，如移动元素、计算间距等。同时也避免了间距凭设计师感觉造成不统一的现象。 3）对开发：提高设计还原度，节约时间成本。 栅格系统提高了网页的规范性。一方面可以帮助开发同学规避常规的横向间距类问题（纵向间距问题主要受字体的设置影响），以提高设计还原度，另一方面有利于开发人员对组件和模块的复用，进一步提升效率。 4）响应式布局。 栅格能够指导页面在多平台多屏幕尺寸下的响适应设计，便于与开发对接，阐明流动布局或端点布局等适配方案，保证还原度的同时降低沟通成本。 二、栅格的构成 栅格系统主要由列、水槽、边距三个基本元素构成。 1）列Column：也被称为栏，用来盛放文本、表格、图片等内容及元素。 列的宽度称为列宽，常用百分比来定义，而不是固定值（使用固定栅格的时候会采用固定值，会在下篇响应式栅格中讲到），前端同学通过百分比可以灵活适应屏幕大小。 2）水槽Gutter：也被称为沟/间距，水槽是相邻两个列宽之间的间隔，用来分割内容，水槽的值越大，页面中留白部分的面积越多，视觉效果越松散。 反之，页面越紧凑。水槽通常设为固定值。 3）边距 Margin：网页内容和屏幕边缘之间的间隔，通常为固定值。 左右大边距是计算在栅格的总宽之内的，边距值的大小决定了每个屏幕尺寸的最小呼吸空间，一般边距值≥水槽值。 此外还有最小单位、总宽度、列数三个计算因子。 最小单位：栅格的基础单位，栅格内容元素和布局规则（如水槽、边距的值）都是基于它的整数倍递增的。如最小单位是8px，水槽的宽度可设为8n。 列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感。 总宽度：页面中自适应内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2。 三、案例——搭建栅格 以下图数据总览页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。 乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。 另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。 那下面将以此页面为案例教大家如何一步步搭建栅格： 1. 确认容器范围 设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。 栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。 单页基础布局：栅格容器=屏幕宽度。 存在固定控件布局：栅格容器；屏幕宽度。 存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层。 其占据的界面区域也不需要用来布局其他功能及内容，所以