詳解Android如何實現(xiàn)好的彈層體驗效果

更新時間：2022年11月02日 09:48:43 作者：島上碼農(nóng)

當前?App?的設計趨勢越來越希望給用戶沉浸式體驗，這種設計會讓用戶盡量停留在當前的界面，而不需要太多的跳轉(zhuǎn)，這就需要引入彈層。本篇我們就來講講彈層這塊需要注意哪些用戶體驗

前言

當前 App 的設計趨勢越來越希望給用戶沉浸式體驗，這種設計會讓用戶盡量停留在當前的界面，而不需要太多的跳轉(zhuǎn)，這就需要引入彈層。比如，抖音引入購物功能后，就實現(xiàn)了在觀看視頻界面可以通過彈層完成加入購物車、下單操作，無需離開當前的視頻界面。本篇我們就來講講彈層這塊需要注意哪些用戶體驗。

彈層的形式選擇

彈層從形式上來說有中間彈層、左側(cè)彈層、右側(cè)彈層、底部彈層和頂部彈層，如下圖所示。

移動端經(jīng)過這么多年的發(fā)展，不同的彈層的應用場景相對來說比較固定。因此，在選擇的時候，建議遵循現(xiàn)有的習慣來選擇合適的彈層。

中間彈層：通常用于詢問對話框形式，例如退出登錄、刪除操作的二次確認。
左側(cè)彈層：通常用于抽屜式的個人中心或設置界面，這種一般是底部欄無法放下個人中心類界面的時候一個不錯的選擇。
右側(cè)彈層：通常用于做數(shù)據(jù)篩選，典型的場景是購物類應用的精準篩選。
底部彈層：這種非常常見，如我們提到的目前抖音的商品購買，還有像單選、多選、級聯(lián)選擇、時間選擇等等。
頂部彈層：頂部彈層一般也是用于篩選，比較常見的是列表表頭的篩選，或者導航欄帶類似 PC 端的下拉類的篩選。

這里需要提兩個比較通用的原則：

彈層出現(xiàn)的位置應當盡量靠近觸發(fā)交互的位置，比如點擊導航欄左上角的按鈕通常會從左側(cè)彈出。

蒙層的顏色要根據(jù)實際情況來定，一般都是黑色半透明的蒙層，但是主要面對是為了讓用戶能夠看清蒙層底下的內(nèi)容，比如如果是在視頻播放頁面疊加蒙層就會影響用戶體驗了。

接下來我們依次來用 Flutter 實現(xiàn)上述的5類彈層，并講講一些體驗要點。

中間彈層

中間彈層在 Flutter中可以通過showDialog 和 ShowCupertinoDialog(iOS 風格）實現(xiàn)，下面是示例代碼。

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 中提供了兩個屬性來設置左側(cè)抽屜和右側(cè)抽屜彈層，對應的參數(shù)分別是 drawer 和 endDrawer。我們來看看具體的代碼。

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('抽屜示例')),
  );
}

實現(xiàn)的效果如下圖所示。實用左側(cè)或右側(cè)彈層需注意三個體驗要素：

寬度：建議設置為屏幕寬度的3/4，這種寬度抽屜的顯示內(nèi)容足夠?qū)?，而底下的蒙層點擊區(qū)域?qū)挾纫脖容^合適點擊退出彈層。
頂部內(nèi)容區(qū)域需要注意留出一定的頭部位置（比如左側(cè)通常會放頭像+昵稱），一個是美觀，一個是要避免顯示內(nèi)容碰到了手機屏幕的挖孔位置。
一般側(cè)邊彈層點擊蒙層都會支持收起，所以建議保留這個操作習慣，而不是非得點彈層的某個按鈕才關(guān)閉彈層。

頂部彈層

頂部彈層在 Flutter 中需要自己去實現(xiàn)，一個比較好的方式是使用 showGeneralDialog來實現(xiàn)。這里有個技巧是實用 Column 組件可以讓內(nèi)容區(qū)靠頂部，然后利用動畫實現(xiàn)從上往下滑的彈出效果。下面是實現(xiàn)代碼，實際通過這種方式可以實現(xiàn)底部，左側(cè)，右側(cè)和中間的彈層。

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詳解有過介紹，這里就不再講具體實現(xiàn)了。說一下底部彈層的幾個體驗要點：

彈出方向從底部往上彈出，動畫時長建議200-300毫秒；
如果是多選這種需要二次確認操作的，需要在頂部提供確認和取消按鈕；
適用選項不太多的場景，如果選擇的內(nèi)容很多建議單獨跳轉(zhuǎn)到選擇頁面完成，并且支持模糊搜索匹配選項；
需要區(qū)分選中項，讓用戶知道之前的選項；
如果涉及到網(wǎng)絡請求，建議是在網(wǎng)絡請求完成后再關(guān)閉彈層，因為有可能操作失敗導致用戶需要再次操作。

總結(jié)

本篇介紹了各類彈層開發(fā)過程的體驗注意點，同時給出了示例代碼。隨著沉浸式體驗的推動，彈層會越來越多，因此建議各位開發(fā)同學也能夠多多思考彈層如何改善用戶體驗，雖然咱不是產(chǎn)品經(jīng)理也不是設計師，但是從開發(fā)角度給產(chǎn)品和設計一些專業(yè)的意見，也是能夠“提升話語權(quán)”的，嘿嘿！

以上就是詳解Android如何實現(xiàn)好的彈層體驗效果的詳細內(nèi)容，更多關(guān)于Android彈層的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: