中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文主要是關于QQ官網頁面的一個滾動交互設計，希望能分享給大家交互的設計思路。

昨天同事跑來問我，官網的設計有什么想法沒有，找了幾種風格的官網給他看，結果一眼就看中了QQ的官網樣式，我重新分析了一下我司產品同屬工具類，官網同樣不需要太多的展示內容和功能，所以準備做一個交互樣式相似的仿真給老板看，同時也分享給大家交互的設計思路。

為了避免泄露我司產品，本來想使用線框圖展示，結果因為效果太差只好換成了本人自己拍攝的照片供大家欣賞了。

QQ官網樣式展示

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

再看一下原型樣式：

體驗地址：https://ur6hf9.axshare.com/index.html

此處需要說明仍然有一個BUG就是如果滾動條拖動的太快，軟件在觸發區間沒有做出反應時就會出現圖片加載不一致的情況，各位體驗的小伙伴可以慢點拖拽（看完下面的觸發講解后就可以理解了，如果各位有什么好的方法歡迎與我交流）

原型設計分享：

一、元件準備

此效果設計到四個元件：

1. 內容頁；
2. 背景圖片上；
3. 背景圖片下；
4. 拖動條。

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. 拖動條

首先在滾動條上添加用例拖動時：

1. 先移動“拖動條”為“垂直拖動”，設置邊界為0至600范圍內；
2. 然后設置移動內容頁內的“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的切換即可。

然后運行一下程序就可以出來我們想要的效果了。

本文由 @?JYC 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自網絡