前言

本文主要描述是手机端的搜索列表交互，通过分析目前主要移动端产品的搜索列表完成产品的交互定义。

基本分析

搜索列表也是一次微交互

微交互的结构是 ： 触发器 + 规则 + 反馈 + 循环与模式

按照这个结构划分，搜索列表的微交互模式是这样的

关于加载更多的交互

在搜索列表加载第二页时，其实可以不用每次加载相应页数时再去根据返回结果执行判断，

从优化的角度分析，直接根据第一次列表时返回的总页数，与当前已经加载的页数进行判断，即可取消无用的加载下一页，直接从交互部分取消掉了加载下一页，也就是lastPage 的判断。

另外，如果是最后一页，还要在文案上增加提示，‘没有更多了’的产品提示。

备注:加载第二页的数据很可能会出现，第二页的数据与第一页的部分存在重复的情况，这种情况是不可完全避免的，这是因为在操作的过程中可能数据发生了变化，导致原来第一页的数据在数据库查询时变为了第二页的数据。

主流产品的搜索交互

京东商品列表 && 网易云音乐的商品列表 && 知乎的问题列表 && 淘宝的商品列表 && 微信搜一搜列表 && 支付宝的入口搜索 && qq音乐的检索列表

记录要点:
1 搜索提供单独的搜索页面
2 提供关键字关联列表，输入之后，点击搜索执行惰性搜索或者选择提供的关键字执行搜索
3 每次关键字改变，会展示关键字的联想列表覆盖数据列表
4 点击搜索，清空数据，执行顶部的loading动画，然后渲染返回结果；如果没有结果，没有交互提示，页面展示无数据的ui
5 点击取消，回到商品列表页，退出搜索的模式

微信搜一搜列表

区别点：

1 关键字确定搜索之后，
2 先把关联部分取消，展示原来的搜索结果，
3 执行搜索，覆盖数据
4 当编辑关键字时，不能取消退出搜索，只能清空关键字；当执行搜索之后，可以取消退出搜索模式
5 如果在进行多次检索之后，点击返回，执行的是返回上一个关键字的显示，并执行其23步骤。当发现没有关键字时，返回默认的搜索入口页。

微信读书的检索列表

区别点：
1 关键字实时搜索，有做防抖工作，阶段时间内不再改变文字才去发起请求
2 关键字变化之后，页面没有任何交互
3 接口数据返回之后，进行页面数据的改变
4 没有取消，通过返回直接退出搜索模式

美团主页搜索

区别点：
1 搜索分为两层，第一层，进入的为关键字编辑模式，没有进行过任何的搜索，此时的取消为退出搜索
1 第二层，已经搜索过，此时的标志位有返回按钮，取消不是退出搜索模式，而是退出关键字修改，保留到上一次关键字的界面；此时，只有通过返回才能回到第一层搜索，返回时记录的是最近一次的搜索执行过的记录（因为只改关键字，不执行，退出，不会执行搜索）

美团分类搜索

区别点：
1 提供右侧的搜索惰性按钮
2 关键字改变，原数据列表不清空，数据得到之后渲染
3 通过返回退出搜索交互
4 改变关键字会把手动设置的条件清空（提供筛选功能列表的）（京东以及淘宝也会有如此交互设置，而微医是保留了过滤项和排序规则）。

小结

1 惰性搜索占据大部分，一方面减少用户迷惑；一方面可以让搜索执行的规则更清晰 。
2 搜索的交互可做客不做，从友好性角度必须要做
3 绝大部分应用针对关键字变化都采取了覆盖原数据，或者说就是清空
4 如果要做实时搜索，或者为了避免用户多次搜索带来的问题，要加交互的防抖和请求的防抖
5 要定义搜索模式，以及什么情况下会进入，什么情况下退出
6 大多数搜索没有做搜索内容的辨别，即使是同样的关键字，也允许搜索
7 对于关键字的改变是否要引起过滤项或者排序顺序的改变，看产品定义