外壳包住面板、底槽装入选中片时,精细感常出现在几个像素的交界。窄缝是否连续、转角是否衔接,以及文字是否仍有自己的留白,需要分别测量。

以下先处理容器的距离与曲线,再缩小到分段控件、共用接缝与进度槽。判断方法可以跨尺度使用,数值仍须结合各自的内容。

本文由原篇重编并扩充。样例数值代表当时条件,并非所有界面的固定规格;系列背景与工具入口见 总论。

包覆与转角

窄缝与内容留白分开量

包覆感有两种内边距(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 的填色,两者间留一像素。
槽、填色与端点一起完成。右侧百分比固定宽度,数值变动也不推挤整列。

这里只在槽的内侧上缘留短暗影,填色上缘保留很弱的材质亮度。它的作用局限在几个像素的零件里,不沿用成所有实心面板的白色内光。

容器与零件接得自然,靠的是距离、曲率与内容空间一起成立。套用这些取值前,先看实际可见的缝隙,再检查文字、操作范围和不同尺寸;几何一致不应以压缩内容为代价。