小程序組件為電商小程序系統(tǒng)對基礎(chǔ)數(shù)據(jù)的展現(xiàn)提供了美觀、高效、靈活的有力保障，搭建一個高大尚的小程序頁面，需要靠功能齊全，配置簡單易用的組件。簡潔美觀大方的頁面，也會給客戶帶來時尚、專業(yè)、認(rèn)可的體驗，增加訪問和交易量。最近為了滿足設(shè)計出美觀大方的小程序頁面，最近小豬創(chuàng)夢電商產(chǎn)品組對商品分組組件和商品組件進行了大量的優(yōu)化和調(diào)整，今天小編就來介紹下。
一、商品分組組件：
1、列表樣式新增橫向滑動：
商品分組中的商品列表圖片展示樣式有：大圖、小圖、一大兩小、詳細(xì)列表樣式，一行三列、橫向滑動，其中一行三列和橫向滑動為本次新增樣式。一個列表可采用多種形式進行展示，這樣呈現(xiàn)細(xì)節(jié)更豐富，給人的視覺感受更強烈，進而提高轉(zhuǎn)化率。列表樣式展示主要根據(jù)產(chǎn)品屬性決定，來進行列表選擇。
(大圖)
(詳細(xì)列表)
(一行3列)
(橫向滑動)
通過橫向滑動進行查看，簡單易懂的交互就能展示最多的商品信息，用于商品非常豐富時首頁展示，增加商品露出率。在橫向滑動里面，還可以選擇兩行模式，即兩行同時滑動。
2、商品樣式優(yōu)化：
新增無邊透明白底、卡片投影、描邊白底等，這種視覺修飾方法，讓商品樣式展示更美觀。
(無邊白底)
(卡片投影)
(描邊白底)
商品的卡片樣式，使得用戶在瀏覽商品的時候更便捷。能夠吸引用戶在瀏覽中二次跳轉(zhuǎn)，給其他頁面引流，增加用戶的使用時長和參與度，減少頁面流失。
3、購買按鈕樣式可自定義：
在商品圖片展示樣式中的卡片樣式模塊中可選擇顯示購買按鈕。總共支持6個樣式，其中新增3個樣式，此3個樣式可以自定義按鈕文案。如下圖所示：
4、顯示內(nèi)容新增商品角標(biāo)：
商品角標(biāo)，就是商品標(biāo)簽，附著在商品主圖上的圖標(biāo)角標(biāo)的文案內(nèi)容，如果滿足了用戶的興趣點，是能夠提高點擊轉(zhuǎn)化的。
新品、熱門、NEW、HOT、爆標(biāo)五個標(biāo)識，如下圖所示：
5、頂部導(dǎo)航菜單增加吸頂功能
所謂吸頂，即頂部導(dǎo)航菜單滾動到頂部后，固定在頂部，繼續(xù)向上滑動內(nèi)容一直可見頂部導(dǎo)航菜單;而非吸頂模式，頂部導(dǎo)航菜單滾動到頂部后，不固定在頂部，繼續(xù)向上滑動內(nèi)容，頂部導(dǎo)航菜單滑動走不可見。
通過向上滾動后，中部TAB吸頂，滾動到底后可選擇：向上滑動自動切換下一個TAB或者直接固定在頂部。
這樣有指向性的設(shè)計，能為用戶縮小篩選產(chǎn)品范圍，幫助用戶發(fā)現(xiàn)需求。可根據(jù)用戶有無指向性商品需求，以及電商平臺的商品多少來自由設(shè)置。
6、新增標(biāo)題樣式：
主要有3個菜單切換樣式：矩形、橢圓形、線性。
7、新增頁面邊距：
調(diào)整頁面邊距0-30像素，0表示無邊距?！”热纾x擇0邊距，則內(nèi)容貼合在屏幕邊緣，影響可讀性、美觀度。一般留白區(qū)域是20px或者30px的寬度。如果界面內(nèi)容比較多，可以選擇用20PX。
(0邊距)
(30邊距)
8、圖片填充
通過刻意使用大量留白、填充，能夠使布局排版顯得干凈和精致，讓界面設(shè)計顯得更高大上。可以創(chuàng)造出一個強大的焦點，為電商商品渲染更有價值的標(biāo)簽。
(填充)
(留白)
9、新增商品圖片倒角：
圓角和直角，使用圓角圖片會有更好的裝飾性，比較有親和力，視覺上非常美觀好看。
(商品圖片直角圖)
(商品圖片圓角圖)
二、商品組件：
1、新增選擇商品
將商品組件拖拽至模板中，選擇商品組件的模板，不同模板展示效果不同，在商品列表中，可選擇已上架商品、商品分組、新建商品等三類。
溫馨提示：商品管理后端拖動商品圖片，可以更換位置。
2、模板樣式優(yōu)化：
商品組件模板樣式，主要有：大圖樣式、一行2個、一行1個、一大2小，如下圖：
現(xiàn)新增大圖滑動、小圖滑動、一行3個等樣式。將商品圖片組件拖拽至模板中，選擇該圖片組件的模板(大圖滑動、小圖滑動、一行3個)，上傳圖片，每張圖片都可鏈接跳轉(zhuǎn)到所選擇的指定頁面，如下圖：
3、新增圖片顯示比例：
主要規(guī)格有：1:1 3:1 3:2 3:4，通過設(shè)置圖片展示比例，能夠讓界面視覺體驗更舒適，同時有助于集中視覺焦點，承載更重要的信息，讓整個界面布局更加合理。如下圖所示：
4、新增圓角半徑
商品組件的圓角半徑可設(shè)置0-50區(qū)間。
(圓角半徑0)
(圓角半徑50)
5、新增兩行模式：
商品圖片列表樣式的橫向滑動里面，可以選擇兩行模式，即兩行同時滑動。
注:僅在小圖滑動模式下可用。
6、顯示內(nèi)容：
顯示的內(nèi)容有：商品名稱、售價、劃線價(未填則不顯示)、添加到購物車(一行3個樣式下，不顯示)
以上就是小豬創(chuàng)夢電商商品分組、商品組件功能優(yōu)化內(nèi)容，預(yù)計將于近期更新。如果您有任何問題，歡迎咨詢小豬創(chuàng)夢電商官網(wǎng)客服哦。
