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

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

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

有滾動(dòng)條效果

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

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

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

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

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

第三，生成Axure原型，查看有滾動(dòng)條效果界面

具體如下：

無滾動(dòng)條效果

首先，基于“有滾動(dòng)條效果”，制作無滾動(dòng)條效果

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

具體如下圖所示：

其次，生成Axure原型，查看無滾動(dòng)條效果界面。

具體如下：

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

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

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

作者：魚日，公眾號(hào)：issnail

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

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