UIUX – 平面設計基礎

設計時常聽、看到的「親密性」、「對比」、「視覺層級」、「字體排印」，其實不在同一個層次。有些是講人眼的運作方式，有些則是設計師歸納出的經驗，也有的是要達成的結果或專門學科。這篇內容，我把它們分成三層來討論：

一、知覺定律：格式塔原則（Gestalt Principles）

格式塔原則（Gestalt Principles）（又譯完形原則、格式塔心理學），為 20 世紀初由德國心理學家韋特海默（Max Wertheimer）、考夫卡（Kurt Koffka）、柯勒（Wolfgang Köhler）提出，研究「人怎麼把零散的東西看成一個整體」。它描述的是大腦的運作方式，設計師無法違反，只能利用。

• 接近／親密性（Proximity）：距離近的元素會被看成同一組。例如表單的 Label 離輸入框太遠，使用者會對錯欄位。
• 相似性（Similarity）：顏色、形狀、大小相同的元素會被看成同類。例如後台所有可點的連結都用同一種藍。
• 連續性（Continuity）：視線會沿著線條或曲線延伸。例如海報上把課程主題沿著一條路徑排列，就會被讀成「學習順序」。
• 封閉性（Closure）：不完整的形狀，大腦會自動補完。例如只畫一半的圓形 Logo 仍被看成圓。
• 圖地關係（Figure–Ground）：大腦會區分「前景」和「背景」。例如 Modal 加上半透明遮罩（Overlay），前景才跳得出來。
• 共同區域（Common Region）：被同一個外框或底色包住的元素會被看成一組。例如 Card 把圖片、標題、按鈕包在一起。（此原則由 Stephen Palmer 於 1992 年補充提出）
• 共同命運（Common Fate）：一起移動或一起變化的元素會被當成一組。例如拖曳時一起移動的多個選取項目，或同時閃爍的通知。
• 連接性（Uniform Connectedness）：用線連起來的元素，即使顏色、形狀不同，也會被看成一組，而且效果比接近性還強。例如 Stepper 用連接線把步驟串起來。（Stephen Palmer 與 Irvin Rock 於 1994 年提出）
• 簡潔律（Prägnanz）：大腦會用最簡單的方式解讀圖形，這也是格式塔心理學的核心。例如重疊的圓形會被看成「兩個圓」，而不是一個複雜的形狀。

補充：前注意屬性（Pre-attentive Attributes）

格式塔原則講的是「怎麼分組」，前注意屬性講的是「什麼會先被看到」。顏色、大小、方向、形狀、動態這些特徵，大腦在大約 0.2 秒內、還沒刻意去找之前就會注意到。例如一整排灰色圖示中只有一個是紅色的 Badge，不用找就會先看到它。〈UX法則〉裡的雷斯多夫效應，就是利用這個現象。

反過來說，前注意屬性也有上限：一個畫面裡如果有五種顏色都在搶注意力，就沒有一個會特別突出。

二、設計原則（Design Principles）

設計師把知覺定律轉成「所以該怎麼排」的經驗法則。最常見的是設計師 Robin Williams（不是那位演員）在《The Non-Designer’s Design Book》整理的 CRAP 四原則：

CRAP 四原則

原則	說明	例子
對比（Contrast）	不同的東西就要「明顯」不同	主要按鈕用實心藍底、次要按鈕用白底灰框，不要只差一點點
重複（Repetition）	重複使用同樣的顏色、字體、間距，建立一致性	每場工作坊海報都把 QR code 固定放在右下角
對齊（Alignment）	每個元素都應該和另一個元素有視覺上的連結	海報底部資訊區和課程大綱共用同一條左邊界
親密性（Proximity）	相關的放近，不相關的拉開	後台搜尋列把「日期起訖」兩欄放在一起，和「狀態」篩選拉開距離

其他常用原則

• 平衡（Balance）：畫面左右、上下的視覺重量要穩定，可以對稱，也可以不對稱。
• 留白（Whitespace / Negative Space）：留白不是浪費，而是用來分組、製造呼吸感。
• 比例與強調（Scale & Emphasis）：用大小差異製造焦點。一個畫面最好只有一個最大、最重的元素，其他依重要程度遞減。如果每樣東西都很大，就等於沒有重點。
• 韻律（Rhythm）：讓間距與元素規律地重複，例如列表每一列的高度、卡片之間的間距都一樣，讀者的視線就能穩定往下移動。韻律可以看成「重複」套用在空間上的結果。
• 格線與間距系統（Grid & Spacing System）：用欄位系統（如 12 欄）讓元素有共同的對齊依據。間距也一樣要有系統，常見的做法是 8pt 格線：間距只用 4、8、12、16、24、32 這幾個值，不要出現 13px、17px 這種隨手寫的數字。在程式碼裡，這通常會變成一組 spacing token，例如 $space-2: 8px。

注意：親密性同時出現在第一層和第二層。第一層說的是「人眼會把靠近的看成一組」（事實），第二層說的是「所以相關的要放近」（做法）。設計原則本來就是把知覺定律轉成操作方式。

這層只是指南，不是鐵律，可以有意識地打破。例如刻意讓一個元素不對齊，製造張力；但前提是你知道自己在打破什麼。

三、目標與學科（Goals & Disciplines）

視覺層級（Visual Hierarchy）：目標

視覺層級不是一條規則，而是你想達成的結果：讓使用者依照你想要的順序看資訊（先看什麼、再看什麼、什麼可以略過）。

要達成它，就要動用第二層的原則：用對比、比例與強調拉開大小與字重，用親密性分組，用留白隔開區塊。例如後台列表頁：頁標題 → 主要按鈕「新增」→ 表格內容 → 說明文字。

字體排印（Typography）：學科

研究文字怎麼選、怎麼排的專門領域，有自己的一套規則：

• 行高（Line-height）：內文常見約 1.5 倍；標題字比較大，行高可以收到 1.2～1.3 倍。
• 字級比例（Type Scale）：至少分出標題、內文、註解三個明顯不同的大小。相鄰兩級最好有明顯差距，例如 14px 和 15px 幾乎看不出差別。
• 字距（Letter-spacing）：中文內文不宜開太寬，否則會讀成一個字一個字。
• 每行字數（Line Length）：一行太長，讀到行尾時很難找到下一行的開頭。英文常見建議約 45～75 個字元，中文約 30～40 個字。這也是內容區塊要限制最大寬度（max-width）的原因。
• 中英混排：中文和英文、數字之間要不要加半形空格（例如「使用 Next.js 開發」），要全站統一，不要有的加、有的不加。
• 標點符號：中文內容使用全形標點（，。「」：），不要混用半形的逗號和引號。
• 易讀性與可讀性：易讀性（Legibility）指的是單一個字好不好辨認，主要跟字型、字級有關；可讀性（Readability）指的是整段文字讀起來舒不舒服，跟行高、每行字數、段落長度有關。字型選得再好，行太長一樣難讀。

色彩理論（Color Theory）：學科

研究色彩搭配與感知的領域，包含色相、明度、彩度與配色方式（互補色、類比色等）。在網頁上還有可量化的無障礙標準：

項目	WCAG 2.2 AA 標準
一般文字	對比度至少 4.5:1
大字（18pt 以上，或 14pt 以上粗體；約 24px 以上，或 18.7px 以上粗體）	對比度至少 3:1
介面元件與圖形，例如輸入框邊框、圖示（WCAG 2.1 起）	對比度至少 3:1

例如把後台內文調成淡藍灰，看起來清爽，但對比度可能不到 4.5:1，使用者看久了就會很累。

不能只靠顏色傳達資訊（WCAG 1.4.1）：對比度之外，這條更常被違反。例如表單錯誤時只把輸入框邊框變紅，色弱的使用者可能看不出來。應該同時加上圖示或錯誤文字，讓顏色只是輔助。

補充：WCAG 2.2 是目前（2023 年發布）最新的正式版本。新一代的對比度算法 APCA 還在 WCAG 3 草案階段，實務上仍以 WCAG 2.x 的對比度為準。

這一層回答的是：「要達成什麼？用哪個專業領域處理？」

四、三層之間的關係

知覺定律（眼睛怎麼看）→ 設計原則（所以該怎麼排）→ 目標與學科（達成什麼、在哪個領域處理）

以一張工作坊招生海報為例：

1. 定律：人眼會把靠近的資訊看成一組（Proximity）。
2. 原則：所以把「時間、地點」放在一起，和「講師」拉開距離。
3. 目標：觀眾 3 秒內就能找到「什麼時候、在哪裡」，也就是建立清楚的視覺層級。

定律告訴你眼睛怎麼看，原則告訴你該怎麼排，視覺層級是你要的結果，字體排印與色彩是你處理文字與顏色時的專門工具。

五、總覽

層次	性質	包含
第一層：知覺定律	描述事實，無法違反	接近／親密性、相似性、連續性、封閉性、圖地關係、共同區域、共同命運、連接性、簡潔律；前注意屬性
第二層：設計原則	經驗法則，可以有意識地打破	對比、重複、對齊、親密性（CRAP）；平衡、留白、比例與強調、韻律、格線與間距系統
第三層：目標	想達成的結果	視覺層級
第三層：學科	處理它的專業領域	字體排印（行高、字級比例、字距、每行字數、中英混排、標點、易讀性與可讀性）、色彩理論（配色、WCAG 對比度、不只靠顏色傳達資訊）