喵街tab商城页改版总结

写在前面

本次撰写这篇文章主要是针对喵街（武林银泰店）Tab商场页做一个旧版本的迭代，这也是我近期面试阿里喵街的一道笔试题。

文章主要是从以下几个方面入手：

1.页面定位    2. 问题解析    3. 业务诉求    4. 结构优化    5. 设计产出

喵街tab商城页（旧版）

【页面定位】

现状：目标用户为25-35岁年轻时尚、消费能力高、注重品质的女性用户，主营类目为化妆品、服饰、运动等中高端百货，喵街是针对提升银泰商场购物和服务的一款产品。

定位在tab商场页，为一级页面，曝光率较高能有效的促成CTR转化成GMV。由此可见此页面在产品中的地位和价值。中高端商品匹配中高端用户人群。页面情绪版定义为：活力、高端、时尚、大气。

商场页面总体应该透露着线下的热闹氛围即营销场景，也不可过分的宣泄打扰消费群体在场景中的享受即高端。需要迎合线下大气的建筑空间场景来参考作为线上的设计方案。

【问题解析】

问题1:如何将线下特有的商品折扣或者其他服务类信息同步展现在线上？

上图可以分析出：能够线上展示的不仅仅是商品，旧版的商品展示没有带来流量的同时，功能类的模块更符合用户的心理预期，因此此次设计主要是将线下的庞大的用户群体通过一种足不出户的方式在固定的场景里固定的时间里将他们合理的拉到线下消费，从而真正意义上的达成转化。

问题2:如何凸显银泰作为高端百货类线上的运营设计方式？

银泰作为中高端百货商城，其意义旨在将年轻力量吸引到喵街的消费场景，那么能刺激年轻用户冲动消费的运营模块就是本次设计新版商城页面的最终意义。

问题3:什么样的交互才能将如此庞大的线下综合体打通到线上？

如此大的线下综合体，包含购物、餐饮、娱乐有着购物中心属性的商城，如果全部照搬展现在线上，tab商城页必然承载不了这么大的信息内容。旧版首页只从商品展现上就占据了2屏的浏览量，磨练用户心智成为新版tab商城页的一大挑战。

【业务诉求】

商场的业务优先级可排序为：银泰自营信息同步入口  >  功能性入口  >  大促/拉新入口  >  入驻商 >  合作商

【结构优化】

通过分析我们能够看到tab商城页已然不是作为商城的属性，此处可以理解为在购物中心属性。

设计原型诉求：

1. <tab商城页> 此处改名为 <商场>，真正用于服务与本地商场的页面属性

2. 将 <扫一扫> 和 <消息> 功能砍掉（与首页重复）

3. 商城banner模块与首页banner运营内容一致，容易误导用户产生混乱使得点击率不高。此处可砍掉另增运营模块。

4. 功能类图标是旧版中用户使用率较高的模块，新版中可以尤为突出，故此出可做视觉重构（人记忆的数字一般在1-8个），基于个人中心视觉延展，可将每个icon颜色做视觉区分，增大用户记忆点。

5. 会员卡作为银泰主要的业务线，放在第一位远远不如放在中间位置带来的点击率高（视觉具有聚集性）

旧版头条曝光的业务是会员并留有大促入口，时常也做新人入口。

设计原型诉求：

1. 减少模块占比，增大浏览效率。

2. 大促位置做保留

Block分类点击可以跳转专题页或者商品详情页。

设计原型诉求：

1. 现有bolck不能满足大量的不同类的百货和折扣信息的展现，可以重构。

2. 应以自营或入驻商信息展现为主。专题页入口不必提供多入口。

3. 排行榜模块可设计区别与其他模块，主要内容可以展现在二级页面。

商品流改为店铺流，可最大限度为店铺倒入相应流量。

设计原型诉求：

1. 店铺可以以满减满赠的形式制作店铺标签。

2. 店铺应当增加指定地址设计

3. 店铺应该以日活最大新店上新优先排列。

【设计产出】

基于原先产品调性，喵街我的页面改版设计Sense，延展商场视觉基调，首页将icon创意设计。

结合运营模块和版面重构元素，最终设计结果如下：

喵街tab商场页（新版）

总结

tab商城页总体设计方案，即区别于首页的购物功能又能够展现喵街作为一款购物软件，把线下本地场景融入app当中。本次重构目的在于能够为喵街作为下一步的产品探索提出一些建设性的意见。无论是产品结构还是运营方式上，我想这次重设计都能带来一些帮助。从而能够真正的做到设计驱动产品变现，设计触达用户内心。