B端设计指南 - 栅格

时间：2023-08-31 11:18:02 | 来源：网站运营

时间：2023-08-31 11:18:02 来源：网站运营

B端设计指南 - 栅格：在一个B端页面当中，关于栅格的使用方法，你或多或少都会有所疑惑。它究竟是如何使用？栅格在实际工作当中的使用方法是什么？今天我们就聊聊B端系统当中的栅格

老规矩，我们在讲栅格之间，先科普一个知识点，为何会有栅格？
早在平面设计开始之初，就有对“栅格”的使用记录。（不过那时不叫栅格，而叫网格）因为印刷机器以及切割工具的限制，导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失，因此出现了当时非常火爆的《平面设计中的网格系统》一书

虽然这是一本非常老的书，但是设计本身就是相通，将其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义

而在设计（网页端、桌面端）产品时，对于空间上的理解，一直以来都是令人头疼的问题

我们将屏幕当中的设计空间分为横向 与 纵向两个维度：



横向：由于大多数显示器都是宽屏的形式，导致我们大多数页面内容都是通过横向的方式进行列式排布，也就导致纵向导航、二三级内容分布较多；而市面上所要兼容的横向尺寸较多，大致分为：1920、1440、1366、1280，而怎样将如此多的尺寸，摆放不同的元素，这仿佛才是设计的难点

纵向：屏幕的纵向的空间同样十分关键，当内容在横向无法满足时，则会增加屏幕纵向的内容量。但是我们可以通过浏览器的特性，纵向的内容通过滚动条进行收折，进而实现兼容

栅格的定义

前面说了这么多，我们来聊聊栅格的定义
栅格：是对界面当中元素横向排布的一种模式，主要用于大型区块间距的排列，不适用于 图标与文字 间隔的小型元素

这里有两个重要点：横向排布：代表着栅格的用法，这也是为什么栅格都是一列一列的原因用于大型区块：不是任何内容都可以用栅格，比如在 卡片当中的图标、文字，更多是要分析整个卡片，将其看作一个整体，如上图

2.栅格的组成形式
在一个常见的栅格当中，一般分为页边距、水槽、栅格宽度



页边距：是栅格与外层信息的保护区域

因为在整个栅格系统当中，除了栅格之外，往往还会有其他的内容进行展示（如上上方图，栅格日常的使用页面），而我们正好可以通过页边距的方式，将其进行区分。我们以常见的B端界面为例，通过页边距可以将侧边导航与内容页进行区分，保证页面间的亲密性，常见的页边距尺寸一般为 20px、24px。

水槽：是确定栅格宽度间的固定间距，通常是帮助栅格内的元素进行更为合理的排布

水槽目的就是为了统一元素间的距离。比如现在页面当中有两个卡片的内容，而使用水槽，我就可以将这两个卡片的内容，确定其间距（再次强调栅格用于确定横向内容）方便栅格当中元素的信息排列

栅格宽度：是栅格当中内容所占的基本宽度，一个栅格宽度往往是通过内容宽度、页边距、水槽排除过后所剩的宽度平均得出，一般会分为 12栏、24栏 两种方式

栅格宽度的确定，其实就是一个数学题，先给你一个公式（不建议使）：(A×n) – i = W
A：一个栅格单元的宽度；a：一个栅格的宽度；n：正整数；i：水槽宽度；W：页面的宽度

虽然公式好像是万能的，但我不喜欢死记硬背，来深入讲一讲这个公式背后的逻辑和使用方法

以1440的页面为例，通常B端产品左侧会有一个导航菜单，假设为 200px

因此整个栅格的内容页则为1440 - 200=1240px


然后设定页边距宽度为 24px，一个栅格会有两条页边距，剩下宽度则为：1240 - (24*2)=1192px

接着设定整个栅格为12栏，水槽宽度为8px。因为水槽位于 栅格 的左右两侧，也就意味着水槽的数量会比栅格少一列（别问为什么，问就自己去下面图片数一数）也就是1192 - (8*11)=1104px
最后因为在水槽已经确定栅格为12栏，整个栅格的宽度则为：1104/12=92px


如果还不能理解，建议跳到开头，再看一遍

这里有两个关键点整个栅格的顺序不能乱：页面宽度→页边距→水槽→栅格宽度。因为我们的栅格一定是从大到小，从外到里，不然做出来的内容很容易无效

将元素摆放在栅格中，还需要注意起始位置与结束位置。这里教你们一个口诀：起始在左，结束在右；换句话说就是元素的起始位置必须放在栅格宽度的左侧（也中的红线）；


结束位置必须放在栅格宽度的右侧（图中的蓝线）


这样的方式也是为了避免很多设计师知道画栅格而不会用栅格，出现一些低级错误

网页的布局方式：
布局方式，本质上就是去处理窗口宽度与网页内容的关系

用户会使用浏览器打开不同尺寸的窗口宽度，而网页内容究竟应该如何去适应这些窗口尺寸？
通常会分为：固定布局、流式布局、自适应布局、响应式布局

1.固定布局（Static Layout）
固定布局是一种最为简单的方式，它的设计逻辑是将页面当中的内容“写死固定”在屏幕上，内容不会随着本身窗口宽度进行改变，所有元素都使用 px 作为基础单位

当然在固定布局当中，窗口大小与页面内容会存在两种基本关系：窗口过大则将页面元素进行居中，窗口过小则展示横向滚动条

固定布局的好处是这种方式相对简单，只需将页面设计好即可，不会存在太多兼容性的问题（因为也压根没有考虑兼容性的相关问题）
固定布局通常出现在 老旧的政府项目、网页的登录注册中


2.流式布局（Liquid Layout）
流式布局是最基础的变化布局，它的设计逻辑是将页面当中的元素设计成可以流动的“水”，通过在页面，设计不同的“杯子”容器来装下页面内容
这里的“水”一般指的是 文字、图标、以及一些页面重复出现的元素。而杯子通常是我们设计的容器，它高度固定，只会变化其宽度，比如卡片、外层容器控制宽度 等等...
因为“杯子”的限制，也就导致水会根据杯子的宽度进行延展流动，进而形成流式布局


使用流式布局可以通过较低的开发成本，来实现一个页面当中多尺寸的小范围适配，如果屏幕尺寸跨度较大，则会比较困难
而流式布局最常使用的方式就是通过栅格系统，来确定整个“杯子”的宽度，进而让“水”能够在页面当中实时滚动展示




这里有两个需要注意的点：
1.在研发层面，杯子的大小是需要进行限制的，通常会去设定它的最大值与最小值，当它超过最大值则居中对齐，当他在流式布局当中，窗口超过其最大值则固定左侧，右侧空白补充；窗口小于其最小值则展示横向滚动条
比如与上方同样的案例，将页面当中内容的文字实现成流式布局，并且将其流体布局的宽度限制为 200px - 120px ，这时则会形成页面的宽度变化，会导致内容发生直接的变化

2.流动的“水” 需要去考虑它漫出的情况，即在“水杯”高度固定的情况下，整个宽度无法装下如此多“水”的情况，通常我们可以使用 “...” 进行标注。这个思路后续在响应式布局当中也会体现


3.自适应布局（Adaptive Layout）
自适应布局是将差别较大的屏幕尺寸，去创建多个不同的设计稿，每一个设计稿去对应 一个用户实际的尺寸范围。改变屏幕分辨率就可以去切换不同的设计方案



通俗一点来说，自适应就是去单独设计桌面端、平板端、移动端的页面，并且将它们三者进行独立，而系统通过不同尺寸间的 屏幕断点/浏览器UA等...（实际前端判断远比这个更加复杂，但是为了方便理解可以暂且这么认为），进而适应出不同的设计页面

而通俗一点来说，自适应是使用多套代码去对应多个页面，并且都是在业务非常复杂的情况下进行使用，在国内当中最常使用便是 桌面端与移动端 的产品

比如 语雀 当中的 桌面端与移动端就是一个典型案例，他通过判断用户的使用设备，将页面拆分为了，桌面端、移动设备端、小程序（单独设计适配的）。因此只需要将每种设备的设计思路分析清楚即可



自适应布局与栅格
自适应主要是表达多个设备尺寸下进行切换的 布局方式，在不同的设备之间，也是需要去使用流式布局以及其他布局方式
而不同的设备之间，屏幕分辨率的差异就会涉及到一个关键点，屏幕断点

屏幕断点
屏幕断点，又叫媒体查询 @media，因为在整个设计当中，屏幕尺寸是极其复杂的，除了我们常见的尺寸：19201080、1440765、1366

用户还可以通过调整窗口的大小，进而改变网页尺寸。而屏幕断点，最主要是判断屏幕的宽度，来确定 目前的尺寸究竟应该采取什么设计方案

比如在设计一款成熟的B端产品时，因为商业的缘故我们作为各大平台（钉钉、企微、飞书）的ISV（合作上架），产品上架到不同平台时，需要对不同平台尺寸进行调整，比如钉钉为1024px、企微为980px、飞书为1280px，这时为了满足用户的实际场景，会将这几类特殊的尺寸作为屏幕断点进行对应的布局设计，以满足不同产品当中的最佳实践

关于屏幕断点的媒体查询，是在前端 CSS3 代码当中，提供给用户校验整个屏幕的宽度，比如在下图前端代码当中，则代表在屏幕尺寸小于480px 时，使用 字体大小为16px



而确定断点才是这其核心，这里给大家提供两个思路，实际设计当中还会更为复杂：

物理断点：也就是屏幕当中，已经划分好的断点方式，比如显示器的全宽大小、不同设备之间的屏幕分辨率差异
设计断点：在设计过程当中，一些必要的屏幕尺寸。比如上方讲到不同平台的设计问题

其实屏幕断点不是最终目的，最终还是想通过屏幕断点，将页面当中不同的不同元素的处理方式实现在设计稿中，如果不需要，完全可以不考虑增加屏幕断点


4.响应式布局（Responsive Layout）
这里先多聊一句，其实响应式的大规模普及，是源自 2015年 Google 的倡导（可以看到Google旗下的很多产品都采取的响应式布局，例如 YouTube），它最初的目的非常简单，就是为了提高响应式在移动终端上的运行效率。因为在2015年时，安卓 生态下的屏幕尺寸多到可怕，以至于需要有一套解决办法来让用户运行并使用

响应式布局是确保一个页面当中所有的设备（桌面端、平板端、移动端）都能够展示出非常满意的效果，进行产生的一种技术方案。它更像是 流式布局与自适应布局 的结合，它能够通过对屏幕尺寸的快速响应，进而对页面的内容进行更为细致的变化

通俗一点来说就是通过一套代码去实现多个页面，并且将多个页面的内容进行细化，进而能够快速适配多个设备



对于多个设备，最主要是调整页面栅格数量、水槽宽度、页面距进行适应，比如在YouTube当中，就是通过响应式布局，让页面实时响应进行处理

响应式布局与栅格

比如以 Ant Design Pro的页面进行拆解，你会发现它在 575、767、991 的尺寸中，页面布局发生变化，然后根据屏幕断点之间的页面布局，采用向下兼容的适配方式，Ant design Pro 屏幕断点可以划分为320、576、768、992、1200，响应策略如下图：




布局与栅格的关系

你会发现布局其实是依赖于栅格，而栅格的使用，正是由于不同的布局所导致。只有通过栅格，才能够确定流式布局的比例、响应式布局的变化方式，但是在B端产品当中，并不是所有页面都需要使用栅格，经常看到一些作品集其实是为了栅格而栅格

在B端产品当中在，真正使用栅格的地方更多是工作台、官网，而其他相对复杂的页面是没办法使用栅格，而对我们每一个产品而言，可以优化的点就是在屏幕尺寸较小的情况下，默认让整个产品导航菜单收起，以提供给用户更多展示内容

我是CE青年，一个 2 B 行业 的 2B 设计师～
（文章有些久远，找不到原图了，望谅解）