"现在为什么这种不对称很重要?那么它有助于用户理解调整大小和停留在那个地方的东西之间的区别,以及在z内移动的东西。
如果我在z内移动,那就像对称尺度一样,随着距离的增加,两个方面的增长速度也相同。通过不对称地重新调整大小,我们让用户知道OK,内容实际上是在同一z级别。这一动作对他们来说是一个不同的信号。"
(来自Video Paper and Ink : The Materials that Matter)
以上描述是什么意思?
有人可以解释一下吗?
答案 0 :(得分:1)
<强> TL; DR 强>
如果您同时沿x轴和y轴调整大小,那么纸张似乎会靠近您,而不是仅仅增大尺寸。
详细说明:
当某物沿“z”轴移动时,该物体的高度增加了它自身与我们指定为参考曲面点的任意表面之间的距离。
例如,拿一张白纸放在桌子上。上下升高纸张将沿“z”轴移动。
这是材料设计背后的主要理论之一。元素是纸张,用墨水绘制(如先前在同一视频中所述)。那些纸张“搁置”的表面是手机的底部,与纸张的交互将沿着“z”轴移动它们,并且 如果您认为手机内部有很少的纸张可以上下移动,那么它们只能到目前为止(大多数情况下为5-9mm)。像这样:
在视频中的03:40,他说“纸张通常呈现给用户”。这意味着元素始终垂直显示,与屏幕表面成90度角。没有纸张翻转(因为如果纸张实际上是“在手机里面”就不可能),并且通常只有软动画显示纸张稍微转动(通常表示可滚动纸张的末端)。
现在回答你的问题。
由于您的设备中实际上没有真正的纸张,并且它肯定不会沿物理“z”轴移动,您将如何创建对象向上或向下移动的效果?
主要有两种方式,第一种是阴影。在元素下面有阴影的情况下,它会使其外观高于下面的表面,或者比它后面的对象更接近你。它通过使用阴影给它深度。但实际上,像素都处于相同的高度,并且没有实际的物理z轴。
但是,如果你只使用阴影来说明z轴,那就感觉不对了。如果你增加了纸张下方的阴影,它将无法传达它越来越接近你。事实上,它看起来就像它后面的表面正在消失,但纸张停留在完全相同的位置,与你的距离相同。
用于正确说明纸张越来越接近你的第二种方法是调整大小。
回到桌面上的纸张上,如果你直接从上面看它,然后向你移动,你可以看到纸张看起来越来越近,它就越近了。它看起来会更大。在下面的插图中,您可以看到对象沿x轴和y轴都生长了(但似乎只是越来越接近你,而不是物理尺寸更大)。
通过参考您所看到的物体的相对大小来看深度。靠近你的物体看起来更大,而远处的物体看起来更小,无论它们的实际大小如何。
为了使纸张的效果更贴近您,材料使用这两种方法来感知深度。阴影和相对大小。它会略微增加纸张的尺寸,包括高度和宽度,同时在其下面形成阴影。
所以当他说:
现在为什么这种不对称很重要?那么它有助于用户理解调整大小和停留在那个地方的东西之间的区别,以及在z内移动的东西。如果我在z内移动,那就像对称尺度一样,随着距离的增加,两个方面的增长速度也相同。通过不对称地重新调整大小,我们让用户知道OK,内容实际上是在同一z级别。这一运动对他们来说是一个不同的信号。
就像这里:
正方形看起来像是长大了,因为x和y更大,但下面的阴影是相同的。它没有沿z轴移动。
这就是他的意思。如果同时在x轴和y轴(更宽和更高)上调整纸张大小,可能会让人感到困惑,使纸张看起来更接近您,而不仅仅是调整大小。为了消除可能的混淆,并使两者(调整大小和沿z移动)非常清楚,他建议不对称地调整大小,意味着调整x或y而不是两者的大小,或者如果两者都需要扩展,则将它们一个接一个地调整大小。
这只是他们描绘两者的方式,并提出了更好的用户体验。
所有图片和参考数据均来自Google Design网站"What is Material?"上的文章"Elevation and Shadows"。
我希望这能回答你的问题。