沉浸式彈層越來越多，開發該怎麼做好彈層體驗？
theme: v-green highlight: atom-one-dark
本文為掘金社群首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！
前言
當前 App 的設計趨勢越來越希望給使用者沉浸式體驗，這種設計會讓使用者儘量停留在當前的介面，而不需要太多的跳轉，這就需要引入彈層。比如，抖音引入購物功能後，就實現了在觀看視訊介面可以通過彈層完成加入購物車、下單操作，無需離開當前的視訊介面。本篇我們就來講講彈層這塊需要注意哪些使用者體驗。
彈層的形式選擇
彈層從形式上來說有中間彈層、左側彈層、右側彈層、底部彈層和頂部彈層，如下圖所示。
移動端經過這麼多年的發展，不同的彈層的應用場景相對來說比較固定。因此，在選擇的時候，建議遵循現有的習慣來選擇合適的彈層。
- 中間彈層：通常用於詢問對話方塊形式，例如退出登入、刪除操作的二次確認。
- 左側彈層：通常用於抽屜式的個人中心或設定介面，這種一般是底部欄無法放下個人中心類介面的時候一個不錯的選擇。
- 右側彈層：通常用於做資料篩選，典型的場景是購物類應用的精準篩選。
- 底部彈層：這種非常常見，如我們提到的目前抖音的商品購買，還有像單選、多選、級聯選擇、時間選擇等等。
- 頂部彈層：頂部彈層一般也是用於篩選，比較常見的是列表表頭的篩選，或者導航欄帶類似 PC 端的下拉類的篩選。
這裡需要提兩個比較通用的原則：
- 彈層出現的位置應當儘量靠近觸發互動的位置，比如點選導航欄左上角的按鈕通常會從左側彈出。
- 蒙層的顏色要根據實際情況來定，一般都是黑色半透明的蒙層，但是主要面對是為了讓使用者能夠看清蒙層底下的內容，比如如果是在視訊播放頁面疊加蒙層就會影響使用者體驗了。
接下來我們依次來用 Flutter 實現上述的5類彈層，並講講一些體驗要點。
中間彈層
中間彈層在 Flutter中可以通過showDialog 和 ShowCupertinoDialog(iOS 風格）實現，下面是示例程式碼。
dart
showDialog(
context: context,
barrierDismissible: false,
builder: (_) => AlertDialog(
title: const Text('操作提醒'),
content: const Text('確認要進行此操作嗎？'),
actionsAlignment: MainAxisAlignment.end,
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('取消'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'刪除',
style: TextStyle(color: Colors.red),
),
),
],
),
);
這裡有一個體驗要素是是否支援點選底部的黑色蒙層隱藏彈層。通常來說，如果是二次確認類操作，建議不要點選蒙層隱藏。因為使用者的操作目的性非常明確，如果不小心誤觸的話，使用者還得再點選一次。這個時候需要設定barrierDismissible為 false。
左右抽屜彈層
在 Flutter 的 Scaffold 中 提供了兩個屬性來設定左側抽屜和右側抽屜彈層，對應的引數分別是 drawer 和 endDrawer。我們來看看具體的程式碼。
dart
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('左右抽屜彈層'),
backgroundColor: Colors.red[800],
leading: Builder(builder: (context) {
return IconButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
icon: const Icon(
Icons.menu,
),
);
}),
actions: [
Builder(builder: (context) {
return IconButton(
onPressed: () {
Scaffold.of(context).openEndDrawer();
},
icon: const Icon(
Icons.filter_list_alt,
),
);
}),
],
),
drawer: Container(
width: MediaQuery.of(context).size.width * 3 / 4,
color: Colors.white,
child: Center(
child: TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('收起'),
),
),
),
endDrawer: Container(
width: MediaQuery.of(context).size.width * 3 / 4,
color: Colors.blue,
child: Center(
child: TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'收起',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
body: const Center(child: Text('抽屜示例')),
);
}
實現的效果如下圖所示。實用左側或右側彈層需注意三個體驗要素：
- 寬度：建議設定為螢幕寬度的3/4，這種寬度抽屜的顯示內容足夠寬，而底下的蒙層點選區域寬度也比較合適點選退出彈層。
- 頂部內容區域需要注意留出一定的頭部位置（比如左側通常會放頭像+暱稱），一個是美觀，一個是要避免顯示內容碰到了手機螢幕的挖孔位置。
- 一般側邊彈層點選蒙層都會支援收起，所以建議保留這個操作習慣，而不是非得點彈層的某個按鈕才關閉彈層。
頂部彈層
頂部彈層在 Flutter 中需要自己去實現，一個比較好的方式是使用 showGeneralDialog來實現。這裡有個技巧是實用 Column 元件可以讓內容區靠頂部，然後利用動畫實現從上往下滑的彈出效果。下面是實現程式碼，實際通過這種方式可以實現底部，左側，右側和中間的彈層。
dart
showGeneralDialog(
context: context,
barrierDismissible: true,
transitionDuration: const Duration(milliseconds: 300),
barrierLabel: MaterialLocalizations.of(context).dialogLabel,
barrierColor: Colors.black.withOpacity(0.5),
pageBuilder: (context, _, __) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Card(
margin: const EdgeInsets.all(0),
child: ListView(
shrinkWrap: true,
children: <Widget>[
ListTile(
title: const Text('選項 1'),
onTap: () => Navigator.of(context).pop('1'),
),
ListTile(
title: const Text('選項2'),
onTap: () => Navigator.of(context).pop('2'),
),
ListTile(
title: const Text('選項3'),
onTap: () => Navigator.of(context).pop('3'),
),
],
),
),
),
],
);
},
transitionBuilder:
(context, animation, secondaryAnimation, child) {
return SlideTransition(
position: CurvedAnimation(
parent: animation,
curve: Curves.easeOut,
).drive(Tween<Offset>(
begin: const Offset(0, -1.0),
end: Offset.zero,
)),
child: child,
);
},
);
效果如下所示，頂部彈層彈出的方向最好是從上到下，如果是從下到上的話移動距離過長，會覺得很突兀。
底部彈層
底部彈層和頂部彈層其實是類似的，而且更為常見一點。之前在文章底部彈窗ModelBottomSheet詳解有過介紹，這裡就不再講具體實現了。說一下底部彈層的幾個體驗要點：
- 彈出方向從底部往上彈出，動畫時長建議200-300毫秒；
- 如果是多選這種需要二次確認操作的，需要在頂部提供確認和取消按鈕；
- 適用選項不太多的場景，如果選擇的內容很多建議單獨跳轉到選擇頁面完成，並且支援模糊搜尋匹配選項；
- 需要區分選中項，讓使用者知道之前的選項；
- 如果涉及到網路請求，建議是在網路請求完成後再關閉彈層，因為有可能操作失敗導致使用者需要再次操作。
總結
本篇介紹了各類彈層開發過程的體驗注意點，同時給出了示例程式碼。隨著沉浸式體驗的推動，彈層會越來越多，因此建議各位開發同學也能夠多多思考彈層如何改善使用者體驗，雖然咱不是產品經理也不是設計師，但是從開發角度給產品和設計一些專業的意見，也是能夠“提升話語權”的，嘿嘿！
- 屌炸天！國外同行這樣用Chat GPT提高Flutter開發的效率！
- Flutter 增強版的頁面懸浮按鈕（FloatingActionButton）
- 介紹一個令強迫症討厭的小紅點元件
- 我用了幾行程式碼就搞定了介面變灰效果
- 不就是一個空白頁，有必要那麼講究嗎？
- 花裡胡哨的文字特效，你學會了嗎？
- 這一篇讓你搞定 Flutter 的資料表格
- 用 Flutter 輕鬆做個紅包介面
- 沉浸式彈層越來越多，開發該怎麼做好彈層體驗？
- 列表的載入過程很重要的！
- 這個表單打死我也不填！
- 例項講述開發中的圖片使用者體驗要點
- C 位出道按鈕的自我獨白
- Flutter 繪製3D效果動畫
- 封裝一個有趣的 Loading 元件
- 普通的載入千篇一律，有趣的 loading 萬里挑一
- 由點匯聚成字的動效炫極了
- 給滅霸點顏色看看
- 來看光影流動之美
- Flutter 實現背景圖片毛玻璃效果