欢迎来到数字设计的世界！

你好！在本章中，我们将深入探讨数字设计：图形与排版。试想一下你平时使用的应用程序、学校墙上的海报，或是你最喜欢的网站。这些设计背后都有人精心决定了它们的视觉风格、按钮位置以及颜色运用。这正是你接下来要学习的内容！

完成这些笔记后，你将会了解计算机中的图像运作原理，并学会如何编排元素，让你的设计看起来既专业又易于阅读。让我们开始吧！

1. 位图与矢量图：制作图像的两种方式

在数字设计中，图像主要分为两种「类型」。了解它们的区别，就像分清楚「画作」与「乐高积木说明书」的不同一样重要。

位图（Raster Graphics / Bitmaps）

想象一幅由无数小方块拼成的巨大马赛克拼贴画。每个小方块都是单一纯色。当你从远处看时，它看起来就像一张美丽的图片。这就是位图（Raster image）。

  • 它是什么：由成千上万个称为像素（Pixels）的小点所组成的图像。
  • 适用场景：复杂的图像，例如拥有丰富色彩渐层的照片。
  • 缺点：如果你试图把它放大，图像会变得很「粗糙」或出现像素化（Pixelated），因为你只是把那些小方块强行放大而已。
  • 常见文件格式：.JPEG, .PNG, .GIF

矢量图（Vector Graphics）

与点状结构不同，矢量图（Vector images）是基于数学路径（直线与形状）绘制的。想象一下两根图钉之间拉着一条橡皮筋。无论你怎么拉动它，线条始终保持平滑。

  • 它是什么：由点、线和曲线构成的图像。
  • 适用场景：标志（Logo）、图标（Icons）和字体（Fonts）。
  • 优点：你可以将它们放大到摩天大楼那么大，或是缩小到邮票那么小，它们都永远不会模糊。
  • 常见文件格式：.SVG, .AI, .EPS

小贴士：如果你不确定手上的是哪种图，试着放大看看！如果你看到了方块，那就是位图；如果线条依然平滑流畅，那就是矢量图。

2. 分辨率：为什么清晰度很重要

分辨率（Resolution）是指图像的细节程度。我们通常使用PPI（每英寸像素，Pixels Per Inch）来衡量。

如果图像分辨率高，代表每一英寸内挤满了许多细小的像素；如果分辨率低，像素则较大且肉眼可见。

黄金法则：
- 网页/屏幕：通常为 72 PPI。由于屏幕显示的精细度不如纸张，因此不需要超大文件。
- 印刷：通常为 300 PPI。纸张需要更多细节才能看起来清晰锐利！

如果起初觉得这些概念有点复杂，别担心！只要记住：高 PPI = 清晰图像；低 PPI = 模糊图像。

3. 色彩的语言：RGB 与 CMYK

计算机和打印机用不同的方式「沟通」色彩。使用错误的色彩模式会让你的设计看起来浑浊或暗沉。

RGB（红、绿、蓝）

这是专为屏幕设计的。你的手机、笔记本电脑和电视透过光线来呈现颜色。当你将红、绿、蓝光以全强度混合时，就会得到白色光。

CMYK（青、洋红、黄、黑）

这是专为印刷设计的。打印机使用的是实体墨水。由于混合墨水的原理与混合光线不同，我们使用这四种颜色来创造页面上的所有色彩。

记忆小帮手：
Really Great Brightness（超棒的亮度） = 屏幕
Can My Yellow Kite（fly）?（我的黄色风筝飞得起来吗？） = 墨水/印刷

4. 排版的四大支柱：C.R.A.P. 原则

别误会，我们不是在说粗话！C.R.A.P. 是一个著名的记忆法，能帮助你记住设计的基本原则。如果你的排版看起来很「杂乱」，请检查以下这四点：

C - 对比（Contrast）

如果两个项目不相同，就让它们变得非常不同。利用对比来凸显重点。例如，在白色背景上使用黑色文字，或是将巨大的标题放在小型内文旁边。
现实范例：白色橱窗上鲜红色的「折扣（Sale）」标志。

R - 重复（Repetition）

在整个设计中重复使用视觉元素，以创造一致感。这可以是使用相同的字体、相同的项目符号样式，或所有标题都使用同一种颜色。这会让设计感觉更「有条理」。

A - 对齐（Alignment）

页面上不应该有随意摆放的元素！每个元素都应该与其他元素建立视觉连接。利用隐形的线来对齐文本框和图片，这会让你的作品看起来整洁且专业。

P - 亲密性（Proximity）

彼此相关的项目应该分组在一起。如果你有一张照片和一段文字说明，将它们紧挨着放置，让读者知道它们属于一组。
类比：想象一间超市。所有的水果都放在一起，所有的乳制品也放在一起。这就是亲密性！

5. 文件格式：该怎么选？

选择正确的文件格式，就像根据穿搭选择合适的鞋子一样重要。

  • .JPEG：适合照片。文件较小，但每次存储都会损失一点点质量。（不支持透明度）。
  • .PNG：适合网页图形。它支持透明度（背景可透视）。
  • .SVG：网站图标和标志的首选，因为它是矢量图，能保持完美锐利。
  • .PDF：「通用」格式。当你想要传送文件给他人，并确保在对方的计算机上看起来与你屏幕上一模一样时，请使用此格式。

6. 应避免的常见错误

1. 随意拉伸图像：绝对不要从侧边的控制点拉伸图片——这会让人物看起来过胖或过瘦！请始终从角落拉伸，以保持正确的比例。

2. 使用过多字体：在一页中使用超过 5 种不同的字体会让人难以阅读。请坚持最多使用 2 到 3 种。

3. 忽略「留白」（White Space）：别觉得必须填满页面的每一寸空间。「留白」（空白处）能让读者的眼睛得到休息。

快速复习箱：
- 位图由像素构成；矢量图由数学运算构成。
- 数字设计使用 RGB，印刷设计使用 CMYK。
- 记住 C.R.A.P.：对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）。
- 角落控制点 = 安全缩放。侧边控制点 = 图像变形！

总结

数字设计的核心在于沟通。无论是你要在位图与矢量图之间做选择，还是决定利用对齐来放置标题，你的目标都是让信息对受众而言既清晰又具吸引力。持续练习这些原则，你的设计能力一定能突飞猛进！