北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京UI设计培训 换个角度理解拟物化之投影

时间:2016年08月20日 来源:火星人

投影

1.“五距离,不投影”

北京web前端培训

要有投影一定要有三个要素:挡光物、被投影物和他们之间的距离。前两个很容易理解,距离呢?我们常见的是石膏体和右边锤子浏览器图标都可以说明问题。浏览器图标的投影说明了钟框的面和蓝色底面之间是有一定距离的,钟框不是“贴”在底面上的。

北京web前端培训

投影表达物体物体之间的空间关系。上面那个小球如果没画投影是不能确定它的与桌面的位置关系,他可能是放在桌面上(图2),也可能是悬浮在桌面上(图3),取决于投影的位置。

北京web前端培训

我们在画石膏球的投影时其实画的不是石膏球,而是桌面,因为投影时在桌面上的,这也说明了那句“画一个物体不只是画这个物体本身,还要把它与周围空间的关系表达出来”。

北京web前端培训 注:ps里面有个叫”内阴影“的图层样式,但按照我们这里的光影的分析是没有”内阴影“这个概念的。我们在用”内阴影“时大多数情况下还是在画投影,有时是在画暗面,大家可以多看几个图标慢慢体会。

2.投影等高线

知乎上面有一个问题”如何理解Material Design中卡片的两层阴影“锤子科技的设计师方迟的回答讲的非常好,由于有部分的内容很重要,要跳转到其他页面看的话效果不太好。

所以在这里直接部分引用他的回答:
为什么画投影时,需要叠两层投影呢?
因为这样比较柔,真实阴影的黑度和扩展距离的关系大概是这样的:
北京web前端培训

简单的说就是物体越近就越黑,越远越不黑,但衰减的趋势不是线性的,而是开始衰减的快,后面衰减的慢。而大部分时候的程序员模拟的阴影其实是线性衰减的。UI新手通常画阴影的时候,会被教导需要叠加两层阴影,才比较”真“,但并不清楚原因。其实这里的两层阴影的技巧,实质上是使用两条线性阴影去拟合一条曲线阴影。

比如说我先画一层较大的较浅的阴影: 北京web前端培训 然后再画一层较小的较深的阴影: 北京web前端培训 于是我把两层叠起来,就会得到一个叠加的阴影 北京web前端培训 这样就得到了和曲线阴影相类似的效果,就会比较符合真实的情况 北京web前端培训

其实大家可以看到,叠两层的方法质量上是不完美的,阴影大了以后就容易被看出来有断层。所以在条件允许的情况下还是尽量用曲线属性来调整阴影吧,或者更变态的用多条曲线阴影叠。

引用结束!
ps默认的投影等高线是这样的:
北京web前端培训 我们要把它改成这样: 北京web前端培训 改完之后就会从左边那个变成右边那个! 北京web前端培训

投影等高线还有很多玩法,具体去看站酷@Julien朱璘汧 写的“photoshop小技巧-玩转投影等高线”这篇文章。其实这部分也是引用的,很感谢那么多设计师的无私分享。

北京web前端培训

3.投影在UI中的应用

我认为投影在UI中的作用有两种:1.保护作用 2.突显与层级保护作用,保护设计元素在各种复杂背景下显示清晰。比如最常见的用投影保护文字:

北京web前端培训

突显与层级

突显,因为加了投影后能使设计元素有一种“向前”的感觉,所有可以用投影突出强调重要的信息。比如说下图用投影来强调重要的按钮。顺便介绍一下这就是传说中的“弥散阴影”,他的特点是:投影距离大而虚,而且还有颜色

北京web前端培训

层次。通过投影突显的作用可以用它来表达元素之间的层级关系。Material Design中用不同距离的投影来表达控件之间的层级关系,层级越高距离投影越大。

北京web前端培训
北京web前端培训 最后介绍一下长投影: 北京web前端培训 渐变

渐变,顾名思义就是渐渐的变化,连续的变化。渐变即连续,是不连续和突变的反义词。我们现实生活中的大多数光影都是连续的,这是拟物化图标和扁平化图标的一大区别,扁平化图标喜欢去连续。

1.衰减

北京web前端培训 衰减,光的强度会随着与光源距离的增大而减小,这种变化是连续的。 北京web前端培训 还是上面那两个图标,取色分析。

2.曲面

北京web前端培训

曲面,面的角度随空间的变化而连续变化。怎么理解?上面那个曲面的按钮,我们可以把它曲面当做无数个平面组成的,由于这些平面的角度变化是连续的,所有明暗的变化也是连续的。

更多曲面案例: 北京web前端培训

怎么分辨什么时候是曲面,什么时候是衰减?曲面的明暗变化往往很大,衰减的变化是非常小的。

北京web前端培训 注:其实渐变是不属于任何一种光影效果的他的光影效果是一种属性。因为这里主要经的是渐变在反射中的应用,所有把它归为反射。

3.根据连续与否对光影效果的分类

北京web前端培训

亮面& 暗面、反光通常是连续的,高光和镜面效应通常是不连续的,投影即属于连续又属于不连续。为什么投影即属于连续又属于不连续呢?我们可以看下面的两张图,当单一光源而且打过来的光很“实”时,投影时不连续的。但现实中通常不只一个光源,而且打过来的光也没那么“实”,再结合我们之前说的投影灯高线,投影也可以是连续的。

北京web前端培训

举这个例子也是为了说明,分类只是为了加深大家对连续的理解,连续与否视情况而定,并没有绝对。 间接反射

钱孤单我们说的亮面& 暗面、高光、投影和渐变都属于直接反射。下面我们开始讲间接反射。

间接反射其实就是我们常说的环境光,是指光源的光经过物体周围环境反射过一次后,再照射到物体上面形成的反射。间接反射分为两种:反光和镜面效应。

反光 北京web前端培训

反光。以石膏球为例,反光是由地面反射的光照射到石膏体暗面上形成的。由于发光的存在暗面不再是一片黑,暗面和亮面的交界处(明暗交界线)成了物体上面最暗的部分。比如上面右边那几张图都是亮面、暗面交界的地方最黑、最实。

北京web前端培训 背景能反光给物体,反过来物体也可以反光给背景,这种情况等效环境色时会讲。 北京web前端培训

像玻璃、水晶、水滴等透明物体沿着物体轮廓的那一层发光就是背景环境反射到物体上的反光。所以ps的内发光和外发光图层样式除了用来做亮面和高光以外,更多的其实是用来做反光。

镜面效应

镜面效应是反光的一种特殊情况,当物体表面光滑到一定程度后,就会像镜子一样把周围的环境映照出来,我把它称为镜面效应,其原理就是上面提到的平面镜成像。镜面效应其实就是一种强烈的反光。

1.金属质感

北京web前端培训

为什么金属材质的质感那么复杂呢?是因为除了上面提到的亮面、暗面、高光等特征外,它还把周围环境的明暗映照在身上,非常容易受环境的影响。比如上面右边那个水银的图片,看的出他把摄影师也映照进去吗?

镜面效应还有个特点:就是它是不连续的,表面的明暗变化很快。这点可以帮助我们画金属质感的东西。

2.“银色无色,一般黑白”

说道金属质感,不得不提一下他的颜色。

知乎上面有个很有趣的问题:“银色是什么颜色?RGB的色系里面是不是没有银色?光学上该如何定义?”简单地概括一下答案,就是银色是没有颜色的(没有固有色),你给它什么颜色的光它就是什么颜色。由于通常情况下整体的环境是没有色彩倾向的,只有明暗,所有银色一般是黑白(灰)的。不信的同学可以取色验证一下。

注:这里所说的黑白并不是说纯黑、纯白,而是说饱和度很低,观感上接近“黑白”,在不同环境下是可以有颜色倾向的。银色的金属是我们常说的无色金属,还有像金、铜等有固有色的有色金属哦。

未完待续...
感谢@Leo设计的分享
文章链接地址:http://www.ui.cn/detail/122905.html

关键词:北京UI设计培训,北京UI设计,UI设计培训,UI交互设计

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号