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

01ff9859ca3deba8012053f8fb51d9.gif

首页分类交互工作记录

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

012cea59ca30a0a801218e18449211.gif

014e045bd17da9a8012099c898579c.jpg

018ac25e56138fa80120a8959ec36a.png

0173995d25b616a8012148374e730d.png

淘客app修改版

01f03359e85757a801202b0cf4967e.jpg

买卖吧二手交易平台

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

01530459ca42caa8012053f85cc07c.gif

01b9815dc6749ca801209e1f971326.png

平常心。

0137525f23a212a801215aa0b6aedd.jpg

移动端UI-1

019fff5d12d867a801215529ded767.png

淘卷吧

015c7e5d2439a7a801207640a70d1a.jpg

66f54e216ab87vgbmxsnuv6270.png

ui界面设计

0118e15c7144b0a801213f269ce342.jpg

窝折优惠券 小程序界面

0128855bc9247aa801213dea61cbb3.jpg

APP首页

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

018caa59ca476ca8012053f8acbf48.gif

0197485a57547aa8012113c7bc5911.jpg

二八购物

01b70559723208a8012193a3ed8a5c.jpg

01ae0a5c667b23a801213f265e93a3.png

IOS端app 设计稿

0121d35c89ffeda801208f8bbf1a9b.jpg

甜豆APP

01e44e58a1c15ba8012060c849a802.png

APP界面

016fa9594f4282a8012193a38de749.jpg

优品购APP设计

014abc5bd80b6fa801213dea30299e.png

聚美优品

01bb165bd28a22a8012099c87f2eca.jpg

APP 动画展示

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

01b04959ca4b38a8012053f833c955.gif

01618a5f8eae4611013f31100e8a1d.png

至乐金融APP

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

01c36659ca40b3a801218e189065fb.gif

奥莱购APP端首页即时活动周年庆

01024856df9c1832f875520f3832d5.png

01bf425ad74200a801213867908a6c.jpg

作品视频集

01448c5bd80b71a801213dea291ec3.png

01b2a35af847b6a801207ab44d7e66.jpg

APP-优惠券