栅格 系统 尺寸 前言随着硬件技术和互联网的不断发展，市面上出现了更多的设备尺寸，这就要求我们设计的产品要适配到更多尺寸，而通过栅格系统可以跨屏幕的适配到不同的设备，极大提升设计效率。主流的企业级系统中都应用了栅格系统，但只重应用轻解释，很多时候在直接面对结论和各家不同的名词时，一时不知道如何下手。本文旨在通过查漏补缺的形式讲述 B 端产品设计过程中应用的栅格知识，并快速构建一套栅格系统应用于项目中。什么是栅格系统1. 栅格系统的由来栅格系统 “grid systems” 也称之为网格系统，是运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。因为规律高效的适配的特性，栅格系统被逐渐应用到网页设计中。2. 栅格系统的定义网页栅格系统是从平面栅格系统中发展而来，网页栅格以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。合理的栅格系统可以通过调整布局网格以满足产品和各种设备尺寸的需求。栅格系统的好处1. 加强设计一致从页面美观的角度，栅格可以有效地保证设计的一致性、让页面富有节奏和韵律。2. 增加决策效率对于较大的团队，在日常工作中常常需要多个设计师协作完成，这时候就需要一套统一的标准来对设计师进行约束和高效协同，通过栅格系统不仅可以提高设计师的决策效率，亦可以规范设计质量。3. 降低解释成本和前端伙伴进行协作的过程中，我们发现通过一致的有迹可循的设计规律，比如有规律的间距和布局可以极大的提高前端伙伴的开发效率。通过栅格系统可以加强协作效率，降低解释成本。如何在 B 端产品中创建栅格1. 选择画布尺寸目前 PC 端主流的设备尺寸是 1920X1080、1366X768、1440X900、1280X720、1024X768，其中占比最大的设备尺寸为 1920X1080，但并不意味着我们要以此为设计尺寸。我们认为，如果将较大的屏幕尺寸定义为基础的设计尺寸，虽然可以在设计稿中呈现更多的内容，但向较小屏幕尺寸适配时会出现显示不完整的情况。因此我们建议以较小的屏幕尺寸为设计尺寸，同时向大尺寸进行适配。作为 B 端设计师，我们的受众相对比较固定，比如企业内部员工会统一派发笔记本；学校等事业单位也会统一采买设备。通常我们可以对内部设备进行调研，选择现有用户使用较多的设备进行设计。这样可以更加接近用户真实的使用场景。对于 SaaS 类产品而言，其用户设备比较广泛，我们也可以选择 Ant Design 推荐的设计尺寸 1440X900（近些年来随着屏幕尺寸的增加，Ant Design 也将设计尺寸改为 1440X900，同时主字号调整为 14PX ）。我们根据公司内部的调研选择了 1280X720 为基础设计尺寸，同时选择 12PX 的字体 ，最接近用户的真实使用场景。2. 确定栅格区域我们将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区。通常我们对内容区域进行栅格化。Web 端的布局通常包括上下布局、左右布局、T 字形布局。建议按照业务场景的不同灵活地选择布局形式。3. 网格设置我们发现现在主流的网格单元的尺寸为 8 PX， 如 Ant design、Zan design、Arco.design 均选择 8PX 作为最小的网格尺寸。因为目前主流的显示屏横向和竖向都可以被 8 整除，可以做到完美适配。但所有的设计都不是绝对的，我们在选择最小的栅格单元时，也可以根据业务需要选择 4PX 作为最小的网格单位。4. 栅格计算PC 端常见的栅格有 12 栅格和 24 栅格，栅格分的数量越多可以承载更复杂的内容结构，展示更详细的信息。国内较为主流的企业级设计系统 Ant Design、Element 均采用 24 栅格。12 栅格将页面分为 12 份，在流行的前端开发工具库 Bootstrap 与 Foundation 中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计。24 栅格将页面分为 24 份，变化更加灵活，适用于业务信息量大场景复杂的后台产品。通常我们看到的各家系统对于栅格的名词各有不同，新手往往会迷失在这些名词中，其实虽然名词略有不同，但总体表达的意义和划分原则是一致的，大可不必在这些名词中纠结，这里我们对名词作一些解释。columncolumn（小列）以 24 栅格为例就有 24 个 column，它可以随着屏幕尺寸的不同，在一定的范围内进行动态变化。guttergutter（水渠）以 24 栅格为例就有 23 个 gutter，水渠的大小我们设置为固定数值 16PX，这里需要注意 gutter 值可以根据项目需要的视觉节奏而定。栅格大小栅格大小为 24 个 column + 23 个 gutter，以 1280X720 PX 的设计尺寸为例，左侧的导航固定尺寸为 208PX，我们减去 2 个页边距 2 X( 16X2 ）PX，减去 23 个 gutter （23X16) PX，再除以 24，最后我们得到了一个 column 的宽度为 26PX。小困惑：这个时候你可能会发现这个数字除不尽，个人建议这块有两个解决方案，1. 建议这边用刚才算出来的数字取一个整数去倒推我们的唯一变量左边导航的大小。2. 栅格的目的是为了让我们的设计更加合理便于和前端合作，直接取整数个人来说是可以接受的。注意事项1. 尽量保证偶数思维尽量保证偶数思维，所有的数值保持偶数思维，可以在放大缩小时保证页面不失真。2. 字段元素的起始点必须落在 column 上字段元素必须要落在 column 上，不要将字段元素的起始点落在水渠中。这样就违背了栅格的目的。3. 可以让父级容器对齐栅格，子元素可以不落在栅格上很多时候我们发现如果一味的将元素与栅格对齐，可能会导致我们设计美观度降低。这时候我们需要把整个元素想象成为一个更大容器，运用盒子的原理，只需要把父级元素和栅格对齐即可。栅格的应用关于栅格的适配和应用是通过对栅格制定不同的响应策略，来更好的支持和适配业务场景。通常有三种适配策略：固定栅格、动态栅格和混合栅格。1. 固定栅格固定栅格就是 column 和 gutte 的大小固定，只是栅格的数量发生变化。以内容区域展示卡片为例，首先我们会根据主流屏幕尺寸和业务呈现需求，确定设置几个断点值，随着设备尺寸的变化，展示卡片数量也随之变化，但卡片的尺寸是固定不变的。固定栅格很明确的缺点是它在未到达断点的临界值时，页面会出现空白，视觉呈现上，可能会显得不协调。比较常见的应用是对于筛选模块的响应，以拼多多商户后台为例，将输入框设定为固定大小，然后设置 1612px 为断点值，当小于设备屏幕宽度小于 1612px 时则显示 3 列输入框，当屏幕宽度大于 1612px 时则显示 4 列输入框。（因为业务需求拼多多屏幕设置最小值，即小于固定尺寸出现横线滚动条，所以我们能看到拼多多的筛选模块有 3 – 4 列输入框）。拼多多固定栅格的适配展示2. 流动栅格流动栅格和固定栅格的区别是它的元素大小会发生变化。以内容区域展示卡片为例，随着设备屏幕的大小变化，展示卡片数量也随之变化，但在未到达下一个断点之前，卡片会通过百分比缩放填充屏幕。流动栅格的优势在于它可以在屏幕上填充屏幕，拥有较好的显示效果，适用于仪表盘、视频列表和以卡片形式展示的图片、文字等。以 YouTube 的展示为例，视频列数会随着屏幕尺寸的变化而变化，当未到达断点值时，视频卡片的大小会发生变化并始终填充满屏幕。YouTube 流动栅格的适配展示3. 混合栅格混合栅格就是在我们的后台产品中将左侧的导航栏固定，对左侧的全局控制区域进行固定栅格。对右侧的内容区域进行流动栅格的处理方式。总结1. 有理可依了解基础的栅格知识可以帮助我们更加规范的展开设计工作，让设计更加有理有据。2. 充分沟通栅格系统需要和前端伙伴协作，在开展新的设计工作时可以和前端伙伴进行沟通，如果是一个已有的系统，可能已经有比较成熟的栅格解决方案，就不必耗费资源去重新设置。如果是一个全新的系统，可以根据业务场景制定栅格规则，通过和前端沟通可以了解当前的技术资源情况，选择合适的解决方案。对于商业设计而言，不应该一味的追求美，也不应该一味的追求商业，应该懂得平衡两者之间的关系。在做设计执行的时候，需要思考企业利益和设计体验的关系。注意活学活用最重要的是解决实际问题，同时也要把实现成本、技术资源等考虑进去。感谢你的阅读。参考：https://uxdesign.cc/responsive-grids-and-how-to-actually-use-them-970de4c16e01https://arco.design/docs/spec/gridB端设计指南：栅格的定义和使用方法在一个 B 端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。阅读文章 > 欢迎关注作者微信公众号：「求职帮er」本篇来源：优设网原文地址：https://www.uisdc.com/build-b-end-grid-system
栅格 布局 尺寸 什么是栅格？我这里就不做说明了。很多优设的文章都写的很清晰了。这篇文章仅从我最开始接触栅格所遇到的困惑和部分设计师始终纠结的点来和大家一起讨论讨论。B 端到底用什么尺寸进行设计？确定布局要弄清楚用什么尺寸设计，首先要确定布局。我们常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是这三者的延伸和拓展。上下布局一般是固定顶部，有点类似于 PC 网页设计，实际上也差不多。现在的B端设计中很多都会搭配着这种布局用，比如帮助中心、消息通知，客户入网申请等（这些我都遇见并做过）。左右布局和“T”字布局，一般固定左侧，右侧区域做自适应。根据布局确定明确设计尺寸范围我们看一下百度统计最新出来的当前计算机分辨率数据，从统计的数据中可以看出，小尺寸的屏幕是越来越少了。但是不是我们就要用最小的尺寸或者用份额最大的 1920 进行设计了？显然不是按照这个维度来确定尺寸的。对网页设计来说，设计师差不多都知道有一个 1200 有效内容区域的说法。如果没有特殊要求，上下布局也是遵循这个原则的。设计师中绝大部分，包括我很多同事平时基本上用的 1920 和 1440 两种尺寸来进行设计。对于 B 端来说，不管你采用 1920 或者 1440，在做上下布局页面定宽设计的时候，遵循 1200 有效内容区域这个原则就是没有问题的，看了很多文章上面举例了 960、990、1024、1156 等等，大家都不用纠结，没有特殊要求，这些都没啥问题。上下布局在 B 端设计中是一个补充，有的可能有，有的可能没有，所以用 1920 还是 1440 最好还是根据左右布局来，保持统一。两年前我看过一篇大厂写的布局的文章，用的是 1280 的尺寸，记得是说因为考虑缩小浏览器会发生遮挡或者挤压（别问我为啥还记得，因为当时对于尺寸纠结的太厉害，至今难以忘怀），现在因为技术等方面的发展，个人认为再用 1280 的做已经不合适了。1440 的尺寸目前做中后台是比较通用的，大家也可以参考看一下蚂蚁 Ant Design。至于 1920 的用来设计 B 端行不行呢？我认为也是可以的，我就用过，也没用户反馈说显示有问题，我就当他没问题了。不过我还是建议大家在做 B端设计的时候用 1440 的来做，特别是用户群很复杂的情况下，方便低分辨率的电脑查看。当然如果我们给某一企业做定制服务，那就没尺寸的问题了，照着客户电脑尺寸来就行了。如何来进行栅格布局？现在有很多插件可以进行布局，软件一般也有自带布局功能。这里不做陈述：使用Sketch的人，千万别错过这款效率逆天的插件Anima！我一贯主张不要为工具所累，所以在各种诱人的 Sketch 插件面前，我总是提前思考下自己的真正需求，这款软件是将我奴役，还是为我所用？阅读文章 > 这里介绍我常用的 sketch 布局。这里我也创建了一个 1440 的网格系统，供大家参考，大家也可以根据自己的实际情况去建立自己的网格。顶部高度没有特殊要求建议不要超过 100px，我一般就是 60-80px 内设定的；左侧可以根据目录内容自己设定一下，一般 200 多就差不多了。边距我一般设定 20px、24px。这样再对剩下的距离做栅格就行了，列宽保持偶数即可。有时候做栅格的时候会遇到一部分列宽是 42px，一部分列宽是 43px，这种设定也是可以的，回归到栅格系统的意义，栅格本质上不是为了保证像素级精确，而是为了保证浏览视觉级别的秩序、协调与统一，所以大家没有必要纠结。“没有绝对正确的栅格设计，只有最适合的栅格设计”，希望这篇文章可以帮助对栅格有疑惑的设计师们，同时也期待大家留言，大家一起学习探讨。万字干货！从4个方面完整解析栅格设计关于界面栅格的攻略，延展到适配方式。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/b-end-design-size
张大湿
飞翔的企鹅
