UI设计新手必看,如何掌握光线和阴影...

  • 经验类型教程原作者:dribbble

  • 经验属性好文转载
  • 经验版权不使用原创授权
3205 0 8 2018-06-13

UI设计新手必看,如何掌握光线和阴影让作品更自然,给用户更好的体验

刚想转到UI设计的新手们,可以觉得ui设计其实很简单,仅只是做做图标,画画界面,但真正等你开始接触后会发现这里面学问很多,今天给大家分享一下作为UI设计新人,务必要注意的几条法则。首先是光影。


光影法则:光线来自天空


阴影能够告诉人脑我们到底在看什么样的UI元素。


这可能是学习 UI 设计时,最容易忽略却又极为重要的一点了: 光线来自天空。光线总是从天空(上方)来的,从下面照上来的光看起来会非常诡异。

Image title


当光线从天上照下来的时候,物品的上端会偏亮,而下方会出现阴影。上半部分颜色浅一些,而下半部分深一些。

从下面打一束光到人脸上是不是看起来很渗人?UI 设计也是同理。我们的屏幕是平的,但是我们可以通过一些艺术手法让它看起来是 3D 的,在每个元素的下方加一些阴影。

Image title


就拿这个按钮举例,这是一个相对“扁平化”(flat) 的按钮,但依然可以看出一些光线变化的细节:

 

没有按下去的按钮底部边缘更暗,因为没有光线照到那里。

没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面(见侧视图)。

没有按下去的按钮下方有一些细微的阴影,在放大图中看得更清楚。

按下去的按钮整体颜色都更暗了,但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上,光线不容易照到。也有人说,在现实中,按下去的按钮颜色更深,因为手遮挡住了光线。

这么一个简单的按钮就有 4 种不同的光线变化。实际上,我们可以把这种原则运用到各处。

Image title


iOS 6 有点过时了,但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知”的设置,看看上面有多少种不同的光线变化。

 

控制面板的上边缘有一小块阴影。

“开启”滑动槽上部也有阴影。

“开启”滑动槽的下半部分,反射了一些光线。

按钮是突出的,上边缘较亮,因为是与光源垂直的,接收了大量光线,折射到你的眼睛中。

因为光线角度的问题,分割线处出现了阴影。

Image title



通常会内嵌的元素:

 

文字输入框

按下的按钮

滑动槽

单选框(未选择的)

复选框


通常会外凸的元素:

 

未按下的按钮

滑动按钮

下拉控件

卡片

选择后的单选按钮

弹出消息

等等,现在不是追求扁平化的设计吗?


iOS 7 引发了科技界对于“扁平化设计”(flat design) 的追求。也就是说图标是平的,不再模仿实物而外凸或内凹,只有线条和单一颜色的形状。

Image title


我很喜欢这种干净、简洁的风格,但是我认为这种趋势不会长久。通过细微的变化模拟出 3D 的效果非常自然,不会被完全取代的。


在不久的将来,我们很可能会看到半扁平的 UI(这也是我推荐你使用的设计风格)我把它称为“flatty design”,依然非常干净简洁,但是也有一些阴影,有轻点、滑动、按下操作的提示。

Image title


今天对UI设计新手 开放10个UI设计免费体验学习名额

想参与的同学,添加微信:hl9700712,备注:学UI。


现在,Google 也在各个产品上推行他们的 Material Design,提供一种统一的视觉设计语言。Material Design 的设计指导为我们展示了它如何运用阴影表现不同的层次。

Image title


这也是我所认同的类型。用现实世界的元素来传递信息,关键在于:细微。你不能说它没有模仿现实世界,但也绝不是 2006 年的网页风格,没有纹理,没有梯度,更没有光泽。

我认为“flatty”是未来的方向。扁平化?早晚会过时的。




全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票