|
Post by account_disabled on Jan 26, 2024 22:47:41 GMT -5
博客 论坛 图书馆 登录 加入高级版 免费技术书籍 人工智能 JavaScript 计算 设计与用户体验 HTML 和 CSS 企业家 网络 PHP WordPress 移动的 编程 Python 博客 网页设计中的网格系统简介 设计 HTML 和 CSS 卡勒姆·霍普金斯 2018 年 2 月 22 日 分享 在网页设计中,网格系统是将网页中的所有元素收集在一起的不可见结构。在本文中,我将介绍网格系统,解释它们是什么、它们的目的以及它们背后的一些理论。 维基百科将网格系统解释为 - 由一系列相交的直线(垂直、水平和角度)或曲线引导线组成的结构(通常是二维的),用于构建内容。网格充当骨架或框架,设计师可以在其上以合理、易于吸收的方式组织图形元素(图像、字形、段落等)。 网格系统的本质 网格系统永远无法正确可见,但可以通过网页中元素的放置看到网格“规则”的痕迹。 网格系统还规定了此类设计元素的大小,如列文本的宽度、元素的重复放置、图像周围的填充、字间距、行高等。网格的主要目标是在设计中创建统一的连接,这在Turn 使网页内容更好地流动,从而产生更具可读性和令人愉悦的网页设计。 网格系统中的统 的《平面设计元素》解释了 WhatsApp 号码数据 通过网格系统使用统一性: 当所有元素都一致时,设计就存在统一性。元素看起来像是属于在一起的,而不是随机放置的……因此,如果没有统一,设计就会变得混乱且难以阅读。但如果没有多样性,设计就会变得惰性、无生气、无趣。必须在两者之间找到平衡。 然而,只有在设计过程的初始阶段使用网格,网格系统对特定设计的好处才会生效。尝试在现有设计中实现网格不会创建相同的流畅布局或内容统一。Josef Muller-Brockmann 的《网格系统是平面设计》中讨论了这个问题。 他写: 视觉设计中合适的网格可以很容易地 通过视觉传达的手段客观地构建论点; 系统地、有逻辑地构建文本和说明材料;将文字和插图组织得紧凑,有自己的节奏将视觉材料放在一起,使其易于理解且结构紧凑。 网页设计之外的网格系统 网格不仅限于网页和图形设计。几乎每个实施任何形式设计的职业都有一个网格系统,专业人士用它作为积极元素定位的保证。在所有现代设计实践中使用网格几乎在专业上变得至关重要。 有哪些可用的网格系统? 供网页设计者使用的网格系统在互联网上随处可见。网格之王被称为“960网格”。960 Grid 具有以下结构: 总宽度 960 像素。 最多 12 列,每列 60 像素宽。 每列的左右缘产生 20 像素的装订线空间。 总内容区域为 940 像素。 960网格深受设计师欢迎的主要原因之一是它的灵活性。设计者可以使用多种列,最大数量为 12。
|
|