WarmGrayMatteInkMistClaySage
RELIEF · CONTROLS

Four textures, and the controls built from them四档质感,以及用它们做的控件

Relief spends one axis — depth — on meaning. This page shows the whole recipe in four samples, one of which is deliberately the wrong one, then the controls that recipe produces.Relief 把凹凸这一个维度全部花在表意上。这一页先用四个样本摊开整个配方(其中一个是故意做错的),再给出这个配方做出来的控件。

1 · Four textures, one recipe1 · 四档质感,一个配方

The whole style rests on one pair of opposing shadows: light up-left, dark down-right. A block sharing the page's own surface colour then reads as pushed up out of it. Add inset to both and the same block reads as pressed in. Sample A is the near miss — a gradient fill with a single drop shadow, which is claymorphism: with no light edge it always looks stuck onto the page rather than risen out of it.整个风格只靠一对方向相反的阴影:左上放亮、右下放暗。一块和页面同底色的方块,就这样被顶了出来。两道都加 inset,同一块就成了按下去的。A 是那个差一点的做法 —— 渐变填充加一道落影,那是 claymorphism:没有亮的那条边,它永远看着是贴在页面上,不是从页面里长出来的。

A

A · gradient + drop shadow上一版:渐变 + 落影

no light edge — reads as stuck on边缘没有亮面,看着是「贴上去的」

B

B · raised凸起 raised

-9px -9px light +亮 + 9px 9px dark暗

C

C · sunken凹陷 sunken

same two shadows, each with同样两道,各加一个 inset

D

D · relief + thickness浮雕 + 厚度 clay

B plus one outer drop shadow, lifting the block off the groundB 再加一道外落影,把块抬离底面

2 · Controls2 · 控件

A control's background must be exactly the page background. This is the one hard constraint that separates relief from every other style — give a control its own fill and the depth disappears on the spot. The single exception is the accent control: it stands out by colour, and does not ask depth to do the work.控件的底色必须和页面底色一模一样。这是把这个风格和别的风格分开的唯一硬约束 —— 一旦给控件单独填色,凹凸当场消失。唯一的例外是强调色控件:它靠颜色本身跳出来,不要求凹凸去干这个活。

BUTTONS · SWITCH · SLIDER · INPUT · SEGMENTED按钮 · 开关 · 滑块 · 输入框 · 分段
Status tag状态标签
Raised凸起Sunken凹陷Flat平面