iOS應用中常用的臨時層歸納
很多組件功能有重疊,使用的規則邊界不甚明顯,有些可替換使用。具體使用何種形式,需要結合自己的產品和業務目的決定。
臨時層是什么
《支付寶體驗設計精髓》中根據頁面元素的穩定性,將頁面元素歸納為5個不同的層級,臨時層指那些在頁面中默認隱藏,需要時再展示的元素。
臨時層包含彈窗、Toast提示、浮層彈窗、操作列表、全屏彈窗等,每種組件都有其適用的使用場景,合理的使用,能提高用戶效率和使用體驗。作為新接觸 app 端設計的小白,為了規范自己的設計,總結了部分自己的理解,與大家交流。錯誤之處還請指正。因為工作以 iOS 端為主,故本文僅梳理了部分iOS應用中常用的臨時層,并不僅限于iOS的規范組件。
彈窗(Alerts)
Alerts 屬于模態彈窗,用戶必須處理后才可以繼續原操作。彈窗是一種比較強的反饋形式,彈出時會阻斷用戶原操作,對用戶任務的打斷性很強。但頻繁的打斷用戶會帶給用戶挫敗感,同時也影響用戶完成任務的效率,所以需要慎重使用。
彈窗由標題、內容、操作組成。內容描述文字并非必要,可以省略。一個好的彈窗要告知用戶當前發生了什么及怎么解決。
使用情景
1.告知信息:彈窗用于告知用戶一些會影響到他們使用 應用的重要信息,比如當使用掃一掃功能時,告知用戶“沒有開啟相機權限”。關于重要信息的定義,不同產品可能有不同的理解,我認為大概需要滿足 必要、重要、與當前任務相關這幾個條件。
- ? ?必要:當任務有前提條件需要滿足時。比如使用掃一掃需要開啟手機相機權限。
- ? ?重要:當有重要信息需要告知用戶,會對用戶任務造成影響時。比如用戶掃描失效二維碼時,系統告知二維碼已經失效,需要更換二維碼。
- 與當前任務相關:即在合理的時間展示,不要顯示與當前任務無關的提示,保證用戶專注于當前任務。
2.快速操作:彈窗也用戶執行一些可以快速執行的小任務,比如撥打電話。
限制
- 彈窗最多承載三個操作,當大于三個操作時,使用操作列表.
- 當操作命令文本較長時,使用單列排列命令。
- 只適合讓用戶完成簡單任務,如錄入驗證碼、撥打電話、確認刪除操作等。
- 按鈕順序。關于確定取消按鈕的擺放位置,iOS規范里設定了較復雜的設計策略,在設計時,為了保持界面一致性,我將所有確認類操作放在右側。
- 其他關于Alerts的設計要求,在iOS規范里有完善的描述,這里不再贅述了。
操作列表(Action Sheets)
操作列表展示了與用戶觸發操作直接相關的一系列選項。和彈窗相比操作列表對用戶的干擾性稍弱,并支持點擊頁面空白區域關閉,一般是由用戶主動操作觸發。
使用情景
在承載操作方便,和彈窗功能有重合,當操作大于3個時,改用操作列表。關于Alerts和操作列表的關系,可以理解成:嚴重且操作較少時使用alert,其他情況使用操作列表。
限制
操作列表不支持滾動,需控制操作總數量,當操作過多時,可以使用網格式等其他自定義樣式。
浮層彈窗
從頁面底部彈出的浮層,覆蓋部分頁面。彈出層相較于打開新頁面,更輕量,用戶可以更快速的完成任務,更快的返回修改。浮層里支持滾動操作。
關于浮層的收起,浮層應該有單獨的關閉按鈕,也支持點擊浮層外區域收起。
當允許用戶點擊浮層外區域收起時,可以使用戶快速切換浮層狀態,但也會帶來誤觸問題。所以,當浮層內有用戶耗費精力完成的內容時,收起時要記錄用戶完成的工作,方便用戶再次打開浮層時可以繼續。
有時,比如支付環節,我們不希望用戶輕易跳出,或用戶退出后不保存浮層內結果時,可以僅允許用戶點擊關閉按鈕才能退出。
使用情景
- 和當前內容相關的小體量的任務:如選擇支付寶付款碼頁,選擇付款方式。
- 任務和當前頁面需要頻繁切換以便校驗或修改信息時:如淘寶的添加購物車浮層、查看物流信息等
限制
浮層空間較小,不適合承載復雜任務。
全屏彈窗
在MATERIAL DESIGN 中被稱為全屏彈窗,在iOS規范中被稱為模態視圖。和浮層彈窗相比,面積更大,可以完成更復雜的任務。全屏彈窗由頁面底部向上彈出,退出時,向下收起。
使用全屏彈窗和新頁面執行任務,一個明顯區別是回到原頁面的方式,全屏彈窗通過點擊左上角的關閉,子級新頁面通過點擊左上角的“返回”。在iOS應用中,關于全屏彈窗的使用,似乎沒有統一規范可循,比如同樣是切換城市,美團使用全屏彈窗,支付寶使用子頁面。
使用情景
- 完成主任務的一個分支任務時。完成后,返回主任務流程。如郵箱中從通訊錄選擇收件人。
- 完成一個新增類的獨立任務,任務完成后切換回上級頁面(類似目錄)。比如寫郵件、咸魚發布寶貝等。但同樣是新增,但百度貼吧的發帖用的卻是子級頁面。
限制
必須點擊“保存”,頁面內容才能生效。
Toasts
Toasts 是一種干擾性更弱的信息反饋方式,短暫出現后會自動消失,不會打斷用戶任務流程。
使用場景
和 Alerts 相比,toasts適用于一些不嚴重的信息的反饋,比如發送成功、表單項校驗等
總結
綜上分析,很多組件功能有重疊,使用的規則邊界不甚明顯,有些可替換使用。具體使用何種形式,需要結合自己的產品和業務目的決定。從任務情景出發,我將上面的內容歸于下面的圖,方便判斷該使用何種形式。
本文由 @m. 原創發布于人人都是產品經理。未經許可,禁止轉載。
- 目前還沒評論,等你發揮!