阴影这样的视觉元素是如何帮助界面为用户呈现信息的

如今，UI设计正朝着移除不必要元素、聚焦核心功能的方向发展。核心功能已成为用户界面设计的焦点，视觉和细节设计的重要性日益突出。在新时代，视觉设计不仅需要面对简化和集中的需求，而且还需要提高功能的可用性。在今天的文章中，我们专注于讨论阴影等视觉元素如何帮助界面向用户呈现信息。UI的进化:从伪3D到超平立体的特效和拟物化设计，界面有一种深刻的感觉。用户界面是平的，但设计师和开发者投入了大量的精力和灵感，试图给用户带来一个3D世界。重新审视GUI在20世纪80年代和90年代的兴起，你会发现设计师已经开始伪3D效果（阴影、梯度、亮点）来帮助用户更容易理解界面，这些效果让用户在视觉上让GUI与现实世界的元素相关，使交互和操作更加清晰。这些3D特效创造的错觉使界面看起来深度和高度，不同的元素构建不同的视觉水平，加上来自现实世界的隐喻，用户自然开始理解界面交互：·看起来凸元素让人觉得应该可以按下，这种设计通常用于按钮设计。·看起来凹陷的元素让人觉得应该是可以填充的，而输入框往往采用这种设计。Windows95对话框的设计很好地说明了阴影和亮点会带来什么样的效果:不仅仅是Windows，90年代的UI设计大多保持着这样的想法。MacOS8被归类为OldWorld：BeOS将多媒体操作系统的设计理念推广到机制，伪3D风格的图标设计是经典：注意按钮和输入框是如何呈现拟物化设计是上述概念进一步深化的产物，UI中的每个元素都以数字形式模拟现实生活中物体的细节和纹理，它几乎是一套完整的视觉语言。当我们谈论拟物化时，它在很大程度上是iOS7之前苹果UI设计风格的同义词，而iOS7之前的iOS系统，甚至更早的MacOSXUI设计都是拟物化的好例子。当我们谈论拟物化时，它在很大程度上是iOS7之前苹果UI设计风格的同义词，而iOS7之前的iOS系统，甚至更早的MacOSXUI设计都是拟物化的好例子。iOS中的Newstand界面。阴影和纹理是现实世界中对应物体的真实反映。2002年MacOSX10.2Jaguar的界面长如下，界面中的元素比拟物化全盛时期更重要:但早期的伪3DGUI和拟物化设计往往会让界面看起来太“厚”——太重的视觉设计更容易分心。扁平化设计：去除阴影，不再立体，每一个变化都会产生相应的影响。平面设计和拟物化设计自然有很大的不同。考虑到屏幕上呈现的信息本身不是3D的，为什么不去掉装饰，专注于功能呢？与三维设计和拟物化不同，最初的扁平化完全不考虑物理世界的特征和界面之间的联系，这是纯粹意义上的扁平化。在这样的设计中，没有微妙的阴影和渐变来暗示输入框和按钮。如果你看Windows8时代的Metro设计，你会明白Windows8的MetroUI是纯平面设计的典型例子。界面中的每一个元素似乎都没有明确的交互引导，整个设置界面似乎是一组带有标签名称的图标。这样的组件对用户的感知很差，很容易曲解甚至忽略用户。为了改善这一点，UI设计使特定元素看起来更详细，或具有明显的交互性（如光泽、微妙的渐变和阴影，具有凸起或凹陷的感知）。虽然它可以指在不同的应用程序中呈现不同的方式（图标、文本和图像的含义），但它们仍然可以清楚地向用户传达方向性信息。这是基于两个假设：·强大的元素很可能是可点击的，没有强大的元素可能是不可点击的。因此，完全去除视觉引导和线索，没有纯平面设计是极端而不人性化的设计。用户需要一个可感知和可理解的界面来帮助他们学习和理解整个界面的互动，而阴影和渐变的设计可以让人脑理解界面元素的含义。随着人们对扁平化设计的反思和优化，近两年的整体设计风向显得理性合理。新的平衡设计诞生了，更加平衡和合理。这一新方案得到了绝大多数设计师的认可，这种“近乎平坦”的设计更多地被称为“平面设计2.0”。扁平化2.0在整体上仍然是平的，但许多设计元素使用微妙的阴影、亮点和层次来创建深度UI。Google的MaterialDesign是扁平化2.0设计风格中的佼佼者。整个设计借用了“纸”的隐喻和物理规则，显著提高了视觉水平和交互性。在不牺牲UI的能指的情况下，它给界面一个简单的视觉。具有Z轴的AndroidGUI阴影和高度现代的UI设计之所以有层次感，很大程度上是因为Z轴或高度的存在。不同的层在Z座标轴上占据不同的位置，“高度”的差异使它们看起来不同层次。阴影是使图片和其他元素从背景中“弹出”并具有深度的重要手段。微妙合理的阴影设计不会让用户分心，也能让用户更容易理解界面:1、阴影会暗示用户实际上可以点击某个元素。2、阴影能让用户理解元素的层次，让他们理解两个对象不在同一个高度，不在同一个层次。如果没有阴影，用户无法清楚地区分红色按钮和背景的层次。、阴影为定向运动提供了重要的视觉线索。随着控制器高度的提高，元素在视觉上更接近用户，阴影变得柔软和扩散。当控制器下降时，视觉上会变小，阴影也会靠近元素，看起来更紧。阴影肯定会随着高度的变化而变化。高度和深度有明显的相关性，两个元素在Z轴上的相互距离是通过阴影的变化来表现的。当用户无法确定控件或元素是否可以点击或已经点击时，他们需要点击后的反馈来提供心理安慰。元素的高度变化应该带来相应的阴影变化：结论说了这么多，最后说：阴影对平面UI设计同样重要，但不要过分依赖重阴影、极端渐变和复杂的光效果，它们过于分散用户的注意力。真正有价值的是那些微妙而实用的阴影，那些符合物理规则的过渡效果。人是视觉动物，但用户最终更喜欢简单、干净、符合自然感知的设计。看看近年来互动中最成功的设计，大多数赢家都是反馈快、逻辑完整、简单合理的产品。