中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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都改過來，想要某個選項更突出應該采取合理的視覺強調手法。

相關資料

Android對應的控件

Android有2個使用場景和Action Sheet相似的控件。第一個是Modal Bottom Sheet（模態底部菜單），和Action Sheet最大的區別是沒有“取消”按鈕，因為Android有物理Back導航鍵。（詳見：https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets?）

Modal bottom sheet

另一個是Simple dialogs（簡易對話框），從屏幕中央彈出，沒有“取消”按鈕，通過點擊空白區域關閉。微博、豆瓣的Android版使用了這個控件。（詳見：https://material.io/guidelines/components/dialogs.html#dialogs-simple-menus?）

微博iOS和Android對比

Action圖標不等同于分享圖標

吆喝科技曾用A/B Test幫助墨跡天氣優化分享按鈕的點擊率，在準備的4個分享圖標方案中，方案2撥得頭籌，相對于原始方案點擊率暴漲近20%！（詳見：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

作者：龍爪槐守望者，微信公眾號“龍爪槐守望者”（ID：ftium4_wx）

本文由 @龍爪槐守望者 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議