|
960网页栅格系统设计：
栅格系统英文为“grid systems”，维基百科栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 如今，栅格系统也已经被运用到网页中。它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。 栅格系统的起源： 1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字体。 委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。 为什么960？ 1024 x 768 的分辨率下，打开Firefox： 自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650. 960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍： 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480 共26种（26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身），我们标记为：N(960) = N(2^6 * 3 * 5) = 26 根据上面的算法，可以得到： N(360) = N(2^3 * 3^2 * 5) = 22 结论： 要使得N(width)最大，width的取值有两个系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可组合的宽度值就越多。对栅格系统来说，这意味着越灵活！ 960栅格化系统： 960栅格化系统是由Nathan Smith创造的，具体来讲，就是基于960像素宽度，通过划分具有规律的分割，来提高网页开发效率。 960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重要的角色了。它将为你的设计提供一个坚实的坐标基础。 最初有两种变形：12栅格和16栅格。它们互补保证了系统的融通性。后来产生了更多的衍生。上图展示了16栅格到3栅格的案例。BBC和yahoo的门户网站就采用了栅格化体系，从而非常好的规范了网站的信息布局和疏密程度。 在960宽度下12栏的删格设计中，可以有如下的单位宽度可选： 在960宽度下16栏的删格设计中，可以有如下的单位宽度可选： 在网站设计改版部分，如何选择合适的屏宽（栅格化系统）来为网站做改版呢？ 一、分析现有网站用户的显示器分布情况 二、结合改版风格确定屏宽设计 传统型栅格化风格 以960到980像素为屏宽的网站设计，是网页设计师设计网页的标准宽度，可应用于绝大多数的网站建设项目。这是因为，960到980像素是最适合人眼视觉接受范围的宽度，且和传统的1024×768像素的显示器分辨率相匹配，和最大限度的发挥其长处。 精细型栅格化风格 以900到940像素为屏宽的网站设计，属于细腻、精致的风格展示，多用于界面设计工作室，品牌策划公司。精细型屏宽设计，如同瘦身美女一样，处处透露出其流线美，没有任何一丝多余的‘赘肉’； 宽屏型栅格化风格 980像素以上的页面设计，多应用在综合门户、网上商城等内容丰富的站点设计当中。宽屏营造大气、丰富的视觉冲击力，给人无限的遐想空间，因此也可用于个性艺术网站当中，例如婚纱摄影网站设计，可通过大幅的精致照片，烘托品质感受。但是，使用宽屏设计需要非常谨慎，因为使用宽屏设计的前提是舍弃一部分显示器分辨率不高的用户，毕竟，使用1440×900像素及以上分辨率的用户目前还仅占少数。 因此，选择何种宽度的栅格化网页设计系统，需要结合现有用户情况及网站改版的风格定位。企业还可借鉴网站制作公司的专业建议来决定最终的选择。当然，不论使用哪种栅格化系统，仅仅是为了辅助网页设计师进行更好的创造，最终的网站作品取决于设计师对于整体定位的把握和素材的运用。 使用网格系统的好处好处很多——设计、开发、管理网站都用得到。
PS中参考线 使用网格系统，让你的设计具有正式感和规范感，还具有一种结构分明的设计感。这让你设计起来更轻松，对于开发者来说，同样如此。 网格系统的缺点有好就有坏，我们来谈谈缺点。 首先，很多人，尤其是对于新手来说——网格系统会阻碍他们的发挥创造。你会感觉你的灵感被束缚在这些条条框框里面了。如果出现这种状况，我建议你从网格系统中跳出来，用自己的创意去设计，按照自己的经验来排布元素，然后再切出网格系统，想出一个二者结合的两全其美的办法，稍做调整，如果网格系统和你的原创设计出入过大，不能有效协调，那么建议换一个网格系统，或者自己设计一个。 其次，网格系统用起来比较困难，有一定的学习成本，需要有一定的数学基础，你得懂比例，会计算。对于那些数学不好的人来说，网格系统真的是太复杂了。但是我认为，刚开始虽然比较难以上手，但是习惯之后，你会得心应手，设计也将会更加出彩。 在设计中应用网格系统：几条小建议： 如果你能喜欢使用CSS网格框架，那就再好不过了，无论是PS还是其他什么程序，将网格设置为叠加，然后锁定。这样设计的时候心中就有数了。 设置参考线： 有了重叠网格之后，设置分栏参考线。这样就能够更清楚的划分边界。 尝试一下有限制的设计 最多16栏，6栏布局最明智。 运动员练习时都绑着沙袋还记得吗，有限制的练习，之后再脱去舒服，跑的更快。 注意空间问题. 每一栏之间的宽度越大，留给元素的空间越富裕。然而不要忘记垂直方向上的空间布局。是紧密还是充满留白？这需要按情况而定。 结论现在你对网格系统已经了解了大概。 网格系统是一种好的习惯，也是一种格式化的设计工具。有了它，你能更专注于内容呈递，更专注于强调重点。 |
|
|
