B端设计指南 - 栅格

语言: CN / TW / HK

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

老规矩,我们在讲栅格之间,先科普一个知识点,为何会有栅格?

早在平面设计开始之初,就有对“栅格”的使用记录。(不过那时不叫栅格,而叫网格)因为印刷机器以及切割工具的限制,导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失,因此出现了当时非常火爆的《平面设计中的网格系统》一书

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

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

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

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

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

1.栅格的定义

前面说了这么多,我们来聊聊栅格的定义

栅格:是对界面当中元素横向排布的一种模式,主要用于大型区块间距的排列,不适用于 图标与文字 间隔的小型元素

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

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 设计师~

(文章有些久远,找不到原图了,望谅解)

Powered by Froala Editor