【功能控件】動(dòng)作菜單/動(dòng)作面板交互設(shè)計(jì)

鑒于國內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一，很多設(shè)計(jì)師不知道如何用專業(yè)術(shù)語稱呼一個(gè)控件，因此我開了《這個(gè)控件叫什么》專題，梳理控件的名稱和使用事項(xiàng)，希望能為推動(dòng)交互設(shè)計(jì)發(fā)展，做出一點(diǎn)微小的貢獻(xiàn)。

Action Sheet(動(dòng)作菜單/動(dòng)作面板/行動(dòng)列表)是由用戶操作后觸發(fā)的一種特定的模態(tài)彈出框 ，呈現(xiàn)一組與當(dāng)前情境相關(guān)的兩個(gè)或多個(gè)選項(xiàng)。用戶可以使用Action Sheet啟動(dòng)某個(gè)任務(wù)，或者確認(rèn)是否開始執(zhí)行某個(gè)可能具有破壞性的操作。Action Sheet屬于iOS規(guī)范，近年來Android平臺(tái)也出現(xiàn)了類似功能的控件。

△ Action Sheet

如何使用

提供完成一項(xiàng)任務(wù)的多個(gè)選項(xiàng)

移動(dòng)設(shè)備屏幕空間是寶貴的，不可能把所有選項(xiàng)都羅列在一個(gè)頁面上，如果反其道而行把相關(guān)程度非常高的操作分割到多個(gè)頁面上，又會(huì)造成操作繁瑣體驗(yàn)不連續(xù)的感覺。Action Sheet能承載較多內(nèi)容，而且僅覆蓋當(dāng)前屏幕的一部分，即不會(huì)對(duì)用戶心流有很大的干擾，操作也非常便捷。適合呈現(xiàn)與當(dāng)前任務(wù)相關(guān)的多個(gè)選項(xiàng)。

△ 列表模式和宮格模式

選項(xiàng)較少可使用列表模式，選項(xiàng)過多時(shí)，不建議在列表模式中滾動(dòng)，因?yàn)檫x項(xiàng)的觸發(fā)橫向區(qū)域很大，在滾動(dòng)過程中很容易不小心誤點(diǎn)了其中一個(gè)。

宮格模式適用于選項(xiàng)非常多的情況，并且能以圖標(biāo)形式展現(xiàn)選項(xiàng)，常見于分享到其他社交App或使用第三方App打開文件的場景。使用宮格模式建議將相關(guān)選項(xiàng)分組，如果某組的數(shù)量太多，可以在屏幕右邊緣露出部分圖標(biāo)，暗示可以橫向滑動(dòng)查看更多選項(xiàng)。

注意：Action Sheet中的選項(xiàng)點(diǎn)擊后會(huì)立即執(zhí)行任務(wù)，而不是僅僅填寫一個(gè)選項(xiàng)，它不能用在表單中，表單單選應(yīng)當(dāng)使用Picker、Segment Control、Radio Button等控件。

危險(xiǎn)操作二次確認(rèn)

用戶在使用過程中，出現(xiàn)刪除、未保存退出等可能產(chǎn)生潛在風(fēng)險(xiǎn)的行為時(shí)，應(yīng)當(dāng)彈出Action Sheet，讓用戶有機(jī)會(huì)停下來充分考慮當(dāng)前操作可能導(dǎo)致的危險(xiǎn)結(jié)果，并將危險(xiǎn)操作用紅色標(biāo)注，為他們提供其它替代的安全選項(xiàng)。Action Sheet是可以連續(xù)彈出的，例如第一個(gè)Action Sheet中選擇刪除，第二個(gè)Action Sheet中確認(rèn)刪除。此外，如果危險(xiǎn)的情況并非由用戶主動(dòng)發(fā)起或者嚴(yán)重影響系統(tǒng)本身的完整性，應(yīng)該使用Alert(這是Alert和Aciton Sheet大的區(qū)別)。

△ Action Sheet和Alert

不同屏幕尺寸的呈現(xiàn)樣式

在iPhone屏幕上，為了便于單手持握時(shí)操作，Action Sheet通常占據(jù)屏幕底部區(qū)域。在屏幕較大的iPad上，如果繼續(xù)顯示在屏幕底部，注意力切換和手指移動(dòng)的路徑會(huì)很長，頻繁使用會(huì)比較累，因此iPad的Action Sheet通常在觸發(fā)區(qū)域附近以Popover(彈出式氣泡)呈現(xiàn)。

關(guān)閉Action Sheet可以通過點(diǎn)擊“取消”按鈕和空白區(qū)域。Action Sheet以Popover呈現(xiàn)時(shí)不需要“取消”按鈕，因?yàn)辄c(diǎn)擊寬廣的空白區(qū)域關(guān)閉更方便。

△ iPhone和iPad的Action Sheet

清晰準(zhǔn)確的描述

如果一個(gè)頁面有多個(gè)喚起Action Sheet的對(duì)象，例如文件列表，點(diǎn)擊某個(gè)文件彈出Action Sheet后遮蓋了頁面，用戶不知道當(dāng)前操作的文件是哪個(gè)，也許就會(huì)引發(fā)誤操作。因此，在頁面有多個(gè)喚起對(duì)象或選項(xiàng)本身不夠明晰的情況下，提供清晰準(zhǔn)確的描述是非常有必要的。

△ Dropbox對(duì)操作對(duì)象(文件)的圖文描述

合理的視覺強(qiáng)調(diào)手法

出于業(yè)務(wù)方面的考慮，有時(shí)我們希望用戶更多的點(diǎn)擊其中某個(gè)選項(xiàng)。例如豆瓣為了更好的把內(nèi)容引入廣播里傳播，特地在Action Sheet把“推薦廣播”放到第一位獨(dú)占一行，但是線性圖標(biāo)和淺色的文字比起下面的面性圖標(biāo)看上去反倒是讓“推薦廣播”像Action Sheet的描述說明而不是可以點(diǎn)擊的按鈕。

△ 豆瓣App改版前后

還有LOFRER把最重要的選項(xiàng)“轉(zhuǎn)載到我的LOFTER”做成了純文字樣式，下面的彩色圖標(biāo)比較搶眼，用戶會(huì)誤以為“轉(zhuǎn)載到我的LOFTER”是描述而不是選項(xiàng)。

△ LOFTER改版前后

好在后來的版本豆瓣和LOFTER都改過來，想要某個(gè)選項(xiàng)更突出應(yīng)該采取合理的視覺強(qiáng)調(diào)手法。

相關(guān)資料

Android對(duì)應(yīng)的控件

Android有2個(gè)使用場景和Action Sheet相似的控件。第一個(gè)是Modal Bottom Sheet(模態(tài)底部菜單)，和Action Sheet大的區(qū)別是沒有“取消”按鈕，因?yàn)锳ndroid有物理Back導(dǎo)航鍵。

網(wǎng)站題目：【功能控件】動(dòng)作菜單/動(dòng)作面板交互設(shè)計(jì)
鏈接地址：http://muchs.cn/news15/164515.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、ChatGPT、軟件開發(fā)、手機(jī)網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)