1. 主页 > 行业资讯 > 设计文章 >

横幅海报的分层设计

这是前段时间做了电商页面后的一些体会。我们以参与式调查的形式推出,希望对你有所帮助。如果你有更好的主意,请留言讨论

既然是参与式的探究,那么对前因后果的清晰了解是必不可少的环节;我尽量用尽量少的文字来描述,但我不像作家那样善于用文字表达。这样文章可能会显得有点啰嗦,请见谅。

前言:

在话题开始之前,我想提出一个奇怪的现象:为什么现在站着很酷?分享面板设计、横幅设计、字体设计的人那么多,其中有一些资深前辈工作了十几年,但还是有很多人在设计页面的时候还是头空空,只能在网站上进行素材的搬运,然后进行修改,草草了事。从长远来看。

在过去的工作中,我遇到了许多渴望各种网站贵宾的设计。然后设计的时候很自然的选择了模板,点了下载,随便换了复制图片。

大量模板的使用确实加快了设计和绘图的速度,但我不认为这是一个好现象。在我看来,设计似乎是在不断的纠结于第一个,甚至是在悲伤中,然后我们的感知逐渐加深。同样的事情转变了。这种对设计的感悟是很难得的,他需要我们孜孜不倦的去做,去思考;是长是短取决于:做了多少,看了多少,想了多少,时间跨度,智商水平;但是模板的频繁使用减少了我们的行动和想法,从而延缓了这种感觉的到来,让我们进步越来越慢。

以上是设计要经历和延续的过程,这个题目当然需要更全面深入的描述;但是我们这次的重点不在这里。就在这里说吧。

切入正题,我描述如下:1。“分割设计”形成的原因及概念

2.2 .横幅中“分层”的表达及方法

3.“层次设计”的应用与延伸

4.总结

1.“分割设计”形成的原因及概念

我来形成“分层设计”的概念,是前段时间做一个电商活动主页时产生的;当时和用人单位沟通了一下页面的显示形式,在网上找了一些参考资料,心中有了一个模糊的概念后开始用c4d建模。结果模型建了两天还是没效果,我一气之下删了,决定重新构思。

静下心来,我决定反思一下,为什么第一屏建了两天,还是没有达到理想状态。与用人单位沟通不清楚吗?或者技术无法实现,我不这么认为;

坐在楼梯上想想都有点心疼。对于一个设计,我想做一个大的,但是做不好。毕竟我不是新手。

我在工作中想到一个经典的坦克分解案例:UI界面的信息层次呈现和CG建模

UI信息层次:通过页面信息的层次划分,用户可以通过眼球运动获得一定顺序的信息,帮助用户高效自然地获取和理解信息

CG坦克模型分解:通过将坦克模型逐渐分解成单一的几何形状,可以对整个坦克进行建模

在我们了解了UI界面中的信息分层和CG建模坦克的分解设计之后;令人惊讶的是,这两个不同的行业有惊人的相似之处,两者都被“分”这个词分成简单的个体。那为什么不能尝试把这些理论应用到班纳的设计中呢?

“没有理论像现实一样具体”不是我说的,是别人说的;事实上,我不得不说,这些例子更加直观和令人信服

但在此之前,我们可以通过上面的讨论得到横幅“分层设计”的概念:将横幅分解成不同的分层元素,将复杂的页面变成简单的元素进行设计。

2.2 .横幅中“分层”的表达及方法

当我们在“纠结-思考-总结”之后得到一个令人惊讶的横幅设计,似乎比成功设计出一个令人满意的作品更让人兴奋;因为我们被困在了缺乏灵感的牢笼里,却在角落里找到了一把似乎没有坏处的大剑。看来我们有希望突破牢笼,翱翔九天之外,将把推广页面、细节页面、ui界面设计等各种厉害的敌人,作为利剑。

当我们衡量了那么多内容却还没有付诸实践的时候,就有纸上谈兵的嫌疑;我们不妨试试这把大剑是否锋利,有没有一些“敌人”;在选择“敌人”的时候,我想试试电商。大家要知道,电子商务的“敌人”是一个很凶的敌人。

我在素材网站上搜了三个电商横幅,依次对质;

我们先来看第一个:

如上图所示:我们采用垂直和水平结构分层。通过观察发现这是一面平面横幅,背景比较简单,比较适合水平分层;

我们把这个横幅分为三层:①装饰层,②文案层,③主体层,④装饰层;不难发现,当这个横幅分为三层时,每层所剩无几,变得极其简单:

(1)装饰层:是简单的几何构图;

2.文案和主题层:是运营提供的素材;

文案和排版的难度可能会有疑问。我有两个又好又快的方法:1。继续按照大小、优先级、中英文、亲密度等分层。;2.花瓣搜索文案排版,会有上千种排版方式,你可以优雅的选择其中一种。

有了上面的讨论,我们自然得到了“分层设计”的第一种方法:水平分层

好了,我们来探索一下是否有另外一种方式来看待第二种:

这是我们讨论的第二张图:贝贝这张图不太好找,花了大概十分钟才找到合适的案例图。至于原因,我以后再说。通过观察,很容易发现此图适合垂直分层:①背景层,②文案背景层,③文案层,④产品层,⑤前后装饰层等。

让我们一个一个解释

①背景层:填充主题贝贝少女色系,然后模糊,即使是学了两天ps的人也可以

复制装修背景层:圆形的几何形状,然后叠加图层样式,不同深度的颜色,嗯,这些都是技法和基本的色彩理论,这里就不多描述了,如果要做一个类似的,完全可以把圆形变成正方形或者其他形状,把楼梯变成圆柱或者舞台等几何形状。

2复制层:字体已经轻微变形。在ps里,两键T结合三键T的基本技术对于一个设计来说并不比开榴莲难

为了不那么重复,后面的产品和元素的摆放我就不多解释了,还有一个案例需要仔细解释

这里可以直接画出“分层设计”的第二种方法:垂直分层

通过以上两个案例的分析,相信大家都已经明白了“分层设计”的概念,但是在实际工作中,单一的横向分层和纵向分层真的很少。如果仔细观察第一种情况,不难发现单一的横向分层并不准确,因为它还有背景层和主题装饰层,所以在实际应用中多以横向和纵向的形式呈现。然后在第三种情况下,我会分析这两年常见的C4D页面,也是比较复杂的页面。

这是普桑尼克天猫618的页面

在复杂页面的设计中,如果只使用横向和纵向分层,可能不太容易理解。场景中有很多复杂的元素。我们不妨通过观察这一页的构成是否类似于一个挑战来深入思考;是的,这个页面的场景类似于一个挑战。如果我们在这里理解了,我想我们已经开始分析了。

方法如下:垂直分层和水平分层场景关联

我们从垂直方向(从后向前,因为背景总是简单易识别的):①背景层②,文案背景层③,文案④,产品层⑤,产品装饰层⑥,前后场景的装饰层

(1)背景层:一个深色渐变背景叠加一个线条图案,网站上有很多这样的纹理图案素材。

2.文案背景层:说到文案背景层,内容很多,变得复杂。可能会有一些问题。可能会有为什么左边两个柱子后面一个柱子的疑问,但是别忘了我们还有一个场景关联。那么真实的场景是什么呢?找到一张图片(请忽略画质)

看到这里,我想大家已经能明白场景中的元素是怎么来的了;基于现实场景的设计,挑战环与木桩相关联作为装饰元素,而齿轮是c4d中最常见的元素。我认为把它们作为一个设计来想象和应用并不难。设计来源于现实,高于现实,这不是我说的。我只是拿着,合理应用。显然,这句话是对设计的一个很好的诠释。

3.文案层:c4d文字设计管这些设计很常见,各大素材网站都能搜到;这里没有太多关于技术的讨论,这是设计的基础。

④.产品层:没什么好说的,放在自己的产品里,调整颜色融入场景。

⑤.产品装饰层:我们可以看到产品下面放置了正方形,基本的设计准则之一就是亲密度。显然,在这里放置正方形比圆形更符合竞技场场景。

说到这里,就不用说这张海报留下的装饰元素了。装饰元素太多。很多几何元素都可以作为装饰。

然后这三个案子就完事了。我们可以在这里总结一下“分层设计”的方法:1。水平分层2。垂直分层3。水平和垂直场景

3.“层次设计”的应用与延伸

当我们理解了“分层设计”的概念和方法,它还和以前一样吗?之前看的感觉很好,很有意思。不过还是不急着练。我将使用我们讨论的这个概念来设计实际的案例,并分享完整的过程。希望通过案例的演示,能理解“分”的含义和目的

但是在做实际案例之前,我想请大家理解并记住“分层设计”这个概念。这样想法就可以参与到调查中来,没有太多废话,我们现在就开始

这是我前段时间做的618活动页面(你可以去我的主页完整的看一下,就在前一个)。我来解读一下思路和流程(毕竟我不是专业的电商设计师,可能也不是专业做的,但是手法不是我们这次讨论的范围)。如果你有好的想法或者更好的设计,也可以交流指导。

和甲方沟通后,我把之前的稿子扔掉了。在这个草稿中,我使用了:垂直分层和水平分层场景关联

第一步:看了很多电商的高端运营之后,用了场景联想:做个舞台就好。对我们来说,这个场景是一个舞台,一个舞台,而不是上面的一个平台(这里我想偷个笑,我从第三种情况的设计中借鉴了不少。作为一个设计,我们大胆承认自己是站在前辈的肩膀上来设计的)

第二步:当我们有了场景,就要开始分层了,不仅是横幅的分层,还有整个页面的分层,如下图

我们把整个页面层层排列后,你有没有发现,似乎设计首页正在向填充首页转变,只要在相应的位置填充相应的内容,其实抢购内容、优惠券额度、产品图片、文案、价格都是甲方准备的,所以似乎只有横幅才让我们重点;

第三步:好了,我们回到banner,我直接传递第三种情况的结果:①背景层②,文案背景层③,文案④,产品层⑤,产品装饰层⑥,前后场景的装饰层。然后依次填写,形成我们的横幅

我想从背景层开始,因为背景通常比较简单,容易产生效果(我会按照步骤来填东西,内容可能有点长,但总比比较直观好)

①背景层:渐变背景叠加纹理

2.文案背景层-5。产品装饰层:有了背景后,开始填充文案背景层。在此之前,我们用场景联想:我们用舞台作为我们的场景;是的,百度有一万个阶段,选一个来建模。对于一个舞台,大屏幕,音响,背景音乐,人物,这些都是很容易想到的,在舞台上也是标准的;于是我们找到了我们舞台的一个场景;然后在舞台两侧放一些方块来放置我们的产品。

(3)复制层-(4)产品层:c4d的三维齿轮灯管太普通了,不能再普通了;将产品放在合适的角度

⑥.装饰层:在现实场景中丰富舞台装饰是必不可少的。我们不妨找一些舞台相关的元素作为装饰,比如灯、烟、一些几何形状。至于后面的楼,我直接在c4d自己的模型里拿出来,适当的懈怠了一下。

通过案例研究和实践,我们发现“分层设计”真的很实用,那么可以推广到其他东西吗?

当然,我给你举个小栗子:记得第一次在酷站发完整个项目,打包的时候感觉很焦虑,有很多想法,但是不知道说什么,说什么,然后憋了一个屏幕很久,最后结果一塌糊涂。后来,我换了一种方式。我先去看看别人怎么发:

准备了十几个产品分析。结果我分析了两三个产品,觉得没必要分析。他们的套路都一样。我们要做的就是草拟框架,剩下的就是填写内容。现在把它看作是分层方法的扩展。我们再次强调了“分”这个词的含义,希望能灵活运用。

4.总结

“分层设计”这个概念相信大家都懂了,但是掌握了就能做好设计吗?这个问题显然不够严谨,就像米饭做的好不好不仅仅取决于米饭的质量;水、时间、烹饪方法都在其中。这和设计差不多。有了方法,我们还需要合理的排版,场景的联想(比如做一个中秋页面,是否从中秋联想到月亮、嫦娥、月饼、玉兔等相关元素),色彩的运用。

当然这些都是分层后可以借鉴的,但这些都是设计的基本理论,也是检验一个设计的基础是否扎实的。这就像职场上流传的一个老板问员工,一个领导问客人什么时候来,员工明天就回来了;领导说了具体时间、地点等。我觉得设计是一样的。页面是否合理流畅,审美基础的深度和体验至关重要,要求我们不仅要理解,还要多记,理论与案例相结合。

当然,如果你是新人但想设计一些复杂的场景,“分层设计”是个不错的方法,至少比模板更有好处。

好了,这是我上次做618页的经历。这种情绪似乎很难获得,因为它只有一页。但是如果我之前不知道UI页面的信息分层,不知道CG建模坦克的很多分解案例,可能就不会有“分层设计”这个概念了。所以多看多思考多做总会产生一些让人惊讶的想法。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/318.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息