Material Design — 底部動作條(Bottom Sheets)

自上次參加完回音分享會后,我下定決心要洗心革面乖乖打基礎,于是開啟了這個part,爭取兩個月不間斷更新,寫完Material Design與iOS中的組件(順便學學英語),以便今后在使用的時候完全不虛!

寫完底部導航的文章以后,發現自己竟然用了3個小時,而這三個小時中有兩個小時在斟酌:這句話我該怎么翻譯?

ok,fine,學交互的時候還能學英語,這感覺也是蠻好的。

底部動作條(Bottom Sheets)

Material Design鏈接:底部動作條

底部動作條

底部動作條從屏幕底部向上滑出,以顯示更多的內容。

持久底部動作條(Persistent bottom sheets)融入app 來展示所支持的內容。

模態底部動作條(Modal bottom sheets)?主要用于移動設備,也可以展示其他app的深度鏈接的內容。

交互

只有當用戶有發起的動作時才出現。

海拔

持久底部動作條:與應用程序相同的海拔

模態底部動作條:高于app

替代

Simple dialogs

Menus


用法

底部動作條有兩種主要類型:

持久底部動作條(Persistent bottom sheets)展示的是App中的內容。

模態底部動作條(Modal bottom sheets)是Menus或Simple dialogs的替代品,它們還可以展示其他app的深度鏈接的內容,主要用于移動端。

可以用海拔來區分模態底部動作條與持久底部動作條。模態底部動作條停留在比app內容更高的高度;而持久底部動作條與app保持在相同的海拔,并與其內容融為一體。

在空間不受限制的較大的屏幕上,使用替代的表面和組件,例如Menus或Simple dialogs可能比底部動作條更合適。

左:模態底部動作條 ? ?右:持久底部動作條

持久底部動作條(Persistent bottom sheets)

持久底部動作條用來展示app里用來補充主頁面的內容。即使不常用,仍然要保持可見狀態,并且需與應用程序保持在同一高度,并融入其內容。

用法

·在一個獨特的表面上引入新內容

·展示最主要的內容

與懸浮動作按鈕搭配能縱向移動

移動端

無論是豎屏還是橫屏,持久底部動作條都是完整的寬度。

平板/pc

持久底部動作條要么是完整的寬度,要么是嵌入的。這取決于它們包含內容的寬度、整體的UI、底層的內容和風格的選擇。

左:完整的寬度 ? ?右:嵌入的

在pc端的桌面,持久底部動作條可以轉變為其他的動作條樣式。

在pc端,左側顯示內容可能更加合適

模態底部動作條(Modal bottom sheets)

模態底部動作條可代替Menus或Simple Dialogs,可以展示其他app的深度鏈接的內容。它們出現在其他UI元素之上,必須被關閉才能與底層內容交互。當一個模態底部動作條滑到屏幕上時,屏幕的其余部分就會變暗,把焦點集中在動作條上。

左:包含列表 ? ?右:包含網格

用法

模態底部動作條可以:

·作為Menus或Simple Dialogs的替代,展示列表或網格中的動作;

·當Menu沒有明顯的入口時,顯示快捷菜單;

·優先考慮所包含的元素的可見性。

模態底部動作條可以顯示長名稱的菜單項,帶說明的菜單項,帶icon的菜單項。

當顯示菜單項時,完全擴展的模態底部動作條與app 導航欄的最底端要保持最小8dp的距離。

左:帶icon ? ?右:帶說明性文字

深度鏈接

模態底部動作條可以用來展示另一個app的內容或控件,這個需要占完整的寬度。(這個iOS是做不到的...)

可以不打開詞典app就直接展示其中的內容
不離開右邊的app能直接展示左邊的app內容

模態底部動作條可能包含在另一個app中進行深度導航的鏈接,這些鏈接可能是:

·允許用戶在另一個app中訪問多個層級。

·回到他們開始的層級。

但是,這些深層鏈接可能不允許用戶在打開的app中導航:它們可能只停留在初始層級,更深入,或者返回到初始層級。

或者,深層鏈接可以將用戶從底部動作條導航到另一個視圖。

為了使底部動作條中的的深層鏈接向上導航,通過溢出菜單提供一個明確的鏈接來打開app。底部動作條中的動作可能會導致打開父級app,比如使用“添加聯系人”操作。

(這一段根本沒看懂...也不知道自己翻譯的是個啥...希望大神來指點我一下

However, these deep links may not allow the user to navigate upward in the hierarchy: they may only stay at the initial level, go deeper, or travel back to the initial level.

Alternatively, deep links may navigate the user away from the bottom sheet entirely, into another view.

To enable upward navigation from the bottom sheet’s deep links, offer an explicit link to open the application via an overflow menu. Actions within the deep-linked bottom sheet may result in opening the parent application, such as with an “add contact” action.)

左:全展開的模態底部動作條返回應該為“X” ? ?右:app到下一層級時返回用箭頭

移動端

模態底部動作條主要用作移動端的組件,無論是豎屏還是橫屏,都是完整的寬度。

左:長列表可滾動,最多16:9 ? ?右:不能與導航欄重疊,保留一個區域讓用戶取消它

平板/pc(并不適用)

考慮在大屏幕上選擇別的組件替代模態底部動作條,因為模態底部動作條可能會遠離用戶點擊或觸摸到的地方,它會將用戶的注意力分散到屏幕的兩個不同部分。

由于桌面空間的約束更少,它可以支持多種方式來替換模態底部動作條。

比如用Menu,點擊后就在視覺焦點部分出現

大屏幕中的模態底部動作條可使用適當的樣式來增加額外的空間。

左:網格底部動作條 ? ?右:長列表底部動作條

行為

1、底部動作條可以通過向下滑動底部動作條來關閉;

2、通過點擊一個明顯的控制按鈕,例如在app導航欄中的“X”,或者觸摸Android系統的后退按鈕;

3、模態底部動作條也可以通過點擊動作條以外的區域關閉。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容