又是一年双11，最热闹的电商大节已经到来，这时候讨论最多的就是“你有没有剁手”、“你抢到了吗”、“你买了什么”等话题。
当然，大家不管买什么，都必然要进入这些品牌的店铺内浏览专题页、详情页等页面了解活动以及产品，然后被各种页面吸引，最终购买自己想要或者原本不想要的产品（懂的都懂）...
作为一名电商设计师，今天就通过下面几个方面和大家聊一聊电商专题页设计的“套路”。
一、什么是专题页
二、专题页的组成模块
三、专题页各模块的细节规范
四、专题页的表现风格
五、2022年双11店铺专题页欣赏
准备好了么？一起往下看吧↓↓↓↓↓↓
一、什么是专题页
首先每个店铺都有自己的首页，首页是店铺的主界面，属于日常展示页，承担着产品主要功能的入口，也是最重要的流量入口。
而专题页是在某段时间内，针对某一节日或活动的营销活动页。一般具有时效性，可能过了营销周期以后，该专题页就会消失，用户就不会看到了。
《三只松鼠旗舰店》
日常首页（左）与专题页面（右）对比
二、专题页的组成模块
专题页由这几个部分组成：店招+导航+主图banner+机制区+热销商品 +分类楼层+自定义商品+底部区，如下图所示：
具体到店铺视觉如：
《君乐宝旗舰店》模块布局
以上内容相信大家对于专题页的模块划分有了初步认识，但其中的楼层分类与自定义商品模块，可根据店铺情况选择性添加，并非专题页一定要加的。而其他模块基本属于专题页的常态化模块。
三、专题页各模块的细节规范
1、首先我们来看看【店招】+【导航】模块
店招作为一个店铺的开端，等同于一本书的封面，是一个店铺的门脸，重点用于突出店铺特色和品牌形象，同时也会在其中展示店铺近期的营销内容。
导航时一个店铺的指引，便于用户在浏览页面时快速找到对应的入口。
在进行店铺设计时，我们往往会将【店招模块】与【导航模块】共同设计成一个整体。
再给大家分享一些不传功法
2、我们再来看看【主图视觉】模块
第一屏的Banner设计非常重要，很大程度上影响了用户是否决定停留，有效的信息传达可以快速提高页面转化率。
Banner的视觉表现风格有常规、插画、合成、三维、摄影、剪纸、矢量等等，根据店铺的主题或者项目的周期进行匹配的选择。但当下最热门的当属插画、合成、三维这三类。
下面我们来看看这些风格吧！
【常规】
【插画】
【合成】
【三维】
这些画面丰富酷炫，可以第一眼就抓住用户的眼球。
3、接下来再来看看【机制区】模块
机制区属于店铺中的各类活动的集合展示，其重要性主要是刺激用户购买，提升店铺转化率。
机制区主要包含：优惠券模块、店铺促销信息、大转盘、签到、预售、营销视频等模块。
4、【主推/热销】模块
主推/热销区主要用于产品的醒目展示，提升曝光率，促进用户购买。
关于产品模块在专题页中的陈列排版主要有两种常用模式：主次分明布局、整体形布局。
主次分明布局：主次分明，大图小图对比布局清晰，将空间交给客户更感兴趣的产品，大幅度提高点击率。
整体形布局：弱化单品间的排序才能让顾客一视同仁，弱化产品之间的对比，是为了使其浑然一体。
在设计时，产品的模块包含：专题标题、产品陈列、促销标签、信息文案、点击按钮等，具体如图：
在进行图文排版时，多为左右排版、上下排版
1、右排版
①文字在左，图片在右
②图片在左，文字在右
①图片在上，文字在下
②文字在上，图片在下
文字的对齐形式：左对齐、居中对齐、右对齐。
1、 文字左对齐
2、文字居中对齐
3、文字右对齐
再给大家传授一些设计秘法：
咳！咳！干货太多，有点干，容我喝口水~
↓↓↓↓
5、专题页【底部区域】的制作
作为专题页收尾的地方也不容忽视，有着其重要性。可以加强品牌认知，建立流量闭环，不让流量在页尾流失。
底部模块可以放置的内容包含：品牌展示、品牌故事、返回顶部、营销模块（优惠券/店铺活动/收藏）、热门分类、物流售后等。
【品牌展示】
【品牌故事】
【返回顶部】
【营销模块】（优惠券/店铺活动/收藏）
【热门分类】
【物流售后】
以上就是专题页的模块的分析啦，下面再来看些行业中的流行趋势，也是能get到很多设计灵感的喔！
四、专题页的表现风格
在当下的行业中，专题页的热门风格主要包含：国风风格、科技风格、霓虹灯风格、赛博朋克风格、插画风格、圣诞风格等。每一种风格都有自己的特征。
相关元素：雕花、纹理、古建筑、扇子、屏风、古家具、丝带、吊旗、卷轴、牌匾、祥云、灯笼、对联、爆竹、烟火、飞鹤等。
匹配色调：胭脂红、青绿、青蓝、可搭配金色、银色。
《珍尚米旗舰店》
相关元素：太空舱、舞台、发光管灯、金属板、机械臂、射灯、飞船、星球、操作台、按钮（有光效）等。
匹配色调：以蓝色、为主，可搭配紫色、青色、黄色、橙色、金色、银色。
《旺旺旗舰店》
相关元素：建筑、灯牌、各类发光管，物体边缘制作发光效果。
匹配色调：以蓝色、红色、黄色、紫色、青色。
《卓玛泉旗舰店》
相关元素：建筑、虚拟现实、身体改造、广告、霓虹灯、空中交通、物体边缘制作放光效果
匹配色调：以蓝色、红色、紫色，赛博朋克风格在设计时也会搭配霓虹灯效果。
《老金磨方旗舰店》
插画风格表现形式没有固定，表现形式可以是矢量、写实、卡通等等，在色调上也根据绘制的主题决定。
《卢正浩旗舰店》
《甘福园旗舰店》
《李子柒旗舰店》
《周黑鸭旗舰店》
相关元素：雪、圣诞树、铃铛、袜子、丝带、礼盒，雪人、驯鹿、彩灯、气球。
匹配色调：绿色、红色主色调，辅助搭配金色、黑色。
《香飘飘旗舰店》
以上风格虽有自己的风格导向，但是在设计中我们并非要完全独立其身，而在制作时可以互相融通，比如国风+插画，赛博朋克+霓虹灯，圣诞+插画等，让画面更加生动，更有趣味性，视觉冲击力更强。
五、2022年双11店铺专题风格欣赏
当然不管是什么样的店铺装修效果，在其中有一种形式所出现的频率越来越高，集中在首页、详情页。那就是KV视频\动效化。
《联合利华官方旗舰店》KV动画
立顿采用C4D手法搭建工厂流水线效果。画面饱满显得更加热闹。同时也让大家看到了整个生产过程中的精工细作的过程，也体现了立顿制造的态度。
《wonderlab旗舰店》KV动画
采用与游戏结合的互动方式，加强了趣味性。强调产品的特色造型，强化产品认知。
《三只松鼠旗舰店》KV动画
从现实穿越到双11盛宴现场，小松鼠带你开启购物之旅。
《金领冠官方旗舰店》KV动画
舱门打开，产品升起跃向屏幕，营造抢眼的动势效果。核心的文案利益点“爆款1次带走20件”视觉突出~，哪怕是动态KV，也绝对不忘把营销信息呈现到位。
《健力多官方旗舰店》KV动画
闪亮出场，螺旋上升，科技感满满！看过健力多KV的小伙伴会发现，这套视觉围绕品牌风格做用户的品牌认知强化。C位则是给到了双11活动的主推产品做强曝光。
《宝岛眼镜官方旗舰店》KV动画
大厂景、大场面，结合太空、卫星等元素，传递品牌实力。
《汤臣倍健官方旗舰店》KV动画
就像品牌文案描述的一样“跨越时空，礼遇双11”，汤臣倍健此次的KV借鉴了《创世纪》壁画的经典触碰手势，人类与未来的触碰，似乎在传达着科学营养的人类新科技时代。
怎么样，是不是觉得这些视频/动效，太酷了！
随着5G的盛行，网速大幅提升。为视频化营销提供了便利。同时视频/动效化的处理可以更快地吸引和留住客户的注意力，激发用户的正向情感，让用户与品牌之间产生一种情感联系，最终可以提高用户粘度，同时让消费者感知到品牌的实力。
当然在视频/动效化的同时，传统的静态图片仍旧是并行的，接下来我们继续来看看各大店铺的双11页面设计效果有多卷。
《珍尚米官方旗舰店》
整个页面设计采用手绘国风插画的表现形式~
《翠宏官方旗舰店》
同样的，这张KV也是采用了插画的表现手法加了些酷炫的后期光效。
《康恩贝官方旗舰店》
看这主KV，也是热闹满满，采用C4D的技法，表现了产品生产到投放的过程。
《科大讯飞官方旗舰店》
同样科大讯飞此次也是才用了C4D手法表现出科技的效果。回忆一下，上面我们欣赏的作品里，是不是有很多kv海报，都采用了C4D的表现手法？可以思考一下为什么大家都不约而同的用了此手法？
在目前电商视觉表现中，C4D的技法应用非常多, 想入行学设计的同学们对于C4D的学习不能落后哦！
《机械师官方旗舰店》
KV海报非常酷炫，整体科技感十足，也很好与品牌属性结合在了一起。
《李子柒官方旗舰店》
李子柒每次的活动页基本固定成手绘风了，每一次的KV画的都非常的艺术且大气，也真的很“卷” 大家可以分析学习学习。
看了半天插画、三维表现手法，怎么能少得了我们的合成技法表现呢！
桂花，上图喽！
《全友家居官方旗舰店》
神仙画卷来袭，画面中各类元素进行融合，采用俯视的大厂景带来视觉的冲击力，人物向下俯冲带你寻找神秘之地。
——我是分割线线线线——
今天的分享就到这里啦！
欢迎意犹未尽的同学评论区发表你的感想，也可分享你对电商行业的设计观点喔！下期见！
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
