以高度与表面表达层级
别名: 海拔 · 表面 · 阴影层级 · resting elevation
概念解释
Material 把界面看成叠在一张基准面上的表面(surface),层级不靠更粗的描边或更大的字,而靠表面相对基准面的高度(elevation)。卡片、应用栏、菜单、对话框、悬浮按钮停在不同的高度上;高度差表现为阴影(亮色主题)或表面叠色(深色主题)。用户读到的「谁在谁上面」是空间位置,不是装饰轻重。
高度是表面的属性,不是阴影素材的属性。先定这张表面在哪一层,阴影只是那一层在有光源时的可见后果。把阴影当美化滤镜随便加深,等于在平面上假装有高度——叠放顺序、点击穿透和模态遮罩都会和看起来的前后关系对不上。
机制
Material 假定有一个从上方打下的光。表面被抬起时,投影落在它下面的表面上,抬得越高,投影越扩散、越淡,同时表面本身可以略微变亮。休息高度(resting elevation)是组件平时停的层;被拖起、被打开的菜单会暂时升到测量高度,松手后再落回。同一张表面在不同状态改变的是高度,不是换成另一种控件。
深色主题里投影几乎看不见,高度改用表面叠色和遮罩(scrim)来维持前后关系:下层被压暗,上层保持自己的表面色。没有这套替换,深色界面会失去唯一还在工作的层级通道。模态对话框升高并加上遮罩,是因为它必须切断与下层的操作,而不只是「看起来浮着」。两张表面如果被做成相同高度又部分重叠,系统没有依据决定谁接收点击,层级模型在这里会塌掉。
边界
数据可视化、地图和真正的 3D 场景已经有自己的深度通道,再叠一套界面海拔会打架;这类表面应把 Material 高度限制在工具条和弹层,不要给每条折线加投影。印刷感极强的阅读页、刻意扁平的品牌营销页如果全员抬升,页面会变成一堆浮块,高度就不再能编码「这是一张卡片、那是底栏」。电视和远距离界面上的细投影在观看距离下会糊成一圈脏边,需要改用更明确的叠色或描边。跨平台把 iOS 的导航层级和 Material 的海拔当成同一件事会错:前者是栈的父子,后者是 z 轴上的表面——详情页不必比列表更高,对话框才必须更高。
怎么落地
- 给每类表面规定休息高度,并保持全局一致:内容底面最低,卡片与栏居中,菜单与对话框最高;不要按页面情绪临时加减投影。
- 深色主题不要复制亮色的重投影,改用表面叠色加遮罩来维持同一套前后关系。
- 重叠的表面必须有可分辨的高度差;禁止两张同高表面互相盖住可点区域。
- 验证:截掉所有阴影只留叠放顺序,问没见过这个界面的人「哪一层在上面、点这里会点到谁」。判断与高度设定不一致的每一处,都是用装饰在冒充海拔。再在深色主题下重复一次,确认没有投影时前后关系仍然成立。