資訊可以沿著同一條線排得很整齊，讀者卻仍不知道哪些項目屬於同一組，或一個開關會影響哪裡。構圖需要同時回答「怎麼排」與「有什麼關係」。
我先從共同起點和列高談起，再用設定表單與操作面板拆解分組、說明位置和視覺主次。這些選擇讓空間承擔一部分解釋。
本文由原篇重編並擴充。試樣數值代表當時條件，並非所有介面的固定規格；系列脈絡與工具入口見 總論。
排列與列高
讓資訊沿著共同起點排列
間距節奏（spacing rhythm）來自重複的關係。圖中列高 64 px、圖示與文字間距 12 px、面板內距 24 px；名稱、說明與分隔線共用文字起點，圖示留在自己的區域。表頭則先對齊整組內容的起點，交代欄位範圍。
組內靠近，組間留出停頓
共同起點讓內容整齊，接近性（proximity）則讓人看出關係。這裡兩組導航保留相同的文字、列高與組內 8 px 間距，只把組間距離由 8 px 拉到 24 px。Workspace 和 Personal 的分組因此更容易讀出來。
24 px 是這組內容的停頓，沒有必要套到每一段導航。工作區可以緊密，組別仍要辨認得出；分隔線若需要出現，也應沿著內容起點安排。我會先讓間距承擔關係，再決定哪裡還需要一條線。
同行元件如何維持節奏
一列裡的文字只高 24 px，旁邊的頭像、徽章或控制項卻可能更高。頭像和縮圖有自己的尺寸；按鈕、核取方塊、單選、開關、輸入框與選單，還可能帶著內距或最小操作範圍。先看哪個元件決定了整列高度，才能知道該調整哪一層。
我會分開量三種範圍：布局占用、可見範圍和操作範圍。細線、陰影或焦點輪廓可以畫在外面，並不一定撐高列；實體邊框、內距與元件尺寸則會參與布局。基線對齊決定文字沿哪條線排列，光學對齊判斷可見形狀，垂直節奏（vertical rhythm）關心的則是這些列如何連續排列。
在這組試樣裡，上下各 −6 px margin，讓 36 px 控制項對 flex 列的占用降為 24 px，控制項本身與點擊區仍高 36 px。這種負 margin 補償是實作描述；bleed 則描述元件有控制地伸入周圍留白。Radix 的 ghost button也採用類似處理來抵銷內距。
取值要跟著那個元件和周圍空間走。我會先確認列的用途與密度，選擇合適的尺寸，處理內距和對齊，最後才決定是否補償。可見的頭像過大、文字換成兩行，或觸控需要更大的目標時，就讓列增高或重新排列。單純平移只改變外觀，原來占用的高度仍然存在；外伸的操作範圍也不能蓋住鄰列。
表格與句內內容另看行框
表格常有另一個更直接的調整位置：操作儲存格的內距。這組文字行高 24 px，上下各 8 px，文字列合計 40 px。放進 36 px 控制項後，同樣的上下內距會把列撐到 52 px；只把操作格的上下內距改成 2 px，就能容納原尺寸的控制項，回到 40 px。
原生表格會讓儲存格的內容與對齊參與列高計算，指定 tr 高度也不會把較高的內容縮小。若只把控制項的 margin 扣掉，行框與基線仍可能留下額外空間，不能直接套用前面的 flex 算式。
圖片和圖示若留在句內，要檢查基線下方為下降字母預留的空間；不屬於句子的圖片，可以在獨立槽位裡改用 block。行內 code、上標與原生控制項，也各有自己的字型或行高預設。vertical-align: middle 依周圍字型的基線與 x-height 對齊，並不代表整列的幾何中心。最後仍要回到實際字樣、相鄰行距與鍵盤焦點檢查。
可以在文字與列高研究頁切換五語樣本、深淺主題、行寬和文字大小，也能操作不同元件。研究頁把語法支援、實際量測與光學判斷分開呈現；文字放大或操作範圍需要更多空間時，列會跟著生長。
讓關係可見
框線包住的，應該是同一件事
每個欄位都裝進自己的卡片，畫面會很整齊，卻不一定說清楚它們的關係。這組表單保留相同欄位與順序，左側逐項包框，右側讓通知偏好共用一個區域，帳號資料則留在另一組。邊界因此承擔了分組的工作。
我會先用標題和間距組織內容，再決定是否需要底色或外框。同一個面板不代表裡面的設定一定一起儲存；如果提交範圍不同，按鈕與說明仍要交代清楚。框線一旦暗示了關係，實際行為就不能悄悄違背它。
說明留在需要它的地方
錯誤只出現在表單頂部時，讀者需要把訊息帶回欄位，逐一尋找對象。圖中只改說明的位置：相同的 Email 格式錯誤，一次放在所有欄位上方，一次直接跟在 Email 後面。
就近說明適合解釋局部問題；長表單仍可以在頂部提供錯誤摘要與跳轉入口。兩者的工作不同。實作時，錯誤訊息要與欄位建立程式上的關聯，不能只有視覺靠近；W3C 的表單通知指引同時討論了整體摘要與欄位旁的回饋。
讓重要的資訊先被看見
如果標題、狀態、時間和每個按鈕都同樣醒目，讀者仍要自行判斷先看哪裡。這組審核面板保留相同內容與位置，右側只強調待處理狀態與主要操作，時間與次要操作則退到下一層。
我會依當下任務分配分量，而不是規定整頁永遠只能有一個重點。淡化次要資訊也不等於把文字調到難以閱讀；錯誤、費用或不可逆操作的後果，即使不是主標題，也必須清楚呈現。
控制項靠近它影響的內容
把所有開關集中在右上角，看起來俐落，但使用者可能不清楚每個開關控制哪一組通知。這張圖保留開關的名稱與數量，右側把 Email 和桌面通知的開關各自放回對應列。
位置可以幫助建立對應，文字仍要說清楚作用。如果某個開關影響整個工作區，就放在工作區層級並註明範圍。手機重排時，控制項也應跟著自己的內容移動，而不是因為欄位換行就和另一列靠在一起。
收起細節，留下目前的選擇
進階選項不必永遠攤開，但收起後也不能讓人忘記已套用什麼。這組通知設定把頻率留在主要畫面；展開時可調整安靜時段，收合後仍顯示目前時段。必要條件和錯誤不隨著面板一起消失。
我會把低頻調整放到次層，保留清楚的展開名稱。若每次使用都得展開同一區，通常表示分層選錯了。漸進揭露的重點是依需求安排資訊，不是把畫面縮到最短。
我希望讀者從排列就能看懂關係：哪些內容一起讀、哪個控制影響哪裡，以及現在需要處理什麼。間距、區域與主次先把這些事交代清楚，收合才有助於閱讀，而不只是縮短頁面。