美文网首页
设计构成——合成网格

设计构成——合成网格

作者: 嘎嘎开心 | 来源:发表于2022-05-26 01:45 被阅读0次

网格很棘手,即使是最有经验的设计师也会吓坏。所以坐下来,深呼吸,让我们一起学习构图网格,做出周到、有条理和令人瞠目结舌的设计。

网格

网格是无形的骨架,用于固定设计以避免设计破裂并仅仅分崩离析。它是线条的组合——垂直的或相交的——将页面划分为多个部分并帮助组织内容。从本质上讲,网格组织空间和信息,为整个项目制定计划。

此外,网格是生活中很自然的一部分,如果你环顾四周,你会发现我们用它们来构建几乎所有东西——公寓楼、书架、街道和植物园。

网格的目的

最初,网格出现在打印布局中,用于组织报纸、杂志和书籍中的页面。从那时起,他们开始涉足网页设计,并帮助定位、调整大小和间距,而没有额外的麻烦。您可能会认为网格会扼杀创造力,并且您可以完美地排列没有网格的元素。那么,是什么让网格对设计如此有益和至关重要呢?

• 在响应式设计时代——手机、平板电脑、笔记本电脑和显示器——网格有助于创建适合任何屏幕的一致设计。此外,用户始终可以确定他们会在他们期望的地方找到东西。

• 网格可帮助您以最合乎逻辑和最直观的方式维护层次结构和排列元素。

• 网格让事情变得清晰,这样就不会分散用户对内容的注意力。

功能网格

如果您是经验丰富的用户,您通常知道在哪里可以找到搜索或如何找到任何网站的联系信息。这是因为设计师坚持使用适合一般用户群需求的功能网格。它们很灵活,可以作为指导方针,允许设计师在整个设计中始终如一地组织、安排和分组元素。

独特的网格

有些网站需要更个性化的方法,这时候独特的网格就派上用场了。它们可能包括不同方向的对角线,并且是为具有独一无二的创意内容的产品量身定制的。通常,设计师将独特的网格应用于促销或登陆页面,以有利的方式展示投资组合或特定产品。

拼贴网格

如果您曾经完成过照片拼贴(例如,谁还没有 😉),那么您肯定会很容易理解拼贴网格。它们没有排水沟,仅由柱组成,代表垂直线和水平线的交点。通过调整网格尺寸,您可以制作出非常有创意的作品。此外,列数没有限制,这使拼贴网格更加灵活。

网格结构

无论网格类型如何,它们都具有相似的结构,并由列和排水沟组成。列是网格的垂直部分,而中间的空间是排水沟。排水沟确保来自不同列的元素和组件不会相互碰撞。

他们一起建立了屏幕的脚手架。确保不要将边距与边距混淆——它是存在于页面内容和框架边缘之间的空间

柱网

顾名思义,列网格由列和排水沟组成——很简单,对吧?选择列数完全取决于您,但传统上您会在台式机上看到 12 个,在平板电脑上看到 8 个,在移动设备上看到 4 个。

所有的柱子和所有的排水沟都具有相同的大小,因此,这样的网格可以创造出平衡良好、和谐的构图。

添加的列越多,网格就越灵活。但不要过火。

模块化网格

柱状网格将页面分解为垂直部分,而模块化网格则添加了水平细分。相交的列、行和小巷形成一个单元矩阵——或者设计师所说的模块。一般来说,模块化网格可以更好地控制对齐和组合。

对一个内容单元使用单个模块或组合多个模块来创建内容块。

集成网格

三个臭皮匠顶个诸葛亮。有时,两个网格也比一个好。换句话说,集成网格是两种网格类型的组合。例如,一个可以用于媒体内容,另一个可以用于排版。这是一个方便的工具,可以创建超出任何人想象的设计。

重复网格

内容为王,它决定了哪种类型的网格最适合每个用例。重复网格具有相同的列和间距,对于具有经典、统一内容的网站更方便。此外,它们更常见于对称和静态的构图,尽管元素可以创造自己的视觉节奏。

格斯特纳网格

复杂的产品通常需要不同的网格策略。格斯特纳网格 为设计师提供更多的自由,并允许创作更多动态的作品。要创建节奏,您可以更改列和排水沟的数量并操纵它们的大小。

算法网格

从外部的角度来看,算法网格看起来很混乱,不遵守任何规则。然而,这些网格依赖于设计团队内部的协议,这些协议规定了各种元素的对齐方式。例如,设计师可以同意所有图像都“吸引”到这条垂直引导线,并且不遵循任何其他网格规则。有点这种仓促的方法可以帮助创造一些真正非凡的和非传统的东西。

本文内容为转载

相关文章

  • 设计构成——合成网格

    网格很棘手,即使是最有经验的设计师也会吓坏。所以坐下来,深呼吸,让我们一起学习构图网格,做出周到、有条理和令人瞠目...

  • 设计构成——应用合成网格

    引用加拿大设计师、排版师、艺术家、插画家和作家玛丽安·班杰斯的话,“设计和排版就像一套剪裁得体的西装。”构图网格可...

  • 29-(grid)网格布局

    网格线(Grid Line) 构成网格结构的分界线。它们既可以是垂直的(“列网格线(column grid lin...

  • 网格设计基础

    一.什么是网格设计? 网格设计是在书页上按照预先确定好的格子来分配文字和图片的一种版面设计方法。 网格设计以理性为...

  • 网格系统(grid)

    网格系统代码网格系统测试代码 1.思路 使用row.vue和col.vue构成网格系统的基础部分 两单文件所需要的...

  • 什么是栅格系统

    一、概念 1、栅格系统(grid systems),也叫“网格系统”。栅格设计系统(又称网格设计系统、标准尺寸系统...

  • CSS 响应设计-网格视图

    什么是网格视图?很多网页都是基于网格设计的,这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向...

  • 学会网格设计的5种类型,快速提升工作效率!

    大家好,我是Clippp。今天为大家带来的文章是「网格」设计。网格是一个方便好用的设计方法,一起来看看什么是网格,...

  • 平面设计中的网格系统

    为什么要建立这样的网格系统,怎样在网格系统的帮助下快速解决设计中的问题,使设计更具功能性、逻辑性和视觉美感。网格系...

  • CSS Grid 二维网格结构布局

    CSS Grid 网格布局可以将包裹元素任意组合成不同的网格,进而快速、便捷的对页面结构进行布局,提高工作效率。当...

网友评论

      本文标题:设计构成——合成网格

      本文链接:https://www.haomeiwen.com/subject/dhaesrtx.html