之前看过一篇文章说：PC时代，用户关注首页的时间占浏览网站总时间的80%。随着互联网的发展，现在这80%的时间都花在了PC首页的前三屏上。我觉得这个道理在移动端也适用。用户打开盒马是有明确目的的，下单的可能性很大。不像综合电商，用户可能只是过来浏览。为了让用户购物时更有效率，过多的信息堆积，只会让用户难以选择，商品臃肿。我们来分析一下盒马首页前三屏的内容：

首屏：聚焦体验。用户会主动关注首屏的活动（活动曝光最大化）和金刚区，金刚区图标全部采用实物造型，最直观传达品类，品类展示顺序与用户购买频次、主打产品、用户高购买频次等因素相关。

第二屏：第二屏的体验主要是将流量引流到瓷砖区域各个活动渠道的入口，有利于吸引用户，提高成交率。另外第二屏整体占据面积较大，各个分发入口都取得了很大的曝光量。

第三屏：沉浸式体验。第三屏来到了商品浏览模块，并在页面顶部列出了5个品类Tab，方便用户点击切换浏览；盒马还将各活动频道的入口设计成竖式卡片，混杂在商品Feed流中，很好的融合在一起，视觉上更加一体化京东下拉词，给用户更好的沉浸式体验；

在京东近期更新的v8.1.6版本中，首页也采用了这样的设计布局，缩短了首页整体长度，将重点放在前三屏，以此让用户更高效、更专注。这种布局方式其实并不新鲜，淘宝早就这么做了。当然，这种方式对算法能力的挑战更大，需要依靠大数据来实现千人千面。

另外，我在首页发现了一个小小的体验问题，那就是“下拉刷新”和下拉进入“盒马二楼”，因为它们是同一个手势交互，所以有时候你想刷新却不注意，就会进入盒马二楼；

5.4 分类页面

从上面盒马的购物流程我们可以看到，用户在购物路径上从金刚区点击到分类页（二级页面图2）。一级分类页是一个单独的页面（图1），只作为所有类目的展示和入口，点击它还会进入分类页（图2），入口重叠，虽然对于类目展示很直观，但是个人认为一级分类页有些浪费；另外，此版本对分类进行了修改（图2），顶部导航栏只能显示3个大类目，感觉效率不高；

结合个人想法给出优化方案：

直接取消一级类目页面，状态栏切换到类目Tab时直接显示原状态样式（图1）；不滑动时，导航栏显示搜索入口和6大类目入口图标，可左右滑动，点击第4个类目时，整体自动向左移动，方便用户超越屏幕浏览类目，可减少滑动操作步骤；

左侧滑动二级品类抽屉时，商品列表位置不变；点击抽屉中超出半屏幕的品类时，抽屉自动向上滑动2格，减少滑动步数；

商品列表区上滑时，隐藏一级过滤区域以及一级类目图标下的文字描述，节省页面空间。如果你更大胆，甚至可以隐藏标签栏。商品列表区下滑时，隐藏的元素又会显示出来。

当你从金刚区点击进入分类页面时，会直接进入对应的分类，比如你在金刚区点击“奶制品烘焙”，进入分类页面，就会直接跳转到“奶制品烘焙”；

5.5 产品详情页

商品详情页首屏（左图）重点展示了商品图片、商品名称、价格、库存等信息，这些信息对于用户来说是最重要的。另外下方的快速发货时间和兑换折扣也有利于促使用户下单。但是目前发现部分商品首屏是视频内容。视频有利于商品的全面展示，提高购买率。我观察发现进入页面后，视频显示为，但是并没有自动默默播放。个人认为可以自动播放，因为既然视频已经加载完毕，用户为何还要多走一步去播放呢？从产品角度来说，希望用户看到视频，最终转化为购买行为。可能有人会认为是为了节省流量，但是考虑到用户的使用场景，产品可能在办公室或者家里使用，可能大多会用Wifi，现在流量没那么紧张。近期微信朋友圈视频自动播放也是案例，盒马也可以引导用户在设置中关闭自动播放功能；另外，视频播放进度条与“视频”和“图片”位置重叠，不利于视频调节；

第二屏的“菜谱”功能（中图）是盒马比较有特色的功能之一，可以有效提升用户购买商品的兴趣。很多不太擅长做饭但愿意做饭的用户会更喜欢这个功能，因为不用刻意百度食材的烹饪方法；点击其中一个菜谱进入详情页（右图）后，可以发现页面顶部有图片或者视频介绍菜品的烹饪步骤。这些菜谱由不同的第三方机构提供，盒马不太可能在这上面花这么大的运营成本；再往下是食材列表，可以和在售商品捆绑销售，不满意还可以找同类商品；底部还可以对菜谱点赞、收藏，不过右下角的“立即购买”让我有些疑惑，因为点击并不是购买行为，而是选择性的将列表上的商品加入购物车，所以个人觉得把文案改成“立即加入购物车”会更合适；

5.6 盒区寿命

盒马鲜生的特色功能之一，根据LBS定位，会有群聊推荐（图2），加入群聊后，群主会不定期发放优惠券，促进用户购买。此外，基于用户在群聊中的讨论交流，有助于挖掘用户的真实需求。在热门话题详情中（图3），用户可以对发布的话题进行分享、点赞、评论，有利于构建用户社群，用户还可以在话题中发布动态，整体形成良好的购物氛围；用户在选择购物前，可以查看商品信息、与他人交流，延长了用户对商品的使用时间；为了鼓励用户发布动态并互动点赞，可以获赠盒花作为奖励，可用于兑换实体商品；

我发现一个小问题，当我点击标签栏里的“Box Area Life”标签时，无法将页面置顶。

5.7 购物车页面

购物车页面没什么问题，右上角的“删除”按钮在购物车为空或者没有选中商品时是灰色不可点击的。我一直很奇怪这个字段为什么叫“删除”，好像是提醒用户删除购物车里的商品。我去查了淘宝的购物车，发现叫“管理”。试了一下，发现除了删除选中商品的功能，还有“移至收藏夹”和“清空”功能。而盒马只有“删除选中商品”，我恍然大悟。

5.8 订单确认页面

订单确认页面没什么问题，新增的“配送备注”功能目前只有3个备注可以选择，希望以后可以手动输入，另外建议产品以后也可以在这个页面增加换货、开通会员的功能；

5.9 盒马小镇

盒马小镇是产品的特色功能之一，是签到功能的另类玩法，也有点类似支付宝收集能量的蚂蚁森林，旨在提升用户活跃度下拉词自助平台★64xl.com顶级下拉平台，一个网页下拉功能怎么实现的，增加购物乐趣，延长用户使用时长。

目前获取盒花的途径有：每日登录、盒子区点赞互动、搜索盒花（图2其实是查看推荐商品详情）、偷窃盒花（偷窃盒马镇随机推送的陌生人的盒花）……收集到的盒花可以兑换商品，但是个人觉得最底层的商品对我的吸引力不大，一方面是因为每天可以获得的盒花数量有限，另一方面可以兑换的盒花价值过高，会大大降低用户的积极性，比如我想要获得下面第一个价值580盒花的购物袋，可能需要连续积累10天以上的盒花，而它的实际价值只有5.8元；

每天退出盒马小镇都会有弹窗提醒我来收盒子花，说实话对用户来说有点打扰，建议设置不再提醒或者每天只在第一次进入盒马小镇时提醒一次；

5.10 盒马会员

说到会员，用户最关心的是能得到哪些会员福利，购物时能得到多少折扣，还能得到哪些特殊服务，作为会员能不能感受到高端，这些都会影响用户是否成为会员的决定，当然，会员费用才是关键因素。

进入盒马会员页面，设计试图凸显会员的“9大权益”，但视觉冲击力略显不足；9大权益标签可通过左右滑动进行切换，方便用户查看各权益对应的介绍详情，但为了一屏展示，避免用户向上滑动，图标显得略小，冲击力会减弱；

页面底部两个会员激活按钮方便用户点击，突出“花呗开通盒马X会员”，两者向上滑动消失，最终放在页面底部，这是个不错的细节；

目前会员入口在“我的”页和首页第三屏，个人建议可以将会员入口添加到“提交订单”页，这样更贴合用户的购物场景，提高转化率；

5.11 扫描/输入会员码

个人认为“扫一扫”和“会员码”的入口埋在“我的”页面，不太容易找到，在线下购物场景下，这两个功能应该是比较常用的。

5.12 关于页面加载方法

目前盒马中最常见的页面间加载方式是全屏加载、进度条加载，虽然这些比较细微，但还是建议酌情使用多种加载方式，比如分步加载、在一些重要的页面优先加载页面框架等；

5.13 关于“消息”的二次授权

消息通知对于产品运营的意义不言而喻。如果用户未授权消息通知，产品可以通过在用户进入“我的”页面或“消息”页面时弹窗，或者在“消息”页面顶部的通知栏等方式引导用户，用户点击后可前往设置开启。另一种更好的做法是将消息授权融入购物场景，比如在“提交订单”和“收到商品前”的订单详情页之间，可酌情增加开启消息通知的引导，用户开启的可能性会更大。另外，对于未来新用户，产品仍应采用预授权的方式，避免用户从一开始就拒绝授权。

UI视觉表现层解析

引用一句设计理论“美即是可用性效应”：如果你的设计足够美观，用户会容忍一些相对较小的可用性问题，影响不大；盒马作为成熟的购物产品，背靠阿里，有丰富的设计人才，UI设计肯定不会出什么大问题。但UI设计一般是设计团队多人负责，所以要有一套完整的设计规范，形成视觉一致性。下面举几个例子：

1. 我的订单和订单详情

（左）“我的订单”页面发现两个问题：单个订单的触控区域有点小。目前只能通过点击订单号、交易状态或产品图片进入订单详情页。图片中红框内的区域应该设置为整个区域，以免出现卡顿。“删除订单”和“下一订单”区域的灰色背景，在视觉上与整个订单脱节，好像不是一个整体。视觉表达可以直接用白色背景来表达。白色和灰色的交错让页面看起来有些混乱。

（右）“订单详情”页发现部分问题：若单件商品错过退款期限，建议不要直接展示“申请退款”，避免用户产生困惑；信息详情字体过小不易阅读，间距拥挤，有优化空间；“无发票”看上去完全不可点击，不符合设计规范，可能是故意为之，但不建议欺骗用户；应增加订单号的复制功能；页面底部应增加“删除订单”，保证操作的一致性；

2. 我的地址

我的地址详情部分，字体有点小，间距有点太拥挤，地址“家”的标签也很小，整体上难以识别；不过有很好的一点是，这个页面截图的时候有隐私保护提醒，超出了我的预期京东下拉词，是一个很酷的点；

3. 页面图标

目前盒马App内的图标风格多样，尚未形成统一的设计语言，例如盒马小米就有两种不同的设计风格；

4. 设置页面

目前列表导航放在一起一共有 7 个，我觉得可以分成两组，比如“支付设置”、“送货地址”、“启用通知”这几个功能放在一组，其他 4 个也放在一组，分组之后看起来就不会那么拥挤了。

5. 整合品牌 DNA

盒马在品牌设计上做得很好，将品牌吉祥物元素融入到启动页、下拉刷新、页面加载、促销、商品列表底部、标签栏图标、默认页面、个人中心底部背景图等细节中，有利于强化用户记忆点和品牌感，与用户建立情感联系；

但是也有些地方存在着样式不一致的情况，违反了一致性原则，比如商品详情页的下拉刷新样式、我的页面底部的您可能喜欢的商品列表……

该产品还有其他的UI分析，就不多举例了~

SWOT 摘要

1.优点：

盒马鲜生在生鲜市场占据领先地位，依托线上线下的产品优势和阿里大数据赋能，可以确定生鲜商品的进货量，保证每天售完、保证商品新鲜，杜绝传统销售模式带来的生鲜商品损耗，降低成本。另外，它用算法确定配送范围，确定配送员的最佳配送路线。这些都要通过技术来解决，而这对于传统企业来说是难以逾越的鸿沟。

盒马全国门店数量已达160余家，城市覆盖率稳步提升，多业态组合策略更具优势；

线上产品成熟，线上线下融合优势明显；

2.缺点：

一二线城市的发展非常成功，但三四线城市下沉市场仍然存在巨大挑战；

目前微信小程序发展势头强劲，但盒马与阿里的关系限制了小程序的发展；

3.机会：

除了购物场景，用户还有社交、娱乐、休闲、文化等消费场景，购物场景之外的精准流量和消费决策将是新零售流量的巨大增量；

在数据驱动下，我们将重构消费场景，越来越注重用户的精细化运营，通过徽章、成就激励等有趣有益的机制，鼓励用户自发在社交媒体分享，实现裂变增长。

关注用户评论，特别是差评。用户评论一般是用户使用产品后的反馈，有助于产品发现用户需求，对后期版本迭代、产品规划有指导意义；

押注80后、90后，他们是中高端消费的主力军，产品开发要符合这一代人的生活方式；

个性化产品皮肤：越来越多的产品开始允许用户定义自己的产品皮肤，目前盒马已经到了产品成熟的阶段，品牌知名度已经深入人心，个性化皮肤的定制也可以成为未来的一个机会点；

情感化设计不只限于线上，线下同样可以运用。善用IP形象，有助于在消费者中建立品牌知名度。线上也可以围绕节日举办活动，给用户带来惊喜。在用户生日时送礼物或优惠券也是不错的选择，能立即提升品牌形象。

麦肯锡曾预测，未来十年，三四线城市的中产阶级将成为增长最快的群体；

另外AR、5G等即将到来的商业应用会给行业带来变化，这也是产品需要考虑的；

4.威胁：

随着生鲜行业玩家的增多以及巨头布局的扩大，生鲜行业竞争将不断升级，这也将推动传统商超的升级转型，行业格局加速洗牌；每日优鲜、叮咚买菜等重视正向仓模式的公司将成为强劲竞争对手；

结论

以上是我为“盒马App”进行的产品分析案例模板，部分内容没有深入研究，还有一些可以分析的点，有些地方有点挑剔，毕竟没有完美的产品，是一个逐渐打磨的过程，不可能一蹴而就。不过还是希望这篇分享对大家有帮助~

写得不容易，请点“阅读”或者转发分享~~

获取文章PDF请在公众号“张UED”后台回复“产品分析”，另附34个产品分析报告案例，版权归原作者及机构所有，请勿用于商业用途，链接有效期7天，赶紧错过哦~

参考：

《2019中国生鲜电商行业研究报告》 - 艾瑞咨询