单位 7 / 11

布局和组合:布局、网格和视觉层次结构

收益:

  • 能够利用视觉层次、对齐、网格、间距和焦点原则创建有用的布局
  • 制作带有文本空间的视觉效果,并在设计程序中制作可编辑的文本和精确的位置
  • 能够通过应用安全区域和打印出血等格式规则来防止剪裁和报废的风险

美丽的图像和有效的设计之间的区别通常在于布局:元素在页面内的放置。布局决定了人们在海报上首先看到的位置、文字是否在社交媒体卡片上引人注目,以及信息在小册子中的流动方式。在本单元中,我们将学习组合原理(将元素排列为一个整体)以及人工智能在此过程中的帮助和限制。关键事实:人工智能产生视觉效果,但精确的布局掌握在设计程序中的设计师手中。

为什么AI不能单独做布局?

人工智能产生整体“好看”的图像;但设计的布局需要像素精度、可编辑文本、对齐和一致的间距。您无法移动文本、精确对齐徽标或测量 AI 生成的图像中的边距。所以专业流程是这样的:用人工智能生成背景/视觉元素,在设计程序中设置布局(文本、徽标、对齐)。 AI为您提供原材料和构图创意;确切的位置由您决定。

构成的基本原则

  • 视觉层次结构:按重要性顺序排列元素。眼睛首先会看到最大/对比的元素。建立标题 > 副标题 > 正文 > 详细信息的顺序。
  • 对齐:按照不可见的线排列元素;它可以防止混乱并给人一种秩序感。
  • 网格:将页面划分为不可见的列和行的系统;确保物品放置的一致性。
  • Whitespace(负空间):元素之间的空白空间;它让设计能够“呼吸”并且具有可读性。空间小=狭窄且业余。
  • 平衡:视觉重量的分配;它可以是对称的(安静的)或不对称的(动态的)。
  • 对比:通过大小、颜色或厚度的差异来引导注意力。
  • 焦点:视线首先到达的地方;必须有意识地设计。
提示:创建图像时,请在提示时说“为文本留出空间”(例如“顶部三分之一是空白,纯文本”)。这样,以后向 AI 视觉添加文本时就不会卡住,并且可以建立层次结构。

逐步设置布局

  1. 确定目的:这个设计应该做什么? (公告、销售、信息)。确定优先顺序。
  2. 内容清单:标题、替代文本、图像、徽标、调用(按钮/CTA)是什么?
  3. 建立层次结构:将最重要的元素放在最强的位置和尺寸中。
  4. 选择网格:确定要对齐元素的列结构。
  5. 使用 AI 生成图像:生成具有适当比例的背景/元素,并留有文本空间。
  6. 设计程序中对齐:对齐文本、徽标、呼叫;设置空格。
  7. 测试:放大,从远处看,检查眼睛首先看向哪里。

引导视线的实用技巧

构图实际上是引导视线的艺术。观看者的目光不会随意游移;它遵循某些标志,优秀的设计师有意识地使用它们。首先是尺寸和对比度:最大和最具对比性的元素首先吸引眼球,所以把最重要的信息放在那里。第二个是引导线:图像中的自然线(路径、手臂的范围、桌子的边缘)将眼睛引导到某个点;将产品或标题放在这些行的末尾可以增加效果。第三,强调空间:元素周围的大空白使该元素脱颖而出——一个单词单独出现在拥挤的页面上是强大的。第四,阅读方向:在大多数文化中,视线从左上到右下以“Z”或“F”模式移动;因此,将徽标放在左上角,将呼叫(按钮)放在右下角,可以创建直观的流程。在用AI制作背景时,你可以将这些技巧带入你的提示中:“从左下到右上的构图”或“中心单个元素,周围空间广阔”等。这样,图像不仅变得美丽,而且成为以正确的顺序传达信息的工具。

格式——特别注意

每个媒体都有自己的规则:Instagram 帖子 1:1 或 4:5,故事 9:16,网页横幅 16:9。安全区的概念很重要:将重要元素保留在边缘,这样它们就不会被剪裁或位于界面元素(故事中的个人资料、按钮)之下。在打印时,需要出血:将设计从边缘延伸一点,以避免切割边距中出现白线。

三个迷你箱子

案例 1 — 透气设计。一位设计师的竞选卡片很拥挤;标题、文字和标志混在一起。他复制了“顶部三分之一为空”的图像,并将文本按层次结构放置在该空间中。测试组的点击率显着提高; “清晰”的反馈来了。

情况 2 — 安全区域错误。在故事设计中,重要的口号在底部;它隐藏在广播中的“滚动”按钮下方,没有出现。根据安全区规则,标语被放置在上方和中间。在随后的活动中,信息很明确,无需重新设计。

情况 3 — 打印出血。一本小册子是在没有出血的情况下印刷的;边缘出现细白线,300 件报废(损失约 1,200 TL)。接下来的工作在设计中添加了 3mm 出血;切口干净了。

可复制模板

1) 为文本生成间隔背景:

为[媒体]设计生成背景图像。比例:[1:1 / 9:16 / 16:9]。保持顶部三分之一简单且空白(作为标题)。品牌基调:[形容词]。放置清晰的文字/徽标。颜色与调色板匹配:[颜色]。

2)层次规划:

为以下设计创建视觉层次结构计划。目的:[公告/销售/信息]。元素:[标题、替代文本、图像、徽标、标注]。为每个元素指定重要性顺序、建议位置和相对大小。描述眼睛将遵循的路径(焦点→次要)。

3) 网格和对齐建议:

为以下内容建议一个简单的网格和对齐方案:[内容列表],比率[x]。我应该使用多少列,应该如何对齐元素,应该留出多少空间(边距)?保持简单和平衡。

4)布局控制:

从构图方面评估以下设计陈述:层次是否清晰、对齐是否一致、是否有足够的留白、是否适合安全空间、焦点是否清晰?回复作为建议。说明:[粘贴]

弱提示/强提示

弱:制作一个折扣横幅图像并说 50%。

结果:AI写入损坏的“50%”,元素随机排列,无法编辑文本;不能使用。

功能强大:为销售活动制作背景图像:4:5 比例、温暖而充满活力的色调、左上方用于放置文字的大面积纯色空间、右下角用于放置产品。放置可读文本;我将在设计程序中对齐标题、“50%”信息和按钮。

结果是:一个可编辑的、分层的背景,为文本留出了空间。

区别:强方法将文本与AI分开,规划间距和比例,并将布局留给设计师。

组成原理表

原则

提供什么

实用技巧

等级制度

阅读顺序

让最重要的成为最大/对比

对准

秩序感

排列看不见的线

网格

一致性

使用立柱系统

空间

可读性

压缩、释放呼吸

安全区

不剪裁

将物品从边缘放入

出血

干净的印刷

它的边缘有 3 毫米

常见错误

  • 将文本打印到 AI:损坏的、不可编辑的文本;在设计程序中添加文本。
  • 不留任何空间:狭窄、业余的设计。
  • 没有层次:所有东西的大小都相同;眼睛不知道往哪里看。
  • 忘记安全区域:重要元素卡在界面或剪辑下。
  • 跳边:打印时出现边缘发白和废边。

综上所述

布局是对元素的有意放置,并将图像转化为可行的设计。层次、对齐、网格、空间、平衡和对比是基本原则。 AI产生背景和视觉元素,给出构图思路;但像素精确的布局、可编辑的文本和对齐方式都由设计师在设计程序中掌握。允许文本空间、安全空间和打印出血是决定输出可用性的经验法则。

应用任务

选择媒介和目的(例如 Instagram 销售帖子)。进行内容清单,制定层次结构计划。使用 AI 生成比例正确的背景,并为文本留出空间。然后将标题、替代文本、徽标和标注对齐并放置在设计程序中(或作为纸上的草图)。通过放大并从远处观察并记下它来测试眼睛首先关注的位置。

清单

  • [ ] 我确定了目的和内容清单。
  • [ ] 我制定了一个视觉层次计划。
  • [ ] 我生成了带有文本空间和正确比例的图像。
  • [ ] 我在设计程序中对齐了文本和元素。
  • [ ] 我观察了安全区域和出血边距(如果正在打印)。
  • [ ] 我把它缩小并测试了焦点。