設(shè)計滾動的動作的時候建議用模塊去思考,但只是一種思考模型而不適合用視覺的形式去表達。
設(shè)計滾動動作時主要用到四個應(yīng)用程序欄 下面就是應(yīng)用程序欄實現(xiàn)滾動時的四個模塊
彈性區(qū)域:為了給擴展的應(yīng)用程序欄或圖片提供調(diào)節(jié)縱橫比的區(qū)域
為了適應(yīng)應(yīng)用程序欄伸縮時的所需的縱橫比
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="" />
標準的應(yīng)用程序欄在手機端的高度為 56dp,在更大尺寸的屏幕上是 64dp 這里有兩種不同的方式來實現(xiàn)滾動
1.應(yīng)用程序欄可以隨著內(nèi)容的滾動褪出屏幕也可以在反向滾動時恢復原態(tài)
2.應(yīng)用程序欄可以在它下面的內(nèi)容滾動的時候在頂部保持不變
http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll2.png" alt="" />
標準應(yīng)用程序欄可以被擴大到容納標簽或一個搜索框。使用模塊化的工作模式對實現(xiàn)滾動很有益 你有兩種實現(xiàn)方式:
1.導航欄在滾動出屏幕的時候標簽欄在頂部保持不動
2.應(yīng)用程序欄保持不動,下面的內(nèi)容滾動
http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll3.png" alt="" />
應(yīng)用程序欄為了能夠適應(yīng)較大的排版或圖片而具有彈性,添加了一個彈性區(qū)域
1.彈性區(qū)域可以收縮到只剩下導航欄。標題也會在導航菜單里收縮到只剩下 20sp 當反向滾動的時候,彈性區(qū)域和標題欄又恢復原樣了
2.整個的應(yīng)用程序欄都褪出屏幕。當用戶反向滾動的時候,導航欄又返回到了頂部 當反向滾動到頂部的時候,彈性區(qū)域和標題也恢復原來位置了
http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll4.png" alt="" />
在應(yīng)用程序欄中使用圖片時,可以用彈性區(qū)域來調(diào)節(jié)所需的縱橫比。在這個例子中,縱橫比是4:3。當滾動時,圖片被內(nèi)容推到上方使彈性空間縮小了。剩余的 20% 的圖片的彈性空間會被程序原本的顏色渲染
http://wiki.jikexueyuan.com/project/material-design/images/patterns_scrolling_scroll5.png" alt="" />