又是一年双11，最热闹的电商大节已经到来，这时候讨论最多的就是“你有没有剁手”、“你抢到了吗”、“你买了什么”等话题。
当然，大家不管买什么，都必然要进入这些品牌的店铺内浏览专题页、详情页等页面了解活动以及产品，然后被各种页面吸引，最终购买自己想要或者原本不想要的产品~
作为一名电商设计师，今天就通过下面几个方面和大家聊一聊电商专题页设计的“套路”。
一、什么是专题页
二、专题页的组成模块
三、专题页各模块的细节规范
四、专题页的表现风格
一、什么是专题页
首先每个店铺都有自己的首页，首页是店铺的主界面，属于日常展示页，承担着产品主要功能的入口，也是最重要的流量入口。
而专题页是在某段时间内，针对某一节日或活动的营销活动页。一般具有时效性，可能过了营销周期以后，该专题页就会消失，用户就不会看到了。
《三只松鼠旗舰店》
日常首页（左）与专题页面（右）对比
二、专题页的组成模块
专题页由这几个部分组成：店招+导航+主图banner+机制区+热销商品 +分类楼层+自定义商品+底部区，如下图所示：
具体到店铺视觉如：
《君乐宝旗舰店》模块布局
以上内容相信大家对于专题页的模块划分有了初步认识，但其中的楼层分类与自定义商品模块，可根据店铺情况选择性添加，并非专题页一定要加的。而其他模块基本属于专题页的常态化模块。
三、专题页各模块的细节规范
1、首先我们来看看【店招】+【导航】模块
店招作为一个店铺的开端，等同于一本书的封面，是一个店铺的门脸，重点用于突出店铺特色和品牌形象，同时也会在其中展示店铺近期的营销内容。
导航时一个店铺的指引，便于用户在浏览页面时快速找到对应的入口。
在进行店铺设计时，我们往往会将【店招模块】与【导航模块】共同设计成一个整体。
再给大家分享一些不传功法：
·品牌logo、店铺名称、品牌标语、促销信息等，内容不易太多。
·logo 位置居中或者左侧
·导航条在店招底部横向排列（也可设计在一起）
·重要导航文字有小提示标注作为引导
·产品较多的店铺会有搜索条
·推荐产品、活动入口放在右侧上方
·与页面整体色调统一或者色彩搭配协调
2、我们再来看看【主图视觉】模块
第一屏的Banner设计非常重要，很大程度上影响了用户是否决定停留，有效的信息传达可以快速提高页面转化率。
Banner的视觉表现风格有常规、插画、合成、三维、摄影、剪纸、矢量等等，根据店铺的主题或者项目的周期进行匹配的选择。但当下最热门的当属插画、合成、三维这三类。
下面我们来看看这些风格吧！
【常规】
【插画】
【合成】
【三维】
这些画面丰富酷炫，可以第一眼就抓住用户的眼球。
3、接下来再来看看【机制区】模块
机制区属于店铺中的各类活动的集合展示，其重要性主要是刺激用户购买，提升店铺转化率。
机制区主要包含：优惠券模块、店铺促销信息、大转盘、签到、预售、营销视频等模块。
在表现优惠券数额时，为了吸引眼球，刺激用户，数额的字号大小一定要大。
4、【主推/热销】模块
主推/热销区主要用于产品的醒目展示，提升曝光率，促进用户购买。
关于产品模块在专题页中的陈列排版主要有两种常用模式：主次分明布局、整体形布局。
主次分明布局：主次分明，大图小图对比布局清晰，将空间交给客户更感兴趣的产品，大幅度提高点击率。
整体形布局：弱化单品间的排序才能让顾客一视同仁，弱化产品之间的对比，是为了使其浑然一体。
在设计时，产品的模块包含：专题标题、产品陈列、促销标签、信息文案、点击按钮等，具体如图：
在进行图文排版时，多为左右排版、上下排版
1、右排版
①文字在左，图片在右
②图片在左，文字在右
2、上下排版
①图片在上，文字在下
②文字在上，图片在下
文字的对齐形式：左对齐、居中对齐、右对齐。
1、 文字左对齐
2、文字居中对齐
3、文字右对齐
再给大家传授一些设计秘法：
·主推区域主要放置店铺热销或者商家主推的产品，产品排版可以1行2件，或者1行1件产品。
·主推区域产品图片保持大而清晰，文字简洁，突出核心卖点。
·按钮样式可以有所不同，但是相同层级的内容，规范要统一。
·文案组合注重文字排版，区分文字层级、样式。
5、专题页【底部区域】的制作
作为专题页收尾的地方也不容忽视，有着其重要性。可以加强品牌认知，建立流量闭环，不让流量在页尾流失。
底部模块可以放置的内容包含：品牌展示、品牌故事、返回顶部、营销模块（优惠券/店铺活动/收藏）、热门分类、物流售后等。
【品牌展示】
【品牌故事】
【返回顶部】
【营销模块】（优惠券/店铺活动/收藏）
【热门分类】
【物流售后】
以上就是专题页的模块的分析啦，下面再来看些行业中的流行趋势，也是能get到很多设计灵感的喔！
四、专题页的表现风格
在当下的行业中，专题页的热门风格主要包含：国风风格、科技风格、霓虹灯风格、赛博朋克风格、插画风格、圣诞风格等。每一种风格都有自己的特征。
国风风格
相关元素：雕花、纹理、古建筑、扇子、屏风、古家具、丝带、吊旗、卷轴、牌匾、祥云、灯笼、对联、爆竹、烟火、飞鹤等。
匹配色调：胭脂红、青绿、青蓝、可搭配金色、银色。
《珍尚米旗舰店》
科技风格
相关元素：太空舱、舞台、发光管灯、金属板、机械臂、射灯、飞船、星球、操作台、按钮（有光效）等。
匹配色调：以蓝色、为主，可搭配紫色、青色、黄色、橙色、金色、银色。
《旺旺旗舰店》
霓虹灯风格
相关元素：建筑、灯牌、各类发光管，物体边缘制作发光效果。
匹配色调：以蓝色、红色、黄色、紫色、青色。
《卓玛泉旗舰店》
赛博朋克灯风格
相关元素：建筑、虚拟现实、身体改造、广告、霓虹灯、空中交通、物体边缘制作放光效果
匹配色调：以蓝色、红色、紫色，赛博朋克风格在设计时也会搭配霓虹灯效果。
《老金磨方旗舰店》
插画风格
插画风格表现形式没有固定，表现形式可以是矢量、写实、卡通等等，在色调上也根据绘制的主题决定。
《卢正浩旗舰店》
圣诞风格
相关元素：雪、圣诞树、铃铛、袜子、丝带、礼盒，雪人、驯鹿、彩灯、气球。
匹配色调：绿色、红色主色调，辅助搭配金色、黑色。
《香飘飘旗舰店》
以上风格虽有自己的风格导向，但是在设计中我们并非要完全独立其身，而在制作时可以互相融通，比如国风+插画，赛博朋克+霓虹灯，圣诞+插画等，让画面更加生动，更有趣味性，视觉冲击力更强。
版权声明 | 文章配图仅供学习参考，引用图片版权归属原作所有
如有问题，请及时与我们联系，我们将第一时间做出处理
