小程式元件为电商小程式系统对基础资料的展现提供了美观、高效、灵活的有力保障,搭建一个高大尚的小程式页面,需要靠功能齐全,配置简单易用的元件。简洁美观大方的页面,也会给客户带来时尚、专业、认可的体验,增加访问和交易量。为了满足设计出美观大方的小程式页面,最近小猪电商产品组对商品分组元件和商品元件进行了大量的优化和调整,今天小编就来介绍下。
小猪电商商品分组、商品元件功能优化一、商品分组元件:
1、列表样式新增横向滑动:
商品分组中的商品列表图片展示样式有:大图、小图、一大两小、详细列表样式,一行三列、横向滑动,其中一行三列和横向滑动为本次新增样式。一个列表可采用多种形式进行展示,这样呈现细节更丰富,给人的视觉感受更强烈,进而提高转化率。列表样式展示主要根据产品属性决定,来进行列表选择。
(大图)(详细列表)(一行3列)(横向滑动)通过横向滑动进行检视,简单易懂的互动就能展示最多的商品资讯,用于商品非常丰富时首页展示,增加商品露出率。在横向滑动里面,还可以选择两行模式,即两行同时滑动。
2、商品样式优化:
新增无边透明白底、卡片投影、描边白底等,这种视觉修饰方法,让商品样式展示更美观。
(无边白底)
(卡片投影)
(描边白底)
商品的卡片样式,使得使用者在浏览商品的时候更便捷。能够吸引使用者在浏览中二次跳转,给其他页面引流,增加使用者的使用时长和参与度,减少页面流失。
3、购买按钮样式可自定义:
在商品图片展示样式中的卡片样式模组中可选择显示购买按钮。总共支援6个样式,其中新增3个样式,此3个样式可以自定义按钮文案。如下图所示:4、显示内容新增商品角标:
商品角标,就是商品标签,附着在商品主图上的图示角标的文案内容,如果满足了使用者的兴趣点,是能够提高点选转化的。新品、热门、NEW、HOT、爆标五个标识,如下图所示:
5、顶部导航选单增加吸顶功能
所谓吸顶,即顶部导航选单滚动到顶部后,固定在顶部,继续向上滑动内容一直可见顶部导航选单;而非吸顶模式,顶部导航选单滚动到顶部后,不固定在顶部,继续向上滑动内容,顶部导航选单滑动走不可见。通过向上滚动后,中部TAB吸顶,滚动到底后可选择:向上滑动自动切换下一个TAB或者直接固定在顶部。
这样有指向性的设计,能为使用者缩小筛选产品范围,帮助使用者发现需求。可根据使用者有无指向性商品需求,以及电商平台的商品多少来自由设定。
6、新增标题样式:
主要有3个选单切换样式:矩形、椭圆形、线性。7、新增页面边距:
调整页面边距0-30画素,0表示无边距。比如,选择0边距,则内容贴合在屏幕边缘,影响可读性、美观度。一般留白区域是20px或者30px的宽度。如果界面内容比较多,可以选择用20PX。(0边距)
(30边距)
8、图片填充
通过刻意使用大量留白、填充,能够使布局排版显得干净和精致,让界面设计显得更高大上。可以创造出一个强大的焦点,为电商商品渲染更有价值的标签。(填充)
(留白)
9、新增商品图片倒角:
圆角和直角,使用圆角图片会有更好的装饰性,比较有亲和力,视觉上非常美观好看。(商品图片直角图)
(商品图片圆角图)
二、商品元件:
1、新增选择商品
将商品元件拖拽至模板中,选择商品元件的模板,不同模板展示效果不同,在商品列表中,可选择已上架商品、商品分组、新建商品等三类。温馨提示:商品管理后端拖动商品图片,可以更换位置。
2、模板样式优化:
商品元件模板样式,主要有:大图样式、一行2个、一行1个、一大2小,如下图:现新增大图滑动、小图滑动、一行3个等样式。将商品图片元件拖拽至模板中,选择该图片元件的模板(大图滑动、小图滑动、一行3个),上传图片,每张图片都可连结跳转到所选择的指定页面,如下图:
3、新增图片显示比例:
主要规格有:1:1 3:1 3:2 3:4,通过设定图片展示比例,能够让界面视觉体验更舒适,同时有助于集中视觉焦点,承载更重要的资讯,让整个界面布局更加合理。如下图所示:4、新增圆角半径
商品元件的圆角半径可设定0-50区间。(圆角半径0)
(圆角半径50)
5、新增两行模式:
商品图片列表样式的横向滑动里面,可以选择两行模式,即两行同时滑动。注:仅在小图滑动模式下可用。
6、显示内容:
显示的内容有:商品名称、售价、划线价(未填则不显示)、新增到购物车(一行3个样式下,不显示)以上就是小猪电商商品分组、商品元件功能优化内容,预计将于近期更新。如果您有任何问题,欢迎咨询小猪电商官网客服。微讯号:xiaozhu_cms