外壳包住面板、底槽装入选中片时,精细感常出现在几个像素的交界。窄缝是否连续、转角是否衔接,以及文字是否仍有自己的留白,需要分别测量。
以下先处理容器的距离与曲线,再缩小到分段控件、共用接缝与进度槽。判断方法可以跨尺度使用,数值仍须结合各自的内容。
本文由原篇重编并扩充。样例数值代表当时条件,并非所有界面的固定规格;系列背景与工具入口见 总论。
包覆与转角
窄缝与内容留白分开量
包覆感有两种内边距(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% 依扣除内边距后的可用宽度计算,端点周围仍保留一圈底色。

这里只在槽的内侧上缘留短暗影,填色上缘保留很弱的材质亮度。它的作用局限在几个像素的零件里,不沿用成所有实心面板的白色内光。
容器与零件接得自然,靠的是距离、曲率与内容空间一起成立。套用这些取值前,先看实际可见的缝隙,再检查文字、操作范围和不同尺寸;几何一致不应以压缩内容为代价。
