扁平化设计、材料设计和拟物化的相对优势是什么?

平面设计 网站设计 css
2022-01-25 05:53:53

我一直在查看谷歌关于“材料设计”的指导方针,并且一直在关注它。然而,我也看到很多使用扁平化设计的网站:TwitterCodecademyGitter——这只是其中的一小部分。然后是利用 CSS3 渐变、阴影等和细节图像来设计一个看起来真实的网站(如果我错了,请纠正我,但这不就是拟物化吗?),比如主页对于Twitter 引导程序 2

据我了解,扁平化设计减少了移动流量的负载。

它们各自提供哪些优势(特别是在速度/UX/等方面)?

1个回答

Skeuomorphism是真正的平面设计的对立面谷歌的“Material Design”只是他们对平面设计的具体解释的品牌名称。虽然它仍然是平面设计。“FLat Design”是 Apple 在发布 iOS7 时创造的。它之所以流行是因为它是第一个使用的术语,但如果谷歌首先使用它,它可能很容易被称为“材料设计”。

拟物化的做法是添加视觉元素,如果对象是物理真实的,而不是投影在屏幕上,您会希望看到这些元素。一个例子是阴影和高光。它们存在于现实世界中的所有事物上,但在数字世界中却一无所有。添加这些拟物元素旨在让人类对数字元素更加熟悉。

平面设计与此相反。在“平面设计”中,没有考虑“现实世界”的物理和照明。数字元素是制造出来的,但是设计师希望在制作它们时不关心如果物体是物理的,“现实”会对元素做什么。

引导主页不是拟物化的示例。这是一般平面设计的一个例子。尽管可以说中间的带有嵌入“浮雕”效果的嵌入矩形也是拟物化的。所以也许“混合”可能是最好的描述。

就技术上的优势/劣势而言 - 没有可靠的理由来选择一个而不是另一个。

通常需要高质量、可信的拟物化效果图像。图片自然会增加 HTTP 请求和浏览器加载。如果您放弃图像以支持拟物化 CSS,那么 CSS 可能会非常复杂且庞大。虽然减少图像需要的 HTTP 请求,但带有拟态元素的 CSS 文件的额外大小 (kb) 可能超过 HTTP 请求的减少(从用户的角度来看)。

扁平化设计通常很容易通过基本的 CSS3 实现。如果在平面设计需要图像,那么在拟物化设计中很可能也需要相同的图像。因此,它们在优势/劣势方面相互抵消。扁平设计 CSS 通常不那么复杂且更易于编辑,但并非必须如此。创建具有非常复杂的 CSS 属性的平面设计是完全可能的。大多数平面设计都包含渐变——只是不是基于如果物体是真实的光会做什么的“真实世界”渐变。Apple 的每个 iOS7-8 或 Windows 8 图标都使用渐变。只是非常微妙的渐变,而不是“让它看起来像是突出的”渐变。

归根结底,扁平化设计在技术上比拟物设计更好或更差并没有什么硬道理这一切都归结为设计师的偏好问题。拟物化和扁平化设计都只是设计趋势,没有任何技术推理基础。

这类似于问“红色网站和蓝色网站在技术上哪个更好?” ——除了“随你喜欢”之外没有其他答案。