所在位置：
首页 >
营销资讯 >
网站运营 > 网格系统在网页设计当中的具体用途是什么？有何利弊？
网格系统在网页设计当中的具体用途是什么？有何利弊？
时间：2024-02-17 10:50:01 | 来源：网站运营
时间：2024-02-17 10:50:01 来源：网站运营
网格系统在网页设计当中的具体用途是什么？有何利弊？：先讲一下网格系统的意义，然后在后面针对题主的几点问题回答。
网格系统即为 Grid System 的译名。至于「网页栅格化」这个说法，之前没有看到过。不过应该也是指网格系统。
网格系统，以及其背后的模数思想在设计史上由来已久，在建筑、平面设计等领域均可见不同的表现形式。而具体到网页设计上，常用的 Column + Gutter (包含内容的宽栏+较窄的间距空间) 源自上世纪 50 年代成熟的瑞士风格平面设计（或称国际风格，International Typographic Style）。
网格系统对于平面设计和网页设计的意义，在于提供了一个对版面（页面）进行理性规划的方法。无论是 Column + Gutter 式的网格（下图左侧。灰色部分为 column）还是均分网格（下图右侧），都为设计师提供了一个参考工具，用于理性地安排页面中的元素，而非单凭感觉摆放。
至于 Column + Gutter 式的网格和均分网格的不同，我认为在于前者带有的 gutter 为元素之间的间距提供了一个直接的参照。而后者要按照网格形成间距，则需要将单元格设定得较小，这样可能会导致页面空间划分得过于细碎。网页设计和平面设计中
多见前者，可能是因为前者可以更为整体地排布元素。当然，这也并非绝对。
针对题主在问题补充中的几点：
1. 模版中的辅助线是根据网格系统绘制的。具体的尺寸，根据网格总宽度、设计栏数、gutter 宽度等确定。可用网格系统生成工具，根据设计的需求生成。辅助线的使用，就是为了按照网格系统对齐，确定元素的尺寸。
至于「眼花」的担忧，并不必要。辅助线仅用于对齐和确定尺寸，之后便可隐藏，进行详细绘制，需要时再显示便可。
而具体使用上，可以一个元素占据一栏，或多栏；但我认为有一个原则是元素不应当跨过 gutter, 然后到边界（如下图），否则页面便不整齐划一。而实际上，现有的网页用网格系统框架也不提供这样的做法
2. 网格系统的意思和用途在上文已叙述。
有利之处，在于能够理性、整洁地安排版面元素。同时，960 Grid System 等网格系统框架也使网页设计更为快速。
而不利之处，可能就在于应用网格系统的页面，在布局上灵活性可能稍嫌不足。但我觉得，划分 12 栏的网格系统其实也已具有较大的灵活性了。
3. 960 Grid System 是使用得最多的网格系统框架。将网格总宽定为 960 px 是出于对当时主流屏幕分辨率（宽度 1024px）和布局灵活性的兼顾。而对于文本阅读，宽度亦不宜过大，否则会造成阅读上的困难。所以，未来宽度更大的网页系统，字号亦需相应提高，将每行字符数控制在合适范围。
另外，现在亦有基于百分比而不是像素的网格系统框架 (如，Unsemantic CSS Framework)，可适配不同屏幕宽度。
在线咨询
