Axure 教程:不可見滾動(dòng)條的頁(yè)面滾動(dòng)效果

0 評(píng)論 8690 瀏覽 6 收藏 4 分鐘

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

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

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

有滾動(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)容超過(guò)當(dāng)前頁(yè)面的時(shí)候,會(huì)自動(dòng)生成滾動(dòng)條效果。

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

具體如下:

無(wú)滾動(dòng)條效果

首先,基于“有滾動(dòng)條效果”,制作無(wú)滾動(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原型,查看無(wú)滾動(dòng)條效果界面。

具體如下:

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

什么樣的場(chǎng)景應(yīng)用無(wú)滾動(dòng)條的界面效果?

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

 

作者:魚日,公眾號(hào):issnail

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!