教材目錄 / Class LLL

共通設計理論 教材

從任務、方法與概念開始閱讀，理解選擇的理由、適用條件與限制。每篇提供原教材正文、參考來源與互動入口。

• 明暗、對比與視覺焦點

  明暗區間是全圖的範圍，局部對比是相鄰區域的差異。比較兩個焦點方案，觀察重點如何改變，也檢查增加反差時犧牲了哪些細節；這是跨工具的視覺判斷。

• 色彩屬性、關係與面積

  分開改色相、明暗、強度和面積，觀察同一組色在不同關係中的差異。主輔色與互補只是描述及選擇，不能替代觀看目的、必要辨識或色彩管理；沒有唯一好看比例。

• 構成、比例與空間組織

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

• 線條、紋理與節奏

  同一個外形可以被線條說明，也可以被紋理遮住。比較方向、線距與重複中的變化，再以真正較少的像素檢查目標尺寸；先判斷形體線索和裝飾的取捨，才選用紙幣風格或網點方法。

• 光影、反射與材質線索

  形體轉面、亮帶邊緣、反射內容與背景一起提供材質線索。比較只加反差與重排亮暗帶，找出支持或衝突之處；不是用一個亮點判定金屬，也不是物理渲染。

• 文字、圖像與閱讀層級

  用同一份展覽資訊比較標題與活動資訊兩種層級，再分開改字級字重、行高字距和圖像占位。讀數描述排樣，閱讀障礙仍需自己指出；不是Photoshop文字控制教學或美感評分。

• 觀察描述與設計判斷

  把「右版標題設定較大」「我喜歡右版」「右版讓所有人讀得更快」分開。用同內容校樣比較可見差異、目的與仍待驗證的推論，再提出下一版。

• 單變因比較與情境限制

  兩個方案若同時改字級、字重和位置，就不能只把差異歸給字級。保留共同基準、比較修改清單，換目的與輸出尺度找出原結論的邊界。

• RGB、CMYK與光／墨

  從無光加上通道，與從入射光移除通道，是不同的起點。用理想模型比較方向，再辨認真RGB或CMYK數值還需要色彩空間、紙墨與描述檔；螢幕示意不能代替打樣。

• HSL、Lab與色域

  用同一觀察儀讀取HSL與D50 Lab，區分表示方式、參考白及目標範圍。超出sRGB時不畫假原色；用明示的截斷反例觀察資訊如何失去，不能把它當標準色域映射。

• 同色異底與相鄰關係

  左右中心保持同一組RGB、相同大小與位置，只改右底色。分開描述編碼是否改變和自己的外觀判斷，再縮小或換目的找出限制。

• 色彩適應與觀看條件

  分清畫面情境、觀察者適應、裝置與環境。用同色異底作可控基準，再對照換房間、換裝置或改設定的情境，寫出可判斷與仍缺的證據。

• 色相配色關係與限制

  把色輪關係當作提出候選的方法，保留明暗、強度、面積及用途的檢查。指定同一色輪與控制條件，再用幾何與圖文校樣比較；互補或相鄰不保證和諧、辨識或所有觀眾喜歡。

• 色彩角色、面積與情境

  把顏色分配給基底、支援與需要區別的資訊，再比較面積與換用途的代價。固定比例只可作提案起點；同色票換角色或換成圖文後，仍須重新檢查必要資訊。

• 點線面的角色與尺度

  讓一個矩形只改寬度，再改高度或觀看尺度。先描述尺寸與相對關係，才說它像點、線或面；不把某個像素值當成通用分類門檻。

• 方向、輪廓與正負形

  保持矩形寬高，分開旋轉、描邊和填面。核對哪個是幾何邊界、哪個是紙面剩餘區域；交換形底和縮小作反例，不把黑白互換當成必然知覺反轉。

• 肌理密度與觀看尺度

  固定九條線帶，只改它們的間距或粗細，分開條數、局部聚集與深色覆蓋。再看真正48×32的輸出，說明來源仍九條不等於縮小後人人都能數出九條。

• 重複、變異與視覺節奏

  九條線的數量、平均間距與首末跨度相同，卻可用等距或近遠交替安排。再只加粗中心一條，分清共同規則與局部例外；不以規律換算美感、音樂節拍或眼動速度。

• 鄰近與相似的分組

  固定六張票卡的內容，先只改同列間隔，再以票種重複外觀。用彼此一致或衝突的線索討論資訊關係，不把「看起來同組」當成資料一定同類。

• 連結、包圍與群組邊界

  先固定位置，分別加入按站點的外框、按票種的外框或同站連線。辨認包圍、連接與資訊語義的不同責任，再用換文字反例檢查。

• 圖地轉換與負空間

  兩個著色區域共享曲線。先說自己把哪一區當作形，再交換兩區深淺、換素材與尺度；負空間有自己的邊界與底色，並不等於透明，也沒有必然的反轉答案。

• 閉合、連續與歧義

  固定四角只改缺口，再固定交叉路徑的缺口、只偏移右半。分開實際線段、可能接法與資訊語義，不把閉合或接續當成不容違反的設計規則。

• 視覺重量與重心判斷

  兩形狀面積不變，只改右邊灰階或位置。核對幾何中心，再描述自己的重量感；用相同中心、不同外觀的反例，說明為何不能把十字當視覺平衡分數。

• 對稱、不對稱與動態平衡

  對稱描述元素的相對安排，不是所有作品的品質門檻。不對稱也可以支撐目的；用等面積校樣逐項調整，區分位置鏡像、灰階相同與個人的安定感。

• 相對尺度與比例關係

  保持來源與資訊塊，先只改主圖A的相對尺寸，再改取景範圍。分清形本身長寬比、與其他元素的寬比，以及畫框比例；特定比例只作起點，沒有保證好看的數字。

• 畫面邊界、裁切與張力

  同一份主圖與入口時間，固定物件後改取景寬高或中心。看見真實裁外、保留完整內容對照；外框可見百分比不能冒充訊息保留率，也不能替張力感評分。

• 欄格、模組與基線

  以同一圖文校樣分開切換欄、水平模組及基線；再獨立移動圖像和文字，解釋共同參照與資訊關係。參照不會替你決定閱讀順序，換標題或尺度後仍要重查。

• 幾何對齊與視覺校正

  固定三行文字的共同原點，只移動首行標題。分開記錄數學原點與自己的可見齊邊判斷，再換HHHH或縮小，避免把任選偏移套成所有字體與長文的規則。

• 留白與關係間距

  固定三組站點時間與集合說明，分開改組內、組間距，檢查它們正在提示哪種關係。換查找目的與窄容器，再說明為什麼留白不能一律增加或固定8px倍數。

• 密度、節奏與版面呼吸

  固定文字與字級，只改組內距、組間距和300／180容器，觀察換行、占高與查找任務。討論密度與節奏的代價，不把空白比例或「呼吸」當客觀品質分數。

• 字形結構與中西文差異

  區分字級設定、字形輪廓、基線與本次字形外框。用x、H、g及國、永、口比較同字級的形狀與留白，知道拉丁x-height不能代替中文字面的描述。

• 字重、字寬與視覺尺寸

  把原生字重、設定字級、字寬設計與外部變形分開。比較真實wght、400字形的外描邊及水平壓縮反例；較粗或較窄不是可讀性與美感保證。

• 字體分類、語氣與用途

  用筆畫、端點、比例與用途描述字體，分清形態分類、風格印象與實際任務。兩套sans-serif也有不同字樣；語氣是帶條件的觀察，不是看到某類字就必然產生的心理效果。

• 字體搭配、覆蓋與授權

  把標題與正文字體分工、實際字集、回退與使用權利分開檢查。用有限的本地字體案例辨認Manrope 拉丁文與Noto繁中補位，查到實際套件與完整授權，避免用同類字或免費標籤取代驗證。

• 中文標點、禁則與標點擠壓

  從同一段繁中原文檢查行首、行尾與連續標點；區分斷點、字寬和字形。用真瀏覽器排樣比較，保留出版地區與草案狀態，不把標點一律縮窄當成完成禁則。

• 中西混排、數字與單位

  比較同一段混排文的英數字體、相鄰字距與量值不拆行。分清資料空格與顯示間距、中文出版慣例與SI量值寫法，避免把每個英數片段都一律加空格。

• 行長、字距與行距

  固定原文、字體與字級，分別改容器、字距和CSS行高。從實際斷行與高度說明取捨，分清行盒高度、字框間空白和字形墨跡，不把單一行長或倍數當所有語言最佳值。

• 段落、標題與長文節奏

  在同一原創文章中分別調整同節段落間隔與下一節標題前距，保留文字與語義順序。從段內、段間到節的關係描述取捨，區分捲動文章與印刷分頁的孤行問題。

• 強調、競爭與注意線索

  用同一活動資訊，分開比較標題字重、字級與資訊提案。先指出相對差異，再說它服務的任務；強調是一種安排，不能從滑桿算出每個人的第一眼。

• 掃讀、閱讀與資訊優先序

  先找時間地點，再完整讀展覽介紹；用同內容的兩種主次比較障礙。分開作者希望的順序、語義讀序與自己的查找，不把F形或Z形示意畫成本站眼動證據。

• 圖像、標題與說明的分工

  固定同一張圓與線的原創圖，只換標題或說明；分清圖形能呈現什麼、時間地點由誰提供。再把它當觀察對象、裝飾或操作入口，檢查實際替代文字與動作。

• 符號、隱喻與文化脈絡

  本活動把同一抽象圖放到不同標題與用途，區分可見形狀、作者約定與自己的聯想。必要操作與集合資訊用文字確認，不宣稱圓形、色彩或圖示具有跨文化固定意思。

• 資料型態與視覺通道

  以同一組10、20、40分鐘切位置、長度及圓面積，對照原始表。再把問題換成辨認站名與服務等級，指出數量大小不能回答哪些問題。

• 類別、順序與色彩編碼

  同一組三站資料，分別用顏色表示站名、等級、分鐘或相對20分鐘差值。逐一核對圖例、標籤與原表；拿掉色彩後資訊仍可讀，不把色盲篩選當認證。

• 基準、尺度與比較

  固定五站合成記錄，切0–40與10–40的尺，再把分鐘換秒。核對平均20／30的真值比、條長比與圖外零值，區分資料變化、單位轉換和呈現反例。

• 不確定性、缺值與圖表誠實

  平均點之外，顯示已列三筆的最小至最大；明說它不是95%CI或下一次保證。並列未收集、保密與三筆0，切掉缺件說明作反例，核對同一原表。

• 時間、停留與視覺節奏

  在同一條路徑上，只改中點停留0／800毫秒，核對位移、移動時間與總時長。播放、暫停、100毫秒取樣及靜態分鏡互相核對，不把停留當成閱讀理解保證。

• 重複、錯落與動作時序

  固定三件同路徑、同移動與停留，只比較同時或每件隔300毫秒啟動。以時序表、播放與靜態取樣分清同時、先後、重疊與整組完成，換任務限制錯落方案。

• 速度、加減速與緩動

  固定30到270與1600毫秒，比較等速及二次in／out／inOut；用同一時刻的位置、當前速率與時間進度圖核對，再改時長及固定速率任務檢查限制。

• 轉場、物件恆存與方向感

  固定清單票A與詳情位置，對比保留中間位置與半程直接切換，反向返回並保留來源文字。再把目的換票B，辨認幾何連續不等於資料身分相同。

• 遮擋、相對尺度與深度

  用兩張已知方片比較尺寸與不透明遮擋；再讓遠片實體變大，或只改二維畫序。分清眼前能看到的線索、模型已知座標與仍未知的真實距離。

• 透視、投影與視點

  用明示的針孔與正交式子，固定座標只換投影，再水平移動相機。分清視點、投影尺度與圖面縮放，並把機構的軸測外觀和片內相機模型分開。

• 明暗、投影與形體

  保持輪廓與亮帶設定，只換側向明暗及示意投影，再關閉外投影。把表面明暗、接觸暗帶、投影與物體高度分開，最後用折面片與縮圖反查解讀。

• 粗糙、反射與環境線索

  固定形體、光向與投影，只改反射帶寬或環境索引。用同一台機構看見外觀的多義性，區分物理粗糙機制、圖像亮帶參數與讀者自己的材質解讀。

• 色彩、形狀與文字冗餘

  同三筆狀態資料比較只用顏色與加入形狀、文字，再逐項移除線索。分清可見的替代線索、輔助科技名稱與完整資料；形狀不是放上去就能保證所有尺寸與情境都可辨。

• 對比、背景與狀態辨識

  使用同一清單切白底／深底與色票，依實際指定sRGB色計算相對亮度與對比。一般文字4.5:1、必要非文字3:1的用途分開；達到一個色對門檻，不保證狀態語義或全站可用。

• 文字放大、重排與閱讀順序

  把真HTML正文從18放大到36px，再分開縮窄容器，檢查原文、功能與原生順序是否仍完整。分清設計稿視覺、程式可判定結構與焦點路徑；200%文字示範不是整站符合性測試。

• 圖像說明、動態替代與多通道

  讓同一原創路線的圖解、完整文字與手動靜態步驟傳達同一指示，改道時一起更新。替代文字依用途決定，停止位移仍要保留必要先後；不把靜態圖當所有影音的完整替代。

• 依目的比較兩個方案

  同一活動資訊，先認名稱與先找時間可能需要不同層級。保留兩版、核對共同條件，寫出可指出的差異與目的；把個人偏好、設計提案和已證明成效分開。

• 反例、取捨與修改理由

  不是找到一個反例就否定整個設計，而是收窄結論適用的條件。用同校樣換尺度、目的與變因清單，寫出目前選擇、代價及下一輪驗證方法。

• 設計史脈絡與形式語彙

  用包浩斯課程與新藝術的兩組館方論述，練習把形式、時地和史料分開。自繪線條只用來比較，不以一個流派代表全部歷史，也不把相似外觀當作來源證據。

• 風格引用、素材權利與情境

  從自繪對照開始，分開形式參考、外部素材與使用條件。記作者、原始網址、授權版本、修改與用途；權利未核就保留缺口，不以風格名稱、註明來源或選單代替許可。

• 海報：色彩、平衡與訊息目的

  固定同一份虛構活動，分輪交換色彩角色、移動等面積圖形，再比較主題優先與時間地點優先。用縮小與換任務說出犧牲的資訊，沿唯一理論補讀後保留自己的方案。

• 編排：中文、圖文與版面重排

  用同一原創虛構活動，分開比較容器、雙欄／隨容器重排、長標題、日期寫法與圖說。全文以真正Noto／Manrope及HTML排樣，逐項觀察斷行與圖文責任，再沿網格、中文混排和圖像教材補讀。

• 動態：連續性與狀態辨識

  以原創票A清單至詳情演練，比較來源連續、成功／錯誤、只色彩與形狀文字冗餘。把800毫秒到達與1600毫秒結果分開，保留靜態序列與完整狀態，不把原型當真服務。

• 空間：平面線索與立體材質

  同一圓拱輪廓，分開開關投影、N片填面、形體灰階、反射圖樣與外部影，再用反畫次序、換環境圖樣及縮小找矛盾。描述線索與限制，沿空間和材質理論補讀後返回自己的方案。