自从苹果 big sur 发的 UI 视觉图标
变成了轻拟物风格
其他大厂都开始采用这类应用图标!
扁平图标趋势会继续下去吗?
怎样才能做出这种流行的轻拟物图标呢?
就业衔接班 @吃喝玩乐团团长
团长老师用实例教你4 步完成!
打开手机电脑上各种 app的图标,放眼望去,几乎都是扁平化设计风格占主导,虽然扁平图标能提升用户获取信息的效率,但也降低了设计师做 UI 界面的难度。
比如在大部分移动端的 UI 界面设计中,只需要整合图片素材,矢量图标,几何形状,文字,大部分工作都只是排版上的工作,很少涉及图标的创作。因此,UI设计门槛无限降低,大量从业者经过短期培训就能上手,就导致了大部分设计师图标都画不好。
这种状态持续了很多年,对于这几年入行的UI设计师来说,拟物变成了一个很陌生的事物,虽然当下的设计环境中,拟物不是必修课程,但是我们要知道,做拟物并不是为了在某些案例上使用,而是用来全方位提升我们设计师的基础素养,既可以学习传统美术中的结构、光影、透视、色彩等知识点,还能加强对软件的熟练度。
学习拟物图标,我们需要先来看看图标的发展过程。
从最早期的UI来看,互联网的发展处于萌芽阶段,因为技术发展不成熟和传播载体的原因,UI设计处于扁平化风格。
后来互联网飞速发展,经过时间沉淀和技术积累,早期大批设计者投身于UI设计行业,各种第三方和官方UI设计百花齐放,这个阶段UI设计将光影质感表现得淋漓尽致。
随着社会安定,新一代年轻人涌入市场,人民整体审美水平的提高,拟物风逐渐引起视觉疲劳,并且各大手机厂商如雨后春笋崭露头角,因为拟物图标的精致设计,提升了制作成本,不利于UI界面快速跟新换代的时代需求,也不利于整体项目的推进。从2013年的IOS7,以及同时间段的安卓4.4,都开始抛弃拟物化风格图标,实现了UI的扁平化。
到现在,个大厂商又开始将,扁平化与拟物进行结合,再到微拟物的风格的转变。
首先我们来看下早期优秀的拟物图标案例,都将物体表面的光影、质感、肌理、透视表现得淋漓尽致。看上去非常精致,但是细节太多,制作起来非常麻烦。
而扁平化风格的UI,从整体造型上来看所运用的知识点并不多,没有过多的光影结构,有的只是造型的把控与配色的搭配。
简单的结构与内容,也让几乎80%的设计师缺少对光影质感的理解,从而限制了自身作品多样性。
而轻拟物的发展很好的弥补了这一点,轻拟物虽然“轻”,但是它有着与拟物图标同源的光影逻辑,具有有实体质感。
前段时间苹果新系统big sur,各大电子厂商的 app 图标中,我们不难看出,未来一段时间UI设计的发展,将会大量运用轻拟物质感。所以,想提升自己硬实力,咱们需要学好光影理论。
前面说到轻拟物的核心,和拟物设计是一致的,只是在造型与光影塑造上,会省略很多复杂的细节与质感。如果想做好轻拟物,我们需要关注3个东西:造型、光影和配色。
造型概述
造型就是图标外轮廓的表现,为了更好的信息传递,可以通过外轮廓的造型,将想要传递的信息概括在造型上。可以说造型是一个图标的筋骨。
光影概述
如果造型是一个图标的筋骨,那光影就是一个图标的血肉,一个小圆,如果没有光影,就是一个圆洞而已,但是加了光影,物体的体积变得更丰富,可以说光影=体积。
光影六要素解析
光影塑造物体体积,光源确保画面中有光感。光影共有 6 大元素,分别是光源、高光、暗部、明部、投影、反光,每一个要素都能影响到物体体积的构成。(视情况定,并非全部都添加)
高光:表示距离光最近的面;
暗部:用来区分受光面和背光面,体现出物体基本体积;
明暗过渡的柔和程度:反应出体积转折面的转折强度,过渡越柔和,转折越平滑,过渡越生硬,转折越坚硬;
反光与投影:确保物体是放置在桌面上。
更多光影知识,可以看看我之前写过的文章:
光影和造型塑造了立体的形体,那配色就是情感表达的基础,是一个图标的灵魂,在形体的基础上,不同色彩的搭配能构建出一幅的好的作品。
更多色彩知识,可以看看如如老师之前写过的文章:
我以微信的图标为例,做一个轻拟物重绘。这里我们重点要学:塑造轻拟物图标的原理。
如果我这里写个完整的图文教程,学起来最慢,况且,换个图标,就要重新学新教程?
微信有自身的基本型,我们只需要按照原图形制作出来。我想这一步,你应该没什么问题吧?
在这一步,不同的图标需要完善不同的细节,因为这里是一个UI界面的标志图标,本身并没有太多细节需要调整。
根据图标本身的形体,分析图标结构,从结构塑造光影体积。一般来说,内阴影可以塑造出百分之80的物体结构的光影,并且可以通过创建多个内阴影,从而塑造出物体的高光,反光等结构。
根据分析得出的光影结构,使用内阴影分别塑造高光、暗部、反光、投影、明暗过渡的效果。
最后一个简约的微信轻拟物图标,就完成了。
总结
规律总结
一:塑造外轮廓造型,好的造型是一个好图标的骨架。
二:造型细节完善,运用大量圆角效果可以让小巧的图标更加圆润。
三:基础明暗分析,对要塑造的体积胸有成竹,才方便光影体积的塑造。
四:光影细节添加,根据对体积基础明暗的分析,完善画面光影。
举一反三
通过上面的示例,我们可以举一反三完成其它轻拟物图标的塑造。
结语
未来一段时间很有可能会大量运用轻拟物质感。我们学习光影塑造,能提升自身作品的多样性,增加作品视觉输出的可能性,也能让我们能更加从容的面对复杂多变的互联网。
同时,想成为一名设计师,建议大家还要关注设计流行趋势,偶尔做些市面上流行的高频产出的类型,比如最近流行的2.5d、故障艺术海报等等。
文章就到此为止啦。在这里还想向大家介绍下 1 月 5 日即将开课:
优设设计师就业衔接班
3项热门设计软件
培养 PS AI AE 设计软件
面临多变的需求多变
遇到甲方一会儿想做动态插画
下一分钟又想做个酷炫海报
你可以一次可以出一整套方案
10 种流行设计类型
酷炫的海报、立体字、切割海报 、
视觉海报、运营插画、ui图标、网页动效
60 天的系统实战训练
你能够做出市面上高频产出的设计类型
培养原创能力
为了克服大多数人
对创作作品的未知恐惧
课程重点教你学会
一套完整的作品创作流程
从主题构思、到草稿绘制、
场景搭建、作品的优化调整
在 13 个实战练习作业当中
将其融汇贯通
1 v 1 毕业作业全流程辅导
课上会操作演示和讲解
软件操作和案例的重难点
课后和同学一对一进行问题解答
点评课集中,会补充讲解
每个同学作业中的错误和遗漏
确保每个人都能把案例做出来
并理解其中的制作原理
即将进入 2021 年
抓住新年伊始的60 天
学点新技能,提升自己的核心竞争力
让自己有个好的开头!
添加课程咨询师微信
私信咨询师,发送暗号【201230】
即可获取基础营30元专属优惠券哦!
👇🏻👇🏻👇🏻
微信:【uisdc2 】
微信:【uisdc3 】
非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。
转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
发表评论 已发布 4 条