阅读 2161

真实项目案例: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



关注下面的标签,发现更多相似文章
评论