昨天同事跑來問我，鄭州網站建設有什么想法沒有，找了幾種風格的官網給他看，結果一眼就看中了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 的切換即可。
然后運行一下程序就可以出來我們想要的效果了。
QQ客服