這個控件叫:Action Sheet/動作菜單/動作面板/行動列表

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

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最大的區別)。


    Action Sheet和Alert
  • 不同屏幕尺寸的呈現樣式
    在iPhone屏幕上,為了便于單手持握時操作,Action Sheet通常占據屏幕底部區域。在屏幕較大的iPad上,如果繼續顯示在屏幕底部,注意力切換和手指移動的路徑會很長,頻繁使用會比較累,因此iPad的Action Sheet通常在觸發區域附近以Popover(彈出式氣泡)呈現。
    關閉Action Sheet可以通過點擊“取消”按鈕和空白區域。Action Sheet以Popover呈現時不需要“取消”按鈕,因為點擊寬廣的空白區域關閉更方便。


    iPhone和iPad的Action Sheet
  • 清晰準確的描述
    如果一個頁面有多個喚起Action Sheet的對象,例如文件列表,點擊某個文件彈出Action Sheet后遮蓋了頁面,用戶不知道當前操作的文件是哪個,也許就會引發誤操作。因此,在頁面有多個喚起對象或選項本身不夠明晰的情況下,提供清晰準確的描述是非常有必要的。


    Dropbox對操作對象(文件)的圖文描述
  • 合理的視覺強調手法
    出于業務方面的考慮,有時我們希望用戶更多的點擊其中某個選項。例如豆瓣為了更好的把內容引入廣播里傳播,特地在Action Sheet把“推薦廣播”放到第一位獨占一行,但是線性圖標和淺色的文字比起下面的面性圖標看上去反倒是讓“推薦廣播”像Action Sheet的描述說明而不是可以點擊的按鈕。


    豆瓣App改版前后

    還有LOFRER把最重要的選項“轉載到我的LOFTER”做成了純文字樣式,下面的彩色圖標比較搶眼,用戶會誤以為“轉載到我的LOFTER”是描述而不是選項。


    LOFTER改版前后

    好在后來的版本豆瓣和LOFTER都改過來,想要某個選項更突出應該采取合理的視覺強調手法。

相關資料

微博iOS和Android對比
  • Action圖標不等同于分享圖標
    吆喝科技曾用A/B Test幫助墨跡天氣優化分享按鈕的點擊率,在準備的4個分享圖標方案中,方案2撥得頭籌,相對于原始方案點擊率暴漲近20%?。ㄔ斠?a target="_blank" rel="nofollow">http://www.appadhoc.com/blog/mojitianqi-fenxiangtubiao/ )
    墨跡天氣優化分享按鈕的4個方案

一方面我們可以得出用戶對分享圖標認知比較集中,對Apple原生的圖標很熟悉的結論。事實上Apple規范中對此圖標的定義是喚起模態視圖(Modal View)的Action圖標,并非特指分享功能。


Apple對Action圖標的定義
  • iOS支持非相冊文件上傳
    普遍認為iOS上傳內容時,Action Sheet只有選擇相冊、打開攝像頭拍照這兩個選項。事實并非如此,網盤類App使用標準的API,能從在Action Sheet中選擇iCloud或者其他網盤跨云傳輸,突破了只能上傳本機內容的限制。


    跨云傳輸
  • 為什么把Activity View稱為宮格模式
    熟讀iOS規范的讀者會發現,iOS 10規范新增了Activity View控件( https://developer.apple.com/ios/human-interface-guidelines/ui-views/activity-views/ ),通過閱讀多個版本的iOS規范,我發現Activity View是從Action Sheet演化出來的,除了由系統本身使用,布局是宮格而非列表外,并沒有其他不同。再考慮到用于分享功能的宮格Action Sheet大家非常熟悉,因此把Activity View歸為宮格模式。
    從Action Sheet演化出Activity View








《這個控件叫什么》專題

這個控件叫:Badge/徽標/小紅點
這個控件叫:A-Z index/字母索引導航
這個控件叫:Segment Controls/分段控件(附錄與Tabs的區別)
這個控件叫:Skeleton Screen/加載占位圖
這個控件叫:Page Indicator/Page Controls/頁面指示器
這個控件叫:Stepper/步進器
這個控件叫:Switch/開關/滑動開關/切換開關
Toast(吐司提示)的曾經、現在與未來
這個控件叫:Picker/選擇器/拾取器
這個控件叫:Soft Keyboard/Virtual Keyboard/軟鍵盤/虛擬鍵盤
這個控件叫:Popover/氣泡彈出框/彈出式氣泡/氣泡
這個控件叫:Text fields/輸入框/文本框
這個控件可能叫:Notice Bar/通告欄

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379

推薦閱讀更多精彩內容