锐客网

  1. 首页 > it技术 > >

web没有栅格化，你衣服穿大码了你知道吗（）

轮栅格化系统对于网页设计的重要性

最近因为面试的原因，研究了几个目前比较火热的视频网站。对其中的设计做了一些对比和分析，今天讲讲我在分析过程中的其中一个收获——“栅格化系统”。
其实栅格化系统已经是老生常谈了。但是相信还有很多新手设计师，甚至部分的资深的设计师，都没有认真去深入了解并且将其应用到网页设计规范中。
栅格化其实就像是一个设计标尺，能够为网站各种形态量体裁衣。而如果失去了栅格系统，网站设计就有点像是看心情下手。高兴时剪一下，开心时又剪一下。
然而仔细一想，为什么要剪这里，为什么要剪这么大？是想不通的，只有一句，看当时设计师的审美标准和心情。所以如果没有栅格化，你web的衣服穿大了还是小了，你知道吗？
这里我不打算讲理论，我也不是理论大师，文末有一篇比较好的介绍栅格化的文章，大家可以看看。
我主要讲一下分析的几个网站（A站、B站、土豆）
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
栅格系统公式：W = A * n – i ; A = a + i;
i : 被分割的区块之间的间隔（为了方便计算，大都为10px）
整个公示中，i和n一样是核心，再确定i，即可确定整个栅格化系统。
根据上述公式，
A站（acfun）的总宽度两边分别留了padding=10px，也就是一个i的距离，所以W=1180-20px=1160px，i=20px
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
用sketch的栅格化功能对比了12等分和24等分对照acfun的web页面，发现A站并没有用到完美栅格化系统，略微失望，只是用了zoom scale方法来进行小尺寸页面的适配显示。
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
具体实现方式为：当浏览器页面小于1160的时候，web内容排版减少一个最小内容块的宽度w=160，如下图标注3，于是剩余宽度为1160-160-20=980px，这时候，标注2的内容块也减少一个，但是由于A站的设计有两种视频内容尺寸（而且比例不同），导致上部分区的剩余宽度是1160-216-20=924px，这时候只能重新定义标注1位置的轮播图宽度了，原本的452+56=508px。
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
该站其他页面同样遵从这样的设计思路。但是由于不是严格按照栅格系统，所以很多时候，会有或多或少的问题。比如在合辑页面，设计了一个7等分，页面宽度也莫名地成为了1200。虽然一看就知道是旧版页面，但是如果一开始有严格的栅格系统，就不会出现这些奇怪的数字。
B站（bilibili）则稍微比A站设计要严格一点，在全站范围，基本的视频尺寸就是一个，就是宽度160px。但是由于两者的结构和排版基本无二，栅格系统同样不完善，所以B站一样会出现问题。
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
因为全站的兼容样式前端需要规范起来，所以其他页面正常也是有1160和980两个尺寸，但是由于980不是通过
栅格化所得，当设计5等分的时候，内容块的宽度并不是最小的内容块尺寸160px，这时候要兼容小尺寸就必须要牺牲间距了。奇怪的样式还有如下图所示
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
界面设计师建立在规范的设备体验之上的艺术品。所以在将想要的设计呈现给用户的时候，先多想想为什么我的用户头像要设置成80×80，或者，我的表单长度为什么是320×80。这样会更加经得起推敲，例如我天朝大土豆的web界面，虽然搜索栏任性了一点，上传视频和登陆按钮也偏移了一点点。但是核心内容都是经得起推敲的。
web没有栅格化，你衣服穿大码了你知道吗（）
文章图片
【web没有栅格化，你衣服穿大码了你知道吗（）】文末附上一篇我之前看过的好文，想深入了解栅格化可以看：高级技巧！视觉设计中的栅格化与比例

    推荐阅读


    上一篇：孩子身上这条线，决定最终身高!忽略会耽误孩子一生

    下一篇：临夏市大队开展夜查工作