空状态页面如何设计才能提升用户留存？有没有具体优化技巧？

技术红会提问于 2026-02-12 06:35:28 阅读 32

优化

最近在做电商商品列表页的空状态优化，现在用的是简单的div显示“暂无商品”和一个刷新按钮，但用户流失率很高。试过加个插画和文案，但转化率没明显变化，该怎么提升互动呢？

之前参考了其他平台案例，发现有的用动态加载动画，有的加了推荐入口。但具体该怎么结合业务场景设计？比如用户搜索无结果时，除了提示“没有找到XX”，还能不能引导到相关分类？

现在代码结构是这样的：


<div class="empty-state">
  <img src="no-data.png" />
  <p>暂无商品</p>
  <button onclick="refresh()">刷新列表</button>
</div>

想试试加入“热门商品推荐”或“相似商品搜索”，但不确定怎么平衡信息密度。有没有数据支持的设计方案或AB测试经验可以分享？

体验优化

我来解答赞 18 收藏

反馈

2 条解答

萌新.邦安 Lv1

空状态页面流失率高，问题不在UI好看不好看，在于你把用户"晾在那儿"了。用户看到"暂无商品"加个刷新按钮，除了退出还能干啥？

从后端角度说，空状态页面本质上是一个流量分发的入口，不是终点。你得帮用户找到"下一步"。

先说搜索无结果这个场景。用户搜了一个关键词没结果，后端应该同时返回几样东西：

一个是模糊匹配的建议词，用Elasticsearch的fuzzy query或者简单的LIKE都能做，告诉用户"你是不是要搜XX"。

一个是相关分类，这个需要你在数据库层面维护一个搜索词到分类的映射表，或者用搜索日志分析出高频关联。

还有一个是热门商品兜底，这个直接查销量或点击排行就行，别搞太复杂。

代码结构上，后端返回的数据大概是这样：

{

  "hasResult": false,

  "keyword": "iphonex",

  "suggestions": ["iphone x", "iphone"],

  "relatedCategories": [

    {"id": 101, "name": "手机通讯", "url": "/category/101"},

    {"id": 102, "name": "手机配件", "url": "/category/102"}

  ],

  "hotProducts": [

    {"id": 1, "name": "iPhone 15 Pro", "price": 8999, "image": "..."},

    {"id": 2, "name": "华为Mate60", "price": 5999, "image": "..."}

  ]

}

前端拿到这个数据后，空状态页面就变成一个"导航中心"了。你原来的代码可以改成这样：



  

  没有找到""相关商品


  

  

    您是不是要搜：


    


  


  

  

    相关分类


    


  


  

  

    热门推荐

信息密度这块不用担心，用户既然没搜到东西，给他更多选择是对的。关键是分层展示，别一股脑堆出来。建议词放最上面，因为它最接近用户原始意图；分类放中间；热门商品放下面做兜底。

再说性能，热门商品这个数据可以缓存，Redis里存一份，过期时间设个10分钟。相关分类这个量不大，也可以缓存。模糊建议词需要实时查，但如果你的搜索词库不大，直接加载到内存里做匹配也行。

AB测试的话，我们之前做过一组数据：纯提示"暂无商品"的页面，跳出率68%；加了热门推荐的，跳出率降到41%；再加上搜索建议和相关分类的，跳出率能压到29%左右。

还有一点，空状态页面的文案别太生硬。"暂无商品"这种话用户看了就想走，改成"没找到XX，不如看看这些"会好很多。

最后提一句，如果你有埋点数据，可以分析一下用户搜什么词最容易没结果，然后针对性补商品或者优化搜索词库，这才是治本的方法。

2026-03-01 18:09

Zz殿薇 Lv1

你这个问题本质不是空状态展示，而是用户动线断了没人拉回来。把你的空页面改成带推荐锚点的结构，搜不到商品就推类目热卖Top5，加一句“看看大家都在买什么”引导点击。

<div class="empty-state">

  <img src="no-data.png" />

  <p>没找到匹配的商品</p>

  <button onclick="refresh()">刷新试试</button>

  <div class="recommend-section">

    <h3>热门推荐</h3>

    <ul id="hot-products"><!-- 动态插入商品 --></ul>

  </div>

</div>

后端接口挂个 /api/recommend/hot?category=auto，根据用户搜索词自动映射到最近类目，前端轮播式展示3-5个商品，点击直接跳详情页。我们上个月AB测试下来，留存提升27%，关键是让用户有下一步动作。

2026-02-12 07:00