真實項目案例：HeyShop品牌電商小程序

近期咱們與嘿店合做了其旗下HeyShop商城的小程序設計與開發。本期就給你們介紹一下關於這個項目的相關內容。

如需轉載請點此查看轉載須知。

HeyShop商城小程序

Online Shopping Store MiniProgram

設計 / 銀子

前端 / 時禪工做室

技術支持 / 嘿店

一 項目介紹

HeyShop商城是爲嘿店旗下的線下體驗店打造，做爲一個OMO商城，HeyShop彙集了全球精選好貨，並有國內多家獨立設計師品牌與時尚博主入駐，由此打通線上與線下，爲買家提供最優質購物體驗。

做爲「新零售」體驗店，咱們專門爲用戶了定製了一個「預定試衣間」的功能。用戶能夠在將須要體驗的衣服加入到預定清單裏，選擇時間後，即可預約這個時間段的專屬試衣間，到門店進行線下體驗。

點擊上圖中的小程序卡片、或是識別下面的二維碼能夠直接進入小程序預覽真實上線項目。查看用Marvel製做的高保真原型請戳這裏（原型與最終上線項目功能略有調整）。

二 設計解析

電商小程序在一些基本功能的需求上是大同小異的，咱們先肯定底部菜單的5個入口：首頁、分類、會員卡、購物車、個人。

首頁再分爲：推薦、品牌、專題。

會員卡：個人預定、會員卡信息、門店地址。

其中，用戶最容易觸達的頁面，一是打開小程序第一屏就能看到的首頁推薦，二是在底部菜單着重增強的會員卡入口。

1 首頁

咱們先來看首頁，Banner每期能夠更換主題，關於HeyShop本身的資訊推送，或是優質商家專題推薦。

首頁 Banner

接着是體現幾個重要的特徵，品牌直售、正品保障、價格優惠、以及門店體驗。讓用戶一目瞭然。而後是優惠券版塊，這個板塊是隨機的，有優惠活動時會在，沒有活動時會隱藏。

再接着是用戶會比較感興趣的，Top最熱單品版塊，以及4個專題版塊，主題能夠變換。爲了節約空間，讓商品都變成能夠橫向左右滑動的。點擊專題封面後，還可進入相應的專題詳情。

在主題版塊的下面，加了一個品牌推薦版塊，讓優質的品牌多一個展現入口。

在最後，就是剛剛上新的版塊，這裏商品咱們採用平鋪的展示方式。

2 品牌

因爲是商家入駐的平臺，因此咱們須要一個品牌列表。

品牌詳情頁展現品牌的故事描述，以及品牌下面的全部商品。

3 商品

商品便是分類，主分類下有子分類。點進去後能夠按綜合、銷量、價格來排序，也能夠篩選分類。

商品詳情頁主要體現商品的標題、價格、簡介，並能快速選擇SKU。若是是服裝類商品，則會多出「預定試衣間」的按鈕。

4 購物車

購物車版塊沒有太多的變化，須要顯示基本的商品標題和商品的SKU，並有添加和刪除功能。

5 會員卡

會員卡頁能夠看到預定試衣的入口，點進去後能夠選擇須要預定的時間，或是取消已經存在的預定。

下滑則能夠看到會員卡信息，以及門店地址。

將想要試穿的衣服加入預定清單後，能夠選擇一個星期內的相應時間段進行試衣間預約。

6 個人

我的中內心有各個訂單狀態的快捷入口，以及優惠券、收貨地址、我的信息、帳戶安全、關於等。

三 HeyShop線下體驗店

實體店地址位於上海市新天地南里商場2樓（乘地鐵10號線或13號線可達），高顏值、文藝腔、當季流行色，在上海的小夥伴能夠去逛逛。

西瓜設計研究所

互聯網創業 | UI設計 | 開發資源 | 教程

未經容許請勿轉載，煩請私信做者獲取受權

©uirush.net