提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
在做交互设计时,有时为了做顶部导航背景随着屏幕滑动来判断是否隐藏,这个教程会详细告诉你如何去设计。个人总结,如果有用,别忘点赞哦,还有源文件奉上!
选择尺寸为苹果6尺寸:750x1334,这里对尺寸做除2后是375x667,Axure版本是8.0及以上,接下来是操作步奏。
第一步:
新建375x667的操作面板起名为pannel01,位置(0,0),在面板外的顶部随便新建文字,这里选择标题1,并置顶,位置放在顶部即可。
第二部:
在面板pannel01的状态1中新建三个面板,分别命名为:参考、top、pannel02,尺寸和位置分别为375x20、(0,-20)这一个位置是关键;375x44、(0,0);375x1000、(0,0)。三个面板中分别随意添加一些元件,其中top面板我放了一个375x44的白色矩形,起名为top-bj,并点击隐藏该元件。接下来的步奏就是为了隐藏或显示top-bj。参考面板放了一个热区,pannel放了灰色背景加一张底部图片。
第三部:
这一步要做一个拖动划屏的效果: 对pannel01添加拖动面板时用例,设置沿y轴移动的动作,对pannel02进行移动并添加上下边界,上边界小于等于0,下边界大于等于667,
第四部:
选择面板pannel02,添加移动用例隐藏top-bj,并设置隐藏条件为元件范围未接触参考;继续添加用例2显示top-bj
所有步奏到此结束,效果录制了GIF图,如下:
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册