歡迎來到數位設計的世界！

你好！在本章中，我們將深入探討數位設計：圖形與排版。試想一下你平時使用的應用程式、學校牆上的海報，或是你最喜歡的網站。這些設計背後都有人精心決定了它們的視覺風格、按鈕位置以及顏色運用。這正是你接下來要學習的內容！

完成這些筆記後，你將會了解電腦中的影像運作原理，並學會如何編排元素，讓你的設計看起來既專業又易於閱讀。讓我們開始吧！

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）。
- 角落控制點 = 安全縮放。側邊控制點 = 影像變形！

總結

數位設計的核心在於溝通。無論你是要在位元圖與向量圖之間做選擇，還是決定利用對齊來放置標題，你的目標都是讓資訊對受眾而言既清晰又具吸引力。持續練習這些原則，你的設計能力一定會突飛猛進！