vol .1 Axure 實現移動端頁面滾動的2種方法

使用Axure 實現移動端頁面滾動是非常非常實用的技能。在展示ui交互圖的時候很常見。

於是我總結了5種方法,簡化步驟,一看就懂。

首先你需要去搜一張長圖,或者使用我放在文章最後的圖片也可以。



方法1: 將長圖轉換成爲動態面板,設置滾動條,調整頁面大小;


第一步:複製一張長圖到Axure ;,將圖片調整到合適,易操作的大小;並且爲它命名;

 方法:選中圖片,長按 shift鍵 ,並動鼠標滾輪,可以不變形的調整圖片大小;


第二步:選中圖片後,右鍵,將圖片轉換成爲動態面板;



第三步:在面板右上角的屬性區,設置動態面板的滾動條爲“自動顯示垂直滾動條”;這樣圖片右側就會出現一個滾動條;





第四步:

由於我們要做長圖滾動效果,要有部分圖片需要在滾動過程中展示,所以我們點擊圖片,調整他的高度和 寬度;調整到你要展示出來的頁面大小;動態面板在這個過程中會調整頁面,不展示的頁面會在滾動條動的過程中展示;

就是鼠標移到圖片右下角,出現指針,長點擊鼠標左鍵就可以調正頁面長度和寬度了。記得預覽調正頁面哦~ 好啦,這就是第一個方法,掌握這一個就可以使用了,而且這個方法是最常用最簡便的方法呢。

學會了感興趣的可以繼續往下閱讀哦,嘿嘿,,

如下圖:




方法二 內聯框架 加載圖片:


1、拉一個內聯框架到頁面,將框架 x,y座標修改在(0,0)的位置;

2、新建一個子文件,裏面放入長圖;座標也是在(0,0);

3、 雙擊內聯框架,選擇長圖所在的頁面;

4、完成這簡單輕鬆的三步搞定。

恭喜你掌握了第二種方法,預覽以後調整圖片大小,適配邊框;













重要補充:但是上面的方法由於添加了動態面板的垂直滾動條,會有很粗的滾動條在右側,展示的時候,頁面不太美觀(如下圖)。移動端原型圖卻展示出來網頁的感覺。我發現了一種辦法可以將這個問題優化。


那就是將這個動態面板再次轉換爲動態面板。 進入動態面板子頁面,

擴大子頁面寬度(也就是將進度條拉到動態面板主頁面顯示區域以外);

回到動態面板主頁面,減少頁面寬度,縮小進度條邊緣。

這樣預覽後,頁面依然可以滾動顯示,但是不會出現難看的滾動條了。有個需要注意的問題就是,該動態面板上不能再添加

大面積“熱區”。否則頁面還是不會滾動的。(下面是圖示)









其實,新手和老手的設計功底就會在這些地方區別,從細節上優化展示。

比如,用戶點擊一個功能按鈕,會出現對話框。Axure裏面,元件添加用例裏面,顯示頁面,裏面有“燈箱效果”。就是會在彈出對話框時,整體屏幕出現深色透明沒,蒙版,這樣出現的頁面就比直接彈出效果好很多。




長圖示例:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章