同功能，多终端：关于小店补货的设计思考

苏宁小店是苏宁旗下基于社区的自营便利店品牌，小店员工日常通过web端的运营管理平台和手机端的店+，对小店进行管理。当店内某些商品即将或已经缺货时，员工需要在线上下单补货。

手机端的补货功能在门店试点阶段，基本功能已得到初步验证，因此产品同学们准备将App端的功能移植到Web端，我在此时加入了此项目。本篇将记录我在这个项目中的几点经验：

· Web端功能移植：交互方式适配细化场景

· 手机端体验优化：交互方式适配用户习惯

Web端功能移植

图1 web端补货页面

在做交互时，最基本的是要想全场景并匹配控件状态。

如类目筛选控件，功能要求是

1.相同一级类目下的二级类目可多选

2.注明类目下已加入需求的商品数量

方案如下

图2 类目选择

图3 单品数量标记

如增减控件，功能要求是

1.超过最高要货量需联系大区供管

2.控件支持输入，但需按箱规向下调整最终数量

方案如下

图4 增减控件

手机端体验优化

手机端补货功能由于正值试点，仅开放了两个门店进行功能测试，因此大量的数据收集是不可能的，且产品目前并未被埋点。作为替代，我请门店员工在使用补货功能时开启录屏，将他们的实际操作情况录制下来并发送给我，通过这些素材，我得以实现路径细查，并发现当前版本的交互界面与用户使用习惯不相符之处。

当前补货主页面类似小店消费者端的购物页面，将大量版副放在列表展示上，即预测补货功能，展示系统推荐需要补货的商品。

图5 当前补货页面

但通过观察录屏我发现，当前用户实际常用的是另外两个功能

1.扫码查找商品

2.输入搜索商品

小店员工在补货时，俨然内心已有了下单目标，通过直接查找的方式操作非常快速方便。反而当他们在翻找列表时，常常翻了好几滚都没有选择一个，可见当前预测补货列表并不符合员工的补货判断，并未给他们带来更多便利。这或许是补货推荐的算法需要改进（需要补什么商品），也可能是商品列表的排列方式需要优化（需要补货商品的排列优先级）。

为此，我提案调整页面结构。

1.优先扫码补货

进入补货插件优先扫码，不需要在点击小小的按钮操作。一扫一加，快速下单。

图6 扫码补货优化

2.输入放大，列表置后。

为了让搜索框点击更舒服，优化方案放大搜索输入框，仅在向上翻页时将搜索框缩小至正常位置和大小。

图7 输入查找商品

小结

对比web端和移动端，操作web端的是店长，在固定工位通过PC总览全店情况。在web端强调系统给出的补货预测，并凭借大幅面清晰展示各细节供应数据，帮助店长进行前置补货判断。

移动端突出补货的机动性和临时性，店长和员工可以随时通过检视货架查看缺货状况，及时补充商品。移动端的页面因此可以更强调扫码下单和自主搜索，弱化冗长的商品列表，让下单更简单快速。

两个终端由于硬件条件不同，形成不同的使用场景，在界面设计时也要迎合用户在不同场景的操作习惯，让他们舒服、高效地工作。