詳解Android如何實現(xiàn)好的彈層體驗效果
前言
當前 App 的設計趨勢越來越希望給用戶沉浸式體驗,這種設計會讓用戶盡量停留在當前的界面,而不需要太多的跳轉,這就需要引入彈層。比如,抖音引入購物功能后,就實現(xiàn)了在觀看視頻界面可以通過彈層完成加入購物車、下單操作,無需離開當前的視頻界面。本篇我們就來講講彈層這塊需要注意哪些用戶體驗。
彈層的形式選擇
彈層從形式上來說有中間彈層、左側彈層、右側彈層、底部彈層和頂部彈層,如下圖所示。

移動端經過這么多年的發(fā)展,不同的彈層的應用場景相對來說比較固定。因此,在選擇的時候,建議遵循現(xiàn)有的習慣來選擇合適的彈層。
- 中間彈層:通常用于詢問對話框形式,例如退出登錄、刪除操作的二次確認。
- 左側彈層:通常用于抽屜式的個人中心或設置界面,這種一般是底部欄無法放下個人中心類界面的時候一個不錯的選擇。
- 右側彈層:通常用于做數據篩選,典型的場景是購物類應用的精準篩選。
- 底部彈層:這種非常常見,如我們提到的目前抖音的商品購買,還有像單選、多選、級聯(lián)選擇、時間選擇等等。
- 頂部彈層:頂部彈層一般也是用于篩選,比較常見的是列表表頭的篩選,或者導航欄帶類似 PC 端的下拉類的篩選。
這里需要提兩個比較通用的原則:
彈層出現(xiàn)的位置應當盡量靠近觸發(fā)交互的位置,比如點擊導航欄左上角的按鈕通常會從左側彈出。
蒙層的顏色要根據實際情況來定,一般都是黑色半透明的蒙層,但是主要面對是為了讓用戶能夠看清蒙層底下的內容,比如如果是在視頻播放頁面疊加蒙層就會影響用戶體驗了。
接下來我們依次來用 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 中 提供了兩個屬性來設置左側抽屜和右側抽屜彈層,對應的參數分別是 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)的效果如下圖所示。實用左側或右側彈層需注意三個體驗要素:
- 寬度:建議設置為屏幕寬度的3/4,這種寬度抽屜的顯示內容足夠寬,而底下的蒙層點擊區(qū)域寬度也比較合適點擊退出彈層。
- 頂部內容區(qū)域需要注意留出一定的頭部位置(比如左側通常會放頭像+昵稱),一個是美觀,一個是要避免顯示內容碰到了手機屏幕的挖孔位置。
- 一般側邊彈層點擊蒙層都會支持收起,所以建議保留這個操作習慣,而不是非得點彈層的某個按鈕才關閉彈層。

頂部彈層
頂部彈層在 Flutter 中需要自己去實現(xiàn),一個比較好的方式是使用 showGeneralDialog來實現(xiàn)。這里有個技巧是實用 Column 組件可以讓內容區(qū)靠頂部,然后利用動畫實現(xiàn)從上往下滑的彈出效果。下面是實現(xiàn)代碼,實際通過這種方式可以實現(xiàn)底部,左側,右側和中間的彈層。
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毫秒;
- 如果是多選這種需要二次確認操作的,需要在頂部提供確認和取消按鈕;
- 適用選項不太多的場景,如果選擇的內容很多建議單獨跳轉到選擇頁面完成,并且支持模糊搜索匹配選項;
- 需要區(qū)分選中項,讓用戶知道之前的選項;
- 如果涉及到網絡請求,建議是在網絡請求完成后再關閉彈層,因為有可能操作失敗導致用戶需要再次操作。
總結
本篇介紹了各類彈層開發(fā)過程的體驗注意點,同時給出了示例代碼。隨著沉浸式體驗的推動,彈層會越來越多,因此建議各位開發(fā)同學也能夠多多思考彈層如何改善用戶體驗,雖然咱不是產品經理也不是設計師,但是從開發(fā)角度給產品和設計一些專業(yè)的意見,也是能夠“提升話語權”的,嘿嘿!
以上就是詳解Android如何實現(xiàn)好的彈層體驗效果的詳細內容,更多關于Android彈層的資料請關注腳本之家其它相關文章!
相關文章
android支付寶客戶端html5網頁無法自動關閉問題的解決方法
這篇文章主要為大家詳細介紹了android支付寶客戶端html5網頁無法自動關閉問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04
Android中通過RxJava進行響應式程序設計的入門指南
響應式編程在Android中的運用是非常犀利的,比如在異常處理和調度器方面,這里我們將從生命周期等方面來講解Android中通過RxJava進行響應式程序設計的入門指南:2016-06-06
Android三種方式生成矢量圖之VectorDrawable類使用詳解
這篇文章主要介紹了Android三種方式生成矢量圖的VectorDrawable類,2014年6月26日的I/O?2014開發(fā)者大會上谷歌正式推出了Android?L,它帶來了全新的設計語言Material?Design,新的API也提供了這個類VectorDrawable2023-02-02
Android使用CountDownTimer實現(xiàn)倒計時效果
這篇文章主要為大家詳細介紹了Android使用CountDownTimer實現(xiàn)倒計時效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09
Android?Jetpack?組件LiveData源碼解析
這篇文章主要為大家介紹了Android?Jetpack?組件LiveData源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03
Android App中使用Pull解析XML格式數據的使用示例
這篇文章主要介紹了Android App中使用Pull解析XML格式數據的使用示例,Pull是Android中自帶的XML解析器,Java里也是一樣用:D需要的朋友可以參考下2016-04-04

