南京网站设计——如何巧用气泡让设计变得更高级

2020/09/16

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

大公司引领

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

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

设计师挖掘

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

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

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

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

泡沫和斑点风格 

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

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

它的特点 

随机形状

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

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

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

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

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

多元质感

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

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

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

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

明亮色彩

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

运用场景 

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

网页中的运用

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

界面中的运用

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

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

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

其他场景

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

 

南京网站设计

返回列表 >>

相关主题

出错了

Action:_after_view您所请求的方法不存在!


Action:_after_view您所请求的方法不存在!

您可以选择 [ 重试 ] [ 返回 ] 或者 [ 回到首页 ]