网页设计 栅格 第1篇
分析用户设备和屏幕尺寸：首先，设计师需要分析用户的设备使用情况，包括手机、平板、笔记本电脑和桌面设备等的使用频率。同时，他们需要了解各种设备的常见屏幕尺寸和分辨率。
确定关键断点：基于设备分析，设计师可以确定几个关键的断点。这些断点通常是设备屏幕尺寸的临界点，例如手机到平板的过渡、平板到笔记本的过渡等。
设计草图和原型：在开始具体设计之前，设计师通常会创建草图和原型。在这些草图和原型中，他们会示意地表示出在不同的断点下，页面的布局和元素如何变化。
使用工具进行设计：在设计软件中，设计师可以设定不同的画布尺寸来模拟不同的断点。例如，他们可能首先设计一个手机版本的页面，然后调整画布尺寸来设计平板版本的页面。通过不断调整并查看设计效果，来确保每个断点的设计都符合期望。
实例展示——需结合自身产品特性如（展示终端）
基于删格系统的响应式设计：断点设计
1.在这种方法中，首先使用删格系统为页面搭建基础框架，确保页面在桌面设备上具有良好的布局和视觉效果。随后，通过响应式设计的方法，针对不同尺寸的屏幕设定断点，对页面布局进行调整，使其在不同设备上均能良好显示。这样，既保留了删格系统的优点，又实现了响应式的自适应布局。
2. 弹性删格系统： 弹性删格系统是删格与响应式的另一种结合方式。在弹性删格中，列宽不再是固定的，而是根据屏幕大小进行弹性调整。这种设计方式在大屏幕上能够展示更多的内容，而在小屏幕上则会自动调整为单列布局，确保内容的可读性。通过这种方式，弹性删格系统在不同设备上为用户提供了一致的视觉体验。
1440x900
根据不同产品特性进行
1920x1080
与开发人员协作：设计师需要将他们的设计转化为开发可以理解的规格和断点。这意味着提供明确的断点尺寸、元素的变化和布局的调整指导。
测试和迭代：一旦开发完成，设计师需要进行响应性测试，确保他们的设计在不同的设备和屏幕尺寸下都能正确显示。如果发现问题或不足，需要进行迭代和调整。
网页设计 栅格 第2篇
网页设计和B端设计之间存在密切的联系。下面我将从几个方面阐述它们之间的联系：
设计目标：网页设计和B端设计在设计目标上存在相似之处。两者都需要关注用户体验，确保设计能够满足用户的需求并提供良好的交互体验。在B端设计中，设计目标通常是满足企业的商业目标，提高工作效率，促进业务流程的顺利进行。而网页设计则更注重用户的视觉感受和信息获取体验。因此，两者在设计目标上有一定的重叠和联系。
设计原则：网页设计和B端设计都需要遵循一些基本的设计原则，如简洁明了、直观易懂、色彩搭配等。这些原则能够帮助设计师创造出更好的用户体验，使用户能够更轻松地理解和操作界面。同时，B端设计还需要考虑一些额外的原则，如一致性、可扩展性等，以满足企业级应用的需求。
技术手段：网页设计和B端设计在技术手段上也有一定的联系。两者都需要运用前端技术来实现设计效果，如HTML、CSS、JavaScript等。在B端设计中，可能还需要使用更多的后端技术和数据库技术来支持业务逻辑和数据存储。因此，设计师需要具备一定的技术知识，以便更好地与开发团队进行协作。
总的来说，网页设计和B端设计在设计目标、设计原则和技术手段上都存在一定的联系。两者都需要关注用户体验，并遵循基本的设计原则。同时，B端设计还需要考虑更多与企业级应用相关的要素。在实际工作中，设计师需要根据项目的具体需求和目标，灵活运用不同的设计方法和技术手段，以创造出优秀的设计作品。
网页设计和B端产品设计的相似之处在于它们都是致力于创建用户友好且高效的界面。以下是一些具体的相似之处：
用户为中心：无论是网页设计还是B端产品设计，都需要以用户为中心。设计师需要理解用户的需求，行为和目标，并以此为基础进行设计。在B端产品设计中，这通常涉及到对企业客户需求的深入理解，而网页设计则需要理解广大网民的需求和行为。
界面设计：两者都需要关注界面设计，包括色彩搭配、字体选择、布局规划等。设计师需要在满足用户需求和保持良好视觉效果之间找到平衡。
交互设计：交互设计在网页设计和B端产品设计中都扮演着关键角色。两者都需要关注用户如何与界面进行交互，如何完成任务，以及如何使操作过程尽可能简便流畅。
响应式设计：随着移动设备的使用越来越普遍，无论是网页设计还是B端产品设计，都需要考虑响应式设计，即设计能够自适应不同屏幕尺寸和分辨率的界面。
技术实现：在设计过程中，设计师都需要考虑技术实现的可行性。例如，他们需要了解哪些设计可以使用现有的技术和工具实现，哪些设计可能需要更复杂的技术支持。
总的来说，尽管网页设计和B端产品设计在某些方面有所不同，但它们在许多核心设计原则上都有相似之处。这些相似之处体现了以用户为中心的设计理念，以及对界面设计、交互设计、响应式设计和技术实现的重视。
网页设计 栅格 第3篇
常见的栅格系统通常被划分为12栅格或24栅格。我们需要根据自己的项目确定栅格的划分数量，划分的格子越多，承载的内容越精细。通常，在信息繁杂的后台系统常用24栅格，而一些商业网站、门户网站通常划分成12栅格。
栅格不是划分的越细越好，24栅格精细，但也容易显得琐碎，内容排布的规则太多，也就相当于没有规则。有的项目根据实际情况也会划分成16栅格、20栅格，也是可以的。
△ 槽的数值越大，页面留白越多
需要注意的是，槽的区域不可以放置内容。通常，我们会给槽设定一个定值，用来确定栏的大小。
网页设计 栅格 第4篇
栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位，一些知名公司都以8为最小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。
编者注：设计规范官网汇总 →
这样做的好处有两方面。
网页设计 栅格 第5篇
固定删格：固定删格采用固定的列宽和行高，无论屏幕尺寸如何变化，网格的结构都保持不变。这种删格系统适用于内容较为固定、不需要频繁调整的设计。
弹性删格：弹性删格系统的列宽和行高会根据屏幕尺寸的变化而自适应调整。这种删格系统能够适应不同设备的屏幕，提供更好的用户体验。
混合删格：混合删格结合了固定删格和弹性删格的特点。在大部分情况下，它保持固定的网格结构，但在某些特定的屏幕尺寸下，它会转变为弹性删格，以适应屏幕的变化。
网页设计 栅格 第6篇
栏（Columns）是呈放内容区域。
PC端通常有12栅格或24栅格，意思就是纵向有12栏或24栏。
槽（Gutters）是两个栏中间的间距。槽的数量比栏的数量少一个。
假设是栅格宽度是W、栏的宽度是C、槽的宽度是G。有N个栏，就有N-1个槽，则可以推断出算出W=N*C+（N-1）G。
忘掉 栏+槽=列的概念（个人感觉没有作用，有不同见解的欢迎讨论。）
手把手教你做规范--布局规范（栅格）
为什么用12或24栏？
12栏和24栏都是PC端较常用的，移动端用4栏的居多，分的越细可变化的内容越丰富。但过于细也会使页面变得很碎，差异感和韵律感降低。12或24栏可以被2等分、3等分、4等分、6等分、12等分，还能按 1:2:1 、 1:3:2 、 1:2:2:1……等比例分割，提供了足够丰富的变化。
以下是京东首页的截图，应该是采用了12栅格，并且分别采用了2等分、四等分、六等分、2:6:2:2 、 2:10 。
手把手教你做规范--布局规范（栅格）
网页设计 栅格 第7篇
边距(Margin)：栅格外边距，与屏宽保持一定的安全距离.
行：栅格系统的横向网格，与纵向网格的列成垂直状态，列和行交叉的区域形成页面的内容区，由于目_页多采用瀑布流形式，上下滑动区域变得不受限制，随意性很高，本文忽略这一部分。
这里需要注意的是：我们把栅格的列(Column)看做是栏+槽的宽度，12栅格即是指12列。有一些文章对栏和槽的理解是下方左图的样子，而从开发角度来说，下方右图是前端理解的栅格。我们用栅格来制定页面视觉规则，同时也要理解开发怎样实现栅格，才能在工作中减少不必要的沟通误区。
网页设计 栅格 第8篇
1919年德国著名建筑家沃尔特·格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。
1928年，朱斯特·施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。
20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。
1965年，在美国的芝加哥成立了一家新的平面设计公司——尤尼马克设计公司（Unimark），主要设计人员包括有拉尔夫·依克斯特朗姆（Ralph Eckerstrom）、詹姆斯·佛格曼（James Fogleman）、马西莫·维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传达功能。这家公司发展很快，不久就成为一家拥有402名工作人员、在全世界设有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中得到很大的成功，而企业的规模又使得这个风格在世界各地得到进一步推广。
现在，大多数平面设计软件都有“网格”功能。
栅格简概
栅格的意义
统一产品的视觉认知，减少学习成本。提升布局规律性，页面更有秩序，信息展示更清晰，以提高用户的体验。
模块化复用，提升协作效率。从设计流程开始，统一规则，制定规范， 避免各种主观上的“感觉”造成视觉上不统一的现象，比如：模块大小、间距等。在开发阶段栅格设计系统提高了设计还原度，使网页更具备规范性，开发对组件和模块的复用，进一步提升了效率。
栅格的组成
列、水槽、边距
列Column：也被称为栏，用来盛放文本、表格、图片等内容及元素。列的宽度称为列宽，常用百分比来定义，而不是固定值（使用固定删格的时候会采用固定值，会在下篇响应式栅格中讲到），前端同学通过百分比可以灵活适应屏幕大小
水槽 Gutter：也被称为沟/间距，水槽是相邻两个列宽之间的间隔，用来分割内容，水槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。水槽通常设为固定值
边距 Margin：网页内容和屏幕边缘之间的间隔，通常为固定值。左右大边距是计算在栅格的总宽之内的，边距值的大小决定了每个屏幕尺寸的最小呼吸空间，一般边距值≥水槽值。
此外还有最小单位、总宽度、列数三个计算因子
最小单位：栅格的基础单位，栅格内容元素和布局规则（如水槽、边距的值）都是基于它的整数倍递增的。如最小单位是8px，水槽的宽度可设为8n
列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感
总宽度：页面中自适应内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2
三、案例-搭建栅格
以下图「数据总览」页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
Step 1: 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
1) 单页基础布局：栅格容器=屏幕宽度
2) 存在固定控件布局：栅格容器<屏幕宽度
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层，其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航
Step 2:确定列数、水槽值、边距
1）确定栅格列数
目前有两种比较主流的等分方式：12等分与24等分。
12等分的栅格系统：在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计；12栅格的优势在于其在相对较小的数字中最容易被整除，保证了设计师切分区块的灵活性，同时又不至于使页面过于琐碎
24等分的栅格系统：适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的中后台设计发布于 PC 平台，且功能复杂，内容繁多，且考虑到后期的扩展性，因此中后台常用灵活性更高的 24 栅格，比如ant design和zan design，栅格系统大小=24列+23列间距+2大边距
所以，案例中我们将采用24栅格系统
2）确立栅格的最小单位
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？8 点网格有如下几点优势：
目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计
灵活性方面，4pt最佳，8pt次之。但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的
开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计，因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。
3）确定水槽宽度和页边距
按照亲密性原则，我们可以按照8n定义几个常用的间距值。人眼对于距离的认知不是均匀、等分的，而是渐变的，通过对比几种经典的数列模型，选择基于斐波那契数列生成一组数组作为间距值，得到8、16、24、40系列数值，为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。
经过实践经验，在中后台系统下，水槽宽度为16px时，页边距为24px时视觉效果最佳。
水槽=16px：此时列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感，不至于让内容过于紧凑。
页边距=24px：需要通过距离区分模块与模块之间的信息，同时也让内容区更加紧凑
Step 3:利用栅格公式计算栅格体系
栅格计算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左侧导航宽度
基于前文屏幕宽度为1440px，采用24栅格布局，页边距取24px，水槽取16px的前提下。通过对栅格公式的计算，将具体的值带入公式：
1440-左侧导航宽度=24栏+23*16+2*24
Step 4:组织内容，分配页面比例
建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上组织内容分配页面比例了。我们把页面上最终承载内容称为“盒子（Box）”,这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。
拓展小知识：盒子的概念
在栅格系统上容纳业务内容的容器我们把它称之为盒子（Box），栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），然后在style菜单下就可以看到这个盒子结构了。
Padding就是主体内容距离盒子外侧的距离，（主体内容可以是一个按钮、一段文本、一张图片或者一个表格等）；Margin就是相邻两个盒子的距离，对应在后台栅格系统就是水槽的大小
了解完栅格系统的盒子模型之后，下一步我们需要根据具体业务内容来确定盒子的宽度。以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不对称分割。
上图中只列举了部分比例，同一个页面上控制在5组以内的比例值组合来布局比较合适，组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒子的高度根据内容来定，故图中没有体现高度这一维度的变化规律
根据具体业务内容最终得出下图中的盒子的具体比例
最终效果如下：
到此，我们的栅格系统就搭建完成了，但是这就结束了？
网页设计 栅格 第9篇
栅格就是网格，就是这种有规律的格子。
手把手教你做规范--布局规范（栅格）
哈哈，这样一说是不是就很接地气了。英文翻译过来就是网格，至于现在为什么叫栅格就不得而知道。
手把手教你做规范--布局规范（栅格）
栅格最早是应用于平面设计中，产生于二十世纪初的西欧，完善于五十年代的瑞士，通过有规律的网格来指导版面布局。
栅格设计的在屏幕端的应用也十分广泛，不光为设计服务，对响应式开发也起到了很大的作用。虽然开发小哥说的栅格和我们理解的不太一样，但也减少了沟通成本。
网页设计 栅格 第10篇
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁。最早出现于印刷，简单的说就是运用固定的格子使界面排列工整简洁。后来延续到web设计，其中比较有名的是960 Grid System。目的也无非让网页布局的更合理、易于阅读等。
使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。（让设计师清楚的跟其他人解释他们是如何设计的）
网页设计 栅格 第11篇
简单明了，直接根据站点内容分几块
例如1：站酷
所有内容都在版心1083px内。以10px倍数为间距，每个模块250px。
例如2：echo回声
所有内容都在版心1000px内。以15px的倍数为间距。
网页设计 栅格 第12篇
响应式设计基于三个核心原理：
媒体查询：通过使用CSS3的媒体查询，设计师可以根据设备的特性，如屏幕尺寸、分辨率等，为不同的设备应用不同的样式。
流式布局：流式布局是响应式设计的核心，它使得页面的元素宽度根据屏幕尺寸进行动态调整，确保页面在不同设备上均有良好的布局。
弹性图片和视频：图片和视频也能根据屏幕尺寸进行自适应，保持其比例和清晰度，同时不破坏页面布局。
网页设计 栅格 第13篇
删格系统作为一种基于网格布局的设计方法，在网页设计中已经有着较长的应用历史。它通过规则的网格结构，使页面内容呈现出整洁、有序的视觉效果。删格系统不仅能够帮助设计师快速有效地进行页面布局，还能确保页面在不同屏幕尺寸下保持一致的视觉效果，提高用户体验。因此，删格系统在网页设计中一直备受设计师们的青睐。
具体删格建立方式可看上篇
然而，随着移动设备的普及和屏幕尺寸的多样化，单纯的删格系统已经无法满足所有设计需求。这时，响应式设计应运而生。响应式设计是一种根据用户设备屏幕尺寸自适应调整网页布局和元素大小的设计方法。它能够确保网页在不同设备上都有良好的可读性和易用性，为用户提供更加流畅和便捷的浏览体验。响应式设计的出现，无疑为网页设计师们提供了更多的创造空间和可能性。
网页设计 栅格 第14篇
优势： 提供一致的用户体验，无论设备屏幕尺寸如何，都能呈现良好的布局和视觉效果。 减少维护成本，只需维护一个网站版本，而不是为不同的设备分别设计和维护。 适应未来设备的多样性，随着新设备的不断推出，响应式设计能够确保网站始终与新设备兼容。
局限性： 需要更多的设计和开发时间，因为需要考虑的设备类型和屏幕尺寸更多。 在某些情况下，为了兼容小屏幕设备，可能需要删减或重新组织内容，这可能影响到桌面版用户的体验。 对于某些特定的设计和功能，响应式设计可能难以实现。
网页设计 栅格 第15篇
假设W=1200,i=10(10的倍数),n=12
W=(a+i)*n-i
1200+10=(a+10)*12
a约等于90
所以W=(90+10)*12-10=1190
所以这种等分方式是最接近1200屏幕需求
例如：淘宝，天猫，京东
W=(90+10)*12-10=1190
1180版心：
W=1180,i=20(10的倍数),n=12，a=80
W=(80+20)*12-20=1180
例如：UI中国
网页设计 栅格 第16篇
列(Column)：列是栅格的数量单位，通常设定栅格数量说的就是列的数量，比如12栅格就有12个列、24栅格就有24个列。通过设定列的内边距(padding)来定制槽(Gutter)的大小，剩余的部分称为栏。
槽(Gutter)：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散;反之，页面越紧凑。槽通常设为定值。
网页设计 栅格 第17篇
（1）大/小屏幕响应
当屏幕变大时，左侧蓝色菜单栏保持宽度不变（固定栅格）。右侧栅格区域的槽保持不变，栏等比例扩大。（流动栅格）
当屏幕变小时，左侧蓝色菜单栏保持宽度不变（固定栅格）。右侧栅格区域的槽保持不变，栏等比例缩小。（流动栅格）
手把手教你做规范--布局规范（栅格）
（2）平板响应
当屏幕小到平板的尺寸时候，栅格区的内容就无法正常显示了，十分影响体验。于是就是改变栅格的数量，变成6列栅格，同时菜单栏收缩简要模式，这样就完成了平板端的适配。
手把手教你做规范--布局规范（栅格）
（3）手机响应
手把手教你做规范--布局规范（栅格）