网页栅格化布局设计学习-网页设计技巧

对于珠海网页设计设计师来说，栅格系统的使用，能让网页信息呈现的更加美观，更加易读，亦更具可用性。而对于前端开发来说，网页也将更加的灵活与规范。 那是否每个网站都要符合栅格化系统的标准呢？栅格化会不会导致设计师的思路被框架死死限制住？尤其是企业站的设计。这是一个值得大家拿上台面来思索探讨的问题。UEHTML平台在进行网站设计的时候是没有参照栅格化系统的，只是在设计过程中做了很多细节的规范，这样建站，是不是更具灵性呢？....

一、网页设计栅格化系统

栅格系统英文为“grid systems”，开始是从平面栅格系统中发展而来，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布 。 通俗点讲是一种平面设计的方法与风格，运用固定的格子设计版面布局，其风格工整简洁。

•能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节约不少成本。

基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

栅格系统更多的是一种布局思想。对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和个性化的设计。

很多大型网站并没有运用栅格系统，那它的用处在哪? 我认为栅格系统应是一种能适应自身业务的规范，能在实际工作中帮助我们提高公司产品的质量和效率。而在我们的活动和专题需求中，如果有合理的栅格，我相信能节约一部分花在思考原型的时间，也能让专题布局更加规范。

结构和表现、内容的分离能更易于后期的扩展和维护，尤其在专题中经常出现结构改动小，视觉表现变换大的情况。

黄金分割可以归结为数学问题：对于长度为1的线段，将其分成两部分 x 和 1 – x, 使得：

x / 1 = (1 - x) / x 化为简单的二次方程：

x^2 + x - 1 = 0 正数解为：

x = (sqrt(5) - 1) / 2 ~= 0.618 这就是黄金分割。

这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。（这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等）

在平面设计领域，黄金分割点被广泛采用。比如下面这种图：