近期我們與嘿店合作了其旗下HeyShop商城的小程式設計與開發。本期就給大家介紹一下關於這個專案的相關內容。
如需轉載請點此檢視轉載須知。
HeyShop商城小程式
Online Shopping Store MiniProgram
設計 / 銀子
前端 / 時禪工作室
技術支援 / 嘿店
一 專案介紹
HeyShop商城是為嘿店旗下的線下體驗店打造，作為一個OMO商城，HeyShop聚集了全球精選好貨，並有國內多家獨立設計師品牌與時尚博主入駐，由此打通線上與線下，為買家提供最優質購物體驗。
作為“新零售”體驗店，我們專門為使用者了定製了一個“預約試衣間”的功能。使用者可以在將需要體驗的衣服加入到預約清單裡，選擇時間後，便可預定這個時間段的專屬試衣間，到門店進行線下體驗。
點選上圖中的小程式卡片、或是識別下面的二維碼可以直接進入小程式預覽真實上線專案。檢視用Marvel製作的高保真原型請戳這裡（原型與最終上線專案功能略有調整）。
二 設計解析
電商小程式在一些基本功能的需求上是大同小異的，我們先確定底部選單的5個入口：首頁、分類、會員卡、購物車、我的。
首頁再分為：推薦、品牌、專題。
會員卡：我的預約、會員卡資訊、門店地址。
其中，使用者最容易觸達的頁面，一是開啟小程式第一屏就能看到的首頁推薦，二是在底部選單著重加強的會員卡入口。
1 首頁
我們先來看首頁，Banner每期可以更換主題，關於HeyShop自己的資訊推送，或是優質商家專題推薦。
接著是體現幾個重要的特徵，品牌直售、正品保障、價格優惠、以及門店體驗。讓使用者一目瞭然。然後是優惠券版塊，這個板塊是隨機的，有優惠活動時會在，沒有活動時會隱藏。
再接著是使用者會比較感興趣的，Top最熱單品版塊，以及4個專題版塊，主題可以變換。為了節約空間，讓商品都變成可以橫向左右滑動的。點選專題封面後，還可進入相應的專題詳情。
在主題版塊的下面，加了一個品牌推薦版塊，讓優質的品牌多一個展示入口。
在最後，就是剛剛上新的版塊，這裡商品我們採用平鋪的展現方式。
2 品牌
由於是商家入駐的平臺，所以我們需要一個品牌列表。
品牌詳情頁展示品牌的故事描述，以及品牌下面的所有商品。
3 商品
商品即是分類，主分類下有子分類。點進去後可以按綜合、銷量、價格來排序，也可以篩選分類。
商品詳情頁主要體現商品的標題、價格、簡介，並能快速選擇SKU。如果是服裝類商品，則會多出“預約試衣間”的按鈕。
4 購物車
購物車版塊沒有太多的變化，需要顯示基本的商品標題和商品的SKU，並有新增和刪除功能。
5 會員卡
會員卡頁可以看到預約試衣的入口，點進去後可以選擇需要預約的時間，或是取消已經存在的預約。
下滑則可以看到會員卡資訊，以及門店地址。
將想要試穿的衣服加入預約清單後，可以選擇一個星期內的相應時間段進行試衣間預定。
6 我的
個人中心裡有各個訂單狀態的快捷入口，以及優惠券、收貨地址、個人資訊、賬戶安全、關於等。
三 HeyShop線下體驗店
實體店地址位於上海市新天地南里商場2樓（乘地鐵10號線或13號線可達），高顏值、文藝腔、當季流行色，在上海的小夥伴可以去逛逛。
西瓜設計研究所
網際網路創業 | UI設計 | 開發資源 | 教程
未經允許請勿轉載，煩請私信作者獲取授權