iOS和Android規范解析——底部浮層(下)
上次的文章(點擊查看),介紹了Android MD設計規范中對于“底板(Bottom Sheets)”的定義,這次的文章來跟大家介紹一下iOS設計規范中的底部浮層。
在iOS規范中,出現在頁面底部的浮層有兩種:上拉菜單(Action Sheets)和活動視圖(Activity Views)。
上拉菜單
上拉菜單,是當用戶激發一個操作的時候,出現的浮層?!笆褂蒙侠藛巫層脩艨梢蚤_始一個新任務或者對破壞性操作(例如:刪除、退出登錄等,筆者注)進行二次確認?!?使用上拉菜單開始一個新任務,在蘋果官方的郵件應用里有很多案例,比如下面這個:
點擊了那個長得很像“回復”的按鈕,出現了三個操作供用戶選擇:回復、轉發、打印。
在用戶進行破壞性操作的時候,上拉菜單成為一個確認性質的存在,防止用戶誤操作引起了破壞性結果。比如刪除照片時,如下圖:
有心的好奇寶寶(比如筆者)這里可能就會想了:之前介紹過的警告框(Alerts),在進行一些重要操作的時候也會有再次提示的作用,那么它和上拉菜單有什么區別呢?筆者經過研究,終于在一個英文論壇上找到了答案:
警告框比較打擾用戶的使用,一般是告知出現的問題、希望用戶來處理一下;而上拉菜單,往往出現在在用戶點擊了刪除按鈕之后,用戶比較對此有預期。
其實這兩者在功能上差別不是太大,警告框打擾更大一些。
另外,對于這種破壞性操作的上拉彈框,蘋果建議在設計上突出那個破壞性的操作。比如上面那張圖的“刪除照片”按鈕,就文案的顏色被設計成了紅色。此外,上拉菜單必須要在底部有個“取消”按鈕;同時,應盡量避免出現滾動條。
活動視圖
這里的“活動”,指的就是浮層里包含的每一個操作。活動視圖里包含的操作,必須是在對當前場景有用的操作。
iOS規范里提到,活動視圖,可以是從底部出現的浮層,也可以是從按鈕處展現的彈出框(popover),如下圖所示:
左邊是活動視圖,右邊是彈出框
至于使用哪一種,蘋果建議是根據尺寸和屏幕的放置方向決定。其實,原來手機屏幕較小時,popover這種控件,是專屬于iPad設備的,現在隨著手機屏幕尺寸越來越大,popover也開始出現在手機應用的設計里。這也是合理的情況。
另外,在設計活動視圖的時候,需要注意圖標要能表現出操作的意義,文案要盡量簡短明確。如果是系統自帶的一些操作,如復制、黏貼,蘋果建議直接使用系統自帶的樣式,不要創造新樣式。規范里還特別指出,點擊活動視圖里的操作,不可在原有活動視圖之上疊加出現活動視圖或者上拉菜單,最多可以出現警告框這種控件。
以上介紹了iOS設計規范中上拉菜單和活動視圖這兩種控件。我們來總結一下:
上拉菜單可以展示操作(文字形式),也可以對用戶的破壞性操作進行二次確認;而活動視圖也可以展示操作,只是展示的操作數量更多,且可以使用圖標+文字的展現形式。
所以,當操作數目較少的時候,可以考慮使用上拉菜單,而數目較多的時候,最好使用活動視圖;對破壞性操作的二次確認,則必須使用上拉菜單。
對于Android MD規范中底部浮層——“底板(Bottom Sheets)”感興趣的小伙伴,可以查看下面的鏈接:iOS和Android規范解析——底部浮層(上)
底板示例
最后順提一句,討論會使我們更清楚地認識這個控件。歡迎大家留言討論。
相關閱讀
iOS和Android規范解析——警告框(Alerts)對比
#專欄作家#
沐風,微信公眾號:“沐風與體驗設計”。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網易、宜信。6年交互設計經驗,專注設計領域,歡迎關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
專欄作家
沐風,微信公眾號:沐風與體驗設計。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝資深交互設計師。留德海龜,曾任職騰訊微生活、網易、宜人貸。6年交互設計經驗,專注設計領域,歡迎關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!