本文主要是讲一个QQ官网页面的滚动交互设计，希望能和大家分享一下交互的设计思路。
昨天，我的同事问我对官网的设计有什么想法。我找了几款官网的款式给他看。结果我一眼就看中了QQ的官网风格。我重新分析了一下，我们的产品属于工具类，官网也不需要太多的展示内容和功能，所以我准备做一个交互风格类似的模拟给我老板看看，把交互的设计思路分享给大家。
为了避免暴露我们的产品，我原本想用线框展示。结果因为效果太差，只好换成自己的照片让大家欣赏。
QQ风格秀
再看原型风格:
这里需要说明的是，还有一个BUG，就是滚动条拖动过快，在触发区间软件没有响应的时候，会出现图片加载不一致的情况，可以慢慢拖动。
原型设计分享:
一.部件的准备
这个效果被设计成四个组件:
内容页；在背景图片上；背景下；拖动该条。
1.内容页面
页面动态面板的长度设置为1200，高度设置为600。
然后在里面自上而下创建四个矩形，分别填入内容，命名为1、2、3、4。一号四号长1200，高600。2号和3号设置为长度1200，高度350。然后，它们之间的间隔距离为300，它们被设置为一组。
2.背景图片向上/向下
背景页面的动态面板长度设置为1200，高度设置为300，分别增加了三个切换页面。按照上下位置紧密排列，在界面放三张长1200高600的图片。
3.拖动该条
将条形拖成常规格式。
根据长度计算，这个模拟中滚动条的移动范围是0到600，内容页的移动范围是-2200到2800，所以我将其高度设置为160，这样内容页的移动距离等于滚动条的5倍。
第二，互动行动
组件创建完成后，将内容页面完全覆盖在背景图片的顶部/底部，将滚动条的顶部放置在内容页面的右侧，开始设计交互动作。
1.拖动该条
当你第一次在滚动条上添加一个用例时:
首先将“拖动条”移动到“垂直拖动”，在0到600的范围内设置边界；然后将移动内容页面中的“1，2，3，4的组”设置为“相对位置”，x=0，y =[* 5]]，边界设置在-2200到2800的范围内。
2.内容页面
因为我们想要达到的效果是，当内容页1和2的间隙过去，我们看到的是背景图片1；当内容页面2和3之间的间隙经过时，背景图片2被看到，并且当内容页面3和4之间的间隙经过时，背景图片3被看到。
同时，我们将2和3的高度设置为350，上下背景图片页面的高度设置为300，这样当内容页面移动时，2和3可以完全覆盖上下背景图片页面。我们会在背景页面被完全覆盖的时候进行切换，从而达到想要的效果。
当我们用内容页2覆盖背景图片页时，我们在图片1和图片2之间切换，当内容页3覆盖背景图片页时，我们在图片2和图片3之间切换。
背景图片上的坐标为，背景图片下的坐标为，所以当内容页面坐标从250到300完全覆盖背景图片时，当内容页面坐标y等于250到275时，背景图片下变频为图片2，当坐标y等于275到300时，背景图片下变频为图片1。
同样，当内容页面完全覆盖背景图像时，范围是-50到0。当内容页面坐标y等于-25到-50时，背景图像被转换成图像2，当坐标y等于-25到0时，背景图像被转换成图像1。
设置第二页后，内容第三页同样的坐标范围只能调整到第二图和第三图之间切换。
然后运行程序得到想要的效果。
本文由@ JYC原创发布。每个人都是产品经理。未经许可，禁止复制。
图片来自网络
