滾動(dòng)時(shí)的技巧

滾動(dòng)

基于模塊化

設(shè)計(jì)滾動(dòng)的動(dòng)作的時(shí)候建議用模塊去思考，但只是一種思考模型而不適合用視覺(jué)的形式去表達(dá)。

設(shè)計(jì)滾動(dòng)動(dòng)作時(shí)主要用到四個(gè)應(yīng)用程序欄 下面就是應(yīng)用程序欄實(shí)現(xiàn)滾動(dòng)時(shí)的四個(gè)模塊

• 狀態(tài)欄:24dp
• 導(dǎo)航欄：在手機(jī)上為 56dp ，在平板電腦和臺(tái)式機(jī)上使用 64dp
• 標(biāo)簽欄/搜索欄：48dp
• 適應(yīng)所需的縱橫比

彈性區(qū)域：為了給擴(kuò)展的應(yīng)用程序欄或圖片提供調(diào)節(jié)縱橫比的區(qū)域

為了適應(yīng)應(yīng)用程序欄伸縮時(shí)的所需的縱橫比

http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll1.png" alt="" /> http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_video1.png" alt="" />

標(biāo)準(zhǔn)的應(yīng)用程序欄

標(biāo)準(zhǔn)的應(yīng)用程序欄在手機(jī)端的高度為 56dp，在更大尺寸的屏幕上是 64dp 這里有兩種不同的方式來(lái)實(shí)現(xiàn)滾動(dòng)

1.應(yīng)用程序欄可以隨著內(nèi)容的滾動(dòng)褪出屏幕也可以在反向滾動(dòng)時(shí)恢復(fù)原態(tài)

2.應(yīng)用程序欄可以在它下面的內(nèi)容滾動(dòng)的時(shí)候在頂部保持不變

http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll2.png" alt="" />

標(biāo)簽

標(biāo)準(zhǔn)應(yīng)用程序欄可以被擴(kuò)大到容納標(biāo)簽或一個(gè)搜索框。使用模塊化的工作模式對(duì)實(shí)現(xiàn)滾動(dòng)很有益 你有兩種實(shí)現(xiàn)方式：

1.導(dǎo)航欄在滾動(dòng)出屏幕的時(shí)候標(biāo)簽欄在頂部保持不動(dòng)

2.應(yīng)用程序欄保持不動(dòng)，下面的內(nèi)容滾動(dòng)

http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll3.png" alt="" />

彈性區(qū)域

應(yīng)用程序欄為了能夠適應(yīng)較大的排版或圖片而具有彈性，添加了一個(gè)彈性區(qū)域

1.彈性區(qū)域可以收縮到只剩下導(dǎo)航欄。標(biāo)題也會(huì)在導(dǎo)航菜單里收縮到只剩下 20sp 當(dāng)反向滾動(dòng)的時(shí)候，彈性區(qū)域和標(biāo)題欄又恢復(fù)原樣了

2.整個(gè)的應(yīng)用程序欄都褪出屏幕。當(dāng)用戶反向滾動(dòng)的時(shí)候，導(dǎo)航欄又返回到了頂部 當(dāng)反向滾動(dòng)到頂部的時(shí)候，彈性區(qū)域和標(biāo)題也恢復(fù)原來(lái)位置了

http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll4.png" alt="" />

彈性區(qū)域中的圖片

在應(yīng)用程序欄中使用圖片時(shí)，可以用彈性區(qū)域來(lái)調(diào)節(jié)所需的縱橫比。在這個(gè)例子中，縱橫比是4：3。當(dāng)滾動(dòng)時(shí)，圖片被內(nèi)容推到上方使彈性空間縮小了。剩余的 20% 的圖片的彈性空間會(huì)被程序原本的顏色渲染

http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll5.png" alt="" />

原文：Settings 翻譯：aprildove