起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure原型設(shè)計(jì)：如何實(shí)現(xiàn)花瓣網(wǎng)的瀑布流？
如何運(yùn)用Axure來設(shè)計(jì)瀑布流呢？文章給出了具體的設(shè)計(jì)思路，一起來學(xué)習(xí)吧！
Pintrest作為瀑布流網(wǎng)站的鼻祖，其一出現(xiàn)便受到追捧。提到瀑布流網(wǎng)站，國內(nèi)的花瓣網(wǎng)不得不提一下，也是將瀑布流做到非常棒的網(wǎng)站，國內(nèi)的設(shè)計(jì)師非常喜歡到它上面逛逛，因?yàn)樯厦嬗泻芏鄡?yōu)秀的設(shè)計(jì)師收集的畫板內(nèi)容同樣優(yōu)秀。
如何使用Axure來設(shè)計(jì)這樣的瀑布流的效果呢？
我們先來分析一下這樣的網(wǎng)站交互效果，然后再討論一下設(shè)計(jì)思路。
瀑布流的網(wǎng)站其實(shí)交互很簡單，當(dāng)鼠標(biāo)滾動到窗口底部超過一定距離后，頁面會自動加載新的數(shù)據(jù)填充在下方，繼續(xù)滾動頁面到下方底部時(shí)，重復(fù)相同的動作。
好，我們來分析一下實(shí)現(xiàn)的思路：
- 需要不斷添加數(shù)據(jù)，以實(shí)現(xiàn)新的數(shù)據(jù)加載，這個(gè)毫無疑問想到的自然是使用中繼器來添加數(shù)據(jù)。
- 我們可以發(fā)現(xiàn)花瓣網(wǎng)的每張瀑布流圖片的高度不盡相同，因此會顯的長長短短，也就是說，它的高度是隨機(jī)的，意思就是說，需要用到隨機(jī)函數(shù)來模板設(shè)置每個(gè)圖片的高度。
- 在滾動條滾動到底部一定距離時(shí)，需要添加數(shù)據(jù)，這個(gè)需要判斷窗口的滾動位置和當(dāng)前中繼器的最下方位置作個(gè)比較，如果大于一定值則添加新的數(shù)據(jù)。
- 另外要注意的是，不能設(shè)置中繼器按網(wǎng)格方式排布，因?yàn)檫@種方式下，每個(gè)數(shù)據(jù)所占的寬和高是固定大小的，這樣就沒辦法模擬長長短短并且每個(gè)圖片在垂直方向上是相互緊挨著。這里可能有點(diǎn)難以理解，看看下面的圖有助于進(jìn)一步理解。
對于這一點(diǎn)，我們可以使用多個(gè)中繼器來模擬，每個(gè)中繼器表示一列。
下面來看看具體的實(shí)現(xiàn)步驟。
一、界面布局
添加一個(gè)中繼器，命名為col1，雙擊進(jìn)入編輯狀態(tài)。這里僅作演示，只用一個(gè)矩形表示圖片，其它內(nèi)容忽略。
調(diào)整中繼器默認(rèn)矩形大小為200*320，背景顏色為灰色，設(shè)置背景陰影效果如下圖，偏移都為0，模糊效果大小為默認(rèn)5，將矩形命名為rect。
設(shè)置中繼器的垂直方向間距為20。
好了，界面布局很簡單，先添加一個(gè)中繼器，等后面事件處理好后，復(fù)制幾個(gè)水平排列好即可。
二、事件處理
這個(gè)例子主要是事件的處理，分別是中繼器的每項(xiàng)加載時(shí)事件，以及頁面窗口的向下滾動事件。
1、中繼器每項(xiàng)加載時(shí)事件
簡單解釋一下高度的設(shè)置，[[Math.random()*200+150]]，表示矩形高度最小為150，最大為150+200=350，因?yàn)镸ath.random()的值為0~1之間，Math.random()*200表示0~200之間。
每一個(gè)新加的矩形在初始化時(shí)都會被設(shè)置成隨機(jī)高度在150~350之間。
2、窗口向下滾動時(shí)事件
窗口向下滾動事件里添加一個(gè)條件判斷，如果窗口的高度+滾動條滾動的距離+200>中繼器的最下方位置，則添加一條新的記錄。
步驟2的表達(dá)式：[[Window.height+Window.scrollY+200]]
步驟3的表達(dá)式：[[LVAR1.height+LVAR1.y]]，其中局部變量LVAR1表示的是中繼器元件。
添加一行的操作如下：
隨便添加一條數(shù)據(jù)即可。
三、多個(gè)中繼器展示
復(fù)制中繼器col1為col2、col3、col4，在水平方向上依次排列。
我們可以看到每個(gè)被復(fù)制的中繼器在預(yù)覽時(shí)已經(jīng)顯示出不同的高度，來修改一下頁面向下滾動事件，為中繼器col2、col3、col4分別添加一行。
四、預(yù)覽
F5預(yù)覽打開瀏覽器一下效果，滾動頁面向下，查看是否自動添加數(shù)據(jù)。
小結(jié)
這個(gè)例子真正做起來比較簡單，但即使簡單，我們也希望能從中學(xué)習(xí)到一些原型設(shè)計(jì)的知識和技巧。
- 中繼器的樣式設(shè)置
- 數(shù)學(xué)隨機(jī)函數(shù)的應(yīng)用
- 中繼器每項(xiàng)加載時(shí)事件處理
- 頁面向下滾動時(shí)事件處理。
源文件下載
鏈接：https://pan.baidu.com/s/1c1JXUH6 密碼: bmya
本文由 @Axure原型設(shè)計(jì)工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自PEXELS，基于CCO協(xié)議
樓主您好，我這邊按照您的步驟操作，但在我的axure里預(yù)覽向下滾是沒有自動產(chǎn)生瀑布流的，我把您的原稿復(fù)制進(jìn)我新建的axure頁面里，也是實(shí)現(xiàn)不了頁面往下滾自動生成瀑布流的，請問我大概是哪一步做錯了呢
直接使用我的原型可以嗎？方便的話把你的rp文件發(fā)我看看。+微信：zhuchuanming
樓主你好，我這邊操作時(shí)，窗口向下滾動這個(gè)動作在中繼器上是找不到，請問您這邊知道是哪里出了問題嗎，感謝了~
AXURE7是不是不能實(shí)現(xiàn)，控件尺寸變化的那一步驟？
Axure7沒有設(shè)置大小的動作。
然后呢？有什么卵用？誰不知道瀑布流的效果，你做的這個(gè)開發(fā)又不能復(fù)用，有意義嗎？你們這些新人凈tm鉆這些沒用的表面效果，而不注重討論研究信息交互和用戶的使用場景。丟了西瓜揀芝麻，這就是現(xiàn)在國內(nèi)互聯(lián)網(wǎng)年輕產(chǎn)品經(jīng)理的大眾現(xiàn)狀。
的確，工作中是要注重效率的。工作前拼命學(xué)交互動效，實(shí)際工作后對這些就是做一下說明而已。
通過教程來學(xué)習(xí)軟件的一些基本用法是教程的意義。
你在發(fā)表意見時(shí)，有發(fā)布過一篇教程告訴別人怎么使用這個(gè)軟件么？
我認(rèn)為樓上2個(gè)的溝通有問題，都喜歡反駁別人的意見，其實(shí)可以多一步，他為什么這么說？
1、軟技能比硬技能更為重要
2、作者的論據(jù)有問題，你不能因?yàn)閯e人說這桃子不好吃，然后你就反駁不好吃你種個(gè)出來看看？不好吃你別吃??？不好吃你可以吃蘋果?。?/p>
純粹無聊回復(fù)
因?yàn)樗皇潜е鴾贤ǖ男膽B(tài)來的，使用了“卵用”和“TM”兩處不文明用語。自己不喜歡的就抨擊，還有人支持，服了
1、他說的話很糙，我并沒有支持；
2、他說的話很有道理，這只是一個(gè)工具，只是一個(gè)工具，只是一個(gè)工具。
你整點(diǎn)干貨來啊
你是家里出變故了還是童年有陰影？別人分享的內(nèi)容是誤導(dǎo)你了還是涉嫌違規(guī)了？張口閉口你們這些新人年輕人的裝大尾巴狼。你這樣做前輩會有人尊重你？你為這個(gè)世界做了什么貢獻(xiàn)了？噴子真是無處不在。
說的有道理哦 ??
贊。我倒是希望看到瀑布流頁面分析和用戶行為分析。 另，這些人不是產(chǎn)品經(jīng)理，就是原型設(shè)計(jì)
完了，后悔了，說重了請見諒。
這個(gè)網(wǎng)站，沒有留言撤銷功能。@_@