底部動(dòng)作條

底部動(dòng)作條

底部動(dòng)作條(Bottom Sheets)是一個(gè)從屏幕底部邊緣向上滑出的一個(gè)面板，使用這種方式向用戶呈現(xiàn)一組功能。底部動(dòng)作條呈現(xiàn)了簡(jiǎn)單、清晰、無需額外解釋的一組操作。

使用

底部動(dòng)作條(Bottom Sheets)特別適合有三個(gè)或者三個(gè)以上的操作需要提供給用戶選擇、并且不需要對(duì)操作有額外解釋的情景。如果只有兩個(gè)或者更少的操作，或者需要詳加描述的，可以考慮使用菜單(Menu)或者對(duì)話框替代。

底部動(dòng)作條(Bottom Sheets)可以是列表樣式的也可以是宮格樣式的。宮格布局可以增加視覺的清晰度。

你可以使用底部動(dòng)作條(Bottom Sheets)展示和其 app 相關(guān)的操作，比如做為進(jìn)入其他 app 的入口(通過 app 的 icon 進(jìn)入)。

內(nèi)容

在一個(gè)標(biāo)準(zhǔn)的列表樣式的底部動(dòng)作條(Bottom Sheets)中，每一個(gè)操作應(yīng)該有一句描述和一個(gè)左對(duì)齊的 icon。如果需要的話，也可以使用分隔符對(duì)這些操作進(jìn)行邏輯分組，也可以為分組添加標(biāo)題或者副標(biāo)題。

一個(gè)可以滾動(dòng)的宮格樣式的底部動(dòng)作條，可以用來包含標(biāo)準(zhǔn)的分享操作。

http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheet-for-mobile-1a_large_mdpi.png" alt="圖1" /> http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheet-for-mobile-1b_large_mdpi.png" alt="圖2" />

行為

顯示底部動(dòng)作條的時(shí)候，動(dòng)畫應(yīng)該從屏幕底部邊緣向上展開。根據(jù)上一步的內(nèi)容，向用戶展示用戶上一步的操作之后能夠繼續(xù)操作的內(nèi)容，并提供模態(tài)[1]的選擇。點(diǎn)擊其他區(qū)域會(huì)使得底部動(dòng)作條伴隨下滑的動(dòng)畫關(guān)閉掉。如果這個(gè)窗口包含的操作超出了默認(rèn)的顯示區(qū)域，這個(gè)窗口需要可以滑動(dòng)。滑動(dòng)操作應(yīng)當(dāng)向上拉起這個(gè)動(dòng)作條的內(nèi)容，甚至可以覆蓋整個(gè)屏幕。當(dāng)窗口覆蓋整個(gè)屏幕的時(shí)候，需要在上部的標(biāo)題欄左側(cè)增加一個(gè)收起按鈕。

規(guī)格

下面的字體、顏色和區(qū)域規(guī)格都是提供給手機(jī)app使用的。

http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-actionsheet_08_large_mdpi.png" alt="圖1" /> http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-actionsheet_08b_large_mdpi.png" alt="圖2" />

(上圖)列表樣式的底部動(dòng)作條規(guī)格設(shè)計(jì)

http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-actionsheet_12_large_mdpi.png" alt="圖1" /> http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-actionsheet_12b_large_mdpi.png" alt="圖2" />

(上圖)帶頭部的列表樣式的底部動(dòng)作條規(guī)格設(shè)計(jì)

http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-bottomsheet_10a_large_mdpi.png" alt="圖1" /> http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-bottomsheet_10b_large_mdpi.png" alt="圖2" />

http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-actionsheet_20_large_mdpi.png" alt="圖1" /> http://wiki.jikexueyuan.com/project/material-design/images/components-bottomsheets-content-actionsheet_20b_large_mdpi.png" alt="圖2" />

(上圖)包含跳轉(zhuǎn)到其他程序入口的標(biāo)準(zhǔn)宮格樣式的底部動(dòng)作條規(guī)格設(shè)計(jì)

[1]模態(tài)：模態(tài)的對(duì)話框需要用戶必須選擇一項(xiàng)操作后才會(huì)消失，比如 Alert 確認(rèn)等；而非模態(tài)的對(duì)話框并不需要用戶必須選擇一項(xiàng)操作才會(huì)消失，比如頁面上彈出的 Toast 提示。

原文：Bottom Sheets 翻譯：com360 校對(duì)：阿九(Siton)