綠色排版工具|熱門專題|網站地圖|移動官網
您的當前位置:網站首頁 > 內容運營 > 正文

交互設計:讓人困惑的三大交互組件及用法

來源: 編輯: 時間:2019-11-18 15:19:41 閱讀:

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

交互設計:讓人困惑的三大交互組件及用法

最近有很多同學來問一些設計中組件的專業名詞,發現大家好像都沒有一個統一的認識,有的說是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協議

上一篇:3個公式,理清用戶體驗
下一篇:沒有了

圖文精選:

欄目分類
最新文章
熱門文章
推薦文章

Copyright?2012-2019 小螞蟻信息網版權所有 粵ICP備14061018號-1


鄭重聲明:本網站資源、信息來源于網絡,完全免費共享,僅供學習和研究使用,版權和著作權歸原作者所有,如有不愿意被轉載的情況,請通知我們刪除已轉載的信息。

Top 双色球基本走势图2007