1.3.36

优秀设计作品解析(一)

Recommand
Shenzhen/UI designer/3 years ago /1262浏览
优秀设计作品解析(一)Recommand
夏春喜

一些想法输出

在整个设计领域趋势向于多元化的今天,已经不再是一个设计风格主导整个领域了,今天借用behance的作品就视觉设计方向展开说说,对于想要寻求新鲜风格的设计师而言,都有借鉴和参考的意义,多种风格结合使设计达到相辅相成也是一种趋势。

这是我用figma临摹的一张behance佳品,为什么平平无奇的作品,能获得年度最佳作品呢?它既不是C端也不是纯B端的作品,更像一个网页与平面的结合体,像用作作品集封面也能让人眼前一亮,整个画面是富有层次的,用了多彩几何色块让页面更加活波,标题阅读是有停顿感和呼吸感的,还有弥散多彩模糊渐变风,总体来说,简洁又不简单,富有设计感又聚焦标题重点。

1、文字的停顿感

不知道大家有没有发现近几年,大部分的年轻人喜欢一段话隔开发送,如下图

而这种对话方式,竟然不知不觉的运用在了设计上,设计就是一个圈,有些巧思就会汇集到一起,用在标题上,就会有一种停顿感和呼吸感,吸引用户注意力更加聚焦于此。

2、清晰明了的层级关系


这是设计最基本的手法,一眼看去,可以很明显知道左边区域层级最高的是大字的标题和颜色填充的按钮。最忌的就是大的不够大,小的不够小,层级区分不开来。


3、多彩几何色彩的组合


其实整体没有太多花里胡哨的东西,就是几何色块的结合,更加重要的是这个创意,整体是非常和谐的,色彩搭配也非常的吸引人,圆形的弧度给人和谐营造一种有活力的感觉,如果是方形,可能就会给人一种严肃紧张的感觉,这里涉及到的一个心理知识点就是,不同的形状有不同的情感倾向。


4、弥散多彩模糊渐变风


我相信大家对于这个风格都不陌生,就是通过模糊达到弥散的效果,这个点,我就着重说一下设计技法,纯属个人摸索,有更多的想法欢迎交流讨论。


5、伪3D立体元素


3D设计的快速发展已经越来越火爆,运用在很多地方,我们可以随处看到,像一些3D角色设计,启动页、运营H5,3D设计绝对算得是现在的设计趋势之一,像很多岗位也需要设计师具有3D软件(C4D、Blender)的技能,那如果没有掌握这些技能的话,只能通过一些设计手法打造一种伪3D的效果。

下面结合例子讲一下我用figma做弥散效果的两种方法:
例子1

  • step-1

画出几个形状,可以是圆形、椭圆等各种形状,填充上鲜明的颜色(饱和度高的颜色,如果饱和度太低,模糊效果后会显得颜色有点脏),如图

排列方式根据自己想要的效果去调整。

  • step-2

选中形状,添加“Layer blur”图层模糊效果,模糊数值根据自己的实际情况去调整,数值越大,形状边缘越扩散越柔和,模糊的程度也会越大。

效果如下

  • step-3

再叠加一层颜色为#DFDDEA的矩形,透明度调整为76%,添加效果“Background blur”背景模糊效果,顾名思义就是让背景变模糊(毛玻璃效果就是用的这个),矩形的颜色取决于大家希望整体色调倾向如何去调整,我这里是偏蓝紫色调,值得注意的是,背景模糊是一定要配合矩形这个载体降低透明度去使用的,效果如下。

经过细节调整之后,整体已经变得和谐很多了,再放上样机展示,就是一个很舒服的背景了。

图片来源于网络,不做商用,如有侵犯,请联系删除。

为了让大家更清楚“Layer blur”、“Background blur”这两个效果的区别,我做了一张图希望大家能更好理解。

例子2

  • step-1

第一个例子主要用作制作背景,第二例子就是在用做制作元素
画一个填充色为#4168FF的圆形

  • step-2

command+D复制一个圆形,用做蒙版,画两个填充色分别为#CB77FF、#FE5C46的圆形,添加“Layer blur”图层模糊效果,一个具有弥散效果的元素就制作好了

✋拓展内容:用figma制作伪3D效果
这个模块的设计核心本质就是通过光影关系打造立体效果(我也不是画画出身的,就浅聊一下)

  • 通过投影突显视觉层次

投影效果“Drop shadow”, 可以调节投影的大小来模拟距离屏幕的远近,达到具有多维视角层次的效果。

投影制作可以通过多个投影叠加,不断调整达到自己理想的效果,给大家看看我的一些参数数值

这里可以给大家推荐一个figma做投影的插件,可以借助如 Neumorphism 创建漂亮的新拟态投影、SmoothShadow 创建平滑的分层阴影、oblique 创建长投影等。

  • 通过光影关系打造立体效果

像我们熟知的光影有亮面、明暗交界线、暗面、投影等,我自己总结了一个傻瓜式记忆方法就是凸面就是上亮下暗,凹面就是上暗下亮

最后

以上就是我临摹这个作品的一些想法输出,仅供学习参考,最后借用Flomo的品牌语作为结尾“持续不断记录,意义自然浮现”。

8
Report
|
5
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in