昨天同事跑來(lái)問(wèn)我，鄭州網(wǎng)站建設(shè)有什么想法沒(méi)有，找了幾種風(fēng)格的官網(wǎng)給他看，結(jié)果一眼就看中了QQ的官網(wǎng)樣式，我重新分析了一下我司產(chǎn)品同屬工具類，官網(wǎng)同樣不需要太多的展示內(nèi)容和功能，所以準(zhǔn)備做一個(gè)交互樣式相似的仿真給老板看，同時(shí)也分享給大家交互的設(shè)計(jì)思路。
為了避免泄露我司產(chǎn)品，本來(lái)想使用線框圖展示，結(jié)果因?yàn)樾Ч钪缓脫Q成了本人自己拍攝的照片供大家欣賞了。
官網(wǎng)地址：https://im.qq.com/index.shtml
再看一下原型樣式：
體驗(yàn)地址：https://ur6hf9.axshare.com/index.html
此處需要說(shuō)明仍然有一個(gè)BUG就是如果滾動(dòng)條拖動(dòng)的太快，軟件在觸發(fā)區(qū)間沒(méi)有做出反應(yīng)時(shí)就會(huì)出現(xiàn)圖片加載不一致的情況，各位體驗(yàn)的小伙伴可以慢點(diǎn)拖拽（看完下面的觸發(fā)講解后就可以理解了，如果各位有什么好的方法歡迎與我交流）
原型設(shè)計(jì)分享：
此效果設(shè)計(jì)到四個(gè)元件：
內(nèi)容頁(yè)；
背景圖片上；
背景圖片下；
拖動(dòng)條。
1. 內(nèi)容頁(yè)
內(nèi)容頁(yè)動(dòng)態(tài)面板長(zhǎng)度設(shè)為1200，高度設(shè)為600。
然后在里面自上而下建立四個(gè)長(zhǎng)方形，分別填寫內(nèi)容，命名1、2、3、4。其中 1 號(hào)、 4 號(hào)長(zhǎng)度設(shè)為1200，高度設(shè)為600。 2 號(hào)、 3 號(hào)長(zhǎng)度設(shè)為1200，高度設(shè)為350。然后中間間隔距離為 300 一次排開(kāi)，設(shè)為一組。
2. 背景圖片上/下
背景圖片頁(yè)動(dòng)態(tài)面板長(zhǎng)度設(shè)為1200，高度設(shè)為300，各添加 3 個(gè)切換頁(yè)面。按照上下位置緊貼著對(duì)其排列，同時(shí)在界面中分別放入三張長(zhǎng)1200、高度 600 的圖片。
3. 拖動(dòng)條
拖動(dòng)條畫成常規(guī)格式即可。
長(zhǎng)度根據(jù)需要計(jì)算，本仿真滾動(dòng)條移動(dòng)范圍為 0 至600，內(nèi)容頁(yè)移動(dòng)范圍為- 2200 至2800，所以我將其高度設(shè)為160，使內(nèi)容頁(yè)的移動(dòng)距離等于 5 倍的滾動(dòng)條移動(dòng)距離（后續(xù)公式中要使用）。
完成元件的建立后，將內(nèi)容頁(yè)完整的蓋到背景圖片上/下，將滾動(dòng)條上端對(duì)其放置在內(nèi)容頁(yè)右側(cè)及可以開(kāi)始設(shè)計(jì)交互動(dòng)作。
1. 拖動(dòng)條
首先在滾動(dòng)條上添加用例拖動(dòng)時(shí)：
先移動(dòng)“拖動(dòng)條”為“垂直拖動(dòng)”，設(shè)置邊界為 0 至 600 范圍內(nèi)；
然后設(shè)置移動(dòng)內(nèi)容頁(yè)內(nèi)的“1、2、3、 4 的組”為“相對(duì)位置”，x=0，y=[[(-DragY)*5]]（前面算過(guò)內(nèi)容頁(yè)移動(dòng)距離是拖動(dòng)條移動(dòng)距離的 5 倍，拖動(dòng)條向下移動(dòng)時(shí)，內(nèi)容頁(yè)向上移動(dòng)，所以為(-DragY)*5），設(shè)置邊界為- 2200 至 2800 范圍內(nèi)。
2. 內(nèi)容頁(yè)
因?yàn)槲覀円獙?shí)現(xiàn)的效果是，當(dāng)內(nèi)容頁(yè)1、 2 之間的縫隙經(jīng)過(guò)時(shí)看到的是背景圖片1；內(nèi)容頁(yè)2、 3 之間的縫隙經(jīng)過(guò)時(shí)看到的是背景圖片2，內(nèi)容頁(yè)3、 4 之間的縫隙經(jīng)過(guò)時(shí)看到的是背景圖片3。
同時(shí)我們將2、 3 的高度設(shè)置為350，背景圖片頁(yè)上/下高度為300，所以在內(nèi)容頁(yè)移動(dòng)時(shí)，2、 3 可以完全覆蓋住背景圖片頁(yè)的上或下，我們將在完全覆蓋的時(shí)候進(jìn)行背景頁(yè)的切換，從而實(shí)現(xiàn)我們想要的效果。
我們將內(nèi)容頁(yè) 2 覆蓋背景圖片頁(yè)時(shí)，進(jìn)行圖片 1 和圖片 2 的切換，內(nèi)容頁(yè) 3 覆蓋背景圖片頁(yè)時(shí)，進(jìn)行圖片 2 和圖片 3 的切換。
背景圖片上的坐標(biāo)為（0,0），背景圖片下的坐標(biāo)為（0,300），所以內(nèi)容頁(yè)坐標(biāo)在 250 至 300 時(shí)完全覆蓋背景圖片下，將內(nèi)容頁(yè)坐標(biāo)y等于 250 至 275 時(shí)背景圖片下轉(zhuǎn)換為圖片2，坐標(biāo)y等于 275 至 300 時(shí)背景圖片下轉(zhuǎn)換為圖片1。
同理內(nèi)容頁(yè)完全覆蓋背景圖片上的范圍為- 50 至0，內(nèi)容頁(yè)坐標(biāo)y等于- 25 至- 50 時(shí)背景圖片下轉(zhuǎn)換為圖片2，坐標(biāo)y等于- 25 至 0 時(shí)背景圖片下轉(zhuǎn)換為圖片1。
內(nèi)容頁(yè) 2 設(shè)置好后，內(nèi)容頁(yè) 3 同樣的坐標(biāo)范圍只是調(diào)整為圖片 2 與圖片 3 的切換即可。
然后運(yùn)行一下程序就可以出來(lái)我們想要的效果了。
QQ客服