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

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

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

一、用法

底部表單是主要用于移動(dòng)的輔助界面。

它們主要由兩種類(lèi)型：

·?標(biāo)準(zhǔn)底部表單顯示補(bǔ)充屏幕主要內(nèi)容的內(nèi)容，當(dāng)用戶(hù)與主要內(nèi)容交互時(shí)，它們?nèi)匀皇强梢?jiàn)的。

·?模態(tài)底部表單是一種替代的內(nèi)聯(lián)菜單或簡(jiǎn)單的對(duì)話(huà)框在移動(dòng)，為更長(zhǎng)的描述，和圖標(biāo)提供空間，為了與基本內(nèi)容進(jìn)行交互，必須將它們排除在外。

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

△ 原則

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

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

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

二、分析

1.Sheet

2.Contents

3.Scrim (Modal only)

△ 表單

底部工作表固定在屏幕的底部邊緣，并出現(xiàn)在其他UI元素的前面，它們?cè)谝苿?dòng)設(shè)備上是全寬度的，在平板電腦或桌面上可以是嵌入式的，也可以是全寬度的。

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

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

△ 內(nèi)容

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

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

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

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

三、行為

△ 可見(jiàn)

· 初始狀態(tài)

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

· 全屏

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

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

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

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

△ 用法

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

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

△ 行為

· 互動(dòng)

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

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

△ 位置

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

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

在桌面上，由于屏幕寬度大于屏幕高度，此地圖的位置信息顯示在輔助頁(yè)中。

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

△ 用法

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

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

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

△ 行為

· 底層與分割線(xiàn)

模態(tài)底片的默認(rèn)高度為16 dp，這個(gè)高度允許它們出現(xiàn)在大多數(shù)UI元素之上，并允許它們?cè)谡麄€(gè)UI前面被拉起，以顯示更多選項(xiàng)。

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

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

· 可見(jiàn)度

為了提供對(duì)其頂部動(dòng)作的初始訪(fǎng)問(wèn)，模態(tài)底片的初始垂直位置被限制在屏幕高度的50%。

然后可以將超過(guò)屏幕高度的50%的模態(tài)底片拉過(guò)整個(gè)屏幕，在內(nèi)部滾動(dòng)以訪(fǎng)問(wèn)它們剩余的項(xiàng)。

Right：有幾個(gè)項(xiàng)目的模態(tài)表單打開(kāi)時(shí)是完全可見(jiàn)的；Wrong：不要在打開(kāi)時(shí)用全屏幕制作高底部表單，這使得移動(dòng)設(shè)備上的用戶(hù)立即無(wú)法獲得最高的內(nèi)容。

· 控制

當(dāng)用戶(hù)操作(如點(diǎn)擊按鈕或溢出圖標(biāo))觸發(fā)時(shí)，會(huì)出現(xiàn)模式底部表單。他們可以通過(guò)下列方式被取消：

1.點(diǎn)擊底部工作表中的菜單項(xiàng)或操作

2.單擊底部界面

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

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

左：?點(diǎn)擊劃線(xiàn)會(huì)使模態(tài)底部表單關(guān)閉；右：通過(guò)滑動(dòng)一個(gè)模態(tài)底部表單可以關(guān)閉這個(gè)表單。?

△ 位置

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

在較大屏幕上，使用菜單或?qū)υ?huà)框創(chuàng)建與觸發(fā)UI元素的清晰的表單。

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

END.THANKS FOR YOUR READING~

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