#我是一個可愛的搬磚工系列# 嘗試對照英文翻譯學(xué)習(xí)MD的組件設(shè)計缸夹，借此加深各種組件的應(yīng)用~

Material Design鏈接：Material Design——Sheets: bottom

底部表單是包含附加內(nèi)容的界面站欺，固定在屏幕底部兑徘。

一鞋囊、用法

底部表單是主要用于移動的輔助界面踪古。

它們主要由兩種類型：

·?標(biāo)準(zhǔn)底部表單顯示補充屏幕主要內(nèi)容的內(nèi)容湘捎，當(dāng)用戶與主要內(nèi)容交互時尿招，它們?nèi)匀皇强梢姷摹?/p>

·?模態(tài)底部表單是一種替代的內(nèi)聯(lián)菜單或簡單的對話框在移動矾柜，為更長的描述阱驾，和圖標(biāo)提供空間，為了與基本內(nèi)容進行交互怪蔑，必須將它們排除在外里覆。

標(biāo)準(zhǔn)底部表單：用戶可以與底部頁和屏幕內(nèi)容的其余部分進行交互；模態(tài)底部表單：用戶必須與模態(tài)表單進行交互或取消缆瓣。??

△ 原則

· 支持?底部表單包含補充屏幕主UI區(qū)域的內(nèi)容

· 靈活的?底部表單可以顯示各種各樣的內(nèi)容和布局

·?人類環(huán)境改造學(xué)的?在移動設(shè)備上喧枷，底部表單很容易觸及

二、分析

1.Sheet

2.Contents

3.Scrim (Modal only)

△ 表單

底部工作表固定在屏幕的底部邊緣捆愁，并出現(xiàn)在其他UI元素的前面割去，它們在移動設(shè)備上是全寬度的，在平板電腦或桌面上可以是嵌入式的昼丑，也可以是全寬度的呻逆。

Right：底片固定在屏幕的底部邊緣；Wrong：不要從屏幕邊緣嵌入底片的所有側(cè)面菩帝，這會使它很難看到咖城，并讓它與其他組件(如snackbar)混淆。

桌面上的標(biāo)準(zhǔn)底呼奢。片插圖

△ 內(nèi)容

底部表單可以顯示各種各樣的內(nèi)容和布局宜雀，從菜單項(在列表和網(wǎng)格布局中)到根據(jù)布局網(wǎng)格布局的補充內(nèi)容。

當(dāng)工作表被拖到視圖中時握础，最初出現(xiàn)在屏幕邊緣下面的底部工作表的內(nèi)容可以變得可見辐董。

左：模態(tài)底部工作表中的操作菜單(在列表中)；右：應(yīng)用程序菜單(在網(wǎng)格布局中)在模態(tài)底部頁中禀综。

左：這個標(biāo)準(zhǔn)表單中的位置信息最初延伸到屏幕邊緣以下简烘，它可以被拖進視野?；右：?此音樂播放器已完全可見定枷，以顯示在播放機下面的軌道列表孤澎。

三、行為

△ 可見

· 初始狀態(tài)

當(dāng)?shù)灼畛醭霈F(xiàn)在屏幕上時欠窒，它們可能包含延伸到屏幕底部以下的內(nèi)容覆旭，他們可以被滑動或拖上去成為全屏，根據(jù)內(nèi)容岖妄，底部頁也可以通過點擊其表面或擴展圖標(biāo)成為全屏型将。

· 全屏

當(dāng)全屏?xí)r，底部頁可以在內(nèi)部滾動荐虐，以顯示更多的內(nèi)容七兜，他們顯示一個頂部的應(yīng)用程序條，它可以提升滾動缚俏。

在頂部的應(yīng)用程序欄中惊搏，全屏標(biāo)準(zhǔn)底部頁包含一個折疊圖標(biāo)，該圖標(biāo)將工作表返回到其初始位置忧换。全屏幕模式下的工作表包含一個解散圖標(biāo)恬惯，它可以將工作表完全從視圖中刪除。

左：部分可見的底部表單可以拖到全屏視圖和內(nèi)部滾動亚茬；右：在一個全高度模態(tài)底部表單中包含一個關(guān)閉的允許性酪耳，以排除該頁。

四刹缝、標(biāo)準(zhǔn)底部表單

△ 用法

標(biāo)準(zhǔn)底片與屏幕的主UI區(qū)域共存碗暗，允許同時查看和與兩個區(qū)域交互。當(dāng)主UI區(qū)域中的內(nèi)容經(jīng)常被滾動或平移時梢夯，它們通常用于使功能或次要內(nèi)容在屏幕上可見言疗。

左：標(biāo)準(zhǔn)底部表單可以包含在屏幕下方繼續(xù)的補充內(nèi)容，例如地圖上的位置信息 颂砸；右：使用標(biāo)準(zhǔn)底部表單來保存音樂應(yīng)用程序中的媒體控制等重要功能噪奄。

△ 行為

· 互動

當(dāng)用戶與主UI區(qū)域或工作表本身交互時，標(biāo)準(zhǔn)底部工作表仍在屏幕上人乓。它們的默認(rèn)高度為8dp勤篮，允許主UI區(qū)域后面的內(nèi)容滾動或平移，并允許工作表在全屏?xí)r暫時覆蓋主UI區(qū)域色罚。在全屏高度碰缔，它們應(yīng)該在應(yīng)用程序欄中包含一個折疊圖標(biāo)，以返回到它們的初始位置戳护。

左：?標(biāo)準(zhǔn)底片高于主ui區(qū)域金抡，因此其可見度不受搖攝或滾動的影響；右：當(dāng)用戶瀏覽可用的音樂時姑尺，這個標(biāo)準(zhǔn)底片中的音樂播放器仍然在屏幕上竟终。

△ 位置

移動設(shè)備上標(biāo)準(zhǔn)底片的內(nèi)容可以移動到較大屏幕尺寸的側(cè)板上，給出額外的水平空間切蟋。

在移動設(shè)備上统捶，由于屏幕寬度有限，此地圖的位置信息顯示在標(biāo)準(zhǔn)底片中柄粹。??

在桌面上喘鸟，由于屏幕寬度大于屏幕高度，此地圖的位置信息顯示在輔助頁中驻右。

五什黑、模態(tài)底部表單

△ 用法

模態(tài)底部表單提供了一組選擇，同時阻止與屏幕其余部分的交互堪夭，它們是移動上的內(nèi)聯(lián)菜單和簡單對話框的替代愕把，為內(nèi)容拣凹、圖標(biāo)和操作提供了更多的空間。

模態(tài)底部表單僅用于移動應(yīng)用程序恨豁。

左：模態(tài)底片可以用來代替菜單來顯示額外的屏幕操作 嚣镜；右：使用模態(tài)底部工作表提供到另一個應(yīng)用程序的深度鏈接。

△ 行為

· 底層與分割線

模態(tài)底片的默認(rèn)高度為16 dp橘蜜，這個高度允許它們出現(xiàn)在大多數(shù)UI元素之上菊匿，并允許它們在整個UI前面被拉起，以顯示更多選項计福。

模態(tài)底部表單會導(dǎo)致其背后的所有內(nèi)容和UI元素顯示一個SRIM跌捆，這表明它們不會響應(yīng)用戶交互。點擊底層界面或者底部表單來關(guān)閉視圖象颖。

Right：使用帶有模態(tài)底部工作表的可見文本通知用戶佩厚，他們不能與屏幕的其余部分交互；Wrong：不要用看不見的紙條作為模態(tài)底片力麸，這可能會誤導(dǎo)用戶與屏幕其他部分交互的能力可款。

· 可見度

為了提供對其頂部動作的初始訪問，模態(tài)底片的初始垂直位置被限制在屏幕高度的50%克蚂。

然后可以將超過屏幕高度的50%的模態(tài)底片拉過整個屏幕闺鲸，在內(nèi)部滾動以訪問它們剩余的項。

Right：有幾個項目的模態(tài)表單打開時是完全可見的埃叭；Wrong：不要在打開時用全屏幕制作高底部表單摸恍，這使得移動設(shè)備上的用戶立即無法獲得最高的內(nèi)容。

· 控制

當(dāng)用戶操作(如點擊按鈕或溢出圖標(biāo))觸發(fā)時赤屋，會出現(xiàn)模式底部表單立镶。他們可以通過下列方式被取消：

1.點擊底部工作表中的菜單項或操作

2.單擊底部界面

3.關(guān)閉底部表單

4.如果可用的話，在底部表單的頂部應(yīng)用程序欄中設(shè)置關(guān)閉按鈕

左：?點擊劃線會使模態(tài)底部表單關(guān)閉类早；右：通過滑動一個模態(tài)底部表單可以關(guān)閉這個表單媚媒。?

△ 位置

模態(tài)表單在小屏幕非常有效。

在較大屏幕上涩僻，使用菜單或?qū)υ捒騽?chuàng)建與觸發(fā)UI元素的清晰的表單缭召。

一種在移動(1)上使用底部表單的溢出菜單和在桌面(2)上使用內(nèi)聯(lián)菜單。

END.THANKS FOR YOUR READING~

如有不當(dāng)逆日，還請多多指教~