基于8点网格的响应式网站设计

时间：2023-09-01 16:36:01 | 来源：网站运营

时间：2023-09-01 16:36:01 来源：网站运营

基于8点网格的响应式网站设计：8点网格这个概念在今年初的时候在medium上面火起来，很多设计师写文章介绍了它，我和很多设计师一样对于它的来源和可行性很好奇，正好最近自家公司启动新项目（一个基于行为数据分析的安全风控系统），需要设计一个供客户使用的后台系统，于是就真正实践了8点网格和响应式布局的概念，现将实践过程的一些心得分享给大家。

情境

在项目整体路线图确定后，产品推进节奏紧凑，功能和低保真原型确定后给设计大概一周的时间达到交付前端同事的标准，前端同事开发周期也比较紧，故决定后台网站设计考虑最小响应到到平板竖屏宽度，移动设备在平板竖屏基础上整体缩放即可。

正文前的一些说明

先解释下文章标题“基于8点网格的响应式网站设计”中的两个关键词（ P.s 本文之前的标题是“8点栅格系统实践心得”，不够清晰准确 == ）


8点基准网格：

网格，顾名思义就是网络状的格子，做设计的对网格这个词应该都再熟悉不过了。

8点/8point/8pt，说的是逻辑像素尺寸，它独立于屏幕分辨率，简单来说，普通屏时1pt=1px, Retina屏时1pt=4px(2px*2px) , 设计师在sketch中做设计的时候画板的大小就是使用的逻辑像素尺寸，涉及到多设备多平台响应的网站开发工程师也会弃用px这个单位。

每个小格子都是8pt*8pt的一个方块，许多个这样的方块形成了所谓的8点基准网格。


响应式布局：

设计师使用纵向的栅格（column 列）让页面元素垂直方向上对齐，使用横向的栅格（row 排）让元素水平方向上对齐。


栅格，和网格的意义不同，栅（shan）格是栅（zha）栏，有栏宽（column width）和间隔（gutter）这两个概念。


下图二是结合纵向栅格（12栏，16pt间隔）和基准网格（8pt）后的一个示例。


那你们可能想问，具体在不同设备尺寸上如何“响应”起来呢？

说来话长，请看接下来的正文吧！

正文第一部分: 8点基准网格

• 8点基准网格的价值？
  

对于数字产品，设计师不要认为把一份设计稿丢给前端一切就完了，设计师自己可以说我有像素眼，我可以用肉眼看出来元素的距离，但是我们没法要求和我们合作的前端工程师也同样拥有的像素眼啊。

所以设计交付物如果缺乏一个定义间距关系的标准，一个不机车的前端工程师最终给的产出将会和设计稿大相径庭，机车的前端工程师会很累。

8点基准网格正好起到的就是一个标准的作用，即使工程师有失误，你通过后来的效果验收也可以简单的告知前端“侧边栏的文字应该再向左靠近8pt” 而不是“再靠近3px哦不5px吧” 。


那么对设计师做UI设计本身有影响吗？会束缚吗？我认为系统设计的延展性非常重要，是没有坏处反倒有益处，8点网格让设计变得更加规范和统一了


另外推荐看一下Elliot Dahl的Intro to the 8-Point Grid System ，它比较全面的介绍了8点栅格对设计师和工程师以及整个产品团队的价值，本站上＠林南翻译了一波正式为大家安利“8点栅格”


贴一段文中说明8点栅格价值的内容

• 对于设计师：提升效率、减少决策、同时让元素之间保持一种协调的节奏。
  
• 对于团队：设计师和工程师之间更容易达成默契，工程师可以较轻松地用肉眼丈量8的倍数，而不是趴在那一个一个数像素。
  
• 对于用户：这让他们信赖的品牌得以保持高质量的一致性体验。并且在自己的设备上也不会出现模糊的半像素偏移。

• 硬栅格还是软栅格？
  

8点基准网格系统实际上有两个版本。

一 将元素放到8pt栅格中（称之为“硬栅格”）

二 元素之间的距离是8pt的多少倍（称之为“软栅格”）

我在实际应用的过程中最开始也试过硬栅格，将元素放在 8pt栅格之中，这种方法遇到了很多实际的阻力，比如说一个按钮，24px（8的三倍）的高度感觉小了点，32px（8的四倍）的高度又大了点，总之感受到了数学的束缚，于是便使用软栅格，这样只限制元素之间的距离是8pt的倍数，并不限制元素本身的大小，对于设计师来说


P.s 既然元素之间的距离都是8pt的倍数 Nudg这个工具可以改变sketch的大步距。

• 在sketch中怎么设置8pt基准网格？
  

正文第二部分: 响应式布局

• 基于设备的逻辑像素设计和开发

下图是主流的桌面和平板设备的分辨率大小（开篇介绍文章背景的时候也提到了，我们这次的设计考虑最小响应到到平板竖屏宽度，移动设备在平板竖屏基础上整体缩放，所以没有把手机的分辨率列出来），图中的数值都是逻辑像素大小，这些数值也是我们在sketch中开始设计时的画板需要设置的大小。如图。

• 响应策略是由设计师还是前端工程师给出？
  

设计师或者懂设计的前端。

虽然响应式的概念火了很多年了，但很多网站都并不是响应式的，在平板或者手机上打开网站就完全乱了，而另一些可以说是响应式网站的感觉是前端工程师自己凭借经验设置一些了断点，大体还是不错的，但是还没有达到很好的程度，在不同的设备上并没有提供一个很易用很美观的感受。所以说，响应的策略还是应该由设计师来给出，但前提是设计师最好对html和CSS了解，不了解的话需要提前和前端工程师讨论下当前布局的可行性。

• 什么是断点？次断点？
  

我：咱们这次的官网弄个响应式的吧，手机平板电脑都完美显示

前端工程师：没问题啊，响应式就是做一些媒体查询嘛

我：==

前端说的媒体查询（media queries）是实现断点的一种方法，它提供了简单的逻辑方法来根据不同的设备特征（宽度 高度 像素比）应用不同样式，最常用的媒体查询变量是min-width和max-width。

断点(breakpoint)是页面改变布局的临界点，一个响应式网页可能会有一个或者多个断点。

有时候网页也会设置次断点，次断点(minor breakpoint)并未对页面布局做很大的改动 只是对细节做了一些微调。

• 怎么查看一个响应式网站的断点？
  

用chrome浏览器打开一个响应式网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。

P.s 一个提供地图服务的公司mapbox 它的官网和后台都是完美响应到各种设备的，很强势，查看需自备梯子哦。另外常用的QQ邮箱也是响应式的。你们可以检查元素这些网站设置了几个断点以及如何“响应”的

• 设计稿要怎么设计，要做几套？
  

这是个设计师最常问的问题，该怎么设计响应式网站，具体设计几套呢？

设计几套取决于这个网站你会设置几个断点，而设置多少个断点由网站的内容决定，设计师需要根据网站的实际内容找到合适的断点，设法避免列间空白太宽或太窄的情况。

如何设置断点既是科学，也是艺术。

结合基准网格（8pt）和纵向栅格（12栏 16pt）我们这次整体上设置了下图中几个断点，由小到大依次是：768px; 1024px; 1248px; 1440px; 1920px


这样基本上所有的设备都被我们考虑进去了，从手机（尽管是在平板的基础上整体缩放的）到平板到PC到MBP 甚至于把超大的5K屏的显示方式也纳入了考虑范围

• 一个网站中每一个页面都需要设置同样的断点吗？
  

看到上一题后你可能想问，那我岂不是每一个页面都要设计5套图？

这个当然不是了。这个视网站中每个页面的内容而定，甚至同一个页面的不同内容模块布局断点设置也不尽相同。在我的实践过程中，很多页面只需要设计三套，当然比较复杂的页面，在这五个分辨率上，都需要对布局做一些修改或者自动隐藏部分内容

• 楼上上那题有个断点是1248px？主流屏幕分辨率里没有呀
  

断点的选择基于内容，而不是基于主流屏幕的分辨率。

• 怎么在sketch中设置布局？
  

下面贴了不同布局的两张图，我主要使用了12栏的布局方法，为什么是12栏呢？12这个数本身有着天然的数学优势，学过小学数学的人都知道，它的公约数有1 2 3 4 6 12 它给设计师布局提供了更高的灵活性。当然，大家也可以自行探索实践其他的栅格系统，10栏 8栏 16栏 真的试过了才知道适用什么类型的系统。