本篇文章中，筆者帶我們了解了三大交互組件專有名詞的用法，并結(jié)合實(shí)際案例進(jìn)行了解釋說明，與大家分享。希望通過此文能夠加深你對交互組件及其用法的理解和分析。

最近有很多同學(xué)來問一些設(shè)計(jì)中組件的專業(yè)名詞，發(fā)現(xiàn)大家好像都沒有一個統(tǒng)一的認(rèn)識，有的說是ActivityViews，ActionSheet，Picker等等。

很多人不太清楚ActivityViews、ActionSheet、Alert三者的區(qū)別所以在這里我也把我對這些組件的理解給大家分享一下。

那么首先大家肯定要對于官方的設(shè)計(jì)指南定義有個了解。

一、ActionSheet（動作菜單）

“動作菜單是一種特定的警告樣式，它出現(xiàn)在對控件或操作的響應(yīng)中，并呈現(xiàn)?組與當(dāng)前窗?相關(guān)的兩個或多個選擇。

用戶啟動任務(wù)或者執(zhí)?潛在的破壞性操作之前彈出動作菜單請求確認(rèn)。在較小的屏幕上，動作菜單從屏幕的底 部向上 滑出， 在較?大的屏幕上， 動作菜單會以彈出窗?的形式呈現(xiàn)出來?！?/p>

用法及說明：

1. 提供一個取消按鈕增加操作的明確性

取消按鈕能夠讓?戶在放棄一項(xiàng)任務(wù)時，對??的操作更加肯定，并且動作菜單中的取消按鈕應(yīng)該總是位于屏幕的最底部。

2. 突出警示的選擇項(xiàng)

使用紅?突出?來執(zhí)?破壞性或危險動作的按鈕，并在 動作菜單的頂部顯示這些按鈕。

3. 避免在動作菜單中出現(xiàn)滾動情況

如果?個動作菜單中存在太多選項(xiàng)，?戶就必須滾動查看所有選項(xiàng)，?滾動需要更多的時間來做出選擇，且滾動過程中也容易誤觸到其他按鈕。

喔吼，看到了嗎，其實(shí)這些描述已經(jīng)很明確了，首先根據(jù)屏幕大小的不同他可以有兩種模式供大家選擇，底部滑出或者以窗口的形式彈出來。它必須有取消的按鈕并且對警示信息強(qiáng)調(diào)顯示，并且不支持列表式的上下滑動。

但是這里要注意的是，他也可以沒有警告內(nèi)容。

同時他不支持滾動也是因?yàn)锳S（后面簡稱AS：action sheet）的列表按鈕點(diǎn)擊即觸發(fā)，為了避免用戶在滑動時不慎點(diǎn)擊，這里在設(shè)計(jì)上就不建議做上滾動。

另外AS在不同屏幕上的顯示方式不同，例如iPhone和iPad上的組件展現(xiàn)就是不同的，因?yàn)閜ad中如果是底部或者中間彈出，用戶會非常不好點(diǎn)，所以根據(jù)菲茲定律這里的AS直接顯示在了按鈕的邊上。

在原生的組件中我們也會發(fā)現(xiàn)在AS的控件里還會有對還組件的描述，一個是幫助大家明確進(jìn)行該操作的后果，另外也是讓大家再次確認(rèn)該操作。

當(dāng)然了，這些都是“指南”告訴你怎么用比較正確，萬一遇到一些特殊的情況，我們也可以根據(jù)自己的需求來進(jìn)行調(diào)整，比如說樣式之類的。

二、ActivityViews（活動視圖）

“?個活動就是?個任務(wù)，例如“復(fù)制”、“收藏”或“查找”，在當(dāng)前下背景十分有用。點(diǎn)擊啟動之后可以立即執(zhí)?一個服務(wù)操作，也可以先請求更多的信息，然后再執(zhí)行該操作。

活動在活動窗口中啟動，活動窗口可以以表單或者彈出窗口的形式出現(xiàn)，這取決于設(shè)備的種類和屏幕的方向。使用活動可以讓用戶訪問 App中可執(zhí)行的自定義服務(wù)或者任務(wù)?！?/p>

用法及說明：

1. 設(shè)計(jì)簡單的圖像模板來展示你的自定義視圖

?個圖像模板使用?個蒙版去創(chuàng)建?個icon。使用帶有適合透明度與抗鋸齒的黑色與白色,還有不要包含投影。圖像模板應(yīng)該在?個70px X 70px的區(qū)域內(nèi)居中顯示。（這個尺寸不一定要遵循）

2. 創(chuàng)建的標(biāo)題應(yīng)該簡單明了描述你的功能

標(biāo)題顯示事件圖標(biāo)的下方，通常來說簡短的標(biāo)題效果最好，如果標(biāo)題過?長，iOS 會先縮小字號，仍然太長的話就會截?cái)嗨?/p>

3. 確保功能是可以對當(dāng)前窗口中的內(nèi)容進(jìn)行操作的

雖然事件窗口中系統(tǒng)內(nèi)置事件的位置是固定的，但如果它們不適?于你的App，則可以將其移除。

所以ActivityViews是這樣的：

那有人會說，誒這里可以左右滑動難道就不怕誤操作了嗎？

我們上面提到的AS他本身是含有警告內(nèi)容的，而且大部分的AS都有警示功能在其中，所以盡量不讓他上下滑動，即便是沒有需要警示的功能我們也就保持統(tǒng)一不進(jìn)行滑動了，而且上下空間有限，本身也不適合進(jìn)行滑動（如果你非要滑動那你不如用picker，當(dāng)然picker的本質(zhì)作用又和AS有區(qū)別），左右的空間更加多，適合多個活動的按鈕。

所以AV(activityviews)大多數(shù)時候被聚合了分享、轉(zhuǎn)發(fā)、收藏、復(fù)制等功能，這倆組件是有明顯區(qū)別的。

三、Alert（警示框）

“警告框?來傳達(dá)與你的 App 或設(shè)備狀態(tài)相關(guān)的重要信息，并且通常需要得到?戶的反饋。

警告框的內(nèi)容包括標(biāo)題,描述消息(可選)、?個或多個按鈕以及輸 入框(可選)。除了這些元素之外，警告框的外觀樣式是不可更改的。它的使用方法和建議”

1. 避免使用警告框

警告框特別容易打斷用戶的操作、心流狀態(tài)等，所以一般我們會用在非常謹(jǐn)慎的環(huán)境，比如當(dāng)用戶要刪除重要的信息，當(dāng)app重要非常緊急的信息要通知給用戶時我們才會用它。

2. 警示框語言要簡化

盡量不使用標(biāo)點(diǎn)來完成文案，盡量讓文案在一行顯示，但不要讓它太寬。

3. 文字要避免負(fù)面態(tài)度

要傳達(dá)友好的態(tài)度和積極的態(tài)度，所以大家不要學(xué)抖音，這莫非是在威脅我？就差把確認(rèn)按鈕取消掉了

4. 通常使用兩個按鈕的警告彈窗

兩個按鈕的警告彈窗，可以使用戶更容易地在兩個選擇中做出決定。

?個按鈕通常用于通知，它無法做出更多的選擇。三個或以上的按鈕會使選擇變得復(fù)雜，并且需要滾動，會造成很不好的?戶體驗(yàn)，這種情況下可以考慮使用動作菜單，請查閱 Action Sheets。

5. 創(chuàng)建簡潔的、邏輯清晰的按鈕標(biāo)題

按鈕標(biāo)題最好由?、兩個描述操作結(jié)果的詞語組成。與所有按鈕標(biāo)題一樣，使?標(biāo)題模式的大小寫(英文環(huán)境下， 每個單詞的首字母大寫)，不要出現(xiàn)表示結(jié)束的標(biāo)點(diǎn)符號。

盡量使用與警告標(biāo)題和描述信息直接相關(guān)的動詞或動詞短語，例如“查看全部”、“回復(fù)”或者“忽略”。使?“確認(rèn)”進(jìn)?行明確的表達(dá)，避免使用“是”和“否”。例如是否進(jìn)行刪除，請將警示按鈕設(shè)置為“刪除”而不是“是”

比較

還有一些就不放上來了，大家可以自行翻閱設(shè)計(jì)指南。在我們對三個控件進(jìn)行完描述之后大家是否已經(jīng)清楚了3者的用法。唯一還有爭議的就是AS和Alert都有警示的元素，我們該用哪一個？

首先AS他是包含警示的信息，他也可以完全沒有，就像上面那個案例一樣，所以在官方的解釋下來看，除非是非常嚴(yán)重的操作，我們才會用到alert，例如刪除訂單、例如退出編輯。但是其實(shí)市面上很多app使用情況都不同。

如上圖，微信和馬蜂窩的編輯頁點(diǎn)擊退出，前者用了Alert后者用了AS，大家覺得有什么區(qū)別，一個是對話形式問你保不保留，另一個則是將不保留進(jìn)行了警示標(biāo)記高亮。

前者你必須選一個，只要你點(diǎn)了你就不能留在這個頁面了。后者你還可以取消，所以在這種場景，我更青睞后者。

再來看個例子：

一個是訂單刪除，一個是照片刪除，在這里，大家都可以進(jìn)行取消，但是我們來看下內(nèi)容優(yōu)先級，訂單刪除之后再想找回需要去電腦端，而這里產(chǎn)出照片我可以從最近刪除中重新恢復(fù)，兩者的找回成本差很多。所以前者用了alert后者用了AS。

再換個說法，AS可以通過點(diǎn)擊空白區(qū)域退出，而ALert不行，這都意味著Alert的警示級別更高，所以當(dāng)我們要給用戶警示的時候，我們自己先考慮下當(dāng)前的警示程度是否需要最高，如果僅僅是退出賬戶，那我個人建議選擇Actionsheet而不是Alert。

綜上所述，每種組件都有其特定的用法，根據(jù)場景和信息內(nèi)容優(yōu)先級來判斷如何使用才是正確的設(shè)計(jì)方法?？床豢吹枚键c(diǎn)個贊吧～

＃專欄作家＃

應(yīng)駿，人人都是產(chǎn)品經(jīng)理專欄作家，公眾號：應(yīng)謀鬼計(jì)（shejishiyj）

本文由 @應(yīng)駿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議