Axure教程——移動端APP原型框架搭建、返回頂部、底部導(dǎo)航、下拉刷新、彈框提示。亮亮原型、移動端高保真原型、Axure元件庫、Axure原型設(shè)計、APP元件庫、APP動效庫。

Axure Share 原型在線地址：https://arhwsr.axshare.com（打開有點慢，請耐心等待）

原型屏幕尺寸：375*667px（iphone6/iphone6s/iphone7）

一、返回頂部思路解析

1、在Axure中設(shè)置2個動態(tài)面板：返回頂部動態(tài)面板（以下簡稱“返回箭頭”），內(nèi)容動態(tài)面板（以下簡稱“內(nèi)容面板”）；

2、返回箭頭默認(rèn)隱藏，內(nèi)容面板向上拖動至第2屏底部時，顯示返回箭頭，向下拖動至第2屏底部時，隱藏返回箭頭：

• 內(nèi)容面板拖動至第2屏底部時，其頭部y坐標(biāo)值=內(nèi)容面板默認(rèn)y坐標(biāo)值-1屏的高度；
• 內(nèi)容面板默認(rèn)y坐標(biāo)值=65px；
• 1屏的高度=屏幕高度-頭部高度-底部導(dǎo)航高度=667-65-50=552px；
• 內(nèi)容面板拖動至第2屏底部時，其頭部y坐標(biāo)值=65-552=-487px；
• 即拖動內(nèi)容面板時，如果內(nèi)容面板頭部y坐標(biāo)值大于-487時，隱藏返回箭頭，頭部y坐標(biāo)值小于等于-487時，顯示返回箭頭；

3、點擊返回箭頭時，移動內(nèi)容面板至初始坐標(biāo)值（0，65），同時隱藏返回箭頭。

二、下拉刷新思路解析

1、在Axure中設(shè)置2個動態(tài)面板：下拉刷新動態(tài)面板（高度：65px，以下簡稱“刷新面板”），內(nèi)容動態(tài)面板（高度調(diào)整為內(nèi)容尺寸，以下簡稱“內(nèi)容面板”）；

2、刷新面板初始坐標(biāo)（0，0），內(nèi)容面板初始坐標(biāo)（0，65）；

3、垂直拖動內(nèi)容面板時，刷新面板底部移動至內(nèi)容面板頭部，設(shè)置提示語為：“下拉刷新”；

4、拖動內(nèi)容面板y坐標(biāo)大于等于130時，刷新面板改變提示語為：“松手刷新”；

5、拖動結(jié)束時，若內(nèi)容面板頭部y坐標(biāo)大于等于130，則移動刷新面板至（0，65），移動內(nèi)容面板至（0，130），改變刷新面板提示語為：“刷新中…”，并在此坐標(biāo)等待1000毫秒，最后再將兩面板移回至初始位置；

6、拖動結(jié)束時，若內(nèi)容面板頭部y坐標(biāo)大于65小于130時，則將兩面板移回至初始位置。

三、底部導(dǎo)航思路解析

元件設(shè)置：

1、在Axure中新建一個導(dǎo)航母版，在導(dǎo)航母版中拖入一個中繼器（Nav），在中繼器中創(chuàng)建以下幾列：title（導(dǎo)航文字）、icon（導(dǎo)航默認(rèn)圖標(biāo)），icon_selected（導(dǎo)航選中圖標(biāo)），link（導(dǎo)航鏈接），state（導(dǎo)航狀態(tài)）；

2、在中繼器中拖入一個動態(tài)面板（List_Nav：75，50，以下稱“導(dǎo)航面板”），在導(dǎo)航面板中拖入一個圖片元件（Icon_List_Nav：25，25，以下稱“導(dǎo)航圖標(biāo)”），一個文字元件（Title_List_Nav：75，20，以下稱“導(dǎo)航文字”）；

屬性設(shè)置：

1、在中繼器屬性中，取消勾選【取消選項組效果】；

2、在中繼器樣式_布局中，選中【水平】；

3、在導(dǎo)航面板屬性中，設(shè)置選項組名稱為“nav”，或任意字母組合；

4、設(shè)置導(dǎo)航文字默認(rèn)色值：#999999，選中色值：#333333；

事件設(shè)置：

1、中繼器載入時：篩選中繼器數(shù)據(jù)，讀取中繼器列表中，導(dǎo)航狀態(tài)state不等于“禁用”的行；

2、中繼器載入時：設(shè)置導(dǎo)航面板之間的間距，

• 導(dǎo)航面板間距=（屏幕寬度-導(dǎo)航面板寬度*導(dǎo)航面板數(shù)量）/（導(dǎo)航面板數(shù)量+1），
• 屏幕寬度=375，導(dǎo)航面板寬度=75，
• 導(dǎo)航面板的數(shù)量=中繼器列表中導(dǎo)航狀態(tài)為非禁用的行數(shù)（itemCount），可以設(shè)置1-5個，最多兼容5個，設(shè)導(dǎo)航面板數(shù)量為“x”，
• 則導(dǎo)航面板間距=（375-75x）/（x+1）；

3、中繼器每項加載時：

• 導(dǎo)航默認(rèn)圖標(biāo)，讀取中繼器列表中icon列中導(dǎo)入的圖標(biāo)，
• 導(dǎo)航選中圖標(biāo)，讀取中繼器列表中icon_selected列中導(dǎo)入的圖標(biāo)，
• 導(dǎo)航文字，讀取中繼器列表中title列的文字；

4、導(dǎo)航面板鼠標(biāo)單擊時：選中當(dāng)前元件；

5、導(dǎo)航面板鼠標(biāo)單擊時：設(shè)置在當(dāng)前窗口跳轉(zhuǎn)鏈接，鏈接讀取中繼器列表中l(wèi)ink列引用的頁面；

6、將導(dǎo)航母版拖入各個需要導(dǎo)航的界面（一級界面）中，中繼器每項加載時：如果當(dāng)前界面名稱包含某導(dǎo)航面板中的導(dǎo)航文字（導(dǎo)航面板中的導(dǎo)航文字，從中繼器列表title列中讀?。?，則選中該導(dǎo)航面板。

Axure官方原型在線地址：https://arhwsr.axshare.com（打開有點慢，請耐心等待）

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

題圖來自 Pexels，基于 CC0 協(xié)議