捲動效果讓您可以製作更逼真、更接近成品的原型。例如,您可以使用捲動區域製作應用程式原型,模擬清單、卡片列,甚至是可以在任何方向移動的地圖。透過捲動畫板,您可以增加所用畫板範本的高度,這表示您的原型將擁有足夠的空間向下捲動包含大量內容的長頁面。
製作捲動區域
您可以在畫板內新增水平、垂直或多向捲動區域,在原型中製作逼真的可捲動 UI 元素。
首先為您的可捲動內容製作一個符號。接著,製作符號的實體,前往檢查器中的「原型」標籤頁,然後按一下「設為可捲動」。最後,選擇您要讓符號水平捲動、垂直捲動,還是雙向(多向)捲動。
當您將 Symbol 或群組設為可捲動時,我們會新增一個特殊的剪裁遮罩。這能控制捲動區域的大小,以及在您開始捲動之前可見的圖層。要調整可見的捲動區域,請回到檢查器中的「原型」標籤頁,並在畫布上選取您的可捲動群組。
您會在左側和右側看到一組捲動控制柄,用於水平捲動;在頂部和底部看到一組捲動控制柄,用於垂直捲動;在所有四個邊上看到一組捲動控制柄,用於多向捲動。點擊並拖曳控制柄以調整捲動區域的可見區域。
如果您發現群組超出畫板邊界,我們建議您使用 Symbol 實例而不是群組。
您可以手動調整包含可捲動群組的邊界,即使是沒有調整大小控制柄的邊緣也可以。方法是選取您的可捲動群組或 Symbol,開啟「原型」標籤頁,點擊「選取可捲動遮罩」圖示 ,然後在任何方向調整捲動區域的邊界。
請注意,您目前無法使用Alpha 遮罩來建立捲動區域。
如何在您的原型中建立和自訂捲動區域
建立可捲動畫板
首先,在工具列中開啟「插入」 ,然後為您的原型將在視口中顯示的固定視窗選取一個「範本」。或者,建立您自己的畫板範本以用作可捲動畫板。
接下來,增加畫板範本的高度(它在檢查器中的預設尺寸將顯示星號 * 表示您已調整其大小),並新增將在視口中捲動的額外圖層。
最後,預覽 您的原型,以查看調整大小後的畫板及其中的圖層如何在視口中捲動。
請務必使用畫板範本來建立可捲動畫板。如果您嘗試使用自訂畫板,您的原型將無法在應用程式、網頁應用程式和 iOS 應用程式中捲動。此外,請記住,可捲動畫板僅適用於垂直佈局。
您可以建立並新增固定元素到您的可捲動原型中,例如標籤頁和選單列。

如何建立垂直捲動原型