【功能控件】動作菜單/動作面板交互設計

2022-06-07 分類：網站建設

鑒于國內交互設計名詞混亂不統一，很多設計師不知道如何用專業術語稱呼一個控件，因此我開了《這個控件叫什么》專題，梳理控件的名稱和使用事項，希望能為推動交互設計發展，做出一點微小的貢獻。

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

△ Action Sheet

如何使用

提供完成一項任務的多個選項

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

△ 列表模式和宮格模式

選項較少可使用列表模式，選項過多時，不建議在列表模式中滾動，因為選項的觸發橫向區域很大，在滾動過程中很容易不小心誤點了其中一個。

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

注意：Action Sheet中的選項點擊后會立即執行任務，而不是僅僅填寫一個選項，它不能用在表單中，表單單選應當使用Picker、Segment Control、Radio Button等控件。

危險操作二次確認

用戶在使用過程中，出現刪除、未保存退出等可能產生潛在風險的行為時，應當彈出Action Sheet，讓用戶有機會停下來充分考慮當前操作可能導致的危險結果，并將危險操作用紅色標注，為他們提供其它替代的安全選項。Action Sheet是可以連續彈出的，例如第一個Action Sheet中選擇刪除，第二個Action Sheet中確認刪除。此外，如果危險的情況并非由用戶主動發起或者嚴重影響系統本身的完整性，應該使用Alert(這是Alert和Aciton Sheet大的區別)。