既然作为参与式探究，清晰的了解来龙去脉是必不可少的环节；我尽量用尽可能少的文字描述清楚，但我毕竟不像作家那样擅长用语言去表达。以至于文章可能显得有些啰嗦，请大家包涵。

前言：

在话题展开前我想提出一个怪现象：为什么现站酷，简书上这么多人分享板式设计，banner设计，字体设计其中不乏一些工作十年以上的资深前辈，但是还是有很多人当设计页面的时候还是脑袋空空，只能素材网站搬运，然后修修改改草草了事，长此以往。

在以往的工作中我遇到许多的设计对各网站的vip趋之若鹜，然后设计的时候很自然选选模板，点击下载， 随便换换文案图片就完事了；

大量模板的使用确实加快设计出图的速度，但我并不认为这是个好的现象，在我看来设计好像是在一中不断纠结，甚至是难过中感悟，而随之我们的感悟渐深对于同一种事物看的转态变发生了改变，这种对设计的感悟来之不易，他需要我们不厌其烦的一版一版的做和思考；或长或短取决于：做的多少，看的多少，思考多少，时间的跨度以及智商的高低；而经常使用模板减少了我们的做和想，从而延迟这种感悟的到来，让我们进步愈发的缓慢。

以上是设计要经历并持续的过程，这个话题当然需要更全面更深入的描述；但我们此次的重点不在这里，姑且聊到这里为止。

切入正题，下面我于进行描述：1.“分成设计”形成的起因和概念

                            2.banner中的“分层”表现和方法

                            3.“分层设计”的应用和延伸

                            4.总结

1.“分成设计”形成的起因和概念

让我形成“分层设计”这个概念是前一段时间在做了一个电商的活动首页时产生的；当时和雇主沟通了页面的展现形式，在网上找了些参考，心里有了一个模糊概念便开始用c4d建模了，结果模型建了两天仍然效果不理想，一气之下就删除了，决定重新构思。

冷静下来我决定反思为什么首屏构建了两天仍然没有达到理想的状态，是与雇主沟通的不清楚吗？或者技法实现不了我想并不是；

坐在楼梯上想一想有点苦恼，对于一个设计而言想做去一次大的，结果却做上不足做下有余，毕竟不是才入行的新手。

我想起了本职工作中：UI界面的信息层级呈现和CG建模中一个经典的坦克分解案例

UI信息层级：通过对页面信息的层级划分，让用户通过眼球移动，按照一定的顺序获取信息，帮助用户高效自然获取和理解信息

CG坦克模型分解：通过对坦克模型逐步分解成单个的几何形体，从而实现整个坦克的建模

在我们了解了UI界面中的信息分层，和CG建模坦克的分解设计后；令人惊讶的是，两个不同的行业却有着惊人的相似都在于一个“分”字，将整体分解成简单的个体。那为什么我们不能尝试将这些理论应用在banner的设计上呢？

“何理论都不如现实具体”这话不是我说的，是别人说的；确实，不得不说实例更直观，更让人信服

但在这之前我们可以通过以上的讨论得出banner“分层设计”概念：将banner分解成不同的层级元素，让复杂的页面转化为简单的元素进行设计。

2.banner中的“分层”表现和方法

当我们经过“纠结——思考——总结”得出了一个令人惊喜的banner设计方案，这似乎比成功设计一张满意的作品更加让人兴奋；因为我们在陷入灵感匮乏的牢笼，却在角落里发现了一把看似无往不利的大宝剑。这似乎让我们有种冲破牢笼翱翔于九天之外的希望，将大促页面，详情页，ui界面设计等各种强大的敌人狩首于剑下。

当我们意测了这么多内容却还没付之于实践，当有纸上谈兵之嫌；我们不妨用一些“敌人”试一试这把大宝剑是否锋利；在选择“敌人”的时候，我想试试电商类的，大家都应该了解电商类的“敌人”是较为凶悍的一种。

我在素材网站上搜索三张电商类banner，依次对决；

我们先看第一张：

如上图所示：我们以纵向和横向为结构进行分层，通过观察这是一张平面的banner，背景较为简单，比较适合横向分层；

我们将这张banner分为了三层：①装饰层，②文案层，③主体层，④装饰层；不难发现当这张banner被分为三层之后，每一层的内容所剩无几，且变的极为简单：

①.装饰层：是简单的几何体构成；

②.文案和主体层：是运营提供的素材；

可能会有疑问文案还有排版的难度，我有两种不错且快速的方法：1.继续分层可根据大小，主次，中英文，亲密性等等等；2.花瓣搜索文案排版，将有成千上万的排版方式你可以优雅的选择其中一种。

有了以上的讨论我们很自然的得到“分层设计”的第一种方法：横向分层

ok，接下来我们再探索有没有别的方式，来看第二张：

这是我们讨论的第二张：这张贝贝的图片可不好找，大概花了十分钟才找到比较合适的案例图，至于原因我在后面会聊到。通过观察很容易发现这张图比较适合在纵向分层：①背景层，②文案背景层，③文案层，④产品层，⑤前后景装饰层等

我们逐个讲解下

①背景层：填充主题贝贝少女色系，然后模糊了一下，这哪怕对于学ps两天的人都能做的出来

文案装饰背景层：圆形几何形体，然后叠加图层样式，色彩用了不同的深度，好了这些都是技法以及基本的色彩理论，这里不做过多的描述，如果你想做个类似的完全可以圆形改成正方形或者别的形状，楼梯改成圆柱或者舞台等等的几何形状

②文案层：字体稍作了变形，在ps中两键+T结合三键+T这些基础的技法对于一个设计的难度不高于打开一个榴莲

为了少点啰嗦，后面的产品和元素的摆放我这里就不做过多的说明，后面还有一个案例需要仔细的讲解

这里可以直接得出“分层设计”的第二种方法：纵向分层

通过上面两个案例的分析相信大家对“分层设计”的概念已经有所了解，但在实际的工作中单一的横向分层和纵向分层确实十分少见，如果有认真观察第一个案例，不难发现单一的横向分层并不准确，因为他还有背景层和主题装饰层，所以在实际应用中多以横向+纵向的形式呈现，那么我在第三个案例会结合纵向+横向去分析这两年比较常见的C4D的页面，也是较为复杂的页面。

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

在复杂页面的设计上，如果单以横向+纵向去分层可能理解起来并不是那么容易，场景中出了有很多复杂的元素。我们不妨进行深一点的思考这个页面的构成，通过观察他是否类似一个擂台；是的，这个页面构成的场景类似擂台，如果我们已经理解到这里了，我想已经开始分析了。

方法如下：纵向分层+横向分层+场景联想

我们从纵向开始（从后往前，因为背景总是简单易识别）：①.背景层    ②.文案背景层  ③ .文案   ④.产品层  ⑤.产品装饰层  ⑥以及前后景的装饰层

①.背景层:一个深色渐变的背景+叠加一个线条图案，这样的纹理图案素材网站上很多。

②.文案背景层:到文案背景层的时候内容就很多了，且变的复杂了，可能有些无从下手，可能会有疑问为什么会左边摆两个柱子后面又摆一个，但别忘了我们还有一个场景联想,那么现实场景擂台是怎样的我找了张图（大家请忽略图片质量）

看到这里的时候我想大家已经可以理解场景中元素是如何来的；基于现实场景的设计，由擂台联想到木桩做为装饰元素，而在c4d中齿轮是作为最常见的元素，作为设计发挥下想象应用一下我想这是不难的。设计来源现实且高于现实，这并不是我说的，我只是合理的拿过来应用一下，显然这句话很好诠释了设计之道。

③.文案层:c4d的文字设计+灯管这些设计很常见，各大素材网站都可以搜索的到；关于技法这里不做过多的探讨，这是设计的基础。

④.产品层:这个没有可说的，放上在自家的产品，调整下色彩融入场景。

⑤.产品装饰层:我们可以看到，产品下面放的是方块，设计基本准则有一则便是亲密性，很显然这里放方形比圆形更符合擂台场景。

说到这里这张海报所剩的装饰元素已经不需要再说了，装饰元素太多了。很多的几何元素都可以作为装饰。

那么这三个案例已经都说完了，我们这里可以总结下“分层设计”的方法有哪些：1.横向分层   2.纵向分层  3.横向+纵向+场景

3.“分层设计”的应用和延伸

当我们了解了“分层设计”的概念和方法，是否还是和以往一样前面读了感觉不错，有那么点意思。但是实操起来还是一脸懵逼，不急，我会运用这个我们探讨出来的概念进行实际案例的设计，并分享完整的流程，希望通过案例的演示能理解“分：的含义和用途；

但是在实操案例之前，我想请大家理解并记住“分层设计”的概念。以便思路可以参与探究，废话不多说，我们这就开始