中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

Google Material Design設計規范和iOS設計規范中，都有從底部向上出現的浮層組件。在Android中，是底板（Bottom Sheet）；在iOS規范中，是上拉菜單（Action Sheets）和活動視圖（Activity Views）。由于內容較多，本文介紹MD中的底板組件；iOS中的兩個組件，將在下一篇文章中進行介紹。

Google Material Design Guideline

在MD規范中，底板分為兩種：固定底板和模態底板。它們的區別，主要在狀態是否固定——固定底板的狀態是固定的，和應用界面在同一層級；而模態底板的狀態是臨時的，其層級位于應用界面之上。舉個栗子：

另外，我們看一下MD規范給出的各部件的高度示意圖，可以發現，模態底板的高度是很高的（16DPs)；原圖中沒有給出固定底板的高度示意，我添加了一下（藍色部分,0DPs）：

MD規范中各部件的高度示意圖

也就是說，如果兩種底板同時出現，模態底板是壓在固定底板的上面的（別想多了，呵呵呵）。

另外還有一個區別：模態底板出現的時候，頁面會自帶蒙層；固定底板出現的時候沒有蒙層。

下面詳細說一下兩種底板。

固定底板（Persistent Modal Sheet）

固定底板主要用于以下兩種情況：

1. 在當前頁展示新內容；
2. 展示與主要內容同等重要的新內容。

固定底板示例

對于不同尺寸的設備，MD規范也給出了詳細的說明：

• 對于手機，不論正?；蛘邫M置的情況，固定底板都占滿100%的寬度。
• 對于平板，則要依據內容的多少決定固定底板是否占滿100%寬度：

平板上固定底板占滿100%的寬度

平板上固定底板未占滿100%的寬度

對于PC，MD規范建議設計師考慮把固定底板移到屏幕左側：

PC上的固定底板

模態底板（Modal Bottom Sheet）

模態底板的用法有以下三點需要注意：

1. 模態底板用列表或者網格的形式，呈現出操作選項。同樣具備這樣功能的是MD組件是菜單和簡單對話框；

三種組件示例

2. 展示一個符合當前情景的操作面板；

3. 強調模態底板中的元素（如下圖所示）。

模態底板有個比較特殊的地方：支持深層鏈接。啥意思呢？看下面的例子你就明白了：

在這個例子中，對于單詞“fervor”的釋義，是來自另外一個詞典應用的。但是當前的閱讀應用直接調用了詞典應用的釋義功能，在當前進行了展示。這就是deep link達到的效果。除了可以調用內容，deep link還可以調用別的應用中的操作。

MD規范指出，模態底板中可以存在一定程度的導航。比如點擊模態底板中的一條鏈接，可以在模態底板中進入下一級頁面。但是模態底板中，無法從下一級頁面返回上一級頁面，因為模態底板中沒有返回按鈕，只有一個關閉模態底板的按鈕。

模態底板左上角為關閉按鈕

在展現形式上，模態底板的高度，需要根據選項的高度來確定：

當選項過多，導致模態底板高度過高時，請保證模態底板不會覆蓋到頂部導航欄。模態底板中允許上下滾動的操作，以查看被遮擋的內容：

最后，MD中提到了四種關閉模態底板的方法：點擊系統返回鍵、向下拖動、點擊底板以外區域、點擊關閉按鈕：

后三種關閉方式

奇怪的是，規范中沒有提到可以上拉模態底板，使其達到全屏的狀態。但是實際應用中，好多應用都是這么做的。所以這一點在這也提一下，給大家參考。

以上是MD規范中對于底板（Bottom Sheet）的介紹。下一篇文章將介紹iOS中的上拉菜單和活動視圖。

雖然經過了仔細研究，但文章中難免會出現不足和遺漏之處，歡迎大家留言討論。

相關閱讀：

iOS和Android規范解析——底部浮層（下）

iOS和Android規范解析：警告框（Alerts）

iOS和Android規范解析：提示框（Toast）對比

#專欄作家#

沐風，微信公眾號：“沐風與體驗設計”。人人都是產品經理專欄作家，2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜，曾任職騰訊微生活、網易、宜信。6年交互設計經驗，專注設計領域，歡迎關注。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。