国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

交互控件科普系列! Sheet 的常見樣式和設(shè)計注意事項總結(jié)

2019-9-2    資深UI設(shè)計者

還在頻繁地使用彈窗對用戶展示重要提示嗎?明知這樣有損體驗卻沒有更好的選擇嗎?那么不妨來試試干擾度更低,卻依然可以用于重要提示的 Sheet 控件吧。

什么是Sheets

Sheets 控件并非彈窗,通常會被熟稱為「浮層」或「浮窗」。

該控件在 iOS 和 Android 系統(tǒng)規(guī)范中都有相關(guān)定義,屬于多才多藝的控件,可以用于給予信息提示,也可用于展示更多的拓展信息。

從用于提示的角度來看,Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢?

1. 共同點

模態(tài)化

二者都可以設(shè)置模態(tài),當(dāng)模態(tài)控件顯示時,頁面背景會顯示深色遮罩,并立即打斷用戶當(dāng)前操作。

承載操作和信息

二者都可以承載豐富的操作和信息,支持嵌入列表、選擇器等控件及圖片、文本信息。

2. 不同點

觸發(fā)方式不同

Dialog 可以不通過用戶操作而自動觸發(fā),Sheet 必須通過用戶操作才可以觸發(fā)顯示,因此用戶對 Sheet 的顯示會更有預(yù)期。

關(guān)閉方式不同

Dialog 的關(guān)閉方式較少,通常會要求用戶進(jìn)行選項操作后才可關(guān)閉;Sheet 的關(guān)閉方式較多,對于用戶而言有更豐富的選擇權(quán)。

因此綜上所述,我們可以發(fā)現(xiàn),Sheet 對比 Dialog 的優(yōu)勢在于,它的顯示會更符合用戶的預(yù)期,它的干擾層度也會低于Dialog(因為更易關(guān)閉)。

  • Sheets 在 Google Material design 規(guī)范中被分為了 Bottom sheest 和 Side sheets 兩類;
  • 在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類。

下面就由我來依次詳解其特性和玩法吧。

Bottom sheets 底部浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內(nèi)容相關(guān)的更多信息(非模態(tài))、提供可交互的菜單或?qū)υ挘B(tài))或其它關(guān)鍵功能/任務(wù)的拓展。

2. 注意事項
  • Bottom sheet 通常用于 Android 豎屏場景,在 Android 橫屏場景建議使用 Side sheet。
  • 在 iOS 中不建議使用 Bottom sheet,建議使用原生的 Action sheets 或 Activity views。
3. 樣式類型

菜單樣式

可嵌套 Menus,展示多個選項內(nèi)容。

宮格樣式

可使用宮格布局,展示多個選項內(nèi)容。

迷你樣式(非模態(tài))

一個非模態(tài)底部浮窗可被設(shè)置固定展示在頁面底部,用戶可以隨時用它來對其它功能/任務(wù)進(jìn)行快捷操作,如進(jìn)入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。

4. 模態(tài)/非模態(tài)

非模態(tài)浮窗:如左下圖所示,非模態(tài)浮窗與內(nèi)容保持在同一層級,用戶可同時對內(nèi)容和浮窗進(jìn)行操作。

模態(tài)浮窗:如右下圖所示,模態(tài)浮窗層級高于內(nèi)容,背景深色顯示遮罩,用戶僅能對浮窗進(jìn)行操作。

5. 顯示與消失

顯示

浮窗顯示時從底部向上滑入,非模態(tài)浮窗顯示時不會打斷用戶操作,模態(tài)浮窗顯示時會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。

模態(tài)浮窗在以下情況下會消失:

  • 用戶觸發(fā)浮窗上的對應(yīng)操作(自定義);
  • 用戶點擊浮窗外的區(qū)域;
  • 用戶下拉浮窗達(dá)到收起閾值后(自定義);
  • 用戶點擊 Android 系統(tǒng)返回鍵。

非模態(tài)浮窗在以下情況下會消失:用戶選中浮窗上的對應(yīng)按鈕(自定義)。

6. 支持高度延伸

當(dāng)浮窗底部仍有未顯示的內(nèi)容時,可設(shè)置通過滑動或拖動浮窗來使其變?yōu)槿琳故荆⒃陧敳匡@示 Toolbar 來展示關(guān)閉/收起操作。

7. 支持深層鏈接

模態(tài)浮窗中可以展示其它應(yīng)用的深層鏈接內(nèi)容或操作,譬如調(diào)用 Google 翻譯。

8. 范例

抖音的評論功能使用的是模態(tài) Bottom sheet;百度地圖的路線切換功能使用的是非模態(tài) Bottom sheet。

Side sheets 側(cè)邊浮窗

專屬于 Android 的 Sheets 控件。

1. 使用場景

用于補充內(nèi)容相關(guān)的更多信息(非模態(tài))或提供可交互的列表信息(模態(tài))。

2. 注意事項
  • Bottom sheet 通常用于 Android 豎屏場景,在 Android 橫屏場景建議使用 Side sheet。
  • 在 iOS 中不建議使用 Bottom sheet,建議使用原生的 Action sheet 或 Activity views。
3. 樣式類型

菜單樣式:可嵌套 Menus,展示多個選項內(nèi)容。

宮格樣式:可使用宮格布局,展示多個選項內(nèi)容。

4. 模態(tài)/非模態(tài)

如左下圖所示,非模態(tài)浮窗與內(nèi)容保持在同一層級,用戶可同時對內(nèi)容和浮窗進(jìn)行操作(在移動端較少使用,通常用于 PC 端)。

如右下圖所示,模態(tài)浮窗層級高于內(nèi)容,背景深色顯示遮罩,用戶僅能對浮窗進(jìn)行操作。

5. 顯示與消失

顯示

浮窗顯示時從左/右邊緣滑入,非模態(tài)浮窗顯示時不會打斷用戶操作,模態(tài)浮窗顯示時會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向左/右邊緣滑出。

模態(tài)浮窗在以下情況下會消失:

  • 用戶觸發(fā)浮窗上的對應(yīng)操作(自定義);
  • 用戶點擊浮窗外的區(qū)域;
  • 用戶側(cè)拉浮窗達(dá)到收起閾值后(自定義);
  • 用戶點擊 Android 系統(tǒng)返回鍵。

非模態(tài)浮窗在以下情況下會消失:用戶選中浮窗上的對應(yīng)按鈕(自定義)。

6. 滑動說明

支持上下滑動,不支持左右滑動。

7. 范例

淘寶的篩選功能使用的是 Side sheet。

Action sheets 操作浮窗

專屬于 iOS 的 Sheets 控件。

1. 使用場景

用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項,如啟動某個任務(wù),或者確認(rèn)是否開始執(zhí)行某個可能具有破壞性的操作。

2. 注意事項

在 Android 中不建議使用 Action sheet,建議使用原生的 Bottom sheet 或 Simple dialog。

3. 樣式類型

如下所示,支持單個或多個操作的展示,以及說明文案的展示:

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。會在以下情況消失:

  • 用戶觸發(fā)浮窗上的對應(yīng)操作(自定義);
  • 用戶點擊浮窗外的區(qū)域;
  • 用戶點擊浮窗「取消」按鈕。
5. 顯示位置

豎屏?xí)r顯示在頁面底部,橫屏是居中顯示在頁面底部。

6. 范例

微信的選擇朋友圈發(fā)布類型及清除聊天記錄的二次確認(rèn),都是使用的 Action sheet。

Activity views 活動浮窗

專屬于 iOS 的 Sheets 控件。

1. 使用場景

用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項表,如復(fù)制、收藏或分享。

2. 注意事項

在 Android 中不建議使用 Activity views,建議使用原生的 Bottom sheet。

3. 樣式類型

列表樣式

宮格樣式

混合樣式

4. 顯示與消失

顯示

浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。

消失

浮窗消失時會向底部滑出。會在以下情況消失:

  • 用戶觸發(fā)浮窗上的對應(yīng)操作(自定義);
  • 用戶點擊浮窗外的區(qū)域;
  • 用戶下拉浮窗達(dá)到收起閾值后(自定義)。
5. 顯示位置

豎屏?xí)r顯示在頁面底部,橫屏是居中顯示在頁面底部。

6. 支持高度延伸

當(dāng)面板底部仍有未顯示的內(nèi)容時,可設(shè)置通過滑動或拖動面板來使其高度進(jìn)行延伸,從而展示更多信息。

7. 范例

愛奇藝的分享功能和泡泡圈選擇發(fā)布內(nèi)容類型,都使用的是 Activity view。

用法總結(jié)

建議針對非系統(tǒng)級或業(yè)務(wù)級的重要提示,使用 Sheets 控件進(jìn)行提示;Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。

另外在調(diào)用原生 Sheets 組件時,記得分端的差異性。

文章來源:優(yōu)設(shè)網(wǎng)

日歷

鏈接

個人資料

存檔