小米之家大屏购物系统

2018-08-12

近几年,小米的产品在工业设计、用户体验界面设计上屡获国际奖项。这一次,小米首次尝试的小米之家购物屏系统界面设计,在 8 月 16 日最新公布的红点奖 Communication Design 2018 中,荣获红点设计奖。这是小米设计的又一次突破,代表我们的设计理念在国际上得到了肯定,也让我们有信心为用户提供更美好的生活方式。

图片1.jpg

小米购物屏坐落于深圳的小米之家旗舰店内,在这里有各种智能、科技的产品,其中这面互动购物墙让店内的“黑科技”氛围更加浓重。它由 5 块 80 英寸的屏幕组成,可追踪用户的移动行为。通过简单的手势操作,就可以浏览所有小米产品的图片、视频及文字介绍,扫码后还可以直接下单。全自助式的购物体验,这是对“参与感”最好的诠释。

 

这个项目是由小米生态链用户体验设计团队负责设计,小米销售与服务部负责研发,这是一个跨部门协作的项目,而且是一种全新的购物体验,未来也可能在全国范围内的小米之家落地实现,对我们来说非常具有挑战性,因为一旦成型,我们将要改变的是全国 300+ 家小米之家的购买方式。虽然有很大的压力,但也因此让我们有了更强的动力!

 

图片2.jpg

 

直面痛点,提升体验

为深圳旗舰店定制大屏购物系统之前,我们走访了国内多家小米之家,希望不仅仅是自己“看看”,更想“听听”顾客和工作人员的想法。

 

图片3.jpg

 

在这期间,我们收集并总结了以下问题,提出了小米之家购物屏的需求目标。从用户体验角度看,小米之家每日人流量大,经常会有顾客爆满,工作人员无法满足一对一的解答问题,顾客常常会处于等待解答或排队结账的状态;从产品展示和陈列宣传角度看,用户虽然可以看到、摸到产品,也有固定的银幕显示器,水牌等宣传物料,但还是不够生动,很难在现场让顾客体验到日常应用的情景化场景。基于这些问题,我们经过反复的讨论和构想,购物系统的雏形开始在我们脑海中渐渐成型。

 

图片4.jpg

 

我们希望这个购物系统能够充分利用用户的碎片时间,不仅是在小米之家,也可以在车站、街道、商场、社区等任意场景使用,根据地理位置与使用场景的不同,屏幕可以有不同的拼接方法,宗旨是为了保证在人流量少的地方节约设备成本,在人流量多的时候提高购买效率。用户通过浏览大屏中展示的产品图、视频及文案介绍,扫码后便可直接下单,实现全自助式购物体验。通过小米之家与物流仓储的网点支持,用户还可选择就近小米之家自提或送货上门多种取货方式,缩短送货时间,提高整体用户体验。将线上购买与线下零售相结合,改变用户传统的购买方式。

 

图片5.jpg

图片6.jpg图片7.jpg

640.gif

图片8.jpg

图片22.jpg

 

信息展示和购买下单,双向满足

不同用户有不同需求,一种是知道自己要买什么,需求明确快速下单,一种是通过阅览产品信息后被产品所吸引,下单购买。这就意味着系统需要同时满足产品信息展示和购买下单两大功能,我们从产品定义、需求分析、用户调研多角度出发,提炼了产品需求,进行了交互逻辑的梳理。

 

图片9.jpg

 

针对购物屏系统不同的功能属性我们也做了相应的设计优化。

 

图片10.jpg

 

在展示方向,我们通过卡片的形式和大小来承载内容,区分产品的权重;运用色彩划分屏幕区域,让每块屏幕所展示的产品保持相对独立,又满足视觉统一。不同的产品类别用不同的方式组合展示,上下滑动界面也可查阅更多标签与类别内容,简化检索方式。

 

图片11.jpg

图片12.jpg

 

在购买下单方向,我们定义了一套线性逻辑,通过把流程线性化,每一步执行一个操作选项,并把对应的选项通过界面展示出来,明确方向,同时运用大的卡片浮层,让用户沉浸于购买步骤中,选择相应的选项,操作便捷,最终完成下单。目前的两种取货方式已经能满足用户小件自提大件送货到家的的基本诉求。

 

 

 

 

合理的排布,使信息释放达到最优

为了能让用户第一时间得到想要的信息,迅速抓住用户眼球,我们对屏幕的高度、大小、所处位置,以及用户与屏幕的距离都进行了大量的尝试和仔细的研究,准确判断出用户的视觉中心,及有效的点击范围等信息。我们把屏幕界面的易用性分为三类,共五个区域。在上方不易点击区域通过大的卡片,承载主推产品,并通过色彩等元素吸引用户;在中间容易操作区域通过小卡片展示,给用户更多的选择空间;下方区域主要放中等大小图片,让视觉与操作盲区得以缓解。

 

图片14.jpg

 

为了使信息排布达到最优,采用了栅格化架构,通过单块屏幕的分辨率计算栅格尺寸,定义基础卡片最优的大小,让大小卡片有多种组合搭配方式,既能满足用户的阅读与点击,又能满足卡片在跨屏展示时的无缝衔接。

 

图片15.jpg

 

信息呈现更加场景化,趣味性

线下购买遇到的最大问题就是用户可以实际摸到产品,但是很难体验到日常的场景感,所以小米购物屏在产品信息展示层面也有相当大的作用,同时,我们也做了很多趣味性的内容布局。当没有顾客时,它是一个品牌宣传广告牌,所有屏幕可以是一张大海报,根据需要也可拆分成若干张小海报进行展示宣传。当有顾客靠近后,海报切换成产品页面,用户可以更进一步的了解产品,观看产品的场景图、视频等,感受不同维度的产品形态。

 

图片16.jpg640_1.gif

 

海报转换成产品页面,其实是将宣传导向调整成购买导向, 为了不让用户产生抗拒心理,我们专门做了一系列的动态衔接, 利用产品属性切换画面内容。比如利用空气净化器的净化功能和扫地机器人的清扫功能来转换屏幕内容,生动又有趣。

 

640_2.gif

 

 

从可持续性设计,到可持续性运用

考虑到内容更新与替换的成本,我们还制定了相应的规范,方便后期可持续性运营。不仅是在小米之家,未来购物大屏可能会运用到各处。

 

图片18.jpg图片19.jpg图片20.jpg图片21.jpg

 

未来,小米购物大屏还有更多可开发的功能,比如增加游戏模式,赋予其更强的娱乐性,也可以增加用户粘度,我们会继续探索,给用户带来更好的互动体验和购物体验。

 

 

扫描二维码分享到微信