用户界面的阴影和海拔在现实中的表现

自译外文 分类: 经验/观点 版权: 原作者: Nick Babich
9403 89 105 8
2016-07-26
53.5
首页推荐



UI设计正在向极简方向发展,意思就是除去不必要的元素,将重点放在功能上。但是当功能设计成为产品是否成功的关键要素的时候,视觉细节同样很重要。

本文中,我将讲述如何运用视觉元素(如阴影)向用户传达信息。


1.从伪3D到扁平化设计:

用户的屏幕是平的,但是设计师和开发人员投入大量的创意,让他们在使用和视觉上看起来是三维的,从图形发展到现在,屏幕显示已经采用了伪3D效果(阴影,高度,突出)来帮助用户识别,并进行操作。这样的三维效果的立体感,帮助用户从视觉上判断出那些元素是可交互的:

-看起来突出的元素让它更像是能够被按的,这种通常被用作按钮。

-看起来是凹陷的元素看起来像是能够被填满的,这种通常被用作输入。


据个栗子:早在windows 95系统中,对话框就使用了阴影和高亮来显示3Dde 效果:

Image title



Skeuomorphism(软件界面设计模仿实物纹理被称作Skeuomorphism概念,苹果工业设计主管Jony Lvey已经接手iOS和OS X界面设计)是每个界面在数字空间中模仿现实生活的一种语言,我们来看看早期在iOS7之前,苹果对于app应用中的书架设计,其设计成了三维的货架和木材纹理:

Image title

苹果iOS 6的报摊。但是类似这样的伪3D图形界面让人感觉很笨重,视觉上更是分散了注意力。





2.扁平化设计:在去除阴影

每一个操作,都有一个反馈。在数字设计的世界里,扁平是针对skeumorphism的反馈。因为在屏幕上看到的永远不是真正的三维,所以为什么不去掉多余的修饰而将重点放在功能上呢?

我们在windows8界面上再来看看:

Image title


每个图标看起来都很扁平,但实际上“change PCsettings”比一个图标看起来更像标签,导致很多用户忽略了这个选项。这种元素的特殊性通常让用户误解,甚至忽略。

UI设计师让控件变得更具像化和看起来可操作性都是有一些特征的,无论特征怎么变,用户判断通常是靠这两个假设:

Image title


扁平化设计的前后,细节特征所产生的影响





3.几乎扁平的设计

最近,设计师已经开始意识到扁平化设计的可用性问题。在新的解决方案中体现的是类似于近乎扁平或者又可以称为扁平2.0的设计。在这个设计风格中,使用了微妙的阴影,高亮和层次设计,提高了UI创意的深度。

Image title



设计师已经开始意识到可用性关于平坦设计的发行并且作为结果,平坦设计更平衡的解释已经出现。新的解决方案有时候称为‘近乎平坦’或‘扁平的2.0’设计。这个设计风格基本上是平坦的,但是使用微妙的阴影、亮点和层,以便在UI中创建一些深度。




4.阴影和海拔(z轴高度)

现在的界面层次感更强,并且充分利用了z轴,这个方法将视觉引入更深。

Image title


看起来可以点击的两种不同元素:Image title

阴影有助于告诉用户层次结构,帮他们去分两个元素在某些情况下,一个明显高于另一个:Image title

如果没有点击后的立即反馈,可能让用户觉得这是不可点击的。这里的海拔高度决定了阴影的外观呈现:Image title




5.总结:

我们在设计的时候不应该过分依赖沉重的阴影,极端的高度或者是复杂的光源效果,所有这些用来分散用户注意的修饰都是不可取的。但是微妙的阴影和其他非用户界面的元素是可以融合到扁平化设计中去的,因为他们都有一个重要的价值:他们能帮助创建比较有特征的用户界面。用户喜欢干净简洁的事物,并喜欢掌控这些界面。观察这些年来最成功的交互设计师,都是那些执行最基本用户习惯操作的人。




Image title


Yjjj

594120848 欢迎加群

3394粉丝/23关注

原创小生
结构化设计思维的应用2016年作品大合集

Yjjj

Yjjj

594120848 欢迎加群

原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by © 2008-2017 UI.CN