在設(shè)計產(chǎn)品原型的過程中，經(jīng)常會遇到這樣的一種場景——所要展示的內(nèi)容，超出了當(dāng)前可視頁面范圍。遇到這種情況，通常使用Axure動態(tài)面板的滾動條設(shè)置來解決。

產(chǎn)品原型設(shè)計是產(chǎn)品經(jīng)理每日或周期性必須經(jīng)歷的事情。經(jīng)過長期的產(chǎn)品沉淀，每位產(chǎn)品經(jīng)理多少都會有完美主義精神。產(chǎn)品原型的領(lǐng)域，就是其完美主義精神發(fā)揮的場所之一。

在設(shè)計產(chǎn)品原型的過程中，經(jīng)常會遇到這樣的一種場景——所要展示的內(nèi)容，超出了當(dāng)前可視頁面范圍。遇到這種情況，通常使用Axure動態(tài)面板的滾動條設(shè)置來解決。

有滾動條效果

首先，創(chuàng)建動態(tài)面板（Panel）

選中當(dāng)前需要添加滾動條范圍內(nèi)部件，右鍵選中“創(chuàng)建動態(tài)面板（Create Dynamic Panel）”。

其次，設(shè)置動態(tài)面板滾動條效果為“縱向滾動條”

設(shè)置為“縱向滾動條”后，具體如下圖所示：

展示內(nèi)容超過當(dāng)前頁面的時候，會自動生成滾動條效果。

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

具體如下：

無滾動條效果

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

基于“有滾動條效果”中第二步驟，在原有的動態(tài)面板基礎(chǔ)上再創(chuàng)建一層動態(tài)面板。點擊最外層動態(tài)面板，進(jìn)入操作界面。將內(nèi)層的動態(tài)面板，設(shè)置滾動條效果。將看到的滾動條，移出外層動態(tài)面板框定的區(qū)域范圍外。

具體如下圖所示：

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

具體如下：

有滾動條和無滾動條，本質(zhì)上都能夠?qū)崿F(xiàn)頁面滾動查看完整信息效果。

什么樣的場景應(yīng)用無滾動條的界面效果？

當(dāng)頁面右側(cè)滾動條數(shù)量>=2時，建議使用無滾動條界面的效果，提升用戶體驗。

作者：魚日，公眾號：issnail

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

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