如何快速设计电商专题页

专题设计是电商视觉设计师的主要工作之一，它的设计表现更像是平面媒体中的dm单、海报等的单页需求。

当我们从运营或品牌和市场部门接到设计需求时，如何能在第一时间内找到契合的方法，从而对需求进行梳理、分析、整理、直至最后的执行，是很多初中级设计师经常遇到的问

题，下面我就把我从业5年多的经验分享给大家希望能对大家能有所启发。

从接到需求，到对需求的执行我定义了三大部分的内容，由浅入深的带着大家一起分析下专题的设计方法。

看下图，定义三个过程，第一步整理需求，对目的品类特性活动风格整理，再关键词发散方法找见切入点，把活动定义成一个字一个词，最后思考整个设计是什么样。

这部分就是说，设计师要时刻带着脑子去接收需求，分析需求、直到最后的完成需求。思考先行，是做需求的第一步。就是你要跟你的需求方明确要做的是什么活动？面向用户是哪部分人群？等一些基础性的需求。

举个栗子：大家看上面这个图，是不是有一种快被融化掉的感脚呢？

这是一个全站的周年庆大活动，运营在碰头会中给到的设计方向虽然有但是较模糊，比如：常见的会说要热闹、要喜庆、要大气等。（呵呵当然，大气这个词是我最不想听到的）

这次的周年庆活动，运营还想到一个英文词give me five，大致的意思就是说：5周年快乐。那在接到这样的设计需求后，我会第一时间把会上运营提到的各种活动相关的重点内容，先进行第一次的过脑行动，梳理下需求方给到各种模糊的建议。

然后再根着文案和活动想达到的目的、感觉、从中整理出一些用于发散联想的关键字和词、用于接下来的设计执行。

分解需求

那么，从运营给到的模糊需求里

第一步：快速罗列出一些相关的抽象性词语，用于将无序的信息，语言化。

第二步：从众多的关键字中整理出一个核心设计切入点。如“生日”；

第三步：再依此列出同生日相关的各种元素和、词语，如图中圆圈标出的内容。

经验分享

在做需求时，先对脑中的思路进行梳理，就像佐藤可仕和的超整理术一样，要学会从众多无绪的信息中筛选出有用内容，之后再给有用的信息设定优先级，再筛出关键点。然后再琢磨怎么将这个关键点的特征放大化，直至形成鲜明风格如下图如示；

tips:

学整理术很实用，它不仅对我们的工作有用，更对生活有用。

学会整理，可以让工作中的思绪、遇事时的思绪、生活中的思绪变得井井有条。

当我们从无乱的思绪中先整理好关键字后，接下来要做的就是将存在脑中，写在纸上的关键词转换成可见的内容，也就是思考如何表现。

因为这次我们分享的主题：是如何做？怎么做的方法和对案例的折解，具体表现层的事情，如版式、色彩、构图等的设计，不是本次分享要讲的内容。请随时关注米醋公众号，这里有更多精彩的内容哦。

要想表现与众不同，那么就要有巧妙的切入点来完成这种不同的表现。下面我介绍3种常用于表现方面的思路；

图和文的关系就像是骨肉相连，二者相互联系，相互搭配。精简的、有创意的好文案往往给设计师一种即视感，即：所谓的画面感。

当专题设计师在接到活动需求后，一般都会打开需求文档并立马寻找主文案。我们常常会因为某个好的文案而叫好，也会因为烂大街的文案而抓狂。

不得不说，好的文案就像是一道妙不可言的命题、一个吸引人眼球和心灵的标题党。

如左图：是一个母亲节的大活动，当我看到文案后的第一反映就有：温馨的、花、亲和的印象，或许是母亲节这样的节日，有太多朋友给母亲送花的场景在脑中、眼前闪过。

如右图：是一个黄金配饰的品类专题，首先看到这个设计时第一眼，它的文案很亮眼、很有趣。

其次的设计用卡通的表现，把整体页面比喻成全身装满金子的土豪角色。

如左图：首先提到桑巴，喜欢足球的设计师们肯定会想到巴西王国。这个文案给人第一眼的感觉就要有运动感、激情的、活力的表现。

如右图：时装周，给人的感觉就要有一种show、时尚、潮流的感觉。

品类印象

做平台电商的朋友们或许每人都曾接触过1-2个不同品类活动专题页的设计，那么对于品类专题来说，在设计的整体风格、整体表现上都会有一类目对外展示的相通的某种风格的形象定义。比如：奢侈品给人的感觉就是高大上、婴幼儿品类给人感觉就是童趣。

如此图所示的名品品类，给人的感觉就是时尚范儿、奢华、大洁简单的品类印象。

头脑风暴

如上所述，先前是对脑中的思维进行整理。那么，这一步要做的就是纸面整理。

你要做的就是拿出本子和笔，把来自需求方的风格、创意、形式上、活动上的建议，快速罗列形成关键词。

Tips：这一步不论什么都可以写，如色彩的、感觉的、形容的、细节的等这类字眼。关键词不怕多，就怕少，多了就要去设定优先顺序，对关键词进行再整理，确定出一个具体的，可感知的内容。如下图所示的栗子

至此，关于动脑的部分已经介绍完了。下面我们来说下关于动手的内容

将所想呈现于纸张

之前讲到的关键词是将脑中的想法抽象化，而这一步的过程是将想法具象化，并且转成可见的有形之物呈现出来，就是所谓的画草图。

画草图的目的不在于多么好看，多么精细（当然你如果能画的更精致会更好些），而于表达脑中构思。

好了，由于时间关系我们上面的几种方法先简单过一下，目的就是让大家建立一种对需求，从0到1,再到2的设计方法，建立起关于专题设计的几个基本的思考理论。

下面我再简单说一个先前写的一篇关于整体专题设计干货，当时是我用尽全身的洪荒之力写的哦，感兴趣的朋友可以去站酷搜一下。

做整页专题的方法如下：

极米科技旗舰店

画面采用了倾斜的俯视构图，较常规构图的小景作品相比更添趣味性。紫金稳中带骚，质感也上抛弃了同行们惯用的金属/大理石，选用荔枝纹皮革与金属包边装饰，搭配的口红素材稍微能体现出女性主题。主文案的双重寓意也不错。（移动端雷同）

法丽莎家居旗舰店

雷打不动的复杂动效。这画面太艺术了吧~ 稍微能看出女主在用超能力做些什么，但人物装饰背后的寓意.. 不好意思我没看懂（移动端雷同）

lagogo服饰旗舰店

模特好看，配色舒适。利用排版巧妙的植入了两张照片以撑起PC端的宽幅，移动端直接裁掉就哦了。

百年宝诚旗舰店

该店设计模板：国风+气势+谐音/押韵文案（移动端雷同）

李子柒旗舰店

比较正经向的插画，构图和画风都很具有潜力。所以，我YY一下，如果把现在的描边画风改成光影画风，并通过环境光拉开场景层次，那绝对碉堡了。（移动端雷同）

迈域汽车用品专营店

弧形转折的展台延伸框架让构图趣味了起来。多屏拼凑时对多个视平画面如何进行视觉欺骗稍有欠缺。同时，很多玩电商3D的同学都不会加入景深效果，要知道真实的场景是会有景深的，多看些大神的此类作品你会发现，当场景复杂画幅大起来的时候，必然会依靠景深来去除那一丝说不出的虚假感。

子初旗舰店

内容上围绕我不知道的一个叫做“我不知道学院”来进行创作。可爱的粉色，小人国风格，属于简单出效果那种吧。

蕉内旗舰店

这... 单身久了看个铁架子竟然有一丝丝兴奋？（移动端雷同）

Ostelin海外旗舰店

这家店的和运营应该挺和谐的，换做其他店可能会被运营喷：产品搞得这么暗沉沉的是咋个回事？然后这家店的设计你仔细看会发现挺严谨的，比如受环境影响下的产品明暗，还有前景失焦的金属柱子。前景那波浪形的半透明不明物应该是为了让断层区分明显，但仔细一看又会纳闷这是个啥玩意儿.. （移动端雷同）

卫龙食品旗舰店

原图是头和产品会动的，很直接的嘻哈恶搞风。（移动端雷同）

相宜本草官方旗舰店

一个小景舞台，荷叶绿的主色调，结合中药（天平秤/中药材）、国风（亭台/仙鹤/实体字）素材，给人一种中国风特有的艺术气息。不过有很多细节没有处理到位。（移动端雷同）

周黑鸭食品旗舰店

乍一看还以为是卖女装的，实际上是周黑鸭的一个跨界活动。em.. 做鸭的又要卖化妆品了~

阿芙官方旗舰店

这个瓶子的视觉锤真是“一次活动敲一锤”。每次专题页必带的素材。这回是凤凰于飞，考虑下植入梧桐也是挺有趣的。

素萝旗舰店

“风生水起”很有个性！别问我这图如何解读，看帽子就完事了。（移动端很日常略过）

廖记棒棒鸡旗舰店

长屏气势流，画风真的是“独具一格”

百雀羚旗舰店

用孔雀素材来暗语女王节。（移动端雷同）

orgain海外旗舰店

寓意直白的构图，轻食记→餐桌。产品替代食物，环境blingbling~ 有特意去营造镜头光晕效果，但不是辣么容易滴~（移动端雷同）

megared海外旗舰店

大量的素材渲染，很用心。但反而让画面更凌乱了。

百颐年旗舰店

纵深构图的动势效果让画面加分不少。特殊构图对人体形态的把控难度也更高了，所以千万别盯着这双手看，不过某个部位的绘制倒是挺到位的（摇起来会不会更嗨？）（移动端雷同）

小龙坎旗舰店

气势构图，和廖记棒棒鸡，百年宝诚类似。（要是在国外推广，这位估摸就是『权力的游戏』中的龙妈了）

圣希梵旗舰店

大姐大了解一下。大感觉做出来了，细节上省略了很多。（ps：学学百颐年，该大的地方还是要大起来~ ）（移动端雷同）

老金磨方旗舰店

这个站姿好像是致敬了什么来着？一下忘记了。左侧窗台那句：我养你啊！感觉这个方向很棒！如果画面更直接的借用『喜剧之王』里的这个桥段，配合一些微博互动话题去造势做营销活动，或许会更有意思，因为这个梗太火了，也很符合活动主题。（移动端雷同）

花西子旗舰店

美感在线，细节到位。特别是对细节的甄选与雕琢都很用心，所以画面整体完整且统一。（移动端雷同）

美的生活电器旗舰店

反正我看到文案上说的“秀色可餐”后，我的思维就完全被带偏了...  （移动端只保留了拿筷子这位，这抉择背后的故事大家请尽情发挥~ ）