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

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