交互設計:讓人困惑的三大交互組件及用法
本篇文章中,筆者帶我們了解了三大交互組件專有名詞的用法,并結合實際案例進行了解釋說明,與大家分享。希望通過此文能夠加深你對交互組件及其用法的理解和分析。
最近有很多同學來問一些設計中組件的專業名詞,發現大家好像都沒有一個統一的認識,有的說是ActivityViews,ActionSheet,Picker等等。
很多人不太清楚ActivityViews、ActionSheet、Alert三者的區別所以在這里我也把我對這些組件的理解給大家分享一下。
那么首先大家肯定要對于官方的設計指南定義有個了解。
一、ActionSheet(動作菜單)
“動作菜單是一種特定的警告樣式,它出現在對控件或操作的響應中,并呈現?組與當前窗?相關的兩個或多個選擇。
用戶啟動任務或者執?潛在的破壞性操作之前彈出動作菜單請求確認。在較小的屏幕上,動作菜單從屏幕的底 部向上 滑出, 在較?大的屏幕上, 動作菜單會以彈出窗?的形式呈現出來?!?/p>
用法及說明:
1. 提供一個取消按鈕增加操作的明確性
取消按鈕能夠讓?戶在放棄一項任務時,對??的操作更加肯定,并且動作菜單中的取消按鈕應該總是位于屏幕的最底部。
2. 突出警示的選擇項
使用紅?突出?來執?破壞性或危險動作的按鈕,并在 動作菜單的頂部顯示這些按鈕。
3. 避免在動作菜單中出現滾動情況
如果?個動作菜單中存在太多選項,?戶就必須滾動查看所有選項,?滾動需要更多的時間來做出選擇,且滾動過程中也容易誤觸到其他按鈕。
喔吼,看到了嗎,其實這些描述已經很明確了,首先根據屏幕大小的不同他可以有兩種模式供大家選擇,底部滑出或者以窗口的形式彈出來。它必須有取消的按鈕并且對警示信息強調顯示,并且不支持列表式的上下滑動。
但是這里要注意的是,他也可以沒有警告內容。
同時他不支持滾動也是因為AS(后面簡稱AS:action sheet)的列表按鈕點擊即觸發,為了避免用戶在滑動時不慎點擊,這里在設計上就不建議做上滾動。
另外AS在不同屏幕上的顯示方式不同,例如iPhone和iPad上的組件展現就是不同的,因為pad中如果是底部或者中間彈出,用戶會非常不好點,所以根據菲茲定律這里的AS直接顯示在了按鈕的邊上。
在原生的組件中我們也會發現在AS的控件里還會有對還組件的描述,一個是幫助大家明確進行該操作的后果,另外也是讓大家再次確認該操作。
當然了,這些都是“指南”告訴你怎么用比較正確,萬一遇到一些特殊的情況,我們也可以根據自己的需求來進行調整,比如說樣式之類的。
二、ActivityViews(活動視圖)
“?個活動就是?個任務,例如“復制”、“收藏”或“查找”,在當前下背景十分有用。點擊啟動之后可以立即執?一個服務操作,也可以先請求更多的信息,然后再執行該操作。
活動在活動窗口中啟動,活動窗口可以以表單或者彈出窗口的形式出現,這取決于設備的種類和屏幕的方向。使用活動可以讓用戶訪問 App中可執行的自定義服務或者任務?!?/p>
用法及說明:
1. 設計簡單的圖像模板來展示你的自定義視圖
?個圖像模板使用?個蒙版去創建?個icon。使用帶有適合透明度與抗鋸齒的黑色與白色,還有不要包含投影。圖像模板應該在?個70px X 70px的區域內居中顯示。(這個尺寸不一定要遵循)
2. 創建的標題應該簡單明了描述你的功能
標題顯示事件圖標的下方,通常來說簡短的標題效果最好,如果標題過?長,iOS 會先縮小字號,仍然太長的話就會截斷它。
3. 確保功能是可以對當前窗口中的內容進行操作的
雖然事件窗口中系統內置事件的位置是固定的,但如果它們不適?于你的App,則可以將其移除。
所以ActivityViews是這樣的:
那有人會說,誒這里可以左右滑動難道就不怕誤操作了嗎?
我們上面提到的AS他本身是含有警告內容的,而且大部分的AS都有警示功能在其中,所以盡量不讓他上下滑動,即便是沒有需要警示的功能我們也就保持統一不進行滑動了,而且上下空間有限,本身也不適合進行滑動(如果你非要滑動那你不如用picker,當然picker的本質作用又和AS有區別),左右的空間更加多,適合多個活動的按鈕。
所以AV(activityviews)大多數時候被聚合了分享、轉發、收藏、復制等功能,這倆組件是有明顯區別的。
三、Alert(警示框)
“警告框?來傳達與你的 App 或設備狀態相關的重要信息,并且通常需要得到?戶的反饋。
警告框的內容包括標題,描述消息(可選)、?個或多個按鈕以及輸 入框(可選)。除了這些元素之外,警告框的外觀樣式是不可更改的。它的使用方法和建議”
1. 避免使用警告框
警告框特別容易打斷用戶的操作、心流狀態等,所以一般我們會用在非常謹慎的環境,比如當用戶要刪除重要的信息,當app重要非常緊急的信息要通知給用戶時我們才會用它。
2. 警示框語言要簡化
盡量不使用標點來完成文案,盡量讓文案在一行顯示,但不要讓它太寬。
3. 文字要避免負面態度
要傳達友好的態度和積極的態度,所以大家不要學抖音,這莫非是在威脅我?就差把確認按鈕取消掉了
4. 通常使用兩個按鈕的警告彈窗
兩個按鈕的警告彈窗,可以使用戶更容易地在兩個選擇中做出決定。
?個按鈕通常用于通知,它無法做出更多的選擇。三個或以上的按鈕會使選擇變得復雜,并且需要滾動,會造成很不好的?戶體驗,這種情況下可以考慮使用動作菜單,請查閱 Action Sheets。
5. 創建簡潔的、邏輯清晰的按鈕標題
按鈕標題最好由?、兩個描述操作結果的詞語組成。與所有按鈕標題一樣,使?標題模式的大小寫(英文環境下, 每個單詞的首字母大寫),不要出現表示結束的標點符號。
盡量使用與警告標題和描述信息直接相關的動詞或動詞短語,例如“查看全部”、“回復”或者“忽略”。使?“確認”進?行明確的表達,避免使用“是”和“否”。例如是否進行刪除,請將警示按鈕設置為“刪除”而不是“是”
比較
還有一些就不放上來了,大家可以自行翻閱設計指南。在我們對三個控件進行完描述之后大家是否已經清楚了3者的用法。唯一還有爭議的就是AS和Alert都有警示的元素,我們該用哪一個?
首先AS他是包含警示的信息,他也可以完全沒有,就像上面那個案例一樣,所以在官方的解釋下來看,除非是非常嚴重的操作,我們才會用到alert,例如刪除訂單、例如退出編輯。但是其實市面上很多app使用情況都不同。
如上圖,微信和馬蜂窩的編輯頁點擊退出,前者用了Alert后者用了AS,大家覺得有什么區別,一個是對話形式問你保不保留,另一個則是將不保留進行了警示標記高亮。
前者你必須選一個,只要你點了你就不能留在這個頁面了。后者你還可以取消,所以在這種場景,我更青睞后者。
再來看個例子:
一個是訂單刪除,一個是照片刪除,在這里,大家都可以進行取消,但是我們來看下內容優先級,訂單刪除之后再想找回需要去電腦端,而這里產出照片我可以從最近刪除中重新恢復,兩者的找回成本差很多。所以前者用了alert后者用了AS。
再換個說法,AS可以通過點擊空白區域退出,而ALert不行,這都意味著Alert的警示級別更高,所以當我們要給用戶警示的時候,我們自己先考慮下當前的警示程度是否需要最高,如果僅僅是退出賬戶,那我個人建議選擇Actionsheet而不是Alert。
綜上所述,每種組件都有其特定的用法,根據場景和信息內容優先級來判斷如何使用才是正確的設計方法??床豢吹枚键c個贊吧~
#專欄作家#
應駿,人人都是產品經理專欄作家,公眾號:應謀鬼計(shejishiyj)
本文由 @應駿 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議
所有的彈窗、彈框、浮層統稱為覆蓋層,覆蓋層再分為對話框和浮層,對話框需要用戶去操作的才能消失的,浮層是顯示3s后自動消失的,個人感覺作者分類有問題。
你說的是模態和非模態吧??我也沒說到浮層啊,你在說啥。。。對話框當然需要操作才能消失啦,還有你說的覆蓋層是什么東西,請先去看一下iOS的開發者指南唄
個人表示歉意,說話有所欠缺 ??
個人見解,沒道理你就當做沒有看到過吧。我理解的覆蓋層是包含模態和非模態的,無論模態還是非模態,都是覆蓋在當前界面之上的,其實我們說的只是分類的角度不同,例如一個西紅柿,你把它歸為是炒菜吃的,我把它歸為生吃、調菜吃,無論你怎么分,它就是它,不會變,用的好才會好吃 ??
看了半天沒看明白你想表達什么,作者這里在對比幾種組件,你提模態非模態是想表達啥呢
有道理