产品交互设计——5层递进模型:电商App的交互骨架
打开某电商App，你有没有过这种体验：想找订单退款，翻了半天找不到；明明点了“加入购物车”，却不知道在哪里查看；刷商品的时候，总被无关的模块打断思路？其实不是你操作笨，而是这款App的交互分层没做好。
先拿大家最常用的某东App举例，我们每天刷的首页、商品页、购物车，其实都藏着这5层模型，只是我们平时没注意。
这5层是从底层到表层的递进关系，就像盖房子，先打地基（功能层），再搭框架（架构层），然后铺通路（导航与策略层），最后装修（细节层），少了哪一层，用户用着都得翻车。
这里要和之前聊过的用户体验5要素区分开，我们只考虑交互设计。
也就是房子的地基，核心是明确“系统能做什么”。对应电商App，就是我们能在上面完成的所有操作：搜索商品、加入购物车、下单支付、查看订单、退款售后、浏览推荐。这一层的关键是“功能拆解要清晰”，不能乱堆。比如京东的“下单”功能，就拆成了“选规格、加购、结算、支付”四个小功能，全围着“完成购买”转，这就是书里说的“功能模块高内聚”。
这里插个细节：功能模块之间的间距，直接影响用户能不能分清“这是两个不同的功能”。电商里最常见的就是矩形模块，比如首页的“商品推荐区”和“分类导航区”，都是矩形模块，属于不同的功能层，间距就得设24px（行业通用的8的倍数栅格），这样用户一眼就知道“上面是找品类，下面是看商品”；而同一个功能模块里的两个小矩形，比如“选规格”里的“颜色”和“尺寸”选项，间距就设16px，因为它们关联度高，不用拉太开。
相当于房子的框架，核心是“把功能模块按逻辑串起来”。还是以某东为例，架构层就明确了：首页（推荐+搜索）→ 商品详情页（规格+评价）→ 购物车 → 结算页 → 订单页 → 售后页，每一个模块之间的连接都很顺畅，不会出现“从商品页找不到购物车”的情况。这里的细节的是，圆形模块和矩形模块的间距设计——比如商品详情页的圆形“收藏”按钮，和矩形的“加入购物车”按钮，间距必须≥8px，一方面避免视觉上粘在一起，另一方面手机触控时，不会误触到另一个按钮，这就是书里强调的“提升用户绩效”（操作正确率）。
相当于房子里的通路，核心是“让用户知道自己在哪、能去哪”。电商App最典型的就是底部Tab栏（首页、分类、购物车、我的），这就是导航地图；而“点击商品主图能查看更多细节”“加入购物车后有弹窗提示”“退款后自动返回订单页”，这些就是导航策略。这里的间距细节更关键：底部Tab栏的四个矩形图标，间距要均匀，每个图标之间设20px，整个Tab栏的高度设56px，既符合手机握持习惯，又能让用户快速找到对应功能。
也就是房子的装修，核心是“让操作更舒服、更美观”。比如商品卡片的矩形边框圆角设8px，不会显得生硬；搜索框的矩形高度设44px，符合手指触控尺寸；圆形的“立即购买”按钮，直径设48px，间距商品标题12px，既突出又不突兀。这些细节看似不起眼，但能直接影响用户体验——比如圆角太小，用户看久了会觉得刺眼；间距太大，页面会显得松散，用户找功能要费更多时间。
现在AI来了，这5层模型的设计效率直接翻倍，还能避免人工踩坑。以前我们设计分层，全靠经验，比如“我觉得间距设20px合适”，很容易出错；现在AI能帮我们精准优化，还能结合用户数据调整。
比如做一款新电商App，把需求丢给AI：“要做首页、商品页、购物车、个人中心，核心功能是下单、退款、推荐”，AI会自动拆解4层模型：功能层拆分核心功能模块，架构层梳理模块连接逻辑，导航层设计Tab栏和跳转路径，细节层给出间距、圆角的具体数值——甚至能根据用户行为数据，调整间距：比如发现用户经常误触“收藏”和“加购”按钮，AI会自动把两者的间距从8px调到12px，提升操作正确率。
京东的AI导航优化就是例子，AI会分析不同用户的行为：新手用户找不到退款入口，就把“售后退款”模块的间距缩小，放在个人中心最显眼的位置；老用户熟悉操作，就把间距调大，避免占用太多空间。这样一来，不同用户都能快速找到自己需要的功能，用户留存率直接提升。
总结一下，5层递进模型，本质就是“从底层到表层，层层递进，让用户用着顺”。做电商交互设计，先把功能层拆清楚，再搭好架构层，理顺导航策略，最后抠好间距、圆角这些细节，再用AI优化调整，用户体验和用户绩效自然会提升。
别觉得分层设计是小事，很多电商App用户流失，就是因为分层混乱、细节不到位——用户找不到功能、操作总出错，自然就卸载了。跟着书里的4层模型，再结合AI优化，把每一层都做扎实，你的电商产品，用户留存率只会越来越高。
夜雨聆风
