共通設計理論教材 / Class LLL

連結、包圍與群組邊界

框住、連到，不等於已說清楚關係

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

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

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

閱讀目標

分開檢查框的範圍與線的端點
說明包圍或連線支持哪一種資訊關係
辨認視覺單位與資料、流程及操作群組的界線

適用條件與學習範圍

一個框或一條線到底提示了什麼？它真的代表共同用途、順序或可共同操作嗎？

先能指出鄰近與外觀相似；可補讀同域的鄰近比較。

能分開描述共同區域與元素連接，依任務選一種線索並說明線的意義，指出僅靠外觀無法保證的資料或操作關係。

不把均勻連接性理論簡化成所有線圖的通用法則，不宣稱外框或連線必然勝過其他線索；網站不模擬軟體群組、容器或真實人類分組。

原理與判斷

外框可以把元素放進同一個有界區域，連線可以讓端點的關係更直接可指認。Palmer 2002回顧把共同區域與元素連接列作分組線索，也討論分組受知覺深度等條件影響；它沒有給本頁票卡一套必然的線索優先順位。另外，1994的均勻連接性理論討論視覺單位如何形成，不只是把任意兩個標籤畫線。本頁以可操作的平面校樣幫你描述關係，沒有重做該研究，也不把理論名稱當成「加線就能保證理解」的理由。要讓框與線服務讀者，還得交代內容與用途。

包圍：邊界要對應要表達的範圍

先關閉相似填色與連線，固定間隔24。選包圍站點，三個橫框各容納同站月票與日票；再選包圍票種，兩個直框改容納跨站的月票或日票。每次只替換外框，文字和位置維持。框不是免費的裝飾：先說它代表同一站、同票種，還是只是背景區域。過多相互競爭的框也可能增加閱讀負擔。線索是否幫到目前任務要實際檢查，本頁不計分。

連結：檢查端點，也要交代關係種類

外框關閉，切換同站連線。每條線的兩端實際接在同列卡片邊緣；本校樣沒有箭頭，不能據此讀成先後順序或因果。這只是把同站兩個選項的關係畫出來。資料圖中的線可能表示依賴、流程、相似或引用，種類需明說；畫線也不等於在軟體中建立共同變形、權限或父子結構。應檢查圖上的關係是否和實際資料、操作一致。

同一畫面有不同層次的群組

開票種外框，再開同站連線，可以同時指出「同票種」與「同站」兩種關係。讀者不必把所有元素強行分成唯一且互斥的一組；先說目前問題要用哪一層。需要更複雜的交叉關係時，另選能清楚表達的布局或文字清單，不用讓線一直增加。換成不同任務文字後，幾何框線仍在，但原本同站或同票種的說法已不適用。這是內容反例：繼續保留框線時，應重寫真實關係或移除沒有理由的裝飾，而不是因為看起來成組就捏造用途。

研究邊界：示意不是知覺測試

作者回顧包含平面投影與知覺深度不同的情況；本頁直立檢視架是美術承載，票卡仍是一份平面示意，不提供雙眼深度刺激，也不重現原研究圖。沒有參與者或任務資料，就不宣稱某線索在所有條件下優先、瞬間或不受注意影響。來源中1994原文目前只核對公開摘要；不由摘要報告樣本、統計或實驗細節。本站活動的判斷終點是能解釋框線用途和限制。

步驟與觀察

只比較框的分組範圍
重設後，在站點框與票種框間切換。分別說出每個框包含哪些卡、支持哪個查找任務；位置與內容不改。
關框，只看連線
選無外框，開同站連線。沿每條線找兩個端點，說清楚為何相關；不要自行加上順序、因果或共同操作的意義。
並列兩種關係
再開票種框。分開描述框與線所表達的關係，而不是猜哪個法則一定贏；若覺得難讀，提出移除哪個線索的理由。
換文字並修正邊界
換不同任務文字，指出框線有哪些解釋失效。決定重寫分類或移除哪些框線，再返回鄰近教材比較不畫框線的替代。

常見問題

把沒有箭頭的線當作流程順序

本校樣只表示同站相關。若產品需要順序，另明確標示方向與語義，並核對真實流程。

同一外框內的東西被認為可以共同操作

視覺包圍不保證軟體群組、權限或資料結構。到實際工具或資料模型核對，不能用此教具代替。

用格式塔名稱代替設計理由

回到具體卡片、框的範圍、線的端點與讀者任務。指出使用這個線索要讓讀者理解哪種關係，以及換內容後的限制。

適用範圍與證據

原教材查核日期：2026-10-23 適用範圍：平面資訊的鄰近、外觀相似、共同區域與連接線索；觀察活動可跨工具使用。來源狀態：S09已讀作者實驗室2002回顧全文中印頁102–105，特別是102的common region／element connectedness及分組層次，103–105的深度、恆常性與理論限制。引用的每篇原始實驗未另逐篇查核。S10只讀1994出版頁公開摘要，未取得訂閱全文；均勻連接性是其理論，不等於任意線圖的語義分組。S08沿已讀詞彙正文。沒有引用樣本量、效果百分比或跨文化必然順序。示意限制：原創虛構六張站點／票種卡及直立檢視架。間隔、重複填色、外框與同列連線可獨立改動；換文字保留視覺設定作反例。單位是校樣座標與邊緣間隔，不是螢幕實測或知覺分群運算。沒有重製原研究圖或雙眼刺激。原生軟體實測：未操作或實測Photoshop、Illustrator、Figma；不是軟體分組、容器或圖層群組功能的模擬。學習成效驗證：未收集真人分組報告、眼動或學習成效。讀者自行描述與插旗不構成研究數據或正確答案。

參考來源

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