久久中文无码精品,欧美性爱第1页

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊 | 登錄

交互實(shí)戰(zhàn)｜覆蓋層設(shè)計(jì)：彈出式半屏頁面和彈出式氣泡（下）

網(wǎng)易UEDC

2017-03-23

1 評(píng)論 23438 瀏覽 169 收藏

11 分鐘

上篇《交互實(shí)戰(zhàn)｜覆蓋層設(shè)計(jì)：對話框&浮層（上）》討論了“對話框”和“浮層”兩種覆蓋層中最為常見的樣式：對話框主要分為提示型和輸入型兩大類；浮層主要分為Toast和Snackbar兩類。在下篇中，想要討論一些不那么常用的覆蓋層交互形式：彈出式半屏頁面和彈出式氣泡。

1. 彈出式半屏頁面

彈出式半屏頁面其實(shí)并不是一種官方既有的交互形式，而是本文對iOS和Android平臺(tái)中相似交互形式的統(tǒng)稱。顧名思義，它通過彈出的半屏覆蓋層來反饋用戶操作，彈出式半屏頁面優(yōu)勢在于它既能承載較多內(nèi)容，又能保持上下文關(guān)系。

1.1 ActionSheets

ActionSheets是iOS平臺(tái)上的交互形式，在使用場景上與提示型對話框相似（提示型對話框的相關(guān)介紹見覆蓋層設(shè)計(jì)上篇），它可以用于二次確認(rèn)或呈現(xiàn)與當(dāng)前操作相關(guān)的多個(gè)選擇等。

觸發(fā)時(shí)，ActionSheets從下往上彈出；操作完成后從上往下收起。需要注意的是雖然點(diǎn)擊空白處也能夠退出ActionSheets，但iOS規(guī)范仍然建議始終為ActionSheet提供取消按鈕。

優(yōu)點(diǎn)：相比對話框而言，Action Sheets對用戶打擾程度較小。一般的對話框要求用戶必須做出選擇，當(dāng)用戶點(diǎn)擊了某功能按鍵或取消后對話框才消失；而ActionSheets 允許用戶點(diǎn)擊空白處取消操作。

建議盡量減少對話框的使用，如二次確認(rèn)和選擇菜單等場景，ActionSheets是很好的代替品。

1.1.1 二次確認(rèn)提示

（1）使用場景

通常用于在執(zhí)行毀滅性操作前，讓用戶進(jìn)行二次確認(rèn)。

（2）內(nèi)容

一般由操作會(huì)造成的結(jié)果描述，繼續(xù)執(zhí)行操作的按鈕和取消按鈕構(gòu)成。點(diǎn)擊空白區(qū)域和取消都等同于取消操作。

（3）設(shè)計(jì)Tips

一般用紅色等警惕顏色來體現(xiàn)毀滅性操作的確認(rèn)按鈕；當(dāng)按鈕本身的描述清晰明確時(shí)，可以不需要額外相關(guān)描述。

1.1.2 選項(xiàng)列表

（1）使用場景

通常用于展示上下文相關(guān)的2個(gè)或多個(gè)選項(xiàng)，每個(gè)選項(xiàng)可以幫助用戶執(zhí)行對應(yīng)的任務(wù)；

（2）內(nèi)容

在界面中可以通過“一個(gè)功能鍵”或“更多按鈕”承載多個(gè)相關(guān)且使用頻率不高的選項(xiàng)。點(diǎn)擊對應(yīng)功能鍵后通過ActionSheets彈出全部選項(xiàng)，一般ActionSheets由選項(xiàng)列表+取消按鈕構(gòu)成。點(diǎn)擊空白區(qū)域和取消都等同于取消操作。

（3）設(shè)計(jì)Tips

選項(xiàng)數(shù)量不宜過多，AnctionSheets中不能出現(xiàn)滾動(dòng)操作；
iOS規(guī)范建議菜單項(xiàng)居中顯示且不帶圖標(biāo)；

1.1.3 選項(xiàng)網(wǎng)格

（1）使用場景

主要有以下4種場景，網(wǎng)格比列表更適合：

更多選項(xiàng)相互之間的相關(guān)性不大；
選項(xiàng)分別屬于多種類別；
選項(xiàng)數(shù)量過多，一般多于5個(gè)時(shí)；
需要強(qiáng)調(diào)選項(xiàng)的圖標(biāo)，如分享時(shí)強(qiáng)調(diào)第三方平臺(tái)logo等。

（2）內(nèi)容

在網(wǎng)格式的ActionSheets中，每個(gè)選項(xiàng)以icon+標(biāo)題的形式展示；當(dāng)選項(xiàng)較多時(shí)，以相關(guān)性分行展示，最多不超過2行為宜，當(dāng)選項(xiàng)有2行時(shí)，每行可以單獨(dú)橫向滑動(dòng)。

（3）設(shè)計(jì)Tips

每項(xiàng)的標(biāo)題最好簡介明了、不宜過長，當(dāng)標(biāo)題較長時(shí)可以通過縮小字體的形式展示，若仍然過長則截?cái)鄻?biāo)題。

1.1.4 小結(jié)

針對3種不同的ActionSheets類型，主要有以下差異：

1.2 BottomSheets

BottomSheets是Android Material Design規(guī)范中建議的一種交互形式。嚴(yán)格來講BottomSheets分為兩類，一類是模態(tài)Bottomsheets，其滑出時(shí)在頁面內(nèi)容上方；一類是內(nèi)嵌式，其與頁面內(nèi)容在同一層級(jí)，滑出時(shí)會(huì)將頁面內(nèi)容往上推移；由于本文主要討論覆蓋層設(shè)計(jì)，所以此處也只考慮模態(tài)BottomSheets的應(yīng)用場景。

1.2.1 常規(guī)的BottomSheets

（1）使用場景

BottomSheets的使用場景與iOS中選項(xiàng)列表和選項(xiàng)網(wǎng)格的使用場景相同。BottomSheets也既可以通過列表和網(wǎng)格兩種形式展示。

（2）設(shè)計(jì)Tips

在設(shè)計(jì)BottomSheets時(shí)最需要注意的是與iOS端ActionSheets的區(qū)別：

Android 端的BottomSheets中不需要展示“取消”選項(xiàng)，因?yàn)锳ndroid軟鍵盤中的返回按鈕等效于取消；
ActionSheets中不能出現(xiàn)滾動(dòng)操作，但BottomSheets中可以，由于沒有“取消選項(xiàng)”，BottomSheets底部是與屏幕聯(lián)通的，所以在實(shí)際應(yīng)用中BottomSheets也有更大的發(fā)揮空間。

1.2.2 更多BottomSheets

（1）使用場景

當(dāng)頁面中操作涉及到更多上下文信息時(shí)，則適合通過這種類似BottomSheets的形式進(jìn)行展示。適用于展開篩選項(xiàng)、更深層級(jí)分類等場景。

這類交互形式并不算是嚴(yán)格的BottomSheets，而是借用了BottomSheets理念的一種自定義樣式。它既能保證用戶在使用過程中的上下文連貫性，又能展示大量信息。

（2）設(shè)計(jì)Tips

與常規(guī)的BottomSheets類似，點(diǎn)擊空白處時(shí)等效于取消操作，菜單需要收起；
BottomSheets高度不宜過高，頂部不應(yīng)超過標(biāo)題欄。

2. 彈出式氣泡

彈出式氣泡在iOS規(guī)范中稱為“Popover”，它在使用方式上與ActionSheets/BottomSheets類似，彈出時(shí)處于頁面層級(jí)的最上方，點(diǎn)擊氣泡外任意地方收起。

其實(shí)iOS規(guī)范中并不建議在手機(jī)端使用Popover，這種交互形式更適合在iPad等大屏應(yīng)用中使用，它相當(dāng)于分割了頁面中部分視圖用于完成一個(gè)臨時(shí)任務(wù)，完成后關(guān)閉氣泡并在當(dāng)頁進(jìn)行刷新。

但由于國內(nèi)大量主流App都使用了Popover，似乎又為這種交互形式賦予了新的生命?，F(xiàn)在常用Popover的形式來呈現(xiàn)頁面中折疊的一些額外信息，或在首頁位置呈現(xiàn)一些常用操作的快速入口。如下圖所示。

設(shè)計(jì)Tips：

Popover彈出時(shí)是模態(tài)的，需要將用戶的注意力聚焦到氣泡上，并向用戶傳達(dá)“請先選擇氣泡中的內(nèi)容再進(jìn)行其它操作”的意思，所以最好在氣泡下方增加蒙層。
氣泡不易過長且不能滾動(dòng)，當(dāng)內(nèi)容實(shí)在很多時(shí)應(yīng)當(dāng)考慮采用BottomSheets或全屏彈層的形式。