首页 > 新锐资讯动态

web没有栅格化,你衣服穿大码了你知道吗?

发布时间:2016-12-14 发布者:新锐传媒 查阅 [547] 评论 [0]

轮栅格化系统对于网页设计的重要性最近因为面试的原因,研究了几个目前比较火热的视频网站。对其中的设计做了一些对比和分析,今天讲讲我在分析过程中的其中一个收获——“栅格化系统”。

其实栅格化系统已经是老生常谈了。但是相信还有很多新手设计师,甚至部分的资深的设计师,都没有认真去深入了解并且将其应用到网页设计规范中。

 

栅格化其实就像是一个设计标尺,能够为网站各种形态量体裁衣。而如果失去了栅格系统,网站设计就有点像是看心情下手。高兴时剪一下,开心时又剪一下。

然而仔细一想,为什么要剪这里,为什么要剪这么大?是想不通的,只有一句,看当时设计师的审美标准和心情。所以如果没有栅格化,你web的衣服穿大了还是小了,你知道吗?

 

这里我不打算讲理论,我也不是理论大师,文末有一篇比较好的介绍栅格化的文章,大家可以看看。

 

我主要讲一下分析的几个网站(A站、B站、土豆)

 

Image title

 

栅格系统公式:W = A * n – i ; A = a + i;

i : 被分割的区块之间的间隔(为了方便计算,大都为10px)

整个公示中,i和n一样是核心,再确定i,即可确定整个栅格化系统。

 

 

根据上述公式,

A站(acfun)的总宽度两边分别留了padding=10px,也就是一个i的距离,所以W=1180-20px=1160px,i=20px

Image title

用sketch的栅格化功能对比了12等分和24等分对照acfun的web页面,发现A站并没有用到完美栅格化系统,略微失望,只是用了zoom scale方法来进行小尺寸页面的适配显示。

Image titleImage title

 

具体实现方式为:当浏览器页面小于1160的时候,web内容排版减少一个最小内容块的宽度w=160,如下图标注3,于是剩余宽度为1160-160-20=980px,这时候,标注2的内容块也减少一个,但是由于A站的设计有两种视频内容尺寸(而且比例不同),导致上部分区的剩余宽度是1160-216-20=924px,这时候只能重新定义标注1位置的轮播图宽度了,原本的452+56=508px。

 

Image title

 

该站其他页面同样遵从这样的设计思路。但是由于不是严格按照栅格系统,所以很多时候,会有或多或少的问题。比如在合辑页面,设计了一个7等分,页面宽度也莫名地成为了1200。虽然一看就知道是旧版页面,但是如果一开始有严格的栅格系统,就不会出现这些奇怪的数字。

 

B站(bilibili)则稍微比A站设计要严格一点,在全站范围,基本的视频尺寸就是一个,就是宽度160px。但是由于两者的结构和排版基本无二,栅格系统同样不完善,所以B站一样会出现问题。

 

Image title

Image title

因为全站的兼容样式前端需要规范起来,所以其他页面正常也是有1160和980两个尺寸,但是由于980不是通过

栅格化所得,当设计5等分的时候,内容块的宽度并不是最小的内容块尺寸160px,这时候要兼容小尺寸就必须要牺牲间距了。奇怪的样式还有如下图所示

 

Image title

界面设计师建立在规范的设备体验之上的艺术品。所以在将想要的设计呈现给用户的时候,先多想想为什么我的用户头像要设置成80x80,或者,我的表单长度为什么是320x80。这样会更加经得起推敲,例如我天朝大土豆的web界面,虽然搜索栏任性了一点,上传视频和登陆按钮也偏移了一点点。但是核心内容都是经得起推敲的。

 

Image title

发自 [] | 评论 [0] | 查阅 [547]

网友点评:0 条评论

      免责声明 | 新锐观点 | 网站运营 | 网站推广 | 联系我们 | 网站地图