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

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

前言

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

彈層的形式選擇

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

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

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

這里需要提兩個(gè)比較通用的原則：

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

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

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

中間彈層

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

showDialog(

context:context,

barrierDismissible:false,

builder:(_)=AlertDialog(

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

content:constText('確認(rèn)要進(jìn)行此操作嗎？'),

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),

);

這里有一個(gè)體驗(yàn)要素是是否支持點(diǎn)擊底部的黑色蒙層隱藏彈層。通常來說，如果是二次確認(rèn)類操作，建議不要點(diǎn)擊蒙層隱藏。因?yàn)橛脩舻牟僮髂康男苑浅Ｃ鞔_，如果不小心誤觸的話，用戶還得再點(diǎn)擊一次。這個(gè)時(shí)候需要設(shè)置barrierDismissible為false。

左右抽屜彈層

在Flutter的Scaffold中提供了兩個(gè)屬性來設(shè)置左側(cè)抽屜和右側(cè)抽屜彈層，對應(yīng)的參數(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('抽屜示例')),

}

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

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

頂部彈層

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

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('選項(xiàng)1'),

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

ListTile(

title:constText('選項(xiàng)2'),

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

ListTile(

title:constText('選項(xiàng)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,

);

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

底部彈層

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

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