Axure教程:用Axure實(shí)現(xiàn)簡(jiǎn)書、微博的下拉刷新效果

6 評(píng)論 8955 瀏覽 70 收藏 10 分鐘

本文從原型設(shè)計(jì)的角度來探究背后的交互邏輯,研究如何利用經(jīng)典原型工具Axure實(shí)現(xiàn)這樣的交互效果。

目前各大應(yīng)用主要采取兩種下拉刷新方式,一種以簡(jiǎn)書、知乎為代表的內(nèi)容版塊固定的刷新方式,另一種以微博、今日頭條為代表的內(nèi)容版塊向下滑動(dòng)的刷新方式。

一、以簡(jiǎn)書、知乎為代表的下拉刷新

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文字,幾秒后提示信息消失。

簡(jiǎn)書交互分析(元件名參照下文)

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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 親,請(qǐng)教下,怎么在中繼器添加行里通過函數(shù)形式添加圖片

    回復(fù)
  2. 挺好的

    回復(fù)
  3. 你好,下載后頁面是空白,提示下載不成功。是Axure適配問題么?我用的是Axure8。能郵箱發(fā)我一份么2289359225@qq.com.謝謝

    來自北京 回復(fù)
  4. 謝謝分享,想請(qǐng)教您兩個(gè)問題
    1.在簡(jiǎn)書的下拉刷新中,有個(gè)動(dòng)作是等待,這個(gè)動(dòng)作的意義是上一動(dòng)作的停留展示時(shí)間嗎
    2.動(dòng)畫效果的選擇依據(jù)是什么呢,我對(duì)比了搖擺和線性,沒有發(fā)現(xiàn)差別

    來自北京 回復(fù)
    1. 謝謝閱讀,這兩個(gè)問題的解釋如下:
      1、等待的時(shí)間空隙,是客戶端從后臺(tái)取數(shù)據(jù)需要的短暫間隙,更接近真實(shí)自然的效果。
      2、線性的動(dòng)畫呈直線運(yùn)動(dòng),比較自然,搖擺會(huì)有一點(diǎn)回彈或晃動(dòng)效果。

      來自北京 回復(fù)