赞助商
立即赞助

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

UI设计3年前 (2021)更新 流光
2.3K 0 0

编者按:看似简单的投影,在手眼里有千万种变。信看看今天这篇章,资深设计师你做投影设计

在今天的 UI设计中,投影使的范围和频次越来越。打开手机APP,或是看追波上的练习稿,都可看见无数投影使的案例。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

掌握好投影的使用,必备的 UI 视觉设基础。投影远家象的那么简单,即使软件中可以设置的参数并不多,我的教学过程中,很多学员始终办法很好的应用投影提升自己的设质感。

,这篇章就会详细讲解投影的正确设计方法。

一、投影的基本介绍

在了解投影和设计的系前,我们要先知道投影是么。专点的方式解释,即:

投影指的是一组光线将物体的形状投射到一个平面上,称为「投影」。

有了光源,才有投影。光影是美术和摄影最核心的基础。那么投影有么特征呢,先看看面的这张静物摄影。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

图中有很清晰的向右延伸的投影。距离体越远的投影,就越模糊,越淡。通过这样的投影我们还可很轻易的分析,光源在左侧,且物体是放置在地面上的。

投影以带给我们非常隐藏的信息,而往往被我们所忽略。看看下方的案例,当背无法直观的提供物所处高度时,投影就能到关键的用。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

在平面画中,投影的做法直接影响我们对元素的认识。 例下图中,投影以让我们按钮身是有厚度(遮挡光)或是离开水平面处悬浮状态。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

当,投影除对物理信息的暗示,还涉及到对视效果的表现。上面的白鞋投影很重,且轮廓清晰,样能塑造更强烈的冲突,增加鞋子的立感。但是不是所有摄影需要有样雕刻版的投影效果呢?答案是否定的,例下面图。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

主物和背彩能很的结合,创造出有趣欢快的视氛围,所以只需要柔和的投影即。在 UI 的设计中,对阴投影参数的定义,也直接影响我们画面的视效果。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

成熟的摄影品,根据对投影的需要去节打光的方式,是个非常复而且繁琐的程,需要经年累月的学习。而在设计的程中,创造投影却非常容易,所以我们更该重视的是,何正确的设计投影。

即先构思出元素的物理特,给予它正确美观投影样式。

二、UI设计中的投影

在进入了扁平的设计环境后,投影有很长一时间被抹除,因为大认为那是拟物的遗毒,就怕设计里到拟物元素显得够时髦。

到 Material Design 以,谷歌在规范中增加 Z 轴的概念,也就是为平面预设立的空间,设计元素以定义与空间中水平面的距离。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

图中,Z 轴数字越大,代表和水平面的距离越远,上升得越多。而带给我们这种感受的原因,就是投影的暗示,元素本身的坐标并没有任何改变。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

既然增了投影,那么谷歌的专设计团队,肯定会很随意的制定参数。当我们打开谷歌的官方 UI KITS 源件进行查看时,就发现中的同。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

可看见,元素叠了多层的投影,这是违反手对于投影定义的直觉的。原因在与,一般软件中定义的投影,深浅与元素的距离是线性等的,而现实世界中,深浅与距离是非线性的函数系。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

在 UI设计师接触的平面类软件中,只有 PS 具备美复现这种投影的,即控制投影的等线。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

而 Sketch、XD 这些软件都具备这样的功,且手机系统的投影渲染机制是线性的,谷歌就通过使 TopShadow、BottomShadow 叠的方式,模拟真实的投影效果,它们看起来更和谐自然,这就是多层投影的奥秘。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

上面现的投影都是黑白灰,但在现在流行的设计作中,最见的是应了彩色的投影,摄影中经会应彩色的投影渲染氛围。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

但是,投影中的这些彩色区域,并全都是投影,还包含了折射和漫反射的原等。为了简,我们可认为是光线穿透物体从而投射带有物体本身颜色的投影。就像撑起一把绿色的阳伞,伞的人头顶会弥漫着草原的芬芳……

三、投影设计演示

在开始展示具体的设计案例前,我们要先明确一个原则,即:

优雅的投影是你感受到它的存在,但会吸引你注它!

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

一般的设软件中,元素的阴影即元素的背后添加了一相同轮廓的纯色矢图形,我们可以通过 XY 轴移动它的置,并使用模糊的参数设置它的模糊度。

当元素的距离水平面越,阴影距离元素就越,即 XY 轴越小,模糊越小,如果离得远则相反。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

1. 常规投影类型

第一种投影的类型,即光源从元素的方投射下,可以参考谷歌提供的投影方案叠加两层投影。第一层 XY 轴坐标0,只添加模糊的参数,透明度较低。第二层阴影使用相同的模糊参数,增加 Y 轴坐标,透明度较高。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

非 MD 设中,它浓郁的投影参数会让整界面变「脏」,变拥挤。我们的降低投影的透明度,这样能让投影的表自然舒。牢记的,当使用纯黑色阴影时,透明度无论如何都不应该高于 20%,常区间 5%-15%。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

既然知道阴影属性的规律,我们还可以复制矢图层模糊效果也可以得到一样的效果,这种方法可以支持我们设出真实的投影。即将 BottomShadow 独立出,缩小并向下移动。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

如果得到彩色的投影,那么只切换投影的色彩即可。得注意的,不同色彩的刺激程度不同,我们凭感觉去调整它们的透明度。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

如果感觉不得劲,阴影太少了,那么我们就让元素的 Z 轴升。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

既然面提到彩色投影由于光线穿透了元素,那么当使用了渐变色或者图片的投影,我们一复制出的那层投影,就可以不使用填充色,直接用渐变或者原图行模糊透明度调整。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

2. 常规投影类型

有垂于平关系,那么发挥想象力,我们可以更改与位,如下图所示。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

在这个场景,投影作用在图片下地,有地处于透视状态时,才能可以看见它投影,所以,我们可以到下效。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

然,我们可以结合类型,比如使用聚灯等,那么阴影轮廓会发生变化。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

甚至可以预素本身产生有一定的变形,如边缘翘起,那就会产生独的阴类型。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

可以从日常生活中的观察将各种不同的投形式引用进的计中,让的计视觉更丰有趣。

总结

学会正确的投计方式,并不是仅仅让局限在对 UI 素的计上。它还能给带来多想不的帮助,例如做计的包装。

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

通前面讲的识点,上方展示案例中应用的阴影方式相信你们已经以看出端倪,果使用基础的阴影设置去创建展示的阴影,就现效果远远不案例的高级,自也难以带给别人良的视验。

最后,在项目中,想要将计出来的阴交付给开发,真正落地实现出来,无论安卓或是 iOS ,阴的渲染和计软件的参数是不一致的,这就需要大家钻研了。

欢迎关注作者微信公众号:「电话亭」

这篇超详细的教程,帮你全面掌握 APP 中的投影设计!

图片素材作者:Anton Mikhaltsov

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

编者按:什么是金刚区?意义和功能是什么?金刚区图标的类型和表现手法是什么?有哪些设计要点?本文从4个维度为你一一揭秘。...
ui设计
微信的最近一次更新,小程序入口变浅了很多。最近使用的小程序,被放置在微信打开后初始页面的下拉菜单中,而且给的下拉栏空...
ui设计
大家好,我是布莱恩。图标是 UI 设计中最基础也是很重要的部分,辅助人们更好的理解功能内容。随着扁平化设计风格的普及,图...
ui设计
编者按:本文网易设计师用「FishDesign企业级UI组件库」项目为例,通过在网易七鱼产品中的应用,来介绍一个企业级 UI 组件库...
B端设计
编者按:这篇文章来自资深 UI设计师 Danny Sapio,他总结了日常设计过程中,使用 Figma 的一些非常快速的设计技巧,希望能帮...
Figma
Tubik :中国人常说,民以食为天,吃这件事情很重要。好食物往往带来好心情。人每天的一日三餐是驱动人每天做各种各样事情的...
App设计
@Daidai丶呆 :本篇文章写写近期看到的比较有趣的话题,「一款好产品,所需具备的条件」。 产品角度 早前有看到张小龙说 :一...
ui设计
越来越多的品牌和企业开始在自家的网站和营销推广中使用吉祥物,今天的文章我们结合实例来聊一聊吉祥物的运用。 在设计的过...
ui设计