昨天同事跑来问我，官网的设计有什么想法没有，找了几种风格的官网给他看，结果一眼就看中了QQ的官网样式，我重新分析了一下我司产品同属工具类，官网同样不需要太多的展示内容和功能，所以准备做一个交互样式相似的仿真给老板看，同时也分享给大家交互的设计思路。

为了避免泄露我司产品，本来想使用线框图展示，结果因为效果太差只好换成了本人自己拍摄的照片供大家欣赏了。

QQ官网样式展示

官网地址：https://im.qq.com/index.shtml

再看一下原型样式：

体验地址：https://ur6hf9.axshare.com/index.html

此处需要说明仍然有一个BUG就是如果滚动条拖动的太快，软件在触发区间没有做出反应时就会出现图片加载不一致的情况，各位体验的小伙伴可以慢点拖拽（看完下面的触发讲解后就可以理解了，如果各位有什么好的方法欢迎与我交流）

原型设计分享：

一、元件准备

此效果设计到四个元件：

• 内容页；

• 背景图片上；

• 背景图片下；

• 拖动条。

1. 内容页

内容页动态面板长度设为1200，高度设为600。

然后在里面自上而下建立四个长方形，分别填写内容，命名1、2、3、4。其中 1 号、 4 号长度设为1200，高度设为600。 2 号、 3 号长度设为1200，高度设为350。然后中间间隔距离为 300 一次排开，设为一组。

2. 背景图片上/下

背景图片页动态面板长度设为1200，高度设为300，各添加 3 个切换页面。按照上下位置紧贴着对其排列，同时在界面中分别放入三张长1200、高度 600 的图片。

3. 拖动条

拖动条画成常规格式即可。

长度根据需要计算，本仿真滚动条移动范围为 0 至600，内容页移动范围为- 2200 至2800，所以我将其高度设为160，使内容页的移动距离等于 5 倍的滚动条移动距离（后续公式中要使用）。

二、交互动作

完成元件的建立后，将内容页完整的盖到背景图片上/下，将滚动条上端对其放置在内容页右侧及可以开始设计交互动作。

1. 拖动条

首先在滚动条上添加用例拖动时：

• 先移动“拖动条”为“垂直拖动”，设置边界为 0 至 600 范围内；

• 然后设置移动内容页内的“1、2、3、 4 的组”为“相对位置”，x=0，y=[[(-DragY)*5]]（前面算过内容页移动距离是拖动条移动距离的 5 倍，拖动条向下移动时，内容页向上移动，所以为(-DragY)*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 的切换。

背景图片上的坐标为（0,0），背景图片下的坐标为（0,300），所以内容页坐标在 250 至 300 时完全覆盖背景图片下，将内容页坐标y等于 250 至 275 时背景图片下转换为图片2，坐标y等于 275 至 300 时背景图片下转换为图片1。

同理内容页完全覆盖背景图片上的范围为- 50 至0，内容页坐标y等于- 25 至- 50 时背景图片下转换为图片2，坐标y等于- 25 至 0 时背景图片下转换为图片1。

内容页 2 设置好后，内容页 3 同样的坐标范围只是调整为图片 2 与图片 3 的切换即可。

软件开发,网站建设,微信开发,小程序开发,APP开发,商城系统开发,直播系统开发,产品推广,短视频推广,就找易祺互联！
易祺互联为您提供：商城系统,智慧物业管理系统,“好差评”系统,食品溯源系统,智慧点巡检系统,农村电商系统,智慧河道水位监控系统,智慧环境监测系统,机房动力环境监控系统,ERP系统,智能建站系统,商城系统,直播系统,各种软件/网站定制开发,网站托管等一站式运营解决方案。
易祺互联 ＠ 河南蓝燕网络科技有限公司旗下运营品牌
统一社会信用代码：914101055710161107
软件设计部运营中心：河南省郑州市金水区芯互联大厦南座11层
智慧物联网运营中心：河南省郑州市金水区花园路1号河南省人民会堂
新产品培育运营中心：河南省郑州市金水区黄河路25号经津大厦10楼
北京市（华北区）运营中心：北京市海淀区双清路33号清华大学学研大厦B座10层
广州市（华南区）运营中心：广东省广州市黄埔区科汇四街11号
杭州市（华东区）运营中心：杭州市拱墅区祥园路杭州国际人才创新创业中心A座10层
重庆市（西南区）运营中心：重庆市江津区双福新区联东U谷12栋
业务咨询：0371-60934100 手机：18737894979 国内热线：400-8778-670
技术服务：15516975329 投诉热线：185-38935-211