Axure教程:用Axure實(shí)現(xiàn)簡書、微博的下拉刷新效果
本文從原型設(shè)計(jì)的角度來探究背后的交互邏輯,研究如何利用經(jīng)典原型工具Axure實(shí)現(xiàn)這樣的交互效果。
目前各大應(yīng)用主要采取兩種下拉刷新方式,一種以簡書、知乎為代表的內(nèi)容版塊固定的刷新方式,另一種以微博、今日頭條為代表的內(nèi)容版塊向下滑動(dòng)的刷新方式。
一、以簡書、知乎為代表的下拉刷新
1.觀察交互動(dòng)作
- 向下滑動(dòng)時(shí):刷新按鈕緩緩向下垂直移動(dòng),并以自身為中心點(diǎn)進(jìn)行旋轉(zhuǎn),當(dāng)向下移動(dòng)到一定距離時(shí)停止移動(dòng)。
- 滑動(dòng)結(jié)束時(shí):手指松開屏幕時(shí),刷新按鈕消失,刷新按鈕的初始位置出現(xiàn)加載按鈕,并以自身為中心點(diǎn)進(jìn)行旋轉(zhuǎn);旋轉(zhuǎn)結(jié)束后,系統(tǒng)更新頁面內(nèi)容,同時(shí)在內(nèi)容的上方出現(xiàn)了一段提示內(nèi)容更新數(shù)量的toast文字,幾秒后提示信息消失。
簡書交互分析(元件名參照下文)
2.準(zhǔn)備元件
首先準(zhǔn)備好相關(guān)元件,元件素材中需要用到兩個(gè)動(dòng)態(tài)面板:
- 第一個(gè)動(dòng)態(tài)面板:承載內(nèi)容,設(shè)置3個(gè)面板狀態(tài),每個(gè)狀態(tài)為不同的內(nèi)容。為了便于區(qū)分內(nèi)容,本案例中將不同面板內(nèi)的文字和占位符通過不同的顏色來進(jìn)行區(qū)分。該動(dòng)態(tài)面板命名為”信息流“。
- 第二個(gè)動(dòng)態(tài)面板:主要用于處理下滑過程中和下滑結(jié)束時(shí),刷新按鈕、加載按鈕和推薦提示的切換顯示,我們將第二個(gè)動(dòng)態(tài)面板命名為“刷新”,3個(gè)狀態(tài)分別命名為刷新、加載和推薦,默認(rèn)隱藏該面板。
3.設(shè)置交互用例
1).信息流動(dòng)態(tài)面板—設(shè)置拖動(dòng)時(shí)用例:
- 動(dòng)作1:設(shè)置“刷新”動(dòng)態(tài)面板的狀態(tài)為“刷新”;
- 動(dòng)作2:垂直拖動(dòng)“刷新”動(dòng)態(tài)面板,移動(dòng)范圍在當(dāng)前元件的Y軸坐標(biāo)到Y(jié)軸坐標(biāo)+200之間;
- 動(dòng)作3:旋轉(zhuǎn)刷新圖標(biāo)按鈕,以自身中心點(diǎn)為參照,順時(shí)針旋轉(zhuǎn)180度,旋轉(zhuǎn)時(shí)的動(dòng)畫效果為緩慢退出,動(dòng)畫時(shí)間為500毫秒。
設(shè)置拖動(dòng)時(shí)用例的動(dòng)作
2).信息流動(dòng)態(tài)面板—設(shè)置拖動(dòng)結(jié)束時(shí)用例
- 動(dòng)作1:移動(dòng)刷新動(dòng)態(tài)面板回到拖動(dòng)前位置,動(dòng)畫效果設(shè)置為線性動(dòng)畫,時(shí)間500毫秒;
- 動(dòng)作2:設(shè)置刷新動(dòng)態(tài)面板狀態(tài)為加載,進(jìn)入和退出動(dòng)畫效果為逐漸,時(shí)間均為500毫秒;
- 動(dòng)作3:旋轉(zhuǎn)加載圖標(biāo)按鈕,以自身中心點(diǎn)為參照,順時(shí)針旋轉(zhuǎn)1080度。旋轉(zhuǎn)時(shí)的動(dòng)畫效果為緩進(jìn)緩出,動(dòng)畫時(shí)間為1000毫秒(1秒);
- 動(dòng)作4:等待2000毫秒(2秒);
- 動(dòng)作5:隱藏刷新動(dòng)態(tài)面板;
- 動(dòng)作6:設(shè)置信息流動(dòng)態(tài)面板為向后循環(huán)下一個(gè)狀態(tài),進(jìn)入和退出的動(dòng)畫效果為逐漸,時(shí)間均為500毫秒;
- 動(dòng)作7:設(shè)置刷新動(dòng)態(tài)面板的狀態(tài)為推薦,進(jìn)入動(dòng)畫效果為向下滑動(dòng),時(shí)間為500毫秒,并勾選顯示面板;
- 動(dòng)作8:等待1000毫秒(1秒);
- 動(dòng)作9:隱藏刷新動(dòng)態(tài)面板,動(dòng)畫效果為向上滑動(dòng),時(shí)間為500毫秒。
設(shè)置拖動(dòng)結(jié)束時(shí)用例的動(dòng)作
二、以微博、頭條為代表的下拉刷新
1.觀察交互動(dòng)作
- 向下滑動(dòng)時(shí):內(nèi)容向下移動(dòng)至一定距離時(shí),頁面的背景層出現(xiàn)刷新提示文字信息。過一段時(shí)間后,刷新提示文字變化,提醒釋放刷新內(nèi)容。
- 滑動(dòng)結(jié)束時(shí):內(nèi)容向上移動(dòng)一段距離時(shí),頁面背景層提示正在進(jìn)行內(nèi)容刷新;等待一段時(shí)間后,內(nèi)容發(fā)生了變更,同時(shí)在頁面上方出現(xiàn)了推薦提示信息,提示推薦了xx條新內(nèi)容。
微博交互分析(元件名參照下文)
2.關(guān)于準(zhǔn)備元件的一些說明
首先我們需要添加兩個(gè)動(dòng)態(tài)面板:
- 第一個(gè)動(dòng)態(tài)面板用來設(shè)置刷新過程中的文案提示和圖標(biāo)切換,共有3個(gè)狀態(tài):下拉刷新、釋放刷新和加載,命名為刷新提示;
- 另外一個(gè)動(dòng)態(tài)面板用來存放切換的內(nèi)容,該動(dòng)態(tài)面板有3個(gè)狀態(tài),不同面板內(nèi)的文字和占位符通過不同的顏色來進(jìn)行區(qū)分,命名為內(nèi)容。
將兩個(gè)動(dòng)態(tài)面板選中轉(zhuǎn)換為新的動(dòng)態(tài)面板,命名為顯示層;再將顯示層轉(zhuǎn)換為新的動(dòng)態(tài)面板,命名為操作層。
這里我們對(duì)顯示的內(nèi)容完成了兩層的嵌套,里面一層顯示層主要用來切換顯示的內(nèi)容,外面一層作為我們拖動(dòng)的操作層,拖動(dòng)事件的交互用例都通過操作層來進(jìn)行設(shè)置。
最后我們還需要單獨(dú)準(zhǔn)備一個(gè)矩形框,用來顯示推薦內(nèi)容的數(shù)量,默認(rèn)設(shè)置為隱藏。
3.設(shè)置交互用例
1).加載圖標(biāo)-載入時(shí)用例:為刷新提示動(dòng)態(tài)面板的加載狀態(tài)設(shè)定一個(gè)載入事件,載入時(shí)循環(huán)切換指示器動(dòng)態(tài)面板的狀態(tài),從而利用指示器的狀態(tài)改變來實(shí)現(xiàn)加載圖標(biāo)的自動(dòng)旋轉(zhuǎn)。
設(shè)置載入事件
2).指示器-狀態(tài)改變用例:拖動(dòng)一個(gè)空動(dòng)態(tài)面板,設(shè)置3個(gè)狀態(tài),狀態(tài)改變時(shí),1000毫秒內(nèi)順時(shí)針旋轉(zhuǎn)720度,動(dòng)畫效果為線性。
設(shè)置狀態(tài)改變事件
3).操作層動(dòng)態(tài)面板-拖動(dòng)時(shí)用例
- 動(dòng)作1:垂直拖動(dòng)顯示層動(dòng)態(tài)面板,拖動(dòng)范圍限定在操作層底部以上的300個(gè)像素;
- 動(dòng)作2:設(shè)置刷新提示動(dòng)態(tài)面板狀態(tài)為下拉;
- 動(dòng)作3:等待1000毫秒(1秒);
- 動(dòng)作4:設(shè)置刷新提示動(dòng)態(tài)面板狀態(tài)為釋放,進(jìn)入和退出的動(dòng)畫效果為逐漸,時(shí)間500毫秒。
設(shè)置拖動(dòng)時(shí)用例的動(dòng)作
4).操作層動(dòng)態(tài)面板-拖動(dòng)結(jié)束時(shí)用例
- 動(dòng)作1:移動(dòng)顯示層動(dòng)態(tài)面板到坐標(biāo)(0,40),這個(gè)位置正好刷新提示的內(nèi)容顯示出來;
- 動(dòng)作2:設(shè)置刷新提示動(dòng)態(tài)面板狀態(tài)為加載中;
- 動(dòng)作3:等待2000毫秒(2秒);
- 動(dòng)作4:移動(dòng)顯示層動(dòng)態(tài)面板到拖動(dòng)前位置,即回歸初始位置;
- 動(dòng)作5:設(shè)置內(nèi)容動(dòng)態(tài)面板循環(huán)切換下一個(gè)狀態(tài);
- 動(dòng)作6:顯示推薦提示語內(nèi)容,動(dòng)畫效果為逐漸顯示,時(shí)間為500毫秒,并選擇至于頂層;
- 動(dòng)作7:等待1000毫秒(1秒);
- 動(dòng)作8:隱藏推薦提示語,動(dòng)畫效果為逐漸隱藏,時(shí)間為500毫秒。
設(shè)置拖動(dòng)結(jié)束時(shí)用例的動(dòng)作
上述的講解,希望能夠幫助到有興趣學(xué)習(xí)的同學(xué)。大家看完以后,如果還有一些細(xì)節(jié)上的東西存在疑問,可以下載源文件,來進(jìn)一步的觀摩和分析。
下載鏈接:https://pan.baidu.com/s/1mkmV2FQ 密碼:subx
本文由 @kevin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CCO協(xié)議
親,請教下,怎么在中繼器添加行里通過函數(shù)形式添加圖片
挺好的
你好,下載后頁面是空白,提示下載不成功。是Axure適配問題么?我用的是Axure8。能郵箱發(fā)我一份么2289359225@qq.com.謝謝
謝謝分享,想請教您兩個(gè)問題
1.在簡書的下拉刷新中,有個(gè)動(dòng)作是等待,這個(gè)動(dòng)作的意義是上一動(dòng)作的停留展示時(shí)間嗎
2.動(dòng)畫效果的選擇依據(jù)是什么呢,我對(duì)比了搖擺和線性,沒有發(fā)現(xiàn)差別
謝謝閱讀,這兩個(gè)問題的解釋如下:
1、等待的時(shí)間空隙,是客戶端從后臺(tái)取數(shù)據(jù)需要的短暫間隙,更接近真實(shí)自然的效果。
2、線性的動(dòng)畫呈直線運(yùn)動(dòng),比較自然,搖擺會(huì)有一點(diǎn)回彈或晃動(dòng)效果。