如需转载请点此查看转载须知




HeyShop商城小程序

Online Shopping Store MiniProgram


Image title


设计 / 银子


前端 / 时禅工作室


技术支持 / 嘿店




一  项目介绍


HeyShop商城是为嘿店旗下的线下体验店打造,作为一个OMO商城,HeyShop聚集了全球精选好货,并有国内多家独立设计师品牌与时尚博主入驻,由此打通线上与线下,为买家提供最优质购物体验。


作为“新零售”体验店,我们专门为用户了定制了一个“预约试衣间”的功能。用户可以在将需要体验的衣服加入到预约清单里,选择时间后,便可预定这个时间段的专属试衣间,到门店进行线下体验。


点击上图中的小程序卡片、或是识别下面的二维码可以直接进入小程序预览真实上线项目。查看用Marvel制作的高保真原型请戳这里(原型与最终上线项目功能略有调整)。


Image title




二  设计解析


电商小程序在一些基本功能的需求上是大同小异的,我们先确定底部菜单的5个入口:首页、分类、会员卡、购物车、我的。


Image title


首页再分为:推荐、品牌、专题。


会员卡:我的预约、会员卡信息、门店地址。



Image title



其中,用户最容易触达的页面,一是打开小程序第一屏就能看到的首页推荐,二是在底部菜单着重加强的会员卡入口。




1  首页


我们先来看首页,Banner每期可以更换主题,关于HeyShop自己的资讯推送,或是优质商家专题推荐。


Image title

首页 Banner


接着是体现几个重要的特征,品牌直售、正品保障、价格优惠、以及门店体验。让用户一目了然。然后是优惠券版块,这个板块是随机的,有优惠活动时会在,没有活动时会隐藏。


Image title


再接着是用户会比较感兴趣的,Top最热单品版块,以及4个专题版块,主题可以变换。为了节约空间,让商品都变成可以横向左右滑动的。点击专题封面后,还可进入相应的专题详情。


Image title

Image title

Image title

Image title



在主题版块的下面,加了一个品牌推荐版块,让优质的品牌多一个展示入口。



Image title








在最后,就是刚刚上新的版块,这里商品我们采用平铺的展现方式。


Image title





2  品牌


由于是商家入驻的平台,所以我们需要一个品牌列表。


Image title


品牌详情页展示品牌的故事描述,以及品牌下面的所有商品。


Image title




3  商品


商品即是分类,主分类下有子分类。点进去后可以按综合、销量、价格来排序,也可以筛选分类。


Image title




商品详情页主要体现商品的标题、价格、简介,并能快速选择SKU。如果是服装类商品,则会多出“预约试衣间”的按钮。


Image title







4  购物车


购物车版块没有太多的变化,需要显示基本的商品标题和商品的SKU,并有添加和删除功能。



Image title





5  会员卡


会员卡页可以看到预约试衣的入口,点进去后可以选择需要预约的时间,或是取消已经存在的预约。


下滑则可以看到会员卡信息,以及门店地址。


Image title


将想要试穿的衣服加入预约清单后,可以选择一个星期内的相应时间段进行试衣间预定。


Image title




6  我的


个人中心里有各个订单状态的快捷入口,以及优惠券、收货地址、个人信息、账户安全、关于等。


Image title





三  HeyShop线下体验店


实体店地址位于上海市新天地南里商场2楼(乘地铁10号线或13号线可达),高颜值、文艺腔、当季流行色,在上海的小伙伴可以去逛逛。


Image title

Image title

Image title

Image title

Image title





西瓜设计研究所


互联网创业 | UI设计 | 开发资源 | 教程


未经允许请勿转载,烦请私信作者获取授权


©uirush.net