Figma交互篇 | 如何做頁面的滾動效果？
時間：2023-09-10 15:30:01 | 來源：網(wǎng)站運營
時間：2023-09-10 15:30:01 來源：網(wǎng)站運營
Figma交互篇 | 如何做頁面的滾動效果？：話不多說，先來看看本文教學(xué)的最終效果：
在figma中，如何讓頁面滾動起來，做這個交互說簡單不簡單，說難也不難。
拿我自己來說，我就會經(jīng)常忘記這個交互怎么做，今天分享這個既能強化自己的記憶，又能讓看到這篇文章的你學(xué)會，簡直就是一舉兩得之事！
為什么要做滾動的交互，那當(dāng)然是為了客戶爸爸更好的體驗，你給一張張效果圖還不如直接甩一個交互鏈接的體驗來的爽。
就先拿最簡單的PDF文件來講，也不是說只有這一個滾動的場景，涉及到滾動的頁面可多了。
比如微信聊天列表，是不是需要滾動；
比如看公眾號文章，是不是也需要滾動；
比如瀏覽文件也有滾動的效果，只要有手機的都懂，不管是鼠標(biāo)還是手機都需要滾動。
現(xiàn)在直接手把手教學(xué)，下面只是案例參考，可以復(fù)用于所有相同的滾動場景，首先做一個簡單的頁面：
基本的圖層結(jié)構(gòu)如下圖
如下圖，第 ② 步的意思是把 ① 固定在頁面頂部，勾選 ③ “ Fix position when scrolling ” 的意思是 “ 當(dāng)頁面滾動時，這個Frame（頂部）固定在頂部不動 ” 。
如果不做上面這一步，頂部也會跟著一起滾動了，就像下面這種效果：
接著添加滾動交互，“ Vertical scrolling ” 是垂直滾動的意思，“ Horizontal scrolling ” 是水平滾動的意思。使用谷歌瀏覽器的同學(xué)，可以右鍵翻譯中文。
然后我們點擊右上角有一個播放的按鈕看看效果：
大家有沒有發(fā)現(xiàn)，頁面還是滾動不了，這一步一定要銘記，不管Frame里面套了多少個小的Frame或者組。
我們一定要先把需要滾動的那個Frame（內(nèi)容滾動），拖動到整個頁面范圍內(nèi)，如下圖：
再來看看效果，完美！
一個簡單的滾動效果就完成了，垂直滾動跟水平滾動操作的邏輯是一樣的，希望大家能夠舉一反三。
公眾號：
會設(shè)計 平凡且普通的UI設(shè)計師，分享我的設(shè)計寶藏和小技巧！
公眾號后臺回復(fù)：【書】 免費領(lǐng)取 100+本，UI設(shè)計相關(guān)電子書?。?
往期原創(chuàng)文章：
在線咨詢