日常都会逛超市，有没有关注过超市的布局？有没有思考过如何应用在设计之中？这一篇主要分享笔者自己在观察超市中货架布局后所总结的思考方式，希望能跟读者分享，有其他思路的欢迎沟通。
一、来源与补充概念
这个思路来源于逛中型超市时候的布局，发现无论是大小超市，布局上都有一些规律。
UX设计本身也是类似于超市货架设计布局到路径的设计，换到实际工作之中就是页面的布局以及交互的设计。
先补充几个概念。
1. 货架——产品功能
货架是商店中用来展示商品的一种设备，包括橱窗、架子、柜台、箱子等。
近年来，为了适应市场竞争和提高顾客购物体验，商店普遍对货架进行改进和调整。
2. 商品——产品信息
是指能将商品与消费者联系起来的好主意，简单的说，就是把商品“当作什么”来卖给目标消费者，才是最恰当的。在制造新产品时，很需要有如何才能将产品卖出去的主意。
二、如何理解
将产品的使用流程具象化为逛超市买商品的流程，让用户不仅仅能完成工作，还能更加轻松地完成工作，增加用户的幸福感。
三、货品分类——功能分类
1. 业务流程
将所有的功能以业务流程维度进行，就像是进超市之后，首先要引导用户要到需要的大品类到小类别到细分产品（例如：食品>零食>薯片），而无法直接引导到薯片品类区域去寻找，这里涉及到全体流程和局部流程。
1）全体流程——以单独计划为例
建立策略-审核策略-制定计划-分配人员与流转-人员执行流程-结果与反馈-数据统计。
2）局部流程——以常规的审批流程为例
提交申请-审批发起-审批环节-转发和抄送-审批结果-通知和反馈。
在B端产品，常常将全体流程与局部流程混合使用。
2. 用户角色
在B端产品之中，页面功能的呈现主要依赖于用户权限的判断，除非超级管理员。所有的用户可以分成两个角色：执行与管理。
就像是两个不同职责的人，即使是相同喜欢吃零食的，但是一个喜欢吃薯片一个喜欢吃饼干，关注点就会不同。
3. 阶段重要性
在超市中有的时候会看见临期的产品放在角落，有的时候会有一些活动时候推出新的产品，甚至看到过倾斜摆放的产品来表现产品。
转换到B端产品，处于不同的生命阶段对于功能的设计以及优化，有着不同的重点：
- 初始：更加注重“新”功能设计的与迭代，框架设计上更加趋向于将新功能集中，方便管理。
- 成熟：一般是处于最长的时期，在功能设计与分类上更加佳倾向于偏向于业务与用户。
- 衰退：衰退期是一个产品必经的节点，每一个产品都会经历，产品处于衰退期有很多原因（比如：竞争力不够、市场风险、政策原因等等），产品设计之上更加要关注原因从而定制化结局方案。
- 重生：衰退期直接失败了到不了这个阶段，这里有个阶段会与初始阶段闭环。
4. 按照功能分类
这里可以简单分为：“大”功能、“中”功能、“小”页面。以常见的考勤为例：考勤功能>考勤统计>考勤工时。类似于超市中关于零食的父子级排序：零食>薯片>可比克，也是常见的功能排序与分类方式。
四、设计原则
1. 刚进入——导航栏快速查找
超市商品是卖给顾客的，只有让顾客找到自己需要的商品才能实现销售，所以一般的超市考虑商品的布局和陈列。
一般在入口都张贴有商品布局分布图，店内货架上方吊有品类指示牌，以及一些其他图文标识等。也许有些门店调整，这些早变得面目全非，但它可是无声的导购员。
换到B端产品功能之中，就像是各种各样的导航栏、面包屑导航等等。在做这一类设计的时候，一定要保持与其他内容的区分度。还有所有层次要拉开。
2. 闲逛中——快速查看
这里会涉及到铺货人员与用户双视角，以观察的超市为例：
- 铺货人员：一部分超市的货架陈列上，为了方便员工自己和供应商角度考虑，按供应商品牌归类陈列，于是这个供应商的同类品种的不同规格、不同价位、不同功能、不同口味的商品集中在一起，厂家品牌效应是得到了集中强化效果，也有利厂家和员工的上货和定购。
- 真正的用户：往往在选择了该品牌的商品后，往前挪两步，又发现了不同品牌的同功能、同口味的其他同类产品，又要挑选，甚至丢弃原来的商品，增加了顾客的麻烦，譬如果汁饮料。
换到实际的项目之中，每一个货架都是数据组的载体，上面讲的双视角就是产品经理和实际用户。很多时候产品经理会凭借自己的感觉进行功能的设计以及排序，建议多听听用户的声音。
3. 关联性铺货——方便查询
超市内的商品陈列，特别强调商品之间的关联性。这种关联不是简单地把服装鞋帽归类集中在一个区域陈列这样狭隘，毕竟就算是相邻的陈列也要注意关联陈列，也要注意平稳过渡，如洁厕灵地堆紧挨饮料地堆，让人看了总不舒服吧。
在B端设计常见的是功能分区。就拿复杂表单的布局来说，往往会按照一些关联维度分成多个卡片进行排列，方便降低用户查看成本。具体关联项要根据业务形态或者是用户的使用流程进行划分。
4. 铺货方式——负空间/剩余空间的利用
超市货架陈列中有俗话讲“货卖堆山”，货架、地堆、端头上的商品必须丰满陈列。
商品不丰满，会降低货架空间利用率，导致仓库库存压力增大，商品不丰满，容易给顾客留下这些是“卖剩下来的商品”的不好印象，商品不丰满，影响了商品自己的表现力，影响销售。
尤其是地堆、端头等特殊陈列的商品更要丰满，这些特殊陈列犹如超市的画龙点睛之笔，是超市的亮点。
不能简单地把旁边的商品拉大排面，除非该商品畅销。为了解决这个问题有两种处理方法：在空缺的地方，放置“此货暂缺”标志；或者把其他有关联性的、同时销售得比较好的商品填补上。这种操作一定要做记录，跟踪要货，不然容易使该商品在店里“消失”。
在产品设计之中，对于负空间也就是以及剩余空间的利用是常见的场景，比如运营插画设计以及空状态的插画呈现。同时在表格与表单中也有使用的场景，表格中空数据一般用“-”横杠呈现，表单中也有默认语句。
5. 铺货方式——唯一原则
这里一般指的是ID的唯一性，里面有包含：人名以及商品或者只任务/计划的ID，保证了唯一性，也能保证查询时候的准确度，以及减少开发时候的报错几率。
6. 结账阶段——状态可见原则
用户的任务操作到最后都一定会有一个结果，就像是消费者去逛超市最后一定会付账/不买。这里就涉及到了多个状态：
- 中间退出：操作中间会有很多情况会导致退出，根据业务需求可以让用户暂存表单或者是直接退出的场景下进行二次确认。
- 成功交付：具体要重要程度，轻到请提示，重到单页呈现都有，但是核心都是一样的，主要是呈现现有的进度以及结果，如果还有剩余的流程也要重新进行引导。
- 交付失败：交付失败的原因有很多，比如余额不足或者是网络波动等等。不仅仅要给到解决方案，还需要给到安慰的语言。
如果是做财务或者是与金融/金钱相关的流程页面的（尤其是支付类产品），交互页面涉及到金额的页面一定要把金额当成重点呈现。
五、有什么用
1. 快速拆解业务——减少与产品经理沟通成本
产品经理与设计师涉及的方向往往是相反的，一个向的是公司，一个向的是用户。当两者有冲突的时候，就需要设计师拆解业务之后去跟产品沟通，从沟通之中寻找到一个平衡点。
2. 流程化思考/模块化思考——清晰化设计
能够迅速判断信息的优先级以及信息层级的分布，能够保持一个清晰度头脑。
3. 减少评审频次——结构化阐述方式
在设计评审的时候，除了页面的逻辑页面质量外，设计思路的阐述也是比较重要的，如果有自己的设计思路，而不是只是“好看”，过的概率更高。同时也能展现自己的专业度。
六、总结
本文从来源、分类、原则、作用4个角度分享自己的经验总结，如果有不同建议的读者，可以随时沟通与交流。
微信扫一扫 
支付宝扫一扫 
