首页分类交互工作记录

用户头像
厦门/学生/8年前/203浏览
首页分类交互工作记录
用户头像
rextao
和上篇一样是一个工作记录。图片有GIF录屏也有Ps导出的GIF。
前提:我们APP的首页有个分类,之前一直是在顶部搜索框下方固定的,现在产品提出一个需求(一开始接到的需求):“分类栏放在信息流的顶部随信息流上滑而上滑,上滑接触搜索框时分类栏由文字变成ico+文字的形式”。这个需求很简单,我表示过一会儿就给你看demo,万万没想到这是个深坑!
一开始我是想用AE的,但是考虑的只是个简单的动作并且要便于演示的情况,我掏出了许久不用的Axure准备做高保真原型。
首页分类交互工作记录(图ZOTI2NjU1NTY=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
切完素材以后很快就出了这个方案。黑色的分类栏是线上9块9页面的分类栏,为了省事我直接拉过来用了。其他的素材也都是随便切的(可以看到底部的tabbar都被我截出去了一段)。不过这样的交互动作是真的很丑,于是开始考虑其他方案。
收藏
首页分类交互工作记录(图ZOTI2Njk0MjQ=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
这个方案我换了一个分类页面用的白色分类栏来做。比起第一个方案,白色的会比黑色的视觉上舒服很多,而且渐变的动作比起弹出的动作也会显得自然友好一些。
收藏
首页分类交互工作记录(图ZOTI2Njk1NjA=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
在前一个基础上修改成了这个效果,把搜索框和分类整合在了一起,这样视觉不容易被搜索框诱导。对这个方案我已经挺满意的了,于是提交给了产品和boss一起审核,然后噩梦来了。boss觉得这个页面下拉以后搜索框就没那么重要了,用户点击分类右边的分类图标时可以跳转到商品分类的页面,再在这个页面上完成搜索动作。 从这个时候我开始对搜索框下功夫,搜索框隐藏的方案做了很久,这里放出有代表性的几个。
收藏
首页分类交互工作记录(图ZOTI2NzA0NDQ=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
搜索框隐藏的第一个方案。 从这个以后都可以看到分类栏在切换之后右边的分类ico也会变成一个分类+搜索的ico。这个方案很简单,只是在之前的动作之前加上一个搜索框收上去的动作。
收藏
首页分类交互工作记录(图ZOTI2NzA2ODQ=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
我在竞品的时候发现有部分APP有一个上滑自动吸附的动作,这个动作可以让我的分类栏瞬间完成转场,辅助用户做完上滑的动作,免去用户在浏览信息处于两个分类栏没切换完成时的尴尬。但是我做出这个方案以后总觉得很鬼畜,而且会被新的分类栏遮盖掉一部分商品信息。。。
收藏
首页分类交互工作记录(图ZOTI2NzExNjg=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
和之前分类栏置顶的想法类似,把搜索框的收缩动作变为渐变消失的动作。 这些做完之后又接到了新的需求。。。 产品希望带ico的分类栏可以是黑底的方案,因为黑底的数据上会比白的效果好(好吧,赚钱要紧)。然后导航栏不需要消失,在分类栏置顶之后搜索框切换为“今日促销”的标题。最后分类栏切换的时候不要太生硬,需要个动画来切换,告知用户分类栏的变化。 从这里开始我就不用Axure了。首先是因为有动画的原因,Ae用起来会比较顺手一些,其次是Axure的交互逻辑真的不友好,用多了我怕秃头(我秃了,还不一定会变强)。
收藏
首页分类交互工作记录(图ZOTI2NzI0MTY=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
最后在组长的帮助下完成了这个方案。分类栏切换有小动画,图标由小变大出现,选中的下划线慢慢放大成色块,搜索框渐变为标题,完美! 这稿给boss和产品看,没问题!需求都达到了,UI方面设计也都没意见!好的,坐好等工资。。。。。。。。。事情哪有这么简单。。。。开发过来看了一眼:”这个效果要做一周都不一定做得完啊,咱下个版本要做双十一啊,首页太多东西要改了(电商产品的痛),你这个分类切换动作去掉吧,开发周期不够了。“。。。。产品:“好”。。。。。最后又做了个简化的方案,省了很多开发时间,浪费了很多我的时间
收藏
首页分类交互工作记录(图ZOTI2NzI5NzY=) - 交互/UE - 站酷设计师rextao原创素材 - 站酷ZCOOL
最终版(改)(再改)(最后一次改)(大概吧)
收藏
6
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册