你的设计太平了~快来看看怎么用投影打...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
22554 22 377 2020-10-30

UILEO的第一篇UI设计笔记

每周五更新,欢迎持续关注哦~

 

   前言

去年发了一大堆动效的教程,应该很多人都认为我是个动效设计师,其实我是个正儿八经的UI设计师,这不,开始重操旧业,弄动效之余整一些界面类的技巧教程。

 

             

 

   投影的类别

投影大家应该不陌生,能让整个页面非常有层级感,塑造空间感。在前2年投影的应用更是广泛,一度成为流行趋势。

 

在我们的界面设计中区分块与块的方式也就那么几种:颜色、描边、投影

 

             

 

从上图能明显看的出来,投影能更加突出卡片的内容,不至于让整个界面太平,相比较会更有品质感,所以因为这些原因,从苹果系统的一系列设计,还有一些主流APP设计也可以看到相当多的地方有投影的应用,这里看一些优秀的案例。

 

             

 

   投影的应用

接下来详细介绍下投影在界面中的应用。

 

1、图片自身投影(沉浸感强,能很好的融入图片)

 

             

2、颜色自身投影(模拟真实场景,更自然)

             

 

3、白色卡片投影-大卡片大投影,瀑布流排版小投影(替代描边和色块分割,更具质感)

 

             

 

   如何做好投影

说完了投影的各种好处,有点,那么投影使用不当也是会有很大的弊端,并且容易造成反效果。

比如投影太重了就会显得特别脏、投影太轻了会和背景融合、投影太靠下了顶上就秃了、投影太大就容易糊...是一个蛮矫情的设计样式。

我们现在就需要搞定这块使用规则,如何去设定投影参数,如何在合适的情况使用合适的投影。

 

我们先看看Material Design给出的一个关于光影的规范。

具体可以到谷歌规范的官网瞅瞅:https://material.io/design

 

             

能看到其实投影根据不同的使用场景,不同的界面层级,有几种不同的投影高度,在这里我们需要先梳理清楚你的界面层级,是重是轻,这样就能选择正确的投影高度。

 

然后是投影的扩散范围

我们说了一大堆的理论,也有很多人抱怨为什么就是做不好投影,接下来说下投影究竟如何去做才算一个好看的投影

投影从设计中的数值参数可以分这几个:颜色(包含透明度)、XY轴、模糊范围

 

             

咱们从大的往小的去慢慢拆解

首先颜色切记别太深,黑灰色透明度别超过15%,彩色的特别是亮色透明度别超过30%

 

 

接着XY轴,也可以认为是投影角度,99%的情况下都是向下投影,也就是sketch或者xd的向下位移(Y轴正数),这样会更加体现空间感,也会更加自然,平均四散的投影会导致设计元素有些模糊。也需要注意向下位移的时候切记白色卡片别出现上方和背景过于融合,会非常奇怪。

 

             

 最后是模糊范围,需要看情况,对于大卡片留白比较大的可以为整体高度的四分之一左右,距离为高度的十分之一就差不多(只是一个大概的数值,情况不同需要灵活应变)

 

             

 然后是稍微密集的小按钮啥的,建议用小的投影,代表轮廓范围就行,大概是高度的十分之一(一般不超过10px),距离为高度的二十分之一(一般不超过5px)

 

             

这只是对大部分通用情况的一个简单概括,有些复杂的独特的形状还是需要大家自己去把控

 

   结语&练习

在平时看设计的时候需要注意优秀设计投影的深度,距离,慢慢的你就知道什么投影是好的,然后就可以搞定这个细节啦~


微信公众号:LEO设研所

Powered by Froala Editor

全部评论:22

  • 158***3299

    2020-12-16 17:45

    你这个只能停留在效果图,真实现线上,前端各种吐槽兼容适配。

  • 小张爱大王

    2020-12-12 14:30

    投影?你做飞机稿还行。真上线不觉得腻吗?

  • 躁动的UU

    2020-12-08 17:52

    @ui555点cn: 哈哈哈 前端好可爱, 啥也搞不了

  • 躁动的UU

    2020-12-08 17:52

    @设计老蔡: 蔡神

  • 康康呆毛

    2020-11-30 17:56

    我狠起来,自己写代码

  • 迪拜酋长

    2020-11-27 16:54

    @182***0642: 用蓝湖或者像素大厨,投影的大小会直接显示出来,根本不用和前端去纠结这个啊

  • ui555点cn

    2020-11-23 09:12

    @182***0642: 没事 当我没说前半句

  • Buddy野狮

    2020-11-19 18:09

    @longlonglongago: 我也觉得

  • 182***0642

    2020-11-19 15:20

    @ui555点cn: 你是说前端技术菜吗

  • ui555点cn

    2020-11-19 14:39

    @黑白灰: 前端:太麻烦搞不了

  • ui555点cn

    2020-11-19 14:38

    @182***0642: 技术菜别怪前端,我们前端:搞不了,不加了 我看:一大片白

  • 182***0642

    2020-11-19 10:50

    没用的,做好之后,前端说我自己加

  • 2020-11-17 10:30

    @沧海一粟_Andy: 双手双脚赞同

  • 林奉折

    2020-11-11 10:20

    优点 不是有点 一点小瑕疵

  • 沧海一粟_Andy

    2020-11-04 08:45

    设计师辛辛苦苦调好的阴影,在前端那里有时候也会翻车,所以为了避免这种情况,常常还要帮他们设置阴影参数,心累

  • Mlx

    2020-11-03 11:06

    哥!太短了.

  • 黑白灰

    2020-11-03 10:32

    @皮老闆。: 两种方法:一是调整好投影参数 二是在本体下复制一个,调整大小、颜色、不透明度,再进行模糊

  • 177***2920

    2020-10-31 12:47

    @longlonglongago: 淡点还行,加得太重了

  • 设计老蔡

    2020-10-30 18:32

    666

  • longlonglongago

    2020-10-30 17:52

    你这里不是色块和描边更突出吗,投影太容易审美疲劳了这阵风已经吹过了

  • 皮老闆。

    2020-10-30 17:24

    想问一下,这种比较自然的弥散投影的方式一般是怎么实现的

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票