設(shè)計(jì)滾動(dòng)的動(dòng)作的時(shí)候建議用模塊去思考,但只是一種思考模型而不適合用視覺的形式去表達(dá)。
設(shè)計(jì)滾動(dòng)動(dòng)作時(shí)主要用到四個(gè)應(yīng)用程序欄 下面就是應(yīng)用程序欄實(shí)現(xiàn)滾動(dòng)時(shí)的四個(gè)模塊
彈性區(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)用程序欄在手機(jī)端的高度為 56dp,在更大尺寸的屏幕上是 64dp 這里有兩種不同的方式來實(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)準(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="" />
應(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ù)原來位置了
http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll4.png" alt="" />
在應(yīng)用程序欄中使用圖片時(shí),可以用彈性區(qū)域來調(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="" />