今天下午同事设计评审,有一个交互问题,我总是感觉很不舒服,下班路上思考了一路,吃过晚饭简单画原型的时候有了一些灵感,趁着这点灵感,赶快记录下来。

    在一个列表页,一共有 4 种筛选类别,3 个最基础的单选筛选,1 个按照名字精准搜索筛选,4 中筛选类别都是下拉浮层,姓名精准筛选需要用户输入,输入后再根据姓名列表,显示最后的筛选结果。大概交互逻辑如下图:
    Frame 27.png

    先拆开。
    什么是筛选。

    筛选:一般来说,筛选是指一种以多数物质中按预定目标就某种具有特定性质的物质进行精选的操作过程

    百度百科说,按照预定的目标进行精选操作的过程。预定的目标,按照 App 中的交互,我可以理解为用户最终想要获取的结果为最终目的而进行精选的过程。

    这里每个筛选类别内的筛选项,是否为固定筛选值?我带着这个疑问看了一下市面上主流的App,筛选类别下的筛选项都是固定值或者服务端获取。按照这个思考,前 3 个筛选项是没有问题的。

    但是第 4 个按照姓名精准筛选。这里我有很大的疑问,前面 3 个都属于是筛选的逻辑,筛选出某类结果的集合,但是第 4 个是姓名精准搜索的结果。那么前 3 种和第 4 种是否为一种维度上的筛选?一个为一种集合,一个为具体的结果。

    这里假设 4 种筛选是一个维度,但是姓名搜索的交互是否合适?在当前下拉浮层内,有两步交互,先输入姓名,然后点击姓名搜索结果才给出最后的筛选结果。单纯的从这两步交互操作看,能否更简化一点?

    我带着以上的疑问,开始回顾这个需求。
    筛选的最终目的:为了快速找到预定的目标。这个最终的目的就是为了快速招到对应筛选条件内容。有了这个最终的目的,我们去思考卡片的内容。当前卡片只有两部分内容:1、图片;2、标题。
    1、图片:假设我们服务端比较给力,每张图片内容都有 tag,按照关键词检索对应的 tag 快速筛选。
    2、标题:更为直接的关键词。

    筛选项有一个很关键的姓名精准搜索,但是每个内容部分没有能体现姓名的地方,我这里是否能把姓名直接透出到卡片内,为了避免姓名重复情况,把头像和姓名一起透出到卡片上。
    回过头来看,4 种筛选模式不在一个维度上,很显然前 3 个筛选类别是一个维度,姓名搜索又是一个维度。这里我把两个维度拆开,按照两种不同的方向维度筛选。
    Frame 28.png
    首先是按照某个筛选类别的集合筛选。这是满足集合类别筛选,可以快速按照特定的筛选值过滤出最终的目标结果。
    如果用户用精准搜索的结果,例如姓名,那么用户可以直接点击搜索icon,然后调起搜索模块,在搜索页进行关键词搜索。这里的搜索不仅仅是搜索姓名,可以搜索标题、内容tag等等。
    这里假设最终精准的搜索结果很少,那么只需要按照一定的算法顺序直接排列即可。但是当 sku 内容很多的时候,在搜索结果页还是很难找到想要的目标,那么就可以在搜索结果页再次漏出 3 种筛选类别。基于搜索的结果再次进行 3 种类别搜索,最终的结果更加精准。
    Frame 29.png

    以上这是我对这个需求的简单思考,待梳理整理。