如果你曾花时间探索用户界面风格，就会知道关于新拟物化、拟物化与玻璃化孰优孰劣的争论有多激烈。每种风格都有拥趸，随时准备宣布自己的选择是“设计的未来”，老实说，这感觉就像在三种截然不同的个性之间做选择。
有趣的是——这三种风格只要用得其所，都能带来出色的效果。问题在于，设计师们总把它们当作互相敌对的派系，而不是工具。但在本文中，我们将改变这一点。你会清楚地了解每种设计方法在现代界面中的表现，以及如何做出正确的选择。
什么是拟物化设计？
拟物化是一种让数字界面看起来、感觉上像真实世界物体的设计风格。它创造纹理、阴影、高光和微小细节，模仿你在现实生活中实际会触摸到的东西。其核心理念是帮助你瞬间理解某物的运作方式，因为它与你熟悉的东西相似。
拟物化设计的关键要素
逼真纹理： 设计师使用看起来像木材、皮革、金属、纸张或塑料的表面。它模仿真实世界的纹理，赋予界面“物理”触感。
深度与阴影： 一切都具有层次感。按钮凸起。面板凹陷。阴影引导你的视线，让你知道哪里可以点击。
熟悉且易用的设计对象： 数字对象模仿现实生活中的物品——记事本、计算器、开关、刻度盘。只要它在物理世界存在，拟物化设计元素就会复制它。
高光与反射： 闪亮的表面和光影效果使UI元素显得精致且立体。
具象图标： 图标看起来就像它们所代表的东西。垃圾桶图标看起来像一个真正的垃圾桶。相机图标看起来像一台真实的相机。
3个拟物化设计的真实案例
1. Sewing Parts Online
Sewing Parts Online 使用拟物化设计，让整个购物体验对于任何使用过实体缝纫工具包的人来说都倍感熟悉。产品卡片看起来就像钉在真实软木板上的织物样品，这种视觉选择不仅仅是装饰页面。
它帮助用户理解首先应该看哪里，因为每个“被钉住”的物品都略微凸起，并带有柔和的阴影。该网站特别为类别过滤器或线色选择器等高交互区域使用了纹理背景。这在不过度干扰布局的前提下创造了视觉上的区隔。
甚至产品比较表也显示有类似裁缝粉笔的微妙网格线，让用户在比较针脚长度或梭芯尺寸时感受到精确与控制。每一个拟物化的决定都为那些已经了解这些工具实体版本的人们增加了清晰度，使他们的体验更加直观。
2. EXT Cabinets
EXT Cabinets 以非常不同的方式使用拟物化。他们的界面倾向于使用你真正会在橱柜店里找到的材料。每个类别面板的色调会根据所查看的橱柜风格略有变化。
每个门板样品下的阴影都经过校准，使其感觉像一个真实的展厅，因此用户能获得一种深度感，帮助他们比较凸起面板和嵌入式风格。颜色选择器带有柔和的光泽，帮助客户想象光线在成品安装上的反射效果。
目标简单而具体——减少规划阶段的犹豫。拟物化的触点让每一步都像是真实改造项目的早期阶段，因为视觉效果符合他们对物理世界的预期，从而使用户更接近最终决定。
3. Pergola Kits USA
Pergola Kits USA 通过将户外材料作为界面本身的一部分来应用拟物化。他们的配置器是最佳例证。他们将每个控件包裹在看似真实组件的元素中。角度选择器模仿带有微妙斜面的支架，让用户可以精确看到结构接缝对齐的位置。
甚至导航栏也带有淡淡的灰泥纹理，使整个体验就像在规划一个真实的后院项目。这种方法之所以有效，是因为拟物化UI通过将抽象的定制转化为实用且易于遵循的东西，减少了每一步的不确定性。
什么是新拟物化设计？
新拟物化是一种围绕柔和阴影与平滑表面构建的、柔和现代的用户界面趋势。它并非让事物看起来真实或有纹理，而是保持一切极简和轻柔。
元素与背景几乎融为一体，就像它们是由同一种材料塑造而成。它采用柔和的阴影来获得平静统一的视觉效果，没有生硬的边缘或花哨的细节。
新拟物化设计的关键要素
柔和阴影： 在相反两侧的明暗阴影创造出标志性的“凹陷”或“凸出”外观。
平滑、扁平的设计表面： 按钮和卡片看起来像是背景的一部分。这些扁平元素保持界面干净、安静。
低对比度色彩： 设计师使用极简的配色方案和柔和的色调，使阴影突出而又不让布局显得沉重或杂乱。
微妙的深度： 不用大胆的层次，而是融入新拟物化设计元素来实现柔和的过渡，以显示哪些是可点击的。
圆润形状： 大多数元素都有柔和的曲线设计，因为尖锐的边角会破坏平滑的视觉流动。
3个新拟物化设计的真实案例
1. CodaPet
CodaPet 处理的是敏感、情绪化的时刻，因此其UI依靠柔和的表面，这些表面在不妨碍信息传递的前提下显得温和。卡片置于温暖的背景上，带有微妙的凹陷效果，几乎像每个部分都被轻轻地压入了一个垫子。这在内容区块之间创造了清晰的分离，而没有锋利的线条或强烈的对比。
他们的位置搜索栏使用了一个轻微凸起的容器，引导视线而无需侵略性的边框。图标遵循相同的视觉语言，因此没有任何东西感觉突兀或生硬。CodaPet以一种应有的方式使用新拟物化：安静且意图深刻，尤其是在情感舒适度与清晰导航同等重要的情况下。
2. MedicalAlertBuyersGuide
MedicalAlertBuyersGuide 更功能性地应用了新拟物化。他们并非专注于情感基调上的柔和，而是用它来创造一个干净且以设备为中心的界面，呼应现代医疗科技的外观。
他们的对比仪表盘最能体现这一点。每个图块都置于一个几乎凸起的容器中，这立即为购买警报系统的用户建立了熟悉感。评分模块的意图更加明显——评分徽章置于柔和、凹入的圆形内，悬停时有微妙的反应。
对于一个围绕清晰度和信任构建的网站，新拟物化有助于保持一种既易于接近又非常悦目的、临床且精致的感觉。
3. Golf Cart Tire Supply
Golf Cart Tire Supply 通过使用新拟物化来简化一个本可能令人应接不暇的产品目录，将其引向了一个完全不同的方向。产品选择涉及尺寸、负载等级和兼容性等可能让初学者困惑的细节，因此该网站使用新拟物化设计来软化决策过程。
他们的产品图块置于轻微凸起的画布上，使每个型号清晰分离，而无需依赖大胆的分隔线。尺寸选择器使用药丸形状的按钮来帮助查看哪个选项是激活状态，而无需依赖强烈的对比或生硬的轮廓线。这里的新拟物化有助于将技术性的购物体验变得流畅且极其用户友好。
什么是玻璃化设计？
玻璃化是一种围绕看起来像磨砂玻璃的半透明层构建的用户界面风格。你能隐约看到元素后面的任何东西，但它保持足够的模糊以确保可读性。它感觉轻盈而通风。整个设计概念通过透明度而非纹理或阴影来创造深度。
玻璃化设计的关键要素
磨砂透明度： 元素具有模糊但可透视的效果，模仿磨砂玻璃。
明亮但柔和的高光： 柔和的高光帮助“玻璃”表面捕捉光线并突出。
分层深度： 堆叠的半透明卡片在没有厚重边框或阴影的情况下创造分离感。
生动的背景： 图层后面鲜艳的渐变或图像使玻璃效果更加明显。
干净、轻盈的边框： 细轮廓线有助于定义形状，使透明层不会过度融合。
3个玻璃化设计的真实案例
1. BusinessForSale
BusinessForSale 使用玻璃化设计来创造一个开放而平静的浏览体验，尽管该平台处理着成千上万的列表。他们的首页面板放置在图层上，让你能看到下面的地图或类别颜色的暗示，又不会让眼睛感到疲劳。
它为一个否则会感觉密集的网站提供了结构，特别是对于那些想要快速扫描不同行业的买家。他们的列表卡片也帮助用户比较选项，同时不会失去空间感或层次感。当你在大型屏幕上浏览时，分层变得更加有用，因为它防止了界面感觉局促。
2. John Campbell Hilton Head Real Estate Agent
John Campbell Hilton Head Real Estate Agent 的网站使用玻璃化设计，使奢华感变得触手可及，同时又不让界面变成光鲜的干扰。房产详情页有透明的信息块，置于广角客厅或海景照片之上。这让访客在沉浸于图像的同时，仍能阅读规格说明。
这里最大的成功在于他们如何在移动设备上创造深度。界面不是将方框和文本相互堆叠，而是分层且通风，这使得每次滚动都更加流畅和直观。对于一个希望传达信任感和现代专业性的房地产经纪人来说，这种设计风格完美契合了品牌。
3. Rosie
Rosie 将玻璃化设计转化为友好且易于接近的体验。他们的界面使用低模糊度和柔和阴影的柔软表面，因此每个面板都感觉轻微抬起，而非尖锐或高对比度。这有助于将用户的注意力引导到基本要素上。
按钮显示为小巧光滑的芯片，点击时会微妙地变亮，这使得每个操作都显得有意图且令人安心。这是一个微妙的心理学细节，但它之所以有效，是因为整个设计系统始终专注于清晰度和情感上的轻松。这里的玻璃化设计不仅仅是为了美观——它积极地支持那些需要一个温和、无摩擦数字空间的用户。
拟物化 vs 新拟物化 vs 玻璃化：5个差异助你选择正确的UI设计趋势
这三种现代设计趋势 可能看起来在做同样的事情，但它们的表现截然不同。让我们来看看在你选择时真正重要的5个差异。
1. 视觉深度与真实感
拟物化
拟物化设计，也被称为怀旧设计趋势，全力让事物看起来像是真正在你手中。不是以微妙的方式——它想让你看到边缘、曲线、光泽、纹理。
每个元素都有一种“这个物体独立存在”的感觉，因为设计将其视为某种物理实体。深度是明显的。真实感是优先考虑的事项。它是唯一一种细节比形状本身更重要的风格。
新拟物化
新拟物化保留深度但消除了真实感。就像一切都是由同一张板雕刻而成，因此没有任何东西看起来是分离的。深度如此之浅，以至于UI几乎看起来是安静的。没有现实世界的参照。没有纹理。只有柔和的造型，使元素轻微凸起或轻微压入表面。
玻璃化
与老旧或传统设计不同，玻璃化无需构建任何物理实体就能创造深度。全部的深度感来自元素后面的任何东西。那个模糊的背景立即向你展示了图层的顺序。没有纹理。没有雕刻。透明度和模糊完成了所有工作。它感觉有层次，又不会让元素显得沉重。
如何选择正确的设计风格
检查紧密元素之间需要多少视觉分离。有些布局需要非常明显的深度变化。另一些只需要轻微的层次。
观察每个元素需要多大程度上感觉独立。如果你的UI有必须作为“物理对象”突出的组件，你需要一种深度风格，赋予每个组件自己的身份。
决定你愿意暴露多少背景。透明层改变了用户阅读页面的方式，因为它们持续显示下方的内容。
看看你的团队能持续维护多少细节。有些风格需要不断打磨。另一些则以很少的努力就能保持一致。根据维护性来选择，而不仅仅是美观性。
2. 阴影与高光的使用
拟物化
拟物化将阴影和高光视为真实的照明。阴影具有方向性。高光跟随曲线。两者都足够强烈，能够清晰地塑造物体。不，它们不是装饰元素——它们是结构的一部分。UI需要它们，因为没有它们，真实感就会崩溃。
新拟物化
新拟物化像柔软的垫子一样使用阴影。它们是扩散的。它们是微妙的。并且它们出现在两侧——一个亮的和一个暗的——来柔和地塑造表面。高光只是平滑边缘的微妙渐变的一部分。一切都保持受控状态，因此没有任何东西看起来太尖锐。
玻璃化
玻璃化几乎不使用阴影。透明度承载了一切。相反，它使用纤细明亮的边缘来暗示面板有表面。高光围绕在边框周围，以产生磨砂玻璃效果。阴影保持轻盈，这样它们就不会与半透明效果冲突。
如何选择正确的设计风格
决定在低对比度环境中，你的光照提示需要多可见。将风格与你实际需要的光照可靠性相匹配。
观察你的设计组件需要多少形状定义。有些布局依赖光照来定义设计特征的起点和终点。另一些则已经通过间距和颜色拥有了结构。
测试元素堆叠时阴影的行为。你的UI的分层模式会立即告诉你哪种阴影逻辑是可行的。
检查你的高光给布局带来多少亮度。如果你正在为一个克制的调色板做设计，高光强度可以成就或毁掉UI。
3. 调色板与透明度
拟物化
拟物化在很大程度上依赖于颜色，因为只有当物体看起来可信时，这种风格才有效。皮革有特定的范围。金属有特定的光泽。你不能随意选择——物体本身告诉你调色板必须是什么。应用的拟物化设计元素保持不透明，因为整个重点就是让元素感觉坚固。
新拟物化
新拟物化只有在颜色保持极其柔和时才能起作用。你基本上围绕一个背景色调构建整个风格，而阴影完成其余工作。这意味着任何饱和度太高的东西都会立刻破坏效果，因为阴影变得过于明显。
设计师通常最终只有少数几种可行的色调，而且它们大多数与背景几乎没有区别。
玻璃化
玻璃化彻底改变了逻辑。元素后面的颜色比元素本身的颜色更重要。“玻璃”层通常保持明亮和半透明，而背景处理大胆或鲜艳的部分。你基本上在设计两个颜色系统——一个用于模糊层，一个用于它后面的一切。
如何选择正确的设计风格
检查你的屏幕更换背景的频率。如果你的布局经常在明暗之间或平静与繁忙之间切换，注意每种风格如何反应。
观察你的UI系统实际需要多少颜色才能正常运作。有些风格与狭窄的调色板配合良好。另一些则需要完整的范围来处理状态和组件。
识别你的布局中有多少依赖于微妙的颜色差异。如果你的界面使用小的颜色阶跃来区分区域或状态，测试这些阶跃在每种风格的色彩规则下是否仍然清晰可辨。
评估你的不透明度值必须保持多大的可预测性。如果透明度将出现在多个组件中，检查它们是否都反应一致。
4. 交互反馈与功能可见性
拟物化
拟物化提供最响亮的交互反馈，因为每个元素都构建得像物理材料一样行为。一个按钮看起来真的被按下了。一个开关真的改变了位置。一个滑块在轨道内物理移动。用户不需要猜测什么是可交互的，因为元素立即传达了这一点。
新拟物化
新拟物化将所有交互反馈保持得极其低调。元素仍然会改变形状，但变化很小——通常只是微妙的拉入或推出。如果你不注意，可能会完全错过它。功能可见性变成了一种有意识的决定——设计师必须付出额外的努力来实现交互元素，使它们不会像装饰一样融入背景。
玻璃化
玻璃化依靠对比度变化来显示交互，而不是运动。元素在交互时可能会稍微变亮或模糊度降低。用户读取反馈是因为元素突然变得更清晰。它比新拟物化更明显，但比拟物化更不具象。反馈“更轻盈”，但仍然存在。
如何选择正确的设计风格
评估你的界面需要多快确认一个操作。有些任务需要即时的视觉确认。另一些则能容忍更慢或更柔和的信号。
检查即使在没有任何文本标签的情况下，必须看起来可交互的设计元素的数量。当用户必须单独依靠形状或行为时，风格的清晰度很快变得明显。
测试当动画关闭时，点击或按击状态的表现如何。你的反馈仍然需要保持可见，而不依赖于动画曲线。
将交互组件放在静态组件旁边，观察它们融合或突出的速度。有些风格使一切看起来太相似。另一些则能清晰地区分。
5. 可读性与无障碍性
拟物化
拟物化使文本易于阅读，因为文本后面的元素是一个坚固、受控的表面。边缘很强，背景很稳定。可读性下降的唯一情况是当设计师将纹理推得太远时——比如使用与文本竞争的厚重图案或详细表面。
新拟物化
新拟物化具有最大的可读性挑战。柔和的颜色、低对比度和融合的表面使得文本很容易丢失。如果你不手动提高对比度或阴影，文本就会消失在背景中。对于视障用户的无障碍性变成了一种持续的拉锯战，因为这种美学在小尺寸下与清晰度背道而驰。
玻璃化
玻璃化设计可能走向任何一端。当不透明度设置得当时，文本看起来锐利，因为模糊中和了它后面的东西。当不透明度太低时，背景会过强地透出来，文本就会失去清晰度。你需要可靠的不透明度规则，以确保可读性在不同背景或图像上保持一致。
如何选择正确的设计风格
测试你最小的文本在不同组件表面上的表现如何。如果最小的标签都失败了，那么这种风格就无法扩展。
使用你实际的UI背景（而非占位符）检查对比度值。一种风格可能在空白画布上通过对比度检查，但一旦加载了真实内容就会失败。
考虑你的布局自然产生的视觉繁忙程度。复杂的布局需要稳定的表面。简单的布局可以容纳更多的实验。
观察你的文本层次结构在不同屏幕间的一致性。当标题和标签在对比度上波动太大时，这种风格对你的文本系统来说就变得不稳定。
结论
当谈到新拟物化、拟物化与玻璃化时，真正的问题不是哪一个看起来更酷——而是哪一个实际上适用于你正在构建的东西。
不要仅仅为了用而选。选择适合交互和品牌形象的那一个。这意味着可以组合它们——用一个拟物化元素来使关键操作明显，用一个微妙的新拟物化面板来安抚视觉，再加一抹玻璃化来赋予深度和风格。
精选文章：