- 设计理论 -

你的投影为什么不漂亮

作者:小火焰 原文出处:海盐社
2018-07-13

640.jpeg

翻开各大设计网站,我们可以看到投影在设计作品中有非常丰富的应用场景,它能快速提升作品的层次感,增加作品的精致度。看着别人作品中的投影都很好看,但自己制作出来的效果总是差强人意,向同事讨教才发现是自己没有掌握投影的基础制作原理,并且自己制作投影的方式太单调。相信很多刚入行同学会有同样的疑惑,所以这篇文章就来具体讲解一下投影的特性,以及常用投影的制作方式,希望可以为你的设计作品加分。 

投影是什么

投影的基本原理

回想自然环境中看到投影的场景:在有光的环境中,一个物品在另一个物品(下文统称背景)的上方,这时候在背光处就会出现投影。

影响投影大小和方向的关键因素:

  • 光源与物体的连线和背景面形成的角度,会影响投影的长度,角度越小,投影越长

  • 在高度上(界面中只的是Z轴的数值),物体与背景的距离越大,投影越大越虚;物体与背景的距离越小,投影越小越实。

  • 光源的方向影响投影的方向,投影会统一出现在背光去。所以同一界面中投影的方向应该是一致的。

PS: 在界面中,我们可以很轻松的理解X轴和Y轴,他们形成一个二维平面,而投影的出现相当于在平面的基础上,增加了一个Z轴,相当于在垂直于页面的方向上增加了高度,是整个页面更有层次感。

因为物体必须高于背景才能出现投影,所以在界面设计中投影是让图片、按钮等其他元素从背景中分离出来最常用的手段,它可以让用户对信息层级有更清晰的认知,且可以通过投影的变化实现拟物化动作反馈,那下面我们具体了解一下投影的几个特征。 

1. 投影可增强按钮的可操作性

在日常生活中我们看到的开关按钮都会在背景上凸出来,方便人们进行操作,如果界面中的按钮具有更高层级的功能作用,为了引导用户操作,会增强按钮的可操作性和视觉表现力,投影就是非常合适的选择。

eg.下图ofo的扫码用车,和淘宝的确认登录

640-2.jpeg

2. 通过投影大小的改变,给予用户操作反馈

上文有提到,投影会随着高度的变化而变化,将背景设置为参考物,控件越高阴影面积越大越柔和,当控件下降后,阴影会紧贴到元素周围,显得更加紧实。这一特性可用在按钮的操作反馈中,正常情况下按钮的距离和弥散值会比较大,当用户点击按钮时,距离和弥散值都会相应的缩小,如下图所示。

640.png

3. 投影方便用户理解页面信息层次

只有当元素不在一个平面内才会出现阴影,所以投影可以让用户轻松意识到两个元素不在同一个页面层级上,如果同一个视线范围内需要展示多个内容时,投影绝对是最佳选择。 

如下图,我们可以看出第一个图形的蓝黄在一个平面内,而第二个图形黄色色块浮在蓝色色块之上。

640-1.png

下图ofo各种操作区域都在地图上方显示,所以都需要通过投影来区分信息层级,让用户可直观感受到操作区的可操作性

640-3.jpeg

投影的类型

纵观投影在界面中的发展史,主要有3种投影方式,普通投影,长投影和弥散投影,长投影流行的时间仅有短短两年的时间,主要应用在平面作品中,界面中很少出现,这里不做具体讲解,下面我们主要看看普通投影和弥散投影的特点、使用场景及基本制作方式。

1. 普通投影

普通投影是可以用软件里自带的投影参数直接制作出来的投影样式,是设置投影时最常用的手段,新手从这里开始投影制作的学习,快速掌握投影设计的技巧,并寻找自己设计投影的感觉。

PS. 因为现在设计页面大多数都是用sketch,所以下方的制作方式都是以sketch为例 

  • 投影制作原理

640-4.jpeg

普通投影用shadows可以轻松实现,上图是投影参数的属性特征,主要通过Color、X、Y来控制投影颜色、大小、方向和弥散度,具体作如下:

  • Color 用来设置投影的颜色,在颜色操作区域内可以调整颜色透明度

  • X、Y有两个作用,一是可以控制投影的大小,通过调整数值来调整大小;二是可以控制投影的方向,通过改变正负号来调整方向。

  • Blur弥散度,控制投影弥散大小 

下图是改动不同参数值展示出来的效果

640-2.png

在制作投影的时候会有一些注意事项,如下:

  • 通过调整投影透明度,让投影看起来更柔和,与背景的贴合度更高;

  • 投影颜色尽量选择背景色作为参考,然后把颜色的饱和度调高,明度调低。建议用HSB来调整颜色,将S(饱和度)调高,B(明度)调低即可,这样操作起来更方便;

  • PS里等高线的投影制作,可以通过调整X,Y的数值来模拟,Y值要大于X值。只能说是模拟,如果想制作更加细致的等高线效果,弥散阴影的制作效果会给你更多的启发。

适用场景:因为技术可以很方便的通过代码实现出来,且不会涉及设配等问题,所以在界面设计中大量应用,主要应用的场景有按钮、卡片、信息提示以及一些需要凸显出来的元素

2. 弥散投影

弥散投影是最近两年界面设计中常用的设计手段,大量应用在概念稿中界面设计中,最常出现的场所在概念稿内,增强视觉表现。(因为多数概念稿都只展示信息的基础框架,不会有过多的状态,标签和辅助信息,页面内容比较简单,弥散投影可以在这里发挥出视觉表现的价值)

① 使用矢量图形制作弥散效果

普通投影虽然可以通过X,Y的数值调整投影的大小,但局限性还是比较强,如果想设置比较高级的投影效果,就需要引入图形来制作,因为图形可以随意的调整大小和形状,可以设计出更有新意和层次感的投影效果。

图形制作弥散投影的制作基础方式有两种,下面我们具体来看一下。 

基本制作方式1

  • 绘制和元素一样大小的矢量图形

  • 将图形放置在需要投影的样式下方

  • 高度减半,宽度缩小80%

  • 居中居底对齐

  • 在图形上增加Shadows,数值如下图

640-3.png

投影的颜色一般会跟元素或背景色相一致,下面我们一起看一下有颜色的投影制作方式:

  • 在上方操作的基础上,将投影的颜色吸取上方元素的颜色;

  • 然后再添加一个投影:Y值为1,Blur值不变

  • 反复调整两个投影的颜色,直到合适位置(检查标准是清晰透亮)

  • 这种方式设置投影的便捷之处在于,当元素的颜色改变后,投影直接吸取物体颜色即可,操作起来极为方便。 

640-4.png

这种制作投影的方式主要应用在卡片、图片上。投影出现在元素下方,且投影X轴的范围比元素要小,可以推测出,这个环境中是混合光源,在元素上方、左面和右面都有光源存在,所以整体的视觉效果会更加丰富。一般卡片承载的信息量会比较多,图片的色彩也比较丰富,这样投影和元素之间还可以彼此呼应。

基本制作方式2

  • 绘制和元素一样的大小的矢量图形,颜色与元素一致

  • 宽度缩小到80%

  • 图形下移20px

  • 如图所示调整锚点

  • 给图形设置模糊,Gaussian Blur值20px 

640-5.png

通过这样的方式制作投影会更复杂一些,需要自己根据对不同环境光源的理解去设置不同的投影形状。界面中应用的场景会比较少,但这种方式可以设计出更多新颖的投影样式。

② 图片弥散效果

通过矢量图形制作的弥散效果,即使可以设置投影的颜色,还是无法满足图片丰富的色彩感觉,所以就有了图片弥散

640-5.jpeg

制作方式:

  • 复制图片,放在当前图层下方

  • 将图片缩小为原图的80%

  • 与原图居中居底对齐

  • 再向下移动20px

  • 设置图片的模糊度 

640-6.jpeg

适用场景: 图片投影,广泛应用在作品集、概念稿和平面作品中。

备注:以上制作方法中的数值都不是绝对的,需要根据元素的大小进行调整。

总结

1. 投影的特点

  • 投影可以增强按钮的可操作性性;

  • 改变投影的大小和弥散度可以给与用户操作反馈;

  • 投影可以让用户更容易区分页面的信息层级。

2. 常用的投影制作方式有普通投影和弥散投影两种

  • 普通投影制作便捷且便于开发,是界面设计中常用的设计手段;

  • 弥散投影视觉感受更好,开发适配上会比较复杂,现在广泛应用在作品集、概念稿和平面作品中。

以上只是投影设计的一些基础原理和常用的设计手法,掌握这些方法后需要根据自己的需要应用场景,灵活的运用制作技巧,希望你的投影设计的越来越漂亮,当然如果你有更好的投影设计方式也欢迎留言一起探讨~~ 

参考链接

《PS中的7中投影技巧》

http://www.shejidaren.com/7-zhong-ps-tou-ying-ji-qiao.html

《超赞!一份简单易上手的青春弥散阴影修炼手册》

https://www.uisdc.com/photoshop-diffusion-shadow-design

640-1.jpeg

海盐社.jpeg

喜欢就分享
精选评论