外殼包住面板、底槽裝入選取片時,精細感常出現在幾個像素的交界。窄縫是否連續、轉角是否接得上,以及文字是否仍有自己的留白,要分開量。
以下先處理容器的距離與曲線,再縮小到分段控制器、共用接縫與進度槽。同一套判斷能跨尺度使用,數值卻必須回到各自的內容。
本文由原篇重編並擴充。試樣數值代表當時條件,並非所有介面的固定規格;系列脈絡與工具入口見 總論。
包覆與轉角
窄縫與內容留白分開量
包覆感有兩種內距(padding):外殼到面板的窄縫,以及面板到內容的留白。這裡分別是 8 px 與 24 px。前者決定接縫有多緊,後者讓標題和資訊列舒展地排列。
外側 ring 不占版面空間。面板仍放在 8 px 的排版內距上,0.5 px ring 向外畫進窄縫,所以直邊處實際露出的外殼約為 7.5 px;內容的 24 px 則從面板表面邊界起算,沒有再扣一層實體邊框。

圓角跟著同一圈距離走
這個等距例子的巢狀圓角(nested radii)是 R24、8 px 內距與 R16。兩個表面的圓心重合,窄縫轉過角落時便能維持連續。這個相減關係限於圖中的等距、沒有實體邊框的幾何,不必當成所有容器的固定公式。
面板向外畫 0.5 px ring,繪製外緣的半徑是 R16.5;表面本身仍是 R16,內容也從原本的表面邊界起算。量排版與看繪製範圍時,要分清楚正在看哪一條邊。

讓彎曲程度也接回直邊
半徑決定轉角佔多大,接點還有另一件事值得看:直邊進入曲線時,彎曲程度如何改變。圓弧可以與直線相切(tangent continuity),方向接得上,但直邊的曲率是零,一進入圓弧就換成固定的彎曲程度。
曲率連續(curvature continuity)進一步處理這個變化。圖右的三次貝茲曲線在接點把曲率降到零,讓彎曲程度接回直邊。兩邊固定相同外接尺寸、填色、筆畫與 32 px 角落範圍,觀察的只有轉角曲線。

這個 32 px 在兩邊代表的意義不同:左側是 R32 圓弧,右側只表示曲線從哪裡開始轉彎,沒有單一圓心與固定半徑。右側是本試樣的簡化貝茲模型,若要放進巢狀容器,內外曲線之間的窄縫需要重新檢查,不能直接沿用圓形半徑相減的關係。

我會把它放回整個輪廓看。這組右側雖然接得連續,彎曲也更集中,外觀比圓弧更方;是否合適,仍要配合比例、留白和相鄰元件判斷。這裡用它拆解接點,最後的完整工作區仍保留原本的圓弧轉角。
嵌入的零件
底槽與選取片一起成立
分段控制器(segmented control)的底槽保持連續,白色選取片則用自己的 ring 與短影指出目前位置。這組試樣讓底槽只有很淡的內陰影,白片沿用表面篇的輪廓與兩層深度,不再另加內緣光。
底槽 R14、內距 4 px,選取片 R10。和大面板一樣,4 px 是排版距離,0.5 px ring 向外畫後,直邊處露出的灰底約為 3.5 px。我喜歡這種裝入零件的感覺,但不需要把選取片墊得很高。

同一組操作,只留一道接縫
共用接縫(shared seam)用一個外形包住日期與箭頭,內部只放一道 1 px 分隔線,避免兩個獨立輪廓在相接處疊深。這條線從框體上下各退 8 px,端點略圓;它只分開操作區,不必一路頂到外框。

進度槽也有包覆關係
淺槽(recessed track)把同樣的關係縮小:高 6 px、R3 的外槽,留 1 px 內距,放入高 4 px、R2 的填色。75% 依扣除內距後的可用寬度計算,端點周圍仍保留一圈底色。

這裡只在槽的內側上緣留短暗影,填色上緣保留很弱的材質亮度。它的作用局限在幾個像素的零件裡,不沿用成所有實心面板的白色內光。
容器與零件接得自然,靠的是距離、曲率與內容空間一起成立。套用這些取值前,先看實際可見的縫隙,再檢查文字、操作範圍和不同尺寸;幾何一致不應以壓縮內容為代價。
