底部動作條(Bottom Sheets)

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

使用

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

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

你可以使用底部動作條(Bottom Sheets)展示和其他app相關的操作,比如做為進入其他app的入口(通過app的icon進入)。

內容

在一個標準的列表樣式的底部動作條(Bottom Sheets)中,每一個操作應該有一句描述和一個左對齊的icon。如果需要的話,也可以使用分隔符對這些操作進行邏輯分組,也可以為分組添加標題或者副標題。

一個可以滾動的宮格樣式的底部動作條,可以用來包含標準的分享操作。

圖1 圖2

行為

顯示底部動作條的時候,動畫應該從屏幕底部邊緣向上展開。根據上一步的內容,向用戶展示用戶上一步的操作之后能夠繼續操作的內容,并提供模態[1]的選擇。點擊其他區域會使得底部動作條伴隨下滑的動畫關閉掉。如果這個窗口包含的操作超出了默認的顯示區域,這個窗口需要可以滑動。滑動操作應當向上拉起這個動作條的內容,甚至可以覆蓋整個屏幕。當窗口覆蓋整個屏幕的時候,需要在上部的標題欄左側增加一個收起按鈕。

規格

下面的字體、顏色和區域規格都是提供給手機app使用的。

圖1 圖2

(上圖)列表樣式的底部動作條規格設計

圖1 圖2

(上圖)帶頭部的列表樣式的底部動作條規格設計

圖1 圖2

圖1 圖2

(上圖)包含跳轉到其他程序入口的標準宮格樣式的底部動作條規格設計

[1]模態:模態的對話框需要用戶必須選擇一項操作后才會消失,比如Alert確認等;而非模態的對話框并不需要用戶必須選擇一項操作才會消失,比如頁面上彈出的Toast提示。

原文:Bottom Sheets 翻譯:com360 校對:阿九(Siton)

四方棋牌官网app下载 排列三跨度走势图带连线图 贵州快三早上几点开始 山东群英会专家分析 炒股配资公司有哪些 6码复式三中三多少组 安徽体彩十一选五遗漏 陕西11选五玩法技巧 河北快三走势图手机版 排三和值连线走势图 贵州快3全天计划 北京pk拾赛车合法的吗 2020年股市会大跌嘛 深圳风采中奖条件 台湾宾果28盛大sd7799内部 秒速赛车在线计划 北京pk拾技巧与规律