• 内页banner
  • ui1
  • 内页3
技术专栏您当前所在位置: 首页 > 技术专栏

UI设计培训之酷炫UI的创作规则:光线自然

更新时间:2017-06-09 17:47:47点击次数:138次字号:T|T

本文不涉及任何理论知识,纯属用于实践。你不会读到什么黄金比例,甚至连色彩理论都不会涉及。这些经验,是我在郑州丰泽UI设计培训时,通过刻意练习所总结的,希望给新手和UI设计培训中的你一点帮助。

郑州丰泽UI

      光线从天而来

      阴影是界面的宝贵线索,它用于提示大脑我们正在关注什么界面元素。

      光线从天而来——这大概是了解UI设计时,最重要又最容易被忽略的一点。光线就是这样理所当然地从上方落下,实际上当光从底部投射上来时,看起来会相当怪异。你并不会觉得人们的下眼睑特别暗,然而旦你给它们打上光,bang,犹如个女鬼忽然出现在你面前。

UI设计培训班

      UI也是这个道理。正如人的五官样,所有可见的UI元素下方也都有投影。屏幕虽然是扁平的,但我们加入了大量艺术表现手法,使屏幕上的切都以三维

形式展现。

UI培训

接下来说说按键。即使是相对扁平UI的按键,仍有些和光影相关的细节。因为光线无法照到,所以未按下的按键会在底部产生固较暗的边缘。

未按下的按键项部会比底部稍亮,这是为了模仿表面有轻微弧度的效果。就像你倾斜镜子去获得光线那样,倾斜的表面可以产生更多反光。

未按下的按键将产生微弱的阴影——可能放大时更容易看清(如上图)。已经被按下的按键整体都较暗(虽然底部仍然比项部更暗),因为此时它处于屏幕的平面上,光线无法轻易照到。有人会说,现实生活中所有被按下的按钮也都是更暗的,那是园为你们的手挡住了光线。

仅仅是按钮就已经呈现了4种光影效果。现在,我们把以上内容推广到所有UI设计中来。

UI设计光线自然

iOS6虽然过时,但可以作为研究光影效果绝佳的UI设计案例

以上是组iOS6的设置键——“勿执模式”以及“通知”,让我们观察下光影的性质对它们产生了多少影响。

嵌入式的控制面板在顶部边缘落下了微弱的阴影

“开启”键滑块轨道也被略微嵌入

“开启”键滑块轨道呈凹陷状,并在底部产生更多反光

国标略微凸起,看到它们项部的反光了吗’这表示顶部表面垂直于光源,因

此接收了大量光线,继而反射大量光线进入人眼。

分割线凹槽在光线照不到的角度形成阴影,反之形成反光

UI设计创作规则

等下,那扁平化UI设计呢?iOS7用“扁平化设计”轰动了科技界。正知字面上所说的“扁平化”,这种设计形式不再有写实的凸起或凹陷——仅由线条和纯色色块组成。

我也超爱简洁的UI设计风格,但不认为这会是个长期的趋势。园为界面中模拟3D的设计实在太巧妙太自然,让人无法完全抛弃。更可能的是,我们将看到更多的半扁平化UI设计(这也是我建议大家精通学习的方向)。我将提前称它为“类扁平化设计”。它依依日干净简洁,但你仍能找到些阴影和视觉线索,以提示敲击、滑动、单击等操作区域。

UI设计培训学校

在我落笔的此刻,Google为贯穿产品的UI设计风格,发布了名为“Materia Design”的设计语言(2014车)。利用该统化的UI设计视觉语言为核心,试图模拟真实的物理世界。