UI设计中的阴影与层次!

2016-11-1    ui设计分享达人

 蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务 

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

随着大家对于扁平化设计的反思和优化,近两年的整个设计风向显得理智而合理了许多。更加平衡而合乎情理的新的扁平化设计诞生了。这个新的方案得到了绝大多数的设计师的认可,这种“近乎扁平”的设计更多被大家称为“扁平化设计2.0”。扁平化2.0 整体上依然是扁平的,但是其中的诸多设计元素沿用了微妙的阴影、高光和层级来打造有深度的UI。

01.webp.jpg

Google就是扁平化2.0 设计风格中的佼佼者。整套设计借用了“纸”的隐喻和物理规则,在视觉层次和交互性上有着明显的提升。它赋予界面以简约的视觉,又不牺牲UI的能指。

02.webp.jpg

阴影和高度  现代如今的UI设计之所以有层次感,很大程度上是因为Z轴,或者说是因为高度的存在。不同的层占据Z座标轴上不同的位置,“高度”的差异让它们看起来有先后的层次之分。

03.webp.jpg

 

阴影是让图片和其他元素从背景中“弹出”并拥有深度的重要手段。微妙合理的阴影设计不会让用户感到分心,同时能让用户更轻松的理解界面:

1、阴影会暗示用户某个元素其实是可点击的。

04.webp.jpg

 

2、阴影可以让用户理解元素的层次,让他们理解两个对象并不在同一高度,不是同一个层级。

05.webp.jpg

 

如果没有阴影,用户无法将红色的按钮和背景的层级清楚的区分开来

3、阴影为定向运动提供了重要的视觉线索。

06.webp.jpg

 

当用户无法确定控件或者元素是否可以点击,或者是否已经被点击了,他们就越是需要点击之后的反馈给予心理安慰。一个元素的高度变化应该带来相应的阴影变化:

07.gif

 

结语

说了这么多,最后还是要多说一句:阴影对于扁平化的UI设计而言一样重要,但是不要过度依赖重阴影、极端渐变和复杂的光照效果,它们太过于分散用户注意力了。真正有价值的是那些微妙而实用的阴影,那些符合物理规则的过渡效果。

08.webp.jpg

人是视觉动物没错,但是用户最终还是更喜欢简单干净、符合自然感知的设计。看看近些年交互上最成功的设计,赢家大都是反馈迅速,逻辑完整,简约讲道理的产品。

 

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档