外殼包住面板、底槽裝入選取片時,精細感常出現在幾個像素的交界。窄縫是否連續、轉角是否接得上,以及文字是否仍有自己的留白,要分開量。

以下先處理容器的距離與曲線,再縮小到分段控制器、共用接縫與進度槽。同一套判斷能跨尺度使用,數值卻必須回到各自的內容。

本文由原篇重編並擴充。試樣數值代表當時條件,並非所有介面的固定規格;系列脈絡與工具入口見 總論。

包覆與轉角

窄縫與內容留白分開量

包覆感有兩種內距(padding):外殼到面板的窄縫,以及面板到內容的留白。這裡分別是 8 px 與 24 px。前者決定接縫有多緊,後者讓標題和資訊列舒展地排列。

外側 ring 不占版面空間。面板仍放在 8 px 的排版內距上,0.5 px ring 向外畫進窄縫,所以直邊處實際露出的外殼約為 7.5 px;內容的 24 px 則從面板表面邊界起算,沒有再扣一層實體邊框。

資訊面板放大兩倍,尺寸線分別量測外殼到面板表面的八像素排版內距,以及面板表面到內容的二十四像素留白。
8 px 是排版距離。外側 ring 畫進縫裡,內容留白仍獨立保留。

圓角跟著同一圈距離走

這個等距例子的巢狀圓角(nested radii)是 R24、8 px 內距與 R16。兩個表面的圓心重合,窄縫轉過角落時便能維持連續。這個相減關係限於圖中的等距、沒有實體邊框的幾何,不必當成所有容器的固定公式。

面板向外畫 0.5 px ring,繪製外緣的半徑是 R16.5;表面本身仍是 R16,內容也從原本的表面邊界起算。量排版與看繪製範圍時,要分清楚正在看哪一條邊。

轉角放大六倍,R24 外殼與 R16 面板的圓弧共用圓心,另以淡虛線標示向外零點五像素 ring 的 R16.5 繪製外緣。
24 − 8 = 16。Ring 改變繪製範圍,沒有改變面板尺寸或內容起點。

讓彎曲程度也接回直邊

半徑決定轉角佔多大,接點還有另一件事值得看:直邊進入曲線時,彎曲程度如何改變。圓弧可以與直線相切(tangent continuity),方向接得上,但直邊的曲率是零,一進入圓弧就換成固定的彎曲程度。

曲率連續(curvature continuity)進一步處理這個變化。圖右的三次貝茲曲線在接點把曲率降到零,讓彎曲程度接回直邊。兩邊固定相同外接尺寸、填色、筆畫與 32 px 角落範圍,觀察的只有轉角曲線。

淺色卡片比較圓弧與曲率連續的貝茲轉角,下方放大六倍,輔助線指出共同的直邊接點,右側曲率在接點降到零。
方向接得上之後,還可以看彎曲程度如何接合。兩邊的角落範圍同為 32 px。

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

暗色卡片比較相同角落範圍的圓弧與連續曲率轉角,外形尺寸和筆畫不變,放大圖顯示兩種曲線在接點附近的差異。
曲率接得連續,形狀也可能更方正;接法與造型喜好要一起判斷。

我會把它放回整個輪廓看。這組右側雖然接得連續,彎曲也更集中,外觀比圓弧更方;是否合適,仍要配合比例、留白和相鄰元件判斷。這裡用它拆解接點,最後的完整工作區仍保留原本的圓弧轉角。

嵌入的零件

底槽與選取片一起成立

分段控制器(segmented control)的底槽保持連續,白色選取片則用自己的 ring 與短影指出目前位置。這組試樣讓底槽只有很淡的內陰影,白片沿用表面篇的輪廓與兩層深度,不再另加內緣光。

底槽 R14、內距 4 px,選取片 R10。和大面板一樣,4 px 是排版距離,0.5 px ring 向外畫後,直邊處露出的灰底約為 3.5 px。我喜歡這種裝入零件的感覺,但不需要把選取片墊得很高。

三段控制器放大兩倍,白色 Library 選取片嵌在淡灰底槽,引線標示細 ring、柔影與四像素排版內距,下方附層次剖面示意。
底槽與白片一起決定窄縫。下方剖面只表示層次,不代表實際高度。

同一組操作,只留一道接縫

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

日期與箭頭操作放大三倍,共用完整的外側 ring,內部只有一道一像素分隔線,尺寸線標示從框體上緣退八像素。
外形共用,內部只分一次。端點留下空間,接縫便不會變成一堵牆。

進度槽也有包覆關係

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

百分之七十五進度條放大四倍,六像素高 R3 的淺槽包住四像素高 R2 的填色,兩者間留一像素。
槽、填色與端點一起完成。右側百分比固定寬度,數值變動也不推擠整列。

這裡只在槽的內側上緣留短暗影,填色上緣保留很弱的材質亮度。它的作用局限在幾個像素的零件裡,不沿用成所有實心面板的白色內光。

容器與零件接得自然,靠的是距離、曲率與內容空間一起成立。套用這些取值前,先看實際可見的縫隙,再檢查文字、操作範圍和不同尺寸;幾何一致不應以壓縮內容為代價。