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

01c36659ca40b3a801218e189065fb.gif

首页分类交互工作记录

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

01530459ca42caa8012053f85cc07c.gif

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

01f3fd59ca3eb5a8012053f82a3765.gif

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

01c62959ca417ea8012053f8d3e4ba.gif

最后在组长的帮助下完成了这个方案。分类栏切换有小动画，图标由小变大出现，选中的下划线慢慢放大成色块，搜索框渐变为标题，完美！&lt;br&gt;这稿给boss和产品看，没问题！需求都达到了，UI方面设计也都没意见！好的，坐好等工资。。。。。。。。。事情哪有这么简单。。。。开发过来看了一眼：”这个效果要做一周都不一定做得完啊，咱下个版本要做双十一啊，首页太多东西要改了（电商产品的痛），你这个分类切换动作去掉吧，开发周期不够了。“。。。。产品：“好”。。。。。最后又做了个简化的方案，省了很多开发时间，浪费了很多我的时间

018caa59ca476ca8012053f8acbf48.gif

最终版（改）（再改）（最后一次改）（大概吧）

01b04959ca4b38a8012053f833c955.gif

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

01ff9859ca3deba8012053f8fb51d9.gif

019c495d43b085a80120695c862de2.jpg

APP界面设计

01c3435b30b302a80120b959d5ec73.jpg

葫芦省钱APP

01b9815dc6749ca801209e1f971326.png

平常心。

0197485a57547aa8012113c7bc5911.jpg

二八购物

0173655757fd0c0000012e7ef0174d.PNG

APP某系统

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

012cea59ca30a0a801218e18449211.gif

01f03359e85757a801202b0cf4967e.jpg

买卖吧二手交易平台

01ddb75be8e873a80120925273cd5f.jpg

喜购APP改版

0127d65c92024da801208f8b768f19.jpg

云·闪购app

0112ff5de0c61ba80121597253f771.jpg

聚美购物

0105e25a925cf5a8012192313a62e3.jpg

APP界面

01c2da56e000b032f875520fd9484a.png

0184fe5de8de43a801213853a36786.png

导购app

018ac25e56138fa80120a8959ec36a.png

01dfbb5c52d7d6a801213f26b6b8d2.jpg

A DOG 淘宝换肤

0127c459faf82ba801202b0c30876e.jpg

原创app

017b545bd80b6da801213dea42e1ad.png

聚美优品

010b7c57cfba760000012e7e11b3da.PNG

01a27458ed964fa8012049ef2790e6.jpg

商城app

0185bb5bb857e7a8012099c84ae05a.jpg

01b8925d12d867a801215529224b28.png

淘卷吧

01a72a5cf751b2a801205e4b6b96e8.jpg

0135685ade9696a801214a61386a2d.jpg

优选网APP