新氧 | 互联网医美平台上市第一股——视觉体系赏析

原创 1 收藏 评论
举报 2019-08-19

屏幕快照 2019-08-19 下午1.41.51.png

大家好~很高兴能和大家分享和探讨新氧平台的设计风格

新氧在互联网医美平台算是佼佼者了,那同样平台的视觉体系也相对成熟。每一次大促甚至是每一个专场都有在尝试、探索符合平台属性的新的视觉表现形式。

设计的基因也就是设计的外在表现,总结了四点,接下来也会按照这四点进行展开~风格、创意、配色以及结构。

屏幕快照 2019-08-19 下午1.38.45.png第一部分:风格

风格的确定并不是空穴来风,我们要考虑大促主题、受众客群、demo 文案甚至是所处的季节以及当下流行的视觉风格~我大概总结了新氧平台5种设计风格,其实大体上讲应该是四种,但是为了更好的让大家了解新氧风,所以又进一步进行了划分。

屏幕快照 2019-08-19 下午1.44.12.png

这种风格的可塑性很强,也有很多种表现形式,那新氧风则是将多种表现形式进行了融合。可能是在扁平插画将复杂的关系简约化的同时加入了一些立体插画的元素,从而使画面更加有呼吸感;也可能是在立体插画(2.5D插画)中运用了一些机理质感和光感,可以达使到画面更加丰富的效果。

屏幕快照 2019-08-19 下午1.45.19.png

这一类插画算是比较有特点和高辨识度的风格。在它的外轮廓运用了描边,可以清晰的表达抽象的事物,以及元素和元素形态上的区分。可以线条来表达情绪已经画面的细节和灵动性。但是这一类风格插画风格会有一些小的弊端,就是所有元素都在同一层次上,画面没有主次以及空间感。所以画面容易显得乱,且重点信息容易被忽略掉。因此我们在运用此类风格是一定要注重元素、标题、颜色等在画面中所占的比例。

屏幕快照 2019-08-19 下午1.46.29.png

渐变插画有点类似日本漫画场景的感觉,风格特别唯美浪漫。光感比较强,所以也称为微光插画。渐变颜色一般采用相近色,注意光源的统一以及投影和环境色的加入,使画面更加真实合理从而达到丰富画面的目的。

屏幕快照 2019-08-19 下午1.48.36.png

传统的的空间立体风其实是我们熟悉的2.5D风。那在消费者注意力越来越分散的数字环境下,非常“高大上”,更多用于电影和游戏后期的C4D,现在在互联网平台中也越来越多被应用起来(考拉严选)。可以预测到未来的几年C4d视觉静动态图将会是视觉传达领域的主流表现形式。

屏幕快照 2019-08-19 下午1.49.25.png

其实这并不是一种风格,而是近两年新氧会产出一些比较有创意、有意思的主题大促。针对特定的主题比如:去年双11的星球主题、66戏精主题、花样出游主题等。那根据特定的主题要求产出与主题契合度高的视觉风格,从而更好的突出主题风格,使大促创意最大化的吸引客群。对于设计师来说整个过程有挑战更多的是专业上的提升。

第二部分:创意

屏幕快照 2019-08-19 下午1.52.25.png

与其说是创意不如说是灵感和思路。那我们的灵感来源于哪里呢~

屏幕快照 2019-08-19 下午1.53.21.png

我的灵感主要来源以下四个方面:DEMO文案、生活、素材库、脑暴。

首先我会根据专场主副标题来寻找重要信息。比如说66齿科大促主会场,灵感来源中于副标题的魔法盛典。

生活:设计源于生活,有服务于生活。那我们的灵感和创意也一样~坚持自己的兴趣爱好、去参加一些艺术沙龙展览等,都会丰富我们的艺术阅历,从而更好的服务于我们是视觉。

素材库:养成日常收集好的视觉参考很重要,平时可以去浏览一些比较好的设计网站,比如国内的花瓣,国外的behance等。

脑暴:当我们在接到设计需求不知道画面中出现哪些元素时,我们可能要进行一下脑暴,针对某一观点进行实物联想。比如说七夕:首先会想到牛郎织女鹊桥相会,但是这种传统的元素不太符合我们的调性,而且元素过于直接对于用户来说吸引力不大。那一定还有其他的元素适合七夕的主题,比如说:天使、丘比特、情书、邮箱、甜甜圈、污一点可能会有XO的元素出现。这样我们的可运用素材就会多很多。

第三部分:配色屏幕快照 2019-08-19 下午1.55.21.png首先我们确定配色的目标:精准快速的传达会场主题&买点是第一要义,其次要符合我们平台女性用户为主的消费客群,同时要营造专场氛围,让用户通过氛围快速理解和融入专场内容当中,加深印象。屏幕快照 2019-08-19 下午1.56.21.png色系主要包括同色系、对比色系以及复古平面色系(多色系)。同色系是指在色环上相距不超过45°的两种颜色,整个页面在保持色彩的统一的前提下,增强了画面的层次和丰富性,从而提升了整个页面的层次感和品质感。对比色是指在色环上相距120°-180°之间的两种颜色(180°时则互为互补色)处于对比色关系的两种颜色,通常色相差异较大,能够相互产生强烈的对比效果,我们可以利用这种原理来增强画面的吸引力。复古平面色系同色系和对比色系都会用到,画面颜色较丰富,从而画面氛围感更强。那新氧平台运用的比较多的是后两者。

接下来我们从色相、明度、纯度来分析一下色彩搭配规律

屏幕快照 2019-08-19 下午1.58.28.png环境色、细节、质感都可以提升品质感。我们在设计过程有时侯会忽略我们学习过的一些美术理论基础,比如说光源的统一、投影的角度等。这些元素虽然只是占了画面的一小部分,但是对于整体视觉的直观感受很重要。

屏幕快照 2019-08-19 下午1.59.35.png

第四部分:结构屏幕快照 2019-08-19 下午2.00.40.png

屏幕快照 2019-08-19 下午2.01.54.png


    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    参与评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)