今天是 搜索
我要找人设计

如何巧用气泡,让设计变得更高级!

2020-07-24 12:14 发布 

加入专辑
设计文章资讯 / 举报
本作品由会员 日青 发布,如侵犯了您的版权请与设友网官方联系
[comiis_subject]
  • [comiis_views]人浏览[comiis_user] 发布于[comiis_time]
趋势的由来

232Z94I7-0.png.jpg

经常帮很多同学看设计作品,但看完大多都没让我留下什么印象,也就是没有让人觉得眼前一亮的点;什么是眼前一亮呢,其实就是作品中是否有不错的想法和视觉亮点,运用潮流趋势就是一种吸引目光的手段,你的设计中是否运用了当下主流设计趋势?你的设计在版式,构图色彩上是否有不错的表现?在当下同质化严重的背景下,我们需要去发现趋势,去总结规律,同时,也要学会思考如何把这些好的设计趋势,很好的落地到自己项目中去。

大公司引领

那么设计趋势可以怎么获取到呢?一般有几种情况:大公司的引导,比如apple,google这些国际大公司产品的更新, 因为其足够大的影响力,也具备相对资深的设计团队,所以他们每一次项目重大的改版都能影响整个设计圈的变革和潮流!

232Z93W8-1.jpg.jpg

▲比如ios去年推行了暗黑模式,就有不少产品及时跟随做出适配。


设计师挖掘

另外一种形式就是设计师引领变革,每年都会一些新的设计手法被优秀设计师们发掘出来,一般在综合类网站如dribbble和behance上先火起来,受到大批设计师的追捧,比如前不久兴起的新拟态风格,和越来越多的3d插图等等。

232Z925S-2.png.jpg

▲尤其3d插图是今年比较流行一种手法,运用这种立体元素来营造整体的视觉空间感,这种形式能很好的和其他产品拉开差异性,同时更好的传递信息,但是需要注意这种风格和页面其他元素之间的协调性。

232Z924X-3.png.jpg

▲包括根据内容定制的扁平插图,设计师通过这种轻快的色彩,让整个设计活泼轻盈,同时更符合当下年轻人群的审美,这些风格也大多数能从设计网站上感知到

总之,设计风格需要我们定期去归纳和总结,需要我们在平时看设计时候,多留一分洞察行业变化的心思,提炼出趋势运用到我们设计里面去,关于更多的设计趋势可以去我Pinterest看,我会定期总结分享出来的!

232Z92P0-4.png.jpg

▲https://www.pinterest.jp/uiskys/boards/


泡沫和斑点风格

前面我们分析了:趋势的由来,一般是由国内外知名公司比如苹果,谷歌,或者知名产品淘宝,天猫双11等等通过影响力带领,那么另外一种就是设计师发掘的,本周和大家分享:泡沫和斑点的设计风格,为什么叫泡沫和斑点,其实是我虾扯蛋取的,叫什么风格,自己定义为什么趋势不用太在意,你能GET到那个风格代表的核心元素和含义就行

232Z940F-5.png.jpg

这种风格运用很广,无论在平面设计,还是UI设计、插画设计中,最近都频繁的出现,我们今天就来分析下这个风格的特点?


它的特点

232Z942I-6.png.jpg


随机形状

在形状上,没有明确的特点和规律,都散落在界面的各个角落,图形大多是圆形,也有流动的不规则图形,他们都没有绝对的规律,排布也很随机,质感上则扁平,立体,渐变都有,看起来特别像我们生活中常见的气泡。

232Z93020-7.png.jpg

▲Wed ze这个网站就是运用这种椭圆流动的气泡,让整个页面形成一种流体风格,动感同时也很时尚,很能体现出产品AR/VR的行业特征

232Z910T-8.png.jpg

▲同样的Scotsman这个网站同样运用气泡来布局,通过气泡很好的散落在画面两侧,配合微动效,整个页面更加的灵动和有趣,同时画面中间也是利用了这种气泡风格来突出焦点

232Z941T-9.png.jpg

▲sweet同样采用了流动不规则气泡作为整个设计主风格,流动同时很时尚

232Z944S-10.png.jpg

▲液体动态汇合,透过气泡融为一体,形成和水一样灵动自由的效果


多元质感

232Z96218-11.png.jpg

立体:质感上有很多表达形式,可以运用C4D做出这种立体糖果色,它使得整个视觉风格比较突出,画面冲击力强,适合运用在一些重视觉偏营销的场景下

232Z94353-12.png.jpg

扁平+色彩叠加:除了立体质感风格,扁平化和色彩叠加也运用的比较多,色彩更为通透,整个画面节奏也更容易把控,配合动效视觉效果更佳

232Z92202-13.png.jpg

渐变+微质感:和扁平叠加风格不同,微拟物结合一些弱投影和渐变撞色让整个设计看起来更加的现代

232Z94534-14.png.jpg

图案填充:这种效果比较特殊,在圆角气泡里面填充图案,图形,整个设计会瞬间提升潮流感。


明亮色彩

232Z945N-15.png.jpg

在色彩上,这种风格色彩比较明亮,类似马卡龙配色风格,这样配色更能凸显它的多变和丰富多彩,当然同色系的搭配,也能表现出官方,科技感的一面

232Z93460-16.png.jpg

▲比如上图对于橙色的运用


运用场景

对设计趋势关注的最后,我们一定要去思考落地;否则就很不能算已经掌握了这个趋势。

网页中的运用

232Z95230-17.png.jpg

232Z94N1-18.png.jpg

网页中,气泡可以作为构图中心,通过构图形式很好的融入这种风格,也可以作为产品类型网站的装饰性元素,使页面更丰富有趣的


界面中的运用

232Z9A14-19.jpg.jpg

232Z95T1-20.png.jpg

界面中,可以作为动态导航,或者菜单来设计,让整个产品调性更加年轻化,通常作为个性化的表达

232Z95048-21.jpg.jpg

在一些动态可视化,或者智能场景中运用,或者在一些特殊内容表达上运用这种布局形式,和内容很好的形成一种互动

232Z91446-22.png.jpg

作为界面中的DNA,比如上图就是运用气泡作为设计DNA在启动界面和登录页面都运用气泡到极致


其他场景

232Z9E12-23.jpg.jpg

7-200P3102448.jpg.jpg

除了在网页运用,其实在平面设计,LOGO设计,插画设计中,这种气泡风格,也同样适用,关键在于我们如何去灵活搭配组合。


总结

今天的分享,更多只是抛砖引玉,希望大家养成这种培养视觉洞察力的习惯,去发现一些设计行业的规律,并学会掌握规律的变化,这样才能让自己的设计不断进步,做出让人亮眼的作品!加油!

B Color Smilies
设友网
[5推广币/天] 购买
设计师论坛
[2推广币/天] 购买
设计师联盟
[2推广币/天] 购买
如何巧用气泡,让设计变得更高级! 
[2推广币/天] 购买
快速回复 返回顶部 返回列表