Axure 教程:不可見滾動條的頁面滾動效果

0 評論 8372 瀏覽 6 收藏 4 分鐘

在設計產品原型的過程中,經常會遇到這樣的一種場景——所要展示的內容,超出了當前可視頁面范圍。遇到這種情況,通常使用Axure動態面板的滾動條設置來解決。

產品原型設計是產品經理每日或周期性必須經歷的事情。經過長期的產品沉淀,每位產品經理多少都會有完美主義精神。產品原型的領域,就是其完美主義精神發揮的場所之一。

在設計產品原型的過程中,經常會遇到這樣的一種場景——所要展示的內容,超出了當前可視頁面范圍。遇到這種情況,通常使用Axure動態面板的滾動條設置來解決。

有滾動條效果

首先,創建動態面板(Panel)

選中當前需要添加滾動條范圍內部件,右鍵選中“創建動態面板(Create Dynamic Panel)”。

其次,設置動態面板滾動條效果為“縱向滾動條”

設置為“縱向滾動條”后,具體如下圖所示:

展示內容超過當前頁面的時候,會自動生成滾動條效果。

第三,生成Axure原型,查看有滾動條效果界面

具體如下:

無滾動條效果

首先,基于“有滾動條效果”,制作無滾動條效果

基于“有滾動條效果”中第二步驟,在原有的動態面板基礎上再創建一層動態面板。點擊最外層動態面板,進入操作界面。將內層的動態面板,設置滾動條效果。將看到的滾動條,移出外層動態面板框定的區域范圍外。

具體如下圖所示:

其次,生成Axure原型,查看無滾動條效果界面。

具體如下:

有滾動條和無滾動條,本質上都能夠實現頁面滾動查看完整信息效果。

什么樣的場景應用無滾動條的界面效果?

當頁面右側滾動條數量>=2時,建議使用無滾動條界面的效果,提升用戶體驗。

 

作者:魚日,公眾號:issnail

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!