昨天同事跑来问我，官网的设计有什么想法没有，找了几种风格的官网给他看，结果一眼就看中了QQ的官网样式，我重新分析了一下我司产品同属工具类，官网同样不需要太多的展示内容和功能，所以准备做一个交互样式相似的仿真给老板看，同时也分享给大家交互的设计思。
为了避免泄露我司产品，本来想使用线框图展示，结果因为效果太差只好换成了本人自己拍摄的照片供大家欣赏了。
此处需要说明仍然有一个BUG就是如果滚动条拖动的太快，软件在触发区间没有做出反应时就会出现图片加载不一致的情况，各位体验的小伙伴可以慢点拖拽（看完下面的触发后就可以理解了，如果各位有什么好的方法欢迎与我交流）
然后在里面自上而下建立四个长方形，分别填写内容，命名1、2、3、4。其中1号、4号长度设为1200，高度设为600。2号、3号长度设为1200，高度设为350。然后中间间隔距离为300一次排开，设为一组。
背景图片页动态面板长度设为1200，高度设为300，各添加3个切换页面。按照上下紧贴着对其排列，同时在界面中分别放入三张长1200、高度600的图片。
完成元件的建立后，将内容页完整的盖到背景图片上/下，将滚动条上端对其放置在内容页右侧及可以开始设计交互动作。
因为我们要实现的效果是，当内容页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。
QQ使用这种样式并没有问题，因为无需介绍我也会因为刚需下载，一个老牌公司依然在思考创新也值得赞扬。
通过一个网站的形式展现公司实力这个操作优点难吧，反正看了几家实力强劲的大公司官网展示形式通常以简洁为主不会有什么难度，简单对比一下“微信官网”和“QQ官网”一家公司出的两款强需求软件，官网风格也是大不同的，估计这两款产品官网怎么做都不会对他们家产品产生多大影响。这个只是给大家一个设计思，具体怎么应用和交互细节肯定还是根据自家产品的定位来定了。
个人非常不认同这种设计，让人眼花缭乱，背景比较干净还好。往下滑的时候，图片内容在变，主体内容在变，色彩也在变。完全找不到重点，也接收不了这么多信息。让人头晕！！！
如果只有一款很明确的产品，而且没有特别多要展示的内容的时候，这样放置三个你产品的使用场景把客户带入一下，效果还是可以的。整个网站就只有一个重点的时候就不会乱了，也没有多么多的信息需要用户去接收的。关键还是使用场景的问题
还是拿QQ的官网举例好了，他们要展示的就是QQ可以1、随时随地与人沟通；2、远程传递文件；3、分享内容到朋友圈；只有一个重点，三个使用场景带入一下用户。完全不会给用户造成理解的负担，也不会找不到重点的。
人人都是产品经理（是以产品经理、运营为核心的学习、交流、分享平台，集、培训、招聘、社群为一体，全方位服务产品人和运营人，成立8年举办在线+期，线+场，产品经理大会、运营大会20+场，覆盖北上广深杭成都等15个城市，在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监，他们在这里分享知识、招聘人才，与你一起成长。华晨宇爸爸华福雄