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

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

前言:

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

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

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

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

切入正题，我描述如下: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建模坦克的很多分解案例，可能就不会有“分层设计”这个概念了。所以多看多思考多做总会产生一些让人惊讶的想法。