iOS和Android規(guī)范解析——底部浮層(下)

0 評論 14564 瀏覽 98 收藏 7 分鐘

上次的文章(點擊查看),介紹了Android MD設(shè)計規(guī)范中對于“底板(Bottom Sheets)”的定義,這次的文章來跟大家介紹一下iOS設(shè)計規(guī)范中的底部浮層。

在iOS規(guī)范中,出現(xiàn)在頁面底部的浮層有兩種:上拉菜單(Action Sheets)和活動視圖(Activity Views)。

上拉菜單

上拉菜單,是當用戶激發(fā)一個操作的時候,出現(xiàn)的浮層?!笆褂蒙侠藛巫層脩艨梢蚤_始一個新任務(wù)或者對破壞性操作(例如:刪除、退出登錄等,筆者注)進行二次確認?!?使用上拉菜單開始一個新任務(wù),在蘋果官方的郵件應(yīng)用里有很多案例,比如下面這個:

點擊了那個長得很像“回復(fù)”的按鈕,出現(xiàn)了三個操作供用戶選擇:回復(fù)、轉(zhuǎn)發(fā)、打印。

在用戶進行破壞性操作的時候,上拉菜單成為一個確認性質(zhì)的存在,防止用戶誤操作引起了破壞性結(jié)果。比如刪除照片時,如下圖:

有心的好奇寶寶(比如筆者)這里可能就會想了:之前介紹過的警告框(Alerts),在進行一些重要操作的時候也會有再次提示的作用,那么它和上拉菜單有什么區(qū)別呢?筆者經(jīng)過研究,終于在一個英文論壇上找到了答案:

警告框比較打擾用戶的使用,一般是告知出現(xiàn)的問題、希望用戶來處理一下;而上拉菜單,往往出現(xiàn)在在用戶點擊了刪除按鈕之后,用戶比較對此有預(yù)期。

其實這兩者在功能上差別不是太大,警告框打擾更大一些。

另外,對于這種破壞性操作的上拉彈框,蘋果建議在設(shè)計上突出那個破壞性的操作。比如上面那張圖的“刪除照片”按鈕,就文案的顏色被設(shè)計成了紅色。此外,上拉菜單必須要在底部有個“取消”按鈕;同時,應(yīng)盡量避免出現(xiàn)滾動條。

活動視圖

這里的“活動”,指的就是浮層里包含的每一個操作?;顒右晥D里包含的操作,必須是在對當前場景有用的操作。

iOS規(guī)范里提到,活動視圖,可以是從底部出現(xiàn)的浮層,也可以是從按鈕處展現(xiàn)的彈出框(popover),如下圖所示:

左邊是活動視圖,右邊是彈出框

至于使用哪一種,蘋果建議是根據(jù)尺寸和屏幕的放置方向決定。其實,原來手機屏幕較小時,popover這種控件,是專屬于iPad設(shè)備的,現(xiàn)在隨著手機屏幕尺寸越來越大,popover也開始出現(xiàn)在手機應(yīng)用的設(shè)計里。這也是合理的情況。

另外,在設(shè)計活動視圖的時候,需要注意圖標要能表現(xiàn)出操作的意義,文案要盡量簡短明確。如果是系統(tǒng)自帶的一些操作,如復(fù)制、黏貼,蘋果建議直接使用系統(tǒng)自帶的樣式,不要創(chuàng)造新樣式。規(guī)范里還特別指出,點擊活動視圖里的操作,不可在原有活動視圖之上疊加出現(xiàn)活動視圖或者上拉菜單,最多可以出現(xiàn)警告框這種控件。

以上介紹了iOS設(shè)計規(guī)范中上拉菜單和活動視圖這兩種控件。我們來總結(jié)一下:

上拉菜單可以展示操作(文字形式),也可以對用戶的破壞性操作進行二次確認;而活動視圖也可以展示操作,只是展示的操作數(shù)量更多,且可以使用圖標+文字的展現(xiàn)形式。

所以,當操作數(shù)目較少的時候,可以考慮使用上拉菜單,而數(shù)目較多的時候,最好使用活動視圖;對破壞性操作的二次確認,則必須使用上拉菜單。

對于Android MD規(guī)范中底部浮層——“底板(Bottom Sheets)”感興趣的小伙伴,可以查看下面的鏈接:iOS和Android規(guī)范解析——底部浮層(上)

底板示例

最后順提一句,討論會使我們更清楚地認識這個控件。歡迎大家留言討論。

相關(guān)閱讀

iOS和Android規(guī)范解析——底部浮層(上)

iOS和Android規(guī)范解析——提示框(Toast)對比

iOS和Android規(guī)范解析——警告框(Alerts)對比

#專欄作家#

沐風,微信公眾號:“沐風與體驗設(shè)計”。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設(shè)計經(jīng)驗,專注設(shè)計領(lǐng)域,歡迎關(guān)注。

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

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

專欄作家
沐風,微信公眾號:沐風與體驗設(shè)計。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝資深交互設(shè)計師。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜人貸。6年交互設(shè)計經(jīng)驗,專注設(shè)計領(lǐng)域,歡迎關(guān)注。

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

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

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!