导语：极验UED——极验用户体验中心，在保障交互安全的产品基础上，把控和推动产品的用户体验，专注交互体验设计。此专栏用于分享极验UED团队特邀文章，与大家交流用户体验设计的经验。
文
阿汤
写在前面
8点网格这个概念在今年初的时候在medium上面火起来，很多设计师写文章介绍了它，它的主要价值在于提高产品团队的开发效率的同时，让用户对于信赖的品牌得到保持高质量的一致性体验，并且在自己的设备上也不会出现模糊的半像素偏移。
我和很多设计师一样对于它的来源和可行性感到好奇，正好配合团队的后台项目，在项目整体路线图确定后，产品推进节奏紧凑，功能和低保真原型确定后给设计大概一周的时间达到交付前端同事的标准，前端同事开发周期也比较紧，故决定后台网站设计考虑最小响应到到平板竖屏宽度，移动设备在平板竖屏基础上整体缩放即可，于是采用基于8点网格的响应式网站设计。
1
什么是8点基准网格以及响应式布局
8点基准网格：
网格，顾名思义就是网络状的格子。
8点/8point/8pt，说的是逻辑像素尺寸，它独立于屏幕分辨率，简单来说，普通屏时1pt=1px,Retina屏时1pt=4px(2px*2px),设计师在sketch中做设计的时候画板的大小就是使用的逻辑像素尺寸，涉及到多设备多平台响应的网站开发工程师也会弃用px这个单位。
每个小格子都是8pt*8pt的一个方块，许多个这样的方块形成了所谓的8点基准网格。
响应式布局：
设计师使用纵向的栅格（column列）让页面元素垂直方向上对齐，使用横向的栅格（row排）让元素水平方向上对齐。
栅格，和网格的意义不同，栅（shan）格是栅（zha）栏，有栏宽（columnwidth）和间隔（gutter）这两个概念。
2
为什么要使用8点基准网格
对于数字产品，设计师不要认为把一份设计稿丢给前端一切就完了，设计师自己可以有像素眼，可以用肉眼看出来元素的距离，但是没法要求和我们合作的前端工程师也同样拥有的像素眼。
所以设计交付物如果缺乏一个定义间距关系的标准，一个不机车的前端工程师最终给的产出将会和设计稿大相径庭，机车的前端工程师会很累。
8点基准网格正好起到的就是一个标准的作用，即使工程师有失误，你通过后来的效果验收也可以简单的告知前端“侧边栏的文字应该再向左靠近8pt”而不是“再靠近3px哦不5px吧”。
系统设计的延展性非常重要，对设计师做UI设计本身是没有坏处反倒有益处，8点网格让设计变得更加规范和统一了。
另外推荐看一下ElliotDahl的Introtothe8-PointGridSystem，它比较全面的介绍了8点栅格对设计师和工程师以及整个产品团队的价值，知乎上＠林南翻译了一波“正式为大家安利8点栅格”
贴一段文中说明8点基准网格价值的内容：
对于设计师：提升效率、减少决策、同时让元素之间保持一种协调的节奏。
对于团队：设计师和工程师之间更容易达成默契，工程师可以较轻松地用肉眼丈量8的倍数，而不是趴在那一个一个数像素。
对于用户：这让他们信赖的品牌得以保持高质量的一致性体验。并且在自己的设备上也不会出现模糊的半像素偏移。
3
8点基准网格的应用
硬栅格还是软栅格？
8点基准网格系统实际上有两个版本
1.将元素放到8pt栅格中（称之为“硬栅格”）
2.元素之间的距离是8pt的多少倍（称之为“软栅格”）
我在实际应用的过程中最开始也试过硬栅格，将元素放在8pt栅格之中，这种方法遇到了很多实际的阻力，比如说一个按钮，24px(8的三倍)的高度感觉小了点，32px(8的四倍)的高度又大了点，总之感受到了数学的束缚，于是便使用软栅格，这样只限制元素之间的距离是8pt的倍数，并不限制元素本身的大小，对于设计师来说
P.s既然元素之间的距离都是8pt的倍数Nudg这个工具可以改变sketch的大步距。
在sketch中怎么设置8pt基准网格？
4
响应式布局的应用
基于设备的逻辑像素设计和开发
下图是主流的桌面和平板设备的分辨率大小（开篇介绍文章背景的时候也提到了，我们这次的设计考虑最小响应到到平板竖屏宽度，移动设备在平板竖屏基础上整体缩放，所以没有把手机的分辨率列出来），图中的数值都是逻辑像素大小，这些数值也是我们在sketch中开始设计时的画板需要设置的大小。如图：
怎么在sketch中设置布局？
我主要使用了12栏的布局方法，为什么是12栏呢？12这个数本身有着天然的数学优势，学过小学数学的人都知道，它的公约数有它给设计师布局提供了更高的灵活性。当然，大家也可以自行探索实践其他的栅格系统，10栏、8栏、16栏真的试过了才知道适用什么类型的系统。
5
响应式布局相关答疑
响应策略是由设计师还是前端工程师给出？
设计师或者懂设计的前端。
虽然响应式的概念火了很多年了，但很多网站都并不是响应式的，在平板或者手机上打开网站就完全乱了，而另一些可以说是响应式网站的感觉是前端工程师自己凭借经验设置一些了断点，大体还是不错的，但是还没有达到很好的程度，在不同的设备上并没有提供一个很易用很美观的感受。所以说，响应的策略还是应该由设计师来给出，但前提是设计师最好对html和CSS了解，不了解的话需要提前和前端工程师讨论下当前布局的可行性。
什么是断点？次断点？
我：咱们这次的