UI设计新手不可错过的光线法则

UI设计新手不可错过的光线法则以下是要讲的法则：光线来自天空

阴影能够告诉人脑我们到底在看什么样的UI元素。这可能是学习 UI 设计时，容易忽略却又极为重要的一点了: 光线来自天空。光线总是从天空(上方)来的，从下面照上来的光看起来会非常诡异。

当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色浅一些，而下半部分深一些。从下面打一束光到人脸上是不是看起来很渗人?UI 设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是 3D 的，在每个元素的下方加一些阴影。

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

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

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

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

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

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

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

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

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

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

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

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

通常会内嵌的元素：

文字输入框

按下的按钮

滑动槽

单选框(未选择的)

复选框

通常会外凸的元素

未按下的按钮

滑动按钮

下拉控件

卡片

选择后的单选按钮

弹出消息

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

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

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

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

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

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

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

以上就是关于UI设计新手不可错过的光线法则的精彩内容，要想了解更多关于UI设计培训的教学大纲，请点击咨询详情，成都川软教育培训会为您提供一对一内容讲解服务!