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

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

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

（1） 客戶端頂導設計

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

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

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

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

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

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

在矩形內填寫時間文本“16:42”以示意，該文本的具體參數為：

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

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

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

在頂導矩形內填寫文本“消息”，參數為：

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

繼續拖放兩個一級標題元件，分別填寫文本“發現群”和“列表”，其中文本的參數和兩個一級標題元件的參數分別為：

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

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

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

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

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

（2） 客戶端底導設計

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

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

繼續拖放一個矩形元件作為發布按鈕，其參數為：

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

在發布按鈕上填寫文本“+”，具體參數如下：

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

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

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

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

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

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

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

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

向 主要框架/state1 頁面拖放一個動態面板元件，其參數如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在 主要框架/state1 頁面單擊“拖動面板”，然后雙擊主界面右上角的“元件交互與說明”面板中的動作“拖動結束時”，添加動作“移動”?，F在我們為“移動”這個動作添加條件（條件為拖動的太高或太低），點擊用例編輯對話框上部的“添加條件”按鈕。

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

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

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

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

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

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

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

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

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

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

然后我們為“拖動面板”再添加一個條件動作：如果拖動結束時面板縱坐標小于等于-345時，面板重新以彈性動畫的方式回到（0，-345）處。在此不再一一講解過程，請讀者自行設置。

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

（5） 發布到 AxShare

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

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

按照如下參數進行設置：

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

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

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

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

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

本文由 @Bible 原創發布于人人都是產品經理。未經許可，禁止轉載。