共通設計理論教材 / Class LLL

構成、比例與空間組織

位置變了，哪些關係跟著改變？

用同一組件移位、改尺度和間隔，觀察平衡、正負空間、分組與閱讀意圖。幾何資料幫你指出變了什麼，觀看目的與必要內容才決定取捨；沒有一個比例或中心位置保證好看。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 14 分鐘

開啟互動教材查看參考來源

閱讀目標

比較平衡形式及觀看目的
分清尺度、相互比例與畫布範圍
指出組件與周圍空間如何互相界定
用對齊和間距說明分組，檢查語義是否支持
區分設計者意圖與實際閱讀，換尺寸及內容重判

適用條件與學習範圍

同樣三個組件，位置、大小與間距怎麼改變它們的關係？想讓誰先被看見，哪些內容仍必須保留？

不需先會任何版面軟體；先說一個觀看目的，能分辨組件與周圍空間。明暗可隨時補讀，不設通關。

能提出至少兩份構成，指出位置、相對大小、留白、對齊或間隔的差異及其目的，並說出一個需重判的條件；不把幾何中心、對稱或特定比例當普遍美感定律。

跨工具觀察理論。原創幾何placeholder不是實際文字閱讀、字型排版或Photoshop執行器；外框聯集／距離／幾何中心不能預測注意力、心理平衡或眼動。語言、內容與觀看任務仍需另驗。

原理與判斷

構成是在同一範圍裡安排組件與空間的關係。把主圖放大，可能強調主體，也可能壓縮必要資訊；把兩塊靠近，可能提示它們相關，也可能造成錯誤分組。Getty的平衡、比例與空間語彙，以及NN/g對相對尺度和接近的討論，可幫你說清楚正在比較什麼，不能直接替每一張作品判分。先說目的，再做兩版，只改一種關係去觀察。幾何讀數可以確定外框向哪移、占多少、相距多遠，卻不能量出每個人的視覺重心或保證閱讀順序。把這些數字當可核對的條件，把自己的觀看當待討論的觀察，會比背固定三分法、黃金比例或全部置中更容易換素材重判。

平衡：分布的感受，不是物理秤重

平衡可從形狀、大小、明暗、色彩、紋理和空間的分布來觀察；相同面積的臉、文字或空白不一定有相同吸引力。「重心」在此是描述感受的比喻，不是把黑色像素乘位置就量出人眼會看哪裡。適合比較某區太擠、另一區太空或主次競爭，先指定要穩定、集中或有張力的目的。本站讀數的幾何面積中心只對外框聯集計平均，不把明暗、語義、文化經驗或視線加權。它可核對組件實際分布，不能當平衡成功指標。終點指出哪個區域讓你感到重或輕、還有什麼原因；若中心相同而感受不同，描述差異，不把感受判錯。依據：Getty平衡、NN/g視覺設計。

對稱、非對稱與放射：形式各有條件

對稱以一條軸兩側的對應安排建立關係；非對稱可讓兩側不同仍形成一種整體分布；放射式圍繞中心展開。它們是可描述的形式，不是對稱必然安靜、非對稱必然有活力或放射必看中心的普遍心理保證。選擇還要看內容、方向、用途及觀眾。外框對稱提案把主圖置中、B與C等大分列下方；內部placeholder及角色仍不同，所以不稱整張內容完全鏡像。左右分區提供另一種安排；三角分布是三塊的幾何例，並非完整放射構圖求解。可在自己的紙上以更多組件試放射形式。終點說清用了哪種對應、想支持什麼，並提出不適合此形式的內容反例。依據：Getty2011、本站原創提案。

尺度與比例：大小要相對誰來說

尺度談一個組件相對整體或其他組件多大；比例談各部分的關係。本站放大選定主圖，寬高一起乘百分比，保原外框長寬關係；主圖和資訊塊的相對份量、剩餘空間都會改變。這不是把成品換列印ppi，也不是增加來源細節。適合想改主次或容納必要內容時比較。大圖可能更突出，也可能吃掉文字和呼吸空間；相同百分比套到另一畫布或內容不能保同樣效果。終點用實際寬高及其他組件說明變了什麼，至少指出一項因此獲得／失去的空間，不把特定比例或三種大小當硬性法則。依據：Getty2011比例、NN/g尺度。

正負空間：不是黑白或正負情緒

正空間可指物件占據的區域，負空間是其周圍及組件間形成的空間；負空間可以是深色、有紋理，也可能形成可辨的形狀。留白不是只有白色，更不是浪費掉的剩餘。需要分隔、讓主體輪廓清楚或容納動線時，都可以主動安排。本站後板用亮區標組件外框聯集，深區標其餘空間；這是明示的幾何簡化，組件內部的圖形孔隙和文字行間沒有在此另做視覺分割。終點能在原圖而非只看遮罩指出周圍空間的形狀、作用及代價；不以留空百分比越大越好，也不把所有真圖都當矩形盒子。依據：Getty空間、本站有限活動。

重疊與邊界：空間數字也要交代算法

兩組件重疊時，外框聯集不把同一像素算兩次；重疊像素另列。本站A先畫、B再畫、C最後畫，後者可遮前者，這不是內容自動避讓。往一邊推到安全邊界或放大後，實際位置可能受8px活動邊界限制，表格會顯現在的中心與外框。適合核對遮擋、必要輪廓及呼吸空間，卻不能把重疊零或不出界當所有作品的唯一目的；有意裁切、疊字或滿版另需自己的內容條件。終點先指出哪份資訊被蓋，再決定接受或回改；幾何不替你知道被遮的真內容是否重要。依據：本站原創模型，圖面遮擋沿既有知識。

對齊：共同邊緣是線索，不是全部都置中

共享左緣、中心線或基準可以讓不同組件有可比較的關係；不代表只有中心對齊才正確。本站選B／C，比它們左緣差及間距，再顯示選定外框的上／左參考線。參考線是觀看輔助，不變成作品中必須印出的內容。適合建立欄位、標題和內容的對應，但若內容長度、書寫方向或語義不同，一味對同一軸可能使關係更難辨。終點說「哪兩塊以哪條邊對齊、為何」，並檢查真正內容；本站placeholder只能驗幾何，不測字偶、基線或實際文字可讀性。依據：NN/g設計元素組織、本站觀察設計。

接近與分組：距離需要支持語義

彼此較近的組件常被當成同組，與其他組留較大間隔可幫助區別；實際理解仍受標籤、共同區域、方向和任務影響。不能把兩個無關的按鈕靠近，就宣稱已建立正確資訊架構。先問B和C真是同一組嗎，再調距離。本站B-C讀數是兩個外框間最短距，重疊／相貼時為0，不是人眼感到的距離。移動B或C可保持／打破左對齊與近接，讀數分開。終點比較相關內距與組外距、說明分組理由；若換手機排列讓原組散開，就重排，不只等比例縮小。依據：Aurora Harley的Proximity及響應式反例。

閱讀方向：標示意圖，不冒充眼動追蹤

設計者可用位置、相對尺度、線索和空間提出先後順序，讀者卻可能依語言、內容熟悉度、尋找任務或興趣走別條路。中文橫排、直排、其他語言方向及混合圖文，不能由一個左上到右下公式全部涵蓋。先給明確觀看任務，再請讀者口述實際先看什麼。本站意圖A→B→C或反向會真正改樣本內1／2／3與外部文字清單；不移位、不改幾何面積。它只是設計者指定的序列，沒有模擬視線或證明讀者會照做。終點分開「我想先讓他看哪裡」和「他實際看哪裡」，若兩者不同，先查線索與目的，不替讀者判錯。依據：Getty觀看方向、NN/g層級，本站有限標記。

換目的、內容與尺寸，再檢查一次

以主圖介紹為目的，與以快速查時間／資訊為目的，可以保同一份內容但採不同安排；縮成小卡又可能需要重排。本站左右分區、對稱和三角只是起點，先口述主圖或資訊哪個重要，再逐項改位置、尺度與間隔提出兩版。沒有自動挑好看的按鈕。 192資料真正重算96／48編碼灰階平均，原生窗口以1CSS像素檢查形狀及序號；小圖可能混掉細線。終點換自己的圖、真文字或另一方向內容，以成品尺寸與必要資訊重新判斷，不能由幾何placeholder清楚就聲稱真海報文字可讀。依據：NN/g響應式近接、本站原創縮小活動。

何時補讀明暗，何時需要工具

如果位置相近卻缺少主次，可以先看明暗及其他差異；如果已決定外框與輪廓，要落到軟體才沿路徑／形狀、文件像素尺寸等控制。工具能執行幾何，不能替作品決定目的，外框數字也不能替色彩、語義和材質判斷。本頁觀察可用紙上剪片或任一繪圖工具重做，沒有指定Photoshop步驟。終點能指出下一問是哪種關係或控制，沿相關知識補讀並返回保原方案；尚未發布的案例不造必要連結。依據：本專案知識分工。

步驟與觀察

說清目的並保一份參考
假設要主圖介紹，或先讓人找到資訊塊。先口述希望哪個優先及哪些不能被遮；左片固定提供比較，不拿對稱／幾何中心作目標答案。
只移一個組件
選A、B或C，用XY、四向按鈕或聚焦微調區按方向鍵。一次改一軸，查看PNG和外框表，指出留空形狀、分布、遮擋和B-C距離哪些改了。
比較尺度與兩份安排
保持目前位置再改選定尺度，核實邊界限制後的實際值；提案起點會改多項，先說差異再選一個變因細調。用兩版說明誰獲得空間、誰讓出，不找普遍比例。
核分組和意圖順序
選B／C，調近接與左緣，說明語義是否屬同組。切意圖順序看序號真改、幾何不變，再自己或與同伴口述實際觀看；不把口述當正式眼動實驗。
看終尺寸、換條件並返回
切96／48原生圖，檢查形狀和必要序號是否仍能辨；用自己的真圖文或不同閱讀方向重判。需要時補讀明暗／向量／尺寸，再返回及reload保目前方案，重設只回本頁參考。

常見問題

全部放中央，仍覺得不平衡

中心相同不代表語義、明暗及視覺份量相同；指出相對誰及目的，做非對稱替代，不靠幾何中心判分。

留白變多，資訊卻更難找

留空也會拆散相關組；比較內外間距、標籤和內容，保必要資訊，不把百分比越高越好。

B-C距0，就以為分組完美

0只表示外框相貼或重疊；查遮擋、語義與真內容，不把幾何值當理解成效。

改尺度後中心位置跟預想不同

本活動保8px安全邊界，表格是實際值；這是模型約束，不是所有構圖不能裁切。退尺度或另比較目的。

標了1／2／3，別人仍先看其他地方

區分設計者意圖和實際閱讀，查內容、任務、語言、明暗及位置，不稱讀者錯或眼動已測。

放大看清楚，縮48後組件與序號混掉

看實際成品尺寸，改尺度／間隔或重排；placeholder不代表真文字可讀，另放真內容測試。

適用範圍與證據

原教材查核日期：2026-10-20 適用範圍：跨工具視覺理論；紙上剪片、圖像或版面草稿皆可觀察，不限定Photoshop／某語言或平台。來源狀態：5份一手教育／方法作者來源已讀；Getty講義2011與當代網頁分開，NN/g發表／review日期照頁列。不複製館藏、網站示例或斷言普遍情緒效果，幾何活動與邊界是本站設計。示意限制：原創三個圖文角色placeholder；同狀態移位／尺度、聯集遮罩／幾何中心／距離／真192→96／48PNG與序號讀數。外框占用是有限簡化，不是實際物件分割或心理重心；意圖序列不是預測眼動。原生軟體實測：未Photoshop、文字排版／字型、實體量測或眼動實測；本頁不提供假PS步驟或通用構圖求解器。學習成效驗證：未真人觀察試用、閱讀順序／辨識或美感成效量測；自己描述／操作與理解標記均不作學習保證。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。