鑒于國(guó)內(nèi)交互設(shè)計(jì)名詞混亂不統(tǒng)一娃属，很多設(shè)計(jì)師不知道如何用專(zhuān)業(yè)術(shù)語(yǔ)稱(chēng)呼一個(gè)控件玄呛，因此我開(kāi)了《這個(gè)控件叫什么》專(zhuān)題揩环，梳理控件的名稱(chēng)和使用事項(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)是否開(kāi)始執(zhí)行某個(gè)可能具有破壞性的操作因块。Action Sheet屬于iOS規(guī)范，近年來(lái)Android平臺(tái)也出現(xiàn)了類(lèi)似功能的控件籍铁。

Action Sheet

如何使用

• 提供完成一項(xiàng)任務(wù)的多個(gè)選項(xiàng)
  移動(dòng)設(shè)備屏幕空間是寶貴的涡上，不可能把所有選項(xiàng)都羅列在一個(gè)頁(yè)面上，如果反其道而行把相關(guān)程度非常高的操作分割到多個(gè)頁(yè)面上拒名，又會(huì)造成操作繁瑣體驗(yàn)不連續(xù)的感覺(jué)吩愧。Action Sheet能承載較多內(nèi)容，而且僅覆蓋當(dāng)前屏幕的一部分靡狞，即不會(huì)對(duì)用戶心流有很大的干擾耻警，操作也非常便捷。適合呈現(xiàn)與當(dāng)前任務(wù)相關(guān)的多個(gè)選項(xiàng)甸怕。
  
  列表模式和宮格模式
  
  選項(xiàng)較少可使用列表模式甘穿，選項(xiàng)過(guò)多時(shí)，不建議在列表模式中滾動(dòng)梢杭，因?yàn)檫x項(xiàng)的觸發(fā)橫向區(qū)域很大温兼，在滾動(dòng)過(guò)程中很容易不小心誤點(diǎn)了其中一個(gè)。
  宮格模式適用于選項(xiàng)非常多的情況武契，并且能以圖標(biāo)形式展現(xiàn)選項(xiàng)募判，常見(jiàn)于分享到其他社交App或使用第三方App打開(kāi)文件的場(chǎng)景。使用宮格模式建議將相關(guān)選項(xiàng)分組咒唆，如果某組的數(shù)量太多届垫，可以在屏幕右邊緣露出部分圖標(biāo)，暗示可以橫向滑動(dòng)查看更多選項(xiàng)全释。
  注意：Action Sheet中的選項(xiàng)點(diǎn)擊后會(huì)立即執(zhí)行任務(wù)装处，而不是僅僅填寫(xiě)一個(gè)選項(xiàng)，它不能用在表單中浸船，表單單選應(yīng)當(dāng)使用Picker妄迁、Segment Control、Radio Button等控件李命。

• 危險(xiǎn)操作二次確認(rèn)
  用戶在使用過(guò)程中登淘，出現(xiàn)刪除、未保存退出等可能產(chǎn)生潛在風(fēng)險(xiǎn)的行為時(shí)封字，應(yīng)當(dāng)彈出Action Sheet黔州，讓用戶有機(jī)會(huì)停下來(lái)充分考慮當(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ì)很長(zhǎng)俺泣，頻繁使用會(huì)比較累，因此iPad的Action Sheet通常在觸發(fā)區(qū)域附近以Popover（彈出式氣泡）呈現(xiàn)完残。
  關(guān)閉Action Sheet可以通過(guò)點(diǎn)擊“取消”按鈕和空白區(qū)域伏钠。Action Sheet以Popover呈現(xiàn)時(shí)不需要“取消”按鈕，因?yàn)辄c(diǎn)擊寬廣的空白區(qū)域關(guān)閉更方便谨设。

  
  
  iPhone和iPad的Action Sheet

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

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

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

  
  
  豆瓣App改版前后
  
  

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

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

相關(guān)資料

• Android對(duì)應(yīng)的控件
  Android有2個(gè)使用場(chǎng)景和Action Sheet相似的控件地回。第一個(gè)是Modal Bottom Sheet（模態(tài)底部菜單），和Action Sheet最大的區(qū)別是沒(méi)有“取消”按鈕，因?yàn)锳ndroid有物理Back導(dǎo)航鍵刻像。
  （詳見(jiàn)：https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets ）
  
  Modal bottom sheet
  
  另一個(gè)是Simple dialogs（簡(jiǎn)易對(duì)話框）畅买，從屏幕中央彈出，沒(méi)有“取消”按鈕细睡，通過(guò)點(diǎn)擊空白區(qū)域關(guān)閉谷羞。微博、豆瓣的Android版使用了這個(gè)控件溜徙。
  （詳見(jiàn)：https://material.io/guidelines/components/dialogs.html#dialogs-simple-menus ）

微博iOS和Android對(duì)比

• Action圖標(biāo)不等同于分享圖標(biāo)
  吆喝科技曾用A/B Test幫助墨跡天氣優(yōu)化分享按鈕的點(diǎn)擊率湃缎，在準(zhǔn)備的4個(gè)分享圖標(biāo)方案中，方案2撥得頭籌蠢壹，相對(duì)于原始方案點(diǎn)擊率暴漲近20%Ｉのァ（詳見(jiàn)http://www.appadhoc.com/blog/mojitianqi-fenxiangtubiao/ ）
  
  墨跡天氣優(yōu)化分享按鈕的4個(gè)方案

一方面我們可以得出用戶對(duì)分享圖標(biāo)認(rèn)知比較集中，對(duì)Apple原生的圖標(biāo)很熟悉的結(jié)論图贸。事實(shí)上Apple規(guī)范中對(duì)此圖標(biāo)的定義是喚起模態(tài)視圖（Modal View）的Action圖標(biāo)蹂季，并非特指分享功能。

Apple對(duì)Action圖標(biāo)的定義

• iOS支持非相冊(cè)文件上傳
  普遍認(rèn)為iOS上傳內(nèi)容時(shí)疏日，Action Sheet只有選擇相冊(cè)偿洁、打開(kāi)攝像頭拍照這兩個(gè)選項(xiàng)。事實(shí)并非如此制恍，網(wǎng)盤(pán)類(lèi)App使用標(biāo)準(zhǔn)的API父能，能從在Action Sheet中選擇iCloud或者其他網(wǎng)盤(pán)跨云傳輸，突破了只能上傳本機(jī)內(nèi)容的限制净神。

  
  
  跨云傳輸

• 為什么把Activity View稱(chēng)為宮格模式
  熟讀iOS規(guī)范的讀者會(huì)發(fā)現(xiàn)何吝，iOS 10規(guī)范新增了Activity View控件（ https://developer.apple.com/ios/human-interface-guidelines/ui-views/activity-views/ ），通過(guò)閱讀多個(gè)版本的iOS規(guī)范鹃唯，我發(fā)現(xiàn)Activity View是從Action Sheet演化出來(lái)的爱榕，除了由系統(tǒng)本身使用，布局是宮格而非列表外坡慌，并沒(méi)有其他不同黔酥。再考慮到用于分享功能的宮格Action Sheet大家非常熟悉，因此把Activity View歸為宮格模式洪橘。
  
  從Action Sheet演化出Activity View

《這個(gè)控件叫什么》專(zhuān)題

這個(gè)控件叫：Badge/徽標(biāo)/小紅點(diǎn)
這個(gè)控件叫：A-Z index/字母索引導(dǎo)航
這個(gè)控件叫：Segment Controls/分段控件（附錄與Tabs的區(qū)別）
這個(gè)控件叫：Skeleton Screen/加載占位圖
這個(gè)控件叫：Page Indicator/Page Controls/頁(yè)面指示器
這個(gè)控件叫：Stepper/步進(jìn)器
這個(gè)控件叫：Switch/開(kāi)關(guān)/滑動(dòng)開(kāi)關(guān)/切換開(kāi)關(guān)
Toast（吐司提示）的曾經(jīng)跪者、現(xiàn)在與未來(lái)
這個(gè)控件叫：Picker/選擇器/拾取器
這個(gè)控件叫：Soft Keyboard/Virtual Keyboard/軟鍵盤(pán)/虛擬鍵盤(pán)
這個(gè)控件叫：Popover/氣泡彈出框/彈出式氣泡/氣泡
這個(gè)控件叫：Text fields/輸入框/文本框
這個(gè)控件可能叫：Notice Bar/通告欄