全部新闻提供最新行业动态,分享前沿设计理念
电商产品详情页模块划分和各个模块参考效果及设计要点(上)
时间:2024-09-12 来源:朝夕友人 点击:

     今年《电商美工》最后一个模块讲到了电商产品详情页的设计与制作,发现学生在学习过程中对于产品模块的划分不太清晰,各个模块的设计要点也不太清楚,因而在讲解的过程中先重点介绍对于产品详情页模块的划分,让学生根据老师的讲解对多种产品详情页模块划分进行分析,直观上形成认知。

    然后将整个详情页分为通用的五大模块和一些拓展模块,下面结合具体的案例进行详细说明(大部分案例均来源于网络,如有侵权,请联系作者删除)

焦点图模块

焦点图一般位于商品详情页的最上方,用于展现商品卖点、促销活动和特价优惠等促销信息,以及展示品牌形象和设计理念。

焦点图一般可以分为三大类,第一种产品以放大形式呈现,突出产品,背景以纯色或者渐变色为主,搭配简单的文案信息突出产品的核心卖点和主要促销活动。

第二种,可以结合模特或者产品的使用场景来呈现产品特点,让客户有身临其境的感觉,这种类型的焦点图学生在制作的时候可以从网上查找相应的素材。

第三种,是自行搭建场景,这种如果使用PS的话,同学们可以充分利用光影效果,来使得产品的呈现更加立体,吸引客户,对于光影效果的使用可以自行结合形状和滤镜工具制作,也可以下载相应的光影插件,之后的文章会分享光影插件,大家可以下载安装使用。

产品信息模块(产品详细参数模块)

商品规格参数图是展示商品规格参数的页面。在这个模块中,可以采用表格、图表等形式,清晰地展示商品的规格、型号、配置、性能等信息。根据展示形式和呈现效果不同,可以划分为以下四种类型

第一种最简单的文字呈现类型,在设计和制作的过程中,要注意字体的一致和页面的排版,文字的颜色有主次之分。

第二种,如果觉得单纯的文字比较单调,可以更换一下背景,选择挂历的效果,折纸的效果等等,使得产品规格信息呈现的更生动、形象化。

当然也可以跟产品结合起来,比如用户比较关注尺寸的一些产品,可以采用下面的呈现形式,用线条、箭头就可以实现相应的效果。

不呈现产品的尺寸信息,也可以采用这种图文混合的形式,比单纯文字呈现效果要好很多,产品可以场景呈现也可以展台呈现等等。

产品卖点和细节模块

作为产品详情页中的核心模块,这一部分一般会包含多屏,从多个维度展示产品的卖点和细节,一般采用总分的形式,先总的概括下产品有哪些亮点,在分屏进行描述。总括图一般会以下面的形式呈现,产品居中,卖点以小圆圈的形式在四周呈现,跟下面的适用人群有些类似,也可以以方框列表的形式呈现。

卖点或者细节的详细展现,一般是一些图文混排,同样的样式进行一些细微的变化,如第一张图是左图右文,第二张图为左文右图依次交叉呈现,同时以序号的形式表明,使得阅读更为流畅。对于女性类的产品也可以加上一些柔美的线条连接各个卖点或者细节,增强视觉动感。

关于配送售后、评价、适用人群、资质证书等等其他模块,将在下一篇文章中进行说明。

如果您也有此需求,欢迎咨询我们立即咨询