最近在研究一些复杂的交互原型实现，虽然日常工作很少使用，但有助于产品经理分解产品。偶尔刷朋友圈的时候会向上滑动，微信标题栏(顶栏)和状态栏切换一下子吸引了我的视线，所以我想实现同样的原型效果。以下是我的想法和最终实现。

体验最终效果：

一、边界状态

状态1、状态栏显示背景透明文字白色，没有“朋友圈”三个字，返回键和摄像头图标均为白色。

状态2、背景灰色文字黑色状态、标题栏“朋友圈”三个字、灰色背景、图标黑色。

二、拆解中间交互流程

整个状态栏标题栏中的更改会在用户向上滑动时更改，因此H=定义用户向上滑动的距离。如果朋友圈刷新后没有上下滑动，则H=0。

另外，假设朋友圈专辑封面高度为300(实际上不是)

随着h的变化，顶栏和状态栏有两种情况：

0H200，状态栏背景透明字体白色，顶栏两个图标白色，不透明度均为100%；200=H250，顶部列不透明度为100%0，状态栏完全不透明。250=H300，状态栏字体黑色不透明度为100%，背景从透明逐渐灰显。顶栏背景灰色图标两个，朋友圈字体黑色，透明度从0100%逐渐可见。300=H；状态栏灰色顶栏灰色黑色；100%不透明度。需要注意的是，当H=250时，状态栏突然从白色过渡到黑色，不透明度保持在100%。

三、原型素材准备

这里使用了4种材料。模型外壳、状态栏的动态面板(高度20，背景透明)、顶栏动态面板(高度60，也用于状态栏的背景颜色控制)、拖动面板(2层动态面板嵌套上下滑动效果，包括一堆没有意义的颜色块)。

Ps:如果另外解决不理解拖曳面板的学生。

定义

四、交互用例设计

(1)全局变量h。默认值为0。

(2)加载页面时，状态栏和顶栏为白色。对应于加载设置时的两种动态面板状态。这里省略了截图。

(3)整体交互以“面板拖动时”为中心发生，因此根据第三阶段的分解，设置以下四个条件判断：0H200、200=H250、250=H300、300=H。

(4)四个条件中增加了滑动相互作用。设置h的变化。其中h=[-p.top]]，p是嵌套在拖动面板内的内容面板。

(5)添加子条件状态栏、顶栏更改交互：

0H200、顶栏、状态栏都设置为白色，不透明度设置为100%。200=H250，顶栏、状态栏设置为白色，状态栏的不透明度设置为100%0。也就是说，顶部栏的不透明度设置为[(250-h] * 2]。(PS，不透明度设置仅在Axure 8或更高版本中可见)250=H300，顶栏，状态栏设置为黑色(动态面板状态设置)，状态栏的不透明度设置为100%0。也就是说，顶栏不透明度设置为[(H-250)]，300=H，顶栏，状态栏设置为黑色，不透明度设置为100%，即使用户继续滑动，也不会发生变化。具体设置如下图所示。

拖动面板交互

这样，当朋友圈上下滑动时，状态栏和标题栏(顶栏)可以交互。

这里显示的数字和微信实际数字有差异，主要是为了分解逻辑，次要的是为了模拟效果。

最终效果经验：

想要特定原型RP文件的学生可以自己获得。

链接：

提取代码：njnz

这篇文章由@Ryan原创发表，所有人都是产品经理。未经许可禁止转载

主题图基于Unsplash、CC0协议