幾乎所有的APP都會用到頁面縱向滑動的效果，我們甚至可以把幾乎兩個字去掉。頁面縱向滑動效果就是用戶可以實現(xiàn)上下滑動手機屏幕來查看更多的屏幕上的列表信息（可以是聯(lián)系人列表、最近聯(lián)系人列表、商品列表、消息卡片列表等等）。最常見的有微博、微信、淘寶、京東手機客戶端上的列表縱向滑動等，都用到了頁面縱向滑動效果，下面我們就以微博消息列表縱向滑動為例，用 Axure PR 7.0 來實現(xiàn)這個效果。

先來看一下微博消息頁整個頁面的布局：

（1） 客戶端頂導設計

本例主要展示列表縱向滑動的效果，因此我們不去制作頁面的一些不必要的細節(jié)圖案。

首先，向 index 頁面拖動一個375像素*677像素的動態(tài)面板元件，其基本屬性設置如下：

• 【元件：動態(tài)面板 | 名稱：主要框架 | 位置：X0Y0 | 尺寸：W375H677】

雙擊動態(tài)面板，開始編輯它的 state1 狀態(tài)。由于在查看消息列表時，微博客戶端的頂導和底導都是不發(fā)生移動的，因此我們先把客戶端的頂導和底導先做出來，正如上面所說，我們不必糾結(jié)于其細節(jié)。

向 主要框架/state1 頁面放置一個矩形元件，作為手機的狀態(tài)欄，其參數(shù)如下：

• 【元件：矩形 | 名稱：狀態(tài)欄 | 位置：X0Y0 | 尺寸：W375H20 | 邊框：無邊框 | 填充色：F8F8F8】

在矩形內(nèi)填寫時間文本“16:42”以示意，該文本的具體參數(shù)為：

• 【字體系列：Arial | 字體類型：Normal | 字號：13 | 文本顏色：333333】

再向主要框架/state1 頁面拖放一個矩形元件，作為客戶端頂導，其參數(shù)如下：

• 【元件：矩形 | 名稱：頂導 | 位置：X0Y20 | 尺寸：W375H44 | 邊框：無邊框 | 填充色：F8F8F8】

在頂導矩形內(nèi)填寫文本“消息”，參數(shù)為：

• 【字體系列：黑體 | 字體類型：regular | 字號：18 | 文本顏色：000000】

繼續(xù)拖放兩個一級標題元件，分別填寫文本“發(fā)現(xiàn)群”和“列表”，其中文本的參數(shù)和兩個一級標題元件的參數(shù)分別為：

• 【字體系列：黑體 | 字體類型：regular | 字號：16 | 字體顏色：000000】
• 【元件：一級標題 | 名稱：發(fā)現(xiàn)群 | 位置：X10Y33】 注：尺寸合理即可，下同。
• 【元件：一級標題 | 名稱：列表 | 位置：X335Y33】

拖放一個水平線元件作為分隔線，其參數(shù)分別為：

• 【元件：水平線 | 名稱：分隔線 | 位置：X0Y59 | 尺寸：W375H10 | 線段顏色：CCCCCC】

在這里需要注意一下：如果按照計算，手機狀態(tài)欄寬20+頂導寬44=分隔線Y坐標64，但是如果我們設置分隔線的位置為X0Y64的話會發(fā)現(xiàn)頂導和分隔線之間有一個空隙，這是為什么呢？原來 Axure 的直線也是要占10個像素的（分隔線H10為默認不可修改），因此我們的Y坐標應該設置為64-10/2=59像素。

到這里我們的頂導已經(jīng)設置完成，其效果如下圖：

（2） 客戶端底導設計

拖放一個矩形元件作為底導欄，其參數(shù)為：

• 【元件：矩形 | 名稱：底導 | 位置：X0Y632 | 尺寸：W375H45 | 邊框：無邊框 | 填充色：F8F8F8】

繼續(xù)拖放一個矩形元件作為發(fā)布按鈕，其參數(shù)為：

• 【元件：矩形 | 名稱：發(fā)布按鈕 | 位置：X164Y635 | 尺寸：W55H39 | 邊框：無邊框 | 填充色：FF8201 | 圓角半徑：5】

在發(fā)布按鈕上填寫文本“+”，具體參數(shù)如下：

• 【字體系列：宋體 | 字體類型：regular | 字號：45 | 文本顏色：FFFFFF】

放置4個一級標題元件作為底導欄的其它四個按鈕，分別填寫“首頁”、“消息”、“發(fā)現(xiàn)”、“我”文本，四個文本的格式相同。其中的文本的參數(shù)和四個一級標題元件參數(shù)分別為：

• 【字體系列：黑體 | 字體類型：regular | 字號：16 | 字體顏色：000000】
• 【元件：一級標題 | 名稱：首頁 | 位置：X10Y646】
• 【元件：一級標題 | 名稱：消息 | 位置：X81Y646】
• 【元件：一級標題 | 名稱：發(fā)現(xiàn) | 位置：X262Y646】
• 【元件：一級標題 | 名稱：我 | 位置：X343Y646】

拖放一個水平線元件作為分隔線，參數(shù)為：

• 【元件：水平線 | 名稱：分隔線 | 位置：X0Y627 | 尺寸：W375H10 | 線段顏色：CCCCCC】

到這里客戶端的底導也設置完成，設置完的效果如下：

整個頂導/底導框架的樣子如下圖：

（3） 拖動面板（消息列表）的設計

向 主要框架/state1 頁面拖放一個動態(tài)面板元件，其參數(shù)如下：

• 【元件：動態(tài)面板 | 名稱：拖動面板 | 位置：X0Y64 | 尺寸：W375H977】

為什么要把面板的高設置為H977？事實上我們應該把面板的高設置的足夠大，這樣才能容納更多的消息，效果也更好，因此最初我們把高設置成了1000。但是在設計面板里的消息框時發(fā)現(xiàn)，如果把高設置為1000將容不下整數(shù)個消息框，會留有一些空白，這樣對后面設計的效果會有所影響，因此把高調(diào)整為了977.

雙擊面板開始編輯它的 state1 ，向 拖動面板/state1 頁面中拖放一個圖片元件，其參數(shù)：

• 【元件：圖片 | 名稱：頭像 | 位置：X10Y11 | 尺寸：W50H50】

拖放一個一級標題元件作為微博或公共號名稱，輸入文本“微博或公共號名稱”，元件和文本的參數(shù)如下：

• 【元件：一級標題 | 名稱：微博或公共號名稱 | 位置：X70Y12】
• 【字體系列：黑體 | 字體類型：regular | 字號：17 | 字體顏色：333333】

繼續(xù)拖放一個一級標題元件作為微博或公共號說明，隨意輸入文本如“微博說明或其他信息的說明等等！#￥”，元件和文本的參數(shù)如下：

• 【元件：一級標題 | 名稱：微博或公共號說明 | 位置：X70Y41】
• 【字體系列：黑體 | 字體類型：regular | 字號：15 | 字體顏色：999999】

再拖放一個一級標題元件作為最后聯(lián)系時間，輸入文本“2016-3-6”，元件和文本的參數(shù)如下：

• 【元件：一級標題 | 名稱：最后聯(lián)系時間 | 位置：X300Y12】
• 【字體系列：黑體 | 字體類型：regular | 字號：13 | 字體顏色：999999】

然后再拖放一個水平線元件作為分隔線，其參數(shù)為：

• 【元件：水平線 | 名稱：分隔線 | 位置：X73Y65 | 尺寸：W300H10 | 線段顏色：CCCCCC】

這樣我們就設計好了一個消息框，按住 Ctrl 鍵同時選中剛才的的四個元素：頭像、微博或公眾號名稱、微博或公眾號說明、最后聯(lián)系時間，右擊組合這些元素，然后依次復制消息框，使之充滿整個面板。設計完之后的整個列表框效果如下：

（4） 添加拖動和彈性效果

我們不希望面板在拖動的過程中覆蓋到了客戶端的頂導和底導，因此我們干脆把“拖動面板”設置到最底層。在 主要框架/state1 頁面右擊“拖動面板”，選擇“順序”-> “置于底層”。

設置完成之后單擊拖動面板，為該元件添加交互效果。雙擊主界面右上角的“元件交互與說明”面板中的動作“拖動時”，添加動作“移動”，選中“拖動面板”復選框，選中“垂直拖動”下拉選項，點擊確定完成。

此時我們可以按F5在本地的瀏覽器中進行預覽，鼠標拖動查看效果。

可以感覺到這樣的效果是大打折扣的，因為我們只為“拖動面板”設置了縱向拖動動作，所以我們得到的效果只是在Y軸方向拖動這個面板，當拖動的太高或太低都會導致頁面出現(xiàn)空白的斷層。而根據(jù)我們平時操作手機的經(jīng)驗，當我們滑動列表到盡頭的時候會有一個“彈性”的效果，下面我們就來設置這個彈性效果。

我們繼續(xù)給“拖動面板”添加用例，這次需要添加一個條件動作，這個條件動作可以描述為：當拖動太高或太低（何為太高或太低，都是可以計算或測量的）時，面板以彈性動畫的方式恢復到最頂部或最底部的位置。

在 主要框架/state1 頁面單擊“拖動面板”，然后雙擊主界面右上角的“元件交互與說明”面板中的動作“拖動結(jié)束時”，添加動作“移動”?，F(xiàn)在我們?yōu)椤耙苿印边@個動作添加條件（條件為拖動的太高或太低），點擊用例編輯對話框上部的“添加條件”按鈕。

此時彈出“條件設立”對話框，在如下位置選中“值”：

然后再點擊第一個文本輸入框右側(cè)的 fx ，彈出編輯文本對話框，點擊“插入變量或函數(shù)…”，選中“y”。

選中之后文本框中會出現(xiàn) “[[This.y]]”表達式，下面解釋一下 This 函數(shù)的意義。

This 代表了當前正在添加用例的元件，而我們現(xiàn)在正在為元件“拖動面板”添加動作，因此在此例中 This 代表“拖動面板”。而 “This.y”表示在事件發(fā)生時刻（拖動結(jié)束時）元件的縱坐標。

因此我們的條件動作即為：

• 當 “[[This.y]]” >= 64時，“拖動面板”重新回到（0,64）處。
• 當“[[This.y]]” <= -345時，“拖動面板”重新回到（0,-345）處。

為什么是64？因為：20+44=64.元件的縱坐標定義為元件左上頂點的縱坐標，當面板處于頂導分隔線下方時觸發(fā)條件，因此當元件縱坐標大于頂導下沿時，觸發(fā)條件從而使面板重新回到緊貼頂導下沿處。

為什么是-345？因為：64-[(64+977)-632]=-345.請讀者自己根據(jù)幾何關系進行計算。

因此條件設立對話框后面的選項應該按下圖選擇或填寫，此時條件為：if “[[This.y]]” >= “64”.

點擊確定回到用例編輯對話框，選中“拖動面板”元件，移動“到絕對位置”，坐標為（0，64），設置“彈性”動畫，時間為“500”毫秒。注意設置彈性動畫很重要。

然后我們?yōu)椤巴蟿用姘濉痹偬砑右粋€條件動作：如果拖動結(jié)束時面板縱坐標小于等于-345時，面板重新以彈性動畫的方式回到（0，-345）處。在此不再一一講解過程，請讀者自行設置。

至此我們就完成了列表縱向滑動效果的設置，我們可以按F5先在本地的瀏覽器中進行預覽，鼠標拖動查看效果。

（5） 發(fā)布到 AxShare

我們可以把剛才制作的原型發(fā)布到 Axshare ，以方便在手機等移動設備上查看。

點擊菜單欄上的“發(fā)布”-> “發(fā)布到 AxShare”：

按照如下參數(shù)進行設置：

注意一定要選擇不顯示站點地圖。發(fā)布完成之后，我們就可以通過手機瀏覽器來感受一下我們設計的原型的效果了。

本文的原型文件下載鏈接：

作者源文件：https://pan.baidu.com/s/1borIg8Z

官方源文件：http://pan.baidu.com/s/1bkYIfW

本文的原型移動端的URL：http://tfforx.axshare.com/#c=2

本文由 @Bible 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。