设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

网页设计中的栅格系统是什么?

编辑: 时间:2016-04-10 10:57:51

   经常浏览网页、制作网页的同学会发现,许多大站的采用的页面不是950像素就是960像素。还有一些知名站点,虽然首页宽度没什么固定规律,但共同的特点是:功能专一,页面结构相对简单。

  

网页栅格系统是什么?我们必须遵循它吗?[点击放大]

 

  为什么设计师们都不约而同的采用几乎相同的布局尺寸呢?这不是巧合,而是遵循着一个规律——栅格系统。 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事。不过从定义上说,栅格更为准确些,从维基百科查到栅格的定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。 如今,栅格系统也已经被运用到网页中。它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。 栅格系统的原理和应用 栅格系统的计算公式:

  (A×n) - i = W

  如上图所示: A 一个栅格单元的宽度 a 一个栅格宽度 A=a+i n 正整数 i 栅格与栅格之间的间隙 W 页面/区块宽度 这样就可以计算出栅格系统所使用的尺寸。 以页面宽度950像素为例,每个区块与区块的间隔为i=10px;如果应用上面的公式,可以推出A=40px,既页面横向版式设计采用的栅格系统为: (40×n) - 10 = W 用栅格系统设计的页面非常直观,有条理性,并且看起来十分舒服。如果你愿意,可以通过上面的启发,衍生出自己的各种栅格系统。 网页栅格系统只是参照,具体情况需要具体分析,如果自己有想法,也可以不按照栅格系统进行设计,它只是参照而已。

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号