Axure 教程:不可見滾動條的頁面滾動效果
在設計產品原型的過程中,經常會遇到這樣的一種場景——所要展示的內容,超出了當前可視頁面范圍。遇到這種情況,通常使用Axure動態面板的滾動條設置來解決。
產品原型設計是產品經理每日或周期性必須經歷的事情。經過長期的產品沉淀,每位產品經理多少都會有完美主義精神。產品原型的領域,就是其完美主義精神發揮的場所之一。
在設計產品原型的過程中,經常會遇到這樣的一種場景——所要展示的內容,超出了當前可視頁面范圍。遇到這種情況,通常使用Axure動態面板的滾動條設置來解決。
有滾動條效果
首先,創建動態面板(Panel)
選中當前需要添加滾動條范圍內部件,右鍵選中“創建動態面板(Create Dynamic Panel)”。
其次,設置動態面板滾動條效果為“縱向滾動條”
設置為“縱向滾動條”后,具體如下圖所示:
展示內容超過當前頁面的時候,會自動生成滾動條效果。
第三,生成Axure原型,查看有滾動條效果界面
具體如下:
無滾動條效果
首先,基于“有滾動條效果”,制作無滾動條效果
基于“有滾動條效果”中第二步驟,在原有的動態面板基礎上再創建一層動態面板。點擊最外層動態面板,進入操作界面。將內層的動態面板,設置滾動條效果。將看到的滾動條,移出外層動態面板框定的區域范圍外。
具體如下圖所示:
其次,生成Axure原型,查看無滾動條效果界面。
具體如下:
有滾動條和無滾動條,本質上都能夠實現頁面滾動查看完整信息效果。
什么樣的場景應用無滾動條的界面效果?
當頁面右側滾動條數量>=2時,建議使用無滾動條界面的效果,提升用戶體驗。
作者:魚日,公眾號:issnail
本文由 @魚日 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
- 目前還沒評論,等你發揮!