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

第詳解Android如何實現(xiàn)好的彈層體驗效果目錄前言彈層的形式選擇中間彈層左右抽屜彈層頂部彈層底部彈層總結

前言

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

彈層的形式選擇

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

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

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

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

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

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

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

中間彈層

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

showDialog(

context:context,

barrierDismissible:false,

builder:(_)=AlertDialog(

title:constText('操作提醒'),

content:constText('確認要進行此操作嗎？'),

actionsAlignment:MainAxisAlignment.end,

actions:[

TextButton(

onPressed:(){

Navigator.of(context).pop();

child:constText('取消'),

TextButton(

onPressed:(){

Navigator.of(context).pop();

child:constText(

'刪除',

style:TextStyle(color:Colors.red),

);

這里有一個體驗要素是是否支持點擊底部的黑色蒙層隱藏彈層。通常來說，如果是二次確認類操作，建議不要點擊蒙層隱藏。因為用戶的操作目的性非常明確，如果不小心誤觸的話，用戶還得再點擊一次。這個時候需要設置barrierDismissible為false。

左右抽屜彈層

在Flutter的Scaffold中提供了兩個屬性來設置左側抽屜和右側抽屜彈層，對應的參數(shù)分別是drawer和endDrawer。我們來看看具體的代碼。

Widgetbuild(BuildContextcontext){

returnScaffold(

appBar:AppBar(

title:constText('左右抽屜彈層'),

backgroundColor:Colors.red[800],

leading:Builder(builder:(context){

returnIconButton(

onPressed:(){

Scaffold.of(context).openDrawer();

icon:constIcon(

Icons.menu,

actions:[

Builder(builder:(context){

returnIconButton(

onPressed:(){

Scaffold.of(context).openEndDrawer();

icon:constIcon(

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:constText('收起'),

endDrawer:Container(

width:MediaQuery.of(context).size.width*3/4,

color:Colors.blue,

child:Center(

child:TextButton(

onPressed:(){

Navigator.of(context).pop();

child:constText(

'收起',

style:TextStyle(

color:Colors.white,

body:constCenter(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:constDuration(milliseconds:300),

barrierLabel:MaterialLocalizations.of(context).dialogLabel,

barrierColor:Colors.black.withOpacity(0.5),

pageBuilder:(context,_,__){

returnColumn(

mainAxisAlignment:MainAxisAlignment.start,

children:Widget[

Container(

width:MediaQuery.of(context).size.width,

color:Colors.white,

child:Card(

margin:constEdgeInsets.all(0),

child:ListView(

shrinkWrap:true,

children:Widget[

ListTile(

title:constText('選項1'),

onTap:()=Navigator.of(context).pop('1'),

ListTile(

title:constText('選項2'),

onTap:()=Navigator.of(context).pop('2'),

ListTile(

title:constText('選項3'),

onTap:()=Navigator.of(context).pop('3'),

transitionBuilder:

(context,animation,secondaryAnimation,child){

returnSlideTransition(

position:CurvedAnimation(

parent:animation,

curve:Curves.easeOut,

).drive(TweenOffset(

begin:constOffset(0,-1.0),

end:Offset.zero,

child:child,

);

效果如下所示，頂部彈層彈出的方向最好是從上到下，如果是從下到上的話移動距離過長，會覺得很突兀。

底部彈層

底部彈層和頂部彈層其實是類似的，而且更為常見一點。之前在文章底部彈窗ModelBottomSheet詳解有過介紹，這里就不再講具體實現(xiàn)了。說一下底部彈層的幾個體驗要點：

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