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

本文從原型設(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é)議