4 步学会「轻拟物」!苹果、小米都在用的设计风格!

时间:2020-12-30
类别:PS教程
水平:进阶
观众:4.4w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

​​自从苹果 big sur 发的 UI 视觉图标

变成了轻拟物风格

其他大厂都开始采用这类应用图标!

扁平图标趋势会继续下去吗?

怎样才能做出这种流行的轻拟物图标呢?

就业衔接班 @吃喝玩乐团团长 

团长老师用实例教你4 步完成!

一、为什么要学拟物图标?

打开手机电脑上各种 app的图标,放眼望去,几乎都是扁平化设计风格占主导,虽然扁平图标能提升用户获取信息的效率,但也降低了设计师做 UI 界面的难度。

比如在大部分移动端的 UI 界面设计中,只需要整合图片素材,矢量图标,几何形状,文字,大部分工作都只是排版上的工作,很少涉及图标的创作。因此,UI设计门槛无限降低,大量从业者经过短期培训就能上手,就导致了大部分设计师图标都画不好。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

这种状态持续了很多年,对于这几年入行的UI设计师来说,拟物变成了一个很陌生的事物,虽然当下的设计环境中,拟物不是必修课程,但是我们要知道,做拟物并不是为了在某些案例上使用,而是用来全方位提升我们设计师的基础素养,既可以学习传统美术中的结构、光影、透视、色彩等知识点,还能加强对软件的熟练度。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

二、扁平-拟物-扁平-轻拟物-?

学习拟物图标,我们需要先来看看图标的发展过程。

从最早期的UI来看,互联网的发展处于萌芽阶段,因为技术发展不成熟和传播载体的原因,UI设计处于扁平化风格。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

后来互联网飞速发展,经过时间沉淀和技术积累,早期大批设计者投身于UI设计行业,各种第三方和官方UI设计百花齐放,这个阶段UI设计将光影质感表现得淋漓尽致。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

随着社会安定,新一代年轻人涌入市场,人民整体审美水平的提高,拟物风逐渐引起视觉疲劳,并且各大手机厂商如雨后春笋崭露头角,因为拟物图标的精致设计,提升了制作成本,不利于UI界面快速跟新换代的时代需求,也不利于整体项目的推进。从2013年的IOS7,以及同时间段的安卓4.4,都开始抛弃拟物化风格图标,实现了UI的扁平化。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

到现在,个大厂商又开始将,扁平化与拟物进行结合,再到微拟物的风格的转变。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

三、什么是拟物呢?

首先我们来看下早期优秀的拟物图标案例,都将物体表面的光影、质感、肌理、透视表现得淋漓尽致。看上去非常精致,但是细节太多,制作起来非常麻烦。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

而扁平化风格的UI,从整体造型上来看所运用的知识点并不多,没有过多的光影结构,有的只是造型的把控与配色的搭配。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

简单的结构与内容,也让几乎80%的设计师缺少对光影质感的理解,从而限制了自身作品多样性。

而轻拟物的发展很好的弥补了这一点,轻拟物虽然“轻”,但是它有着与拟物图标同源的光影逻辑,具有有实体质感。

前段时间苹果新系统big sur,各大电子厂商的 app 图标中,我们不难看出,未来一段时间UI设计的发展,将会大量运用轻拟物质感。所以,想提升自己硬实力,咱们需要学好光影理论。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

四、轻拟物的核心知识

前面说到轻拟物的核心,和拟物设计是一致的,只是在造型与光影塑造上,会省略很多复杂的细节与质感。如果想做好轻拟物,我们需要关注3个东西:造型、光影和配色。

1、造型

造型概述

造型就是图标外轮廓的表现,为了更好的信息传递,可以通过外轮廓的造型,将想要传递的信息概括在造型上。可以说造型是一个图标的筋骨。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

2、光影

光影概述

如果造型是一个图标的筋骨,那光影就是一个图标的血肉,一个小圆,如果没有光影,就是一个圆洞而已,但是加了光影,物体的体积变得更丰富,可以说光影=体积。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

光影六要素解析

光影塑造物体体积,光源确保画面中有光感。光影共有 6 大元素,分别是光源、高光、暗部、明部、投影、反光,每一个要素都能影响到物体体积的构成。(视情况定,并非全部都添加)

 

4 步学会「轻拟物」!苹果、小米都在用的设计风格!高光:表示距离光最近的面;

暗部:用来区分受光面和背光面,体现出物体基本体积;

明暗过渡的柔和程度:反应出体积转折面的转折强度,过渡越柔和,转折越平滑,过渡越生硬,转折越坚硬;

反光与投影:确保物体是放置在桌面上。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

更多光影知识,可以看看我之前写过的文章:

3、配色

光影和造型塑造了立体的形体,那配色就是情感表达的基础,是一个图标的灵魂,在形体的基础上,不同色彩的搭配能构建出一幅的好的作品。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

更多色彩知识,可以看看如如老师之前写过的文章:

五、轻拟物实例演示

我以微信的图标为例,做一个轻拟物重绘。这里我们重点要学:塑造轻拟物图标的原理。

如果我这里写个完整的图文教程,学起来最慢,况且,换个图标,就要重新学新教程?

第一步:外轮廓造型

微信有自身的基本型,我们只需要按照原图形制作出来。我想这一步,你应该没什么问题吧?

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

第二步:造型细节完善

在这一步,不同的图标需要完善不同的细节,因为这里是一个UI界面的标志图标,本身并没有太多细节需要调整。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

第三步:基础明暗分析

根据图标本身的形体,分析图标结构,从结构塑造光影体积。一般来说,内阴影可以塑造出百分之80的物体结构的光影,并且可以通过创建多个内阴影,从而塑造出物体的高光,反光等结构。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

第四步:光影细节添加

根据分析得出的光影结构,使用内阴影分别塑造高光、暗部、反光、投影、明暗过渡的效果。

最后一个简约的微信轻拟物图标,就完成了。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

总结

规律总结

一:塑造外轮廓造型,好的造型是一个好图标的骨架。

二:造型细节完善,运用大量圆角效果可以让小巧的图标更加圆润。

三:基础明暗分析,对要塑造的体积胸有成竹,才方便光影体积的塑造。

四:光影细节添加,根据对体积基础明暗的分析,完善画面光影。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

举一反三

通过上面的示例,我们可以举一反三完成其它轻拟物图标的塑造。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

结语

未来一段时间很有可能会大量运用轻拟物质感。我们学习光影塑造,能提升自身作品的多样性,增加作品视觉输出的可能性,也能让我们能更加从容的面对复杂多变的互联网。

同时,想成为一名设计师,建议大家还要关注设计流行趋势,偶尔做些市面上流行的高频产出的类型,比如最近流行的2.5d、故障艺术海报等等。

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

文章就到此为止啦。在这里还想向大家介绍下 1 月 5 日即将开课:

优设设计师就业衔接班

3项热门设计软件

培养 PS AI AE 设计软件

面临多变的需求多变

遇到甲方一会儿想做动态插画

下一分钟又想做个酷炫海报

你可以一次可以出一整套方案

10 种流行设计类型

酷炫的海报、立体字、切割海报 、

视觉海报、运营插画、ui图标、网页动效

60 天的系统实战训练

你能够做出市面上高频产出的设计类型

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

培养原创能力

为了克服大多数人

对创作作品的未知恐惧

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

课程重点教你学会

一套完整的作品创作流程

从主题构思、到草稿绘制、

场景搭建、作品的优化调整

在 13 个实战练习作业当中

将其融汇贯通

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

1 v 1 毕业作业全流程辅导

课上会操作演示和讲解

软件操作和案例的重难点

课后和同学一对一进行问题解答

点评课集中,会补充讲解

每个同学作业中的错误和遗漏

确保每个人都能把案例做出来

并理解其中的制作原理

4 步学会「轻拟物」!苹果、小米都在用的设计风格!

即将进入 2021 年

抓住新年伊始的60 天

学点新技能,提升自己的核心竞争力

让自己有个好的开头!

添加课程咨询师微信

私信咨询师,发送暗号【201230】

即可获取基础营30元专属优惠券哦!

👇🏻👇🏻👇🏻

微信:【uisdc2 】

微信:【uisdc3 】​​​​

 

30 收藏 186

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 4

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片