首页分类交互工作记录

切完素材以后很快就出了这个方案。黑色的分类栏是线上9块9页面的分类栏，为了省事我直接拉过来用了。其他的素材也都是随便切的（可以看到底部的tabbar都被我截出去了一段）。不过这样的交互动作是真的很丑，于是开始考虑其他方案。

这个方案我换了一个分类页面用的白色分类栏来做。比起第一个方案，白色的会比黑色的视觉上舒服很多，而且渐变的动作比起弹出的动作也会显得自然友好一些。

在前一个基础上修改成了这个效果，把搜索框和分类整合在了一起，这样视觉不容易被搜索框诱导。对这个方案我已经挺满意的了，于是提交给了产品和boss一起审核，然后噩梦来了。boss觉得这个页面下拉以后搜索框就没那么重要了，用户点击分类右边的分类图标时可以跳转到商品分类的页面，再在这个页面上完成搜索动作。 从这个时候我开始对搜索框下功夫，搜索框隐藏的方案做了很久，这里放出有代表性的几个。

搜索框隐藏的第一个方案。 从这个以后都可以看到分类栏在切换之后右边的分类ico也会变成一个分类+搜索的ico。这个方案很简单，只是在之前的动作之前加上一个搜索框收上去的动作。

我在竞品的时候发现有部分APP有一个上滑自动吸附的动作，这个动作可以让我的分类栏瞬间完成转场，辅助用户做完上滑的动作，免去用户在浏览信息处于两个分类栏没切换完成时的尴尬。但是我做出这个方案以后总觉得很鬼畜，而且会被新的分类栏遮盖掉一部分商品信息。。。

和之前分类栏置顶的想法类似，把搜索框的收缩动作变为渐变消失的动作。 这些做完之后又接到了新的需求。。。 产品希望带ico的分类栏可以是黑底的方案，因为黑底的数据上会比白的效果好（好吧，赚钱要紧）。然后导航栏不需要消失，在分类栏置顶之后搜索框切换为“今日促销”的标题。最后分类栏切换的时候不要太生硬，需要个动画来切换，告知用户分类栏的变化。 从这里开始我就不用Axure了。首先是因为有动画的原因，Ae用起来会比较顺手一些，其次是Axure的交互逻辑真的不友好，用多了我怕秃头（我秃了，还不一定会变强）。