想必最近的热搜大家都看了吧，双十一的购物狂欢提前了30天！两位头部主播更是创造了接近200亿的销售额。

对于设计师来说，除了这场购物狂欢里买买买之外还能做什么呢？

当然是做双11的活动页面设计呀！

前段时间数艺君就给大家案例过设计领域中有一类名为“运营设计师”的新物种（戳链接回顾）。那今天就给大家唠唠，在如火如荼的电商行业里，运营设计师到底都是怎么工作的？

在电商设计中，所要设计的页面一般分为详情页和专题页两大类。

详情页是指关于产品详细内容的介绍页，而专题页则泛指各类主题的展现页面。这两类页面都需要版式设计，但二者的侧重点有很大不同。

详情页更侧重内容的详细呈现，通过图文排版让观者更好地阅读内容，这与平面设计中的排版有些类似；而专题页则偏向专题氛围的营造和核心信息的传达。

总之，电商设计的排版要能快速勾起观者的兴趣并引导其进行点击。

那具体是怎么做的呢？我们接着往下看。

前期构思

在详情页设计的准备阶段需要从以下4个方面来进行构思，且这4个方面是逐步推进的关系。

在动手设计之前要有全局观，因为详情页往往都是很长的一张图片，而且是由一块一块的内容整合而成的，设计时也是分版块逐步呈现的。

所以如果没有全局观，那就是边做边想，做到哪算哪，这样做出来的长图设计，就很可能出现风格不统一、节奏混乱、版块割裂等问题。

整体印象

可能有人认为第一步应该是“读文案”，其实不然。在读产品文案前，应该先对产品所属品牌及产品本身有个大致了解，形成整体印象，以方便后续理解文案内容和为什么要这样介绍产品。

品牌

通过既有的品牌形象来明确品牌的整体调性。品牌形象是泛指的，既包括视觉形象又包括品牌策略；而品牌调性则在很大程度上决定了产品文案的语言风格和设计的视觉风格。

只有详情页设计与品牌的整体调性一致，才能更好地凸显品牌价值。

例如，花西子和圣罗兰都是知名的美妆品牌，但由于彼此的调性不同，所以它们的设计风格也截然不同。

花西子主打“东方彩妆”，因此首屏用了“雕花口红，唇间锦绣”这样的文案来宣扬国风之美，页面也呈现出浓浓的古典宫廷风。

圣罗兰是法国高端品牌，所以首屏展示的是“高定设计，馥郁纯正”这样极具现代感的文案，页面设计上也是采用了高冷、简约的风格。

产品

比起品牌，产品对文案及视觉的影响更加直接，主要体现在以下3个方面。

（1）产品功能

产品功能是指产品的基本功能及核心优势：基本功能是指该产品有什么用，核心优势是指该产品区别于同类产品的独特卖点。所以文案和视觉设计的重点都应该放在产品的核心优势上。

代餐粉的详情页，产品的基本功能是帮助人瘦身，而核心优势则是人吃完会有长达6小时的饱腹感（同类产品只有3~4小时）。这样通过对产品功能的分析，后期就能分出文案及设计的主次。

（2）目标用户

与品牌调性一样，明确使用该产品的用户画像就能进一步明确详情页的设计风格。假如两个产品的目标用户分别是儿童和中老年人，那么详情页的文案和视觉风格肯定都要有明显的差异。

（3）产品外观

产品外观很容易被忽视，但它对视觉风格的影响却最为明显。既然是产品详情页，那么产品肯定要在页面中得到美观的展现。因此，“如何让产品得到最好的展现”是设计前一个非常重要的思考点。右图是代餐粉详情页中的一个版块， 产品很自然地融入画面中。

要重点关注产品的外观，包括外包装（如果有）和产品的本身造型，主要看哪一个更有特点、更好表现。例如，在下页所示的案例中，前两个侧重于产品的外包装，而后两个则更侧重于产品的造型。这几个案例让人看着都很舒服，都能从“颜值”层面激发观者的购买欲。

梳理文案

对产品有了整体印象后就要梳理文案，有了前面的铺垫，梳理起来会更高效。梳理文案可分为3步：读文案、分层级、定主次。

读文案

先把策划人员给的文案通读一遍，了解一下内容。有的设计师不读文字就直接设计，“边做边读”是典型的错误流程，这样的工作流程不流畅且效率也不高。

除了读文案内容，还要明确文案的语言风格。因为从语言风格中可推导出视觉风格，最好使二者保持一致，而最终要使它们与产品定位相呼应。

如下面的案例所示，虽然都是螺蛳粉的详情页，但文案语言风格的差异让两个案例的视觉调性也有很大差别。

三只松鼠的产品强调个性，文案是“来撸粉商店 撸遍天下粉”，语言风格张扬并带有武侠味，因此视觉上通过塑造一个复古的商店来呼应文案。

李子柒的产品则强调螺蛳粉的酸爽和美味，文案是“劲辣酸爽 嗦出酣畅淋漓”，因此详情页设计以表现食物和配料为主。

分层级

下面左侧是一段关于代餐粉的介绍文字，语言风格轻松，文字简洁、精练。读懂文案后，要根据需求和理解对文字进行层级划分，将同一主题的内容归为一个层级，这样后期设计时每个层级就是一个版块。

通过层级划分，一段混乱冗长的文字就成了下面右侧所示的6小段，也就是6个版块，显得非常清晰。

定主次

从分好层级的文案中确定出主次关系。

首先是版块主次，6个层级就是6个版块，要分清这6个版块的主次关系，对主要版块要重点突出，对次要版块则要适当弱化，表现产品核心优势的版块往往都是主要版块；

其次要梳理文案主次，通过改变字号大小，依次体现主标题、副标题和内文，这样文案的结构和逻辑就更有条理了。

下图所示的文字结构就是梳理后的效果。设计师不管拿到怎样样式的文字，都要通过前面所讲的这3步去将文案梳理成最适合设计的样式。

确定风格

确定风格主要确定的是视觉的表现风格，关于风格的具体类型在第3章进行了详细介绍，下面重点要讲的是确定视觉的表现风格时所要遵循的两个原则。

与品牌和产品的定位一致

视觉表现风格要与品牌的定位和产品的定位一致。从品牌调性、用户画像、语言风格和外观风格这4个方面入手，分析页面设计所要采用的视觉表现风格。

下面展示了代餐粉详情页的视觉表现风格推导过程。

使页面整体风格统一

视觉表现风格确定之后还要确保页面整体风格统一。因为详情页都是长图，是由多个版块拼接而成的，当版块较多时，就可能出现后面版块的设计风格与前面的不匹配的情况，这样整个页面就显得不太流畅，甚至影响阅读。

下面列出了6种风格的详情页设计，每个案例中的各版块设计风格都高度统一，显得非常完整。

古典中国风▼

现代中国风▼

大气简约风▼

未来科技风▼

活泼可爱风▼

文艺清新风▼

画草图、定配色

梳理好文案并敲定了页面风格后，准备工作的最后一步就是画草图、定配色。这一步非常重要，可以为设计师动手设计提供直观的参照。

画草图

详情页的草图与Banner的草图略有不同，Banner的草图更注重视觉表现，而详情页的草图则以表现图文框架为主。因为对详情页这样的长图而言，内容表达更重要，而核心在排版。

详情页的草图是要理清各版块间的图文布局关系，表现出框架结构，这样后期排版参照时便一目了然。

下图是根据梳理好的代餐粉的文案所画的框架草图，用线条简单勾出图文的布局关系即可。

另外，先画整体框架还有一个好处，就是通过全盘构思以避免页面出现版块布局重复的情况，确保每个版块的排版都能做到差异化，这样整个页面才不显得单调。

定配色

画好草图后，就要确定色彩搭配方案，一般会定2种颜色（主色、辅色）或3种颜色（主色、辅色、点缀色）。

在设计代餐粉的详情页时，根据代餐粉的瓶身颜色选取粉红色做主色，这样页面会显得柔和一些。再选取粉红色的对比色——浅蓝色作为小面积使用的辅色，这种大反差的辅色会使页面多一些变化和层次。

以上4个方面就是动手设计前所要做的准备工作。先建立整体印象，然后梳理文案结构，接着确定视觉风格，最后画草图、定配色。这些准备工作都有助于视觉表现，使设计更加理性，也让页面的视觉效果变得有理有据。下面就是代餐粉详情页的最终效果。

Powered by Froala Editor