上次的文章,介紹了Android MD設(shè)計規(guī)范中對于“底板(Bottom Sheets)”的定義茫孔,這次的文章來跟大家介紹一下iOS設(shè)計規(guī)范中的底部浮層峭火。
在iOS規(guī)范中,出現(xiàn)在頁面底部的浮層有兩種:上拉菜單(Action Sheets)和活動視圖(Activity Views)牍鞠。
上拉菜單
上拉菜單,是當(dāng)用戶激發(fā)一個操作的時候评姨,出現(xiàn)的浮層难述。“使用上拉菜單讓用戶可以開始一個新任務(wù)或者對破壞性操作(例如:刪除吐句、退出登錄等胁后,筆者注)進(jìn)行二次確認(rèn)∴率啵” 使用上拉菜單開始一個新任務(wù)攀芯,在蘋果官方的郵件應(yīng)用里有很多案例,比如下面這個??
點(diǎn)擊了那個長得很像“回復(fù)”的按鈕文虏,出現(xiàn)了三個操作供用戶選擇:回復(fù)敲才、轉(zhuǎn)發(fā)、打印择葡。
在用戶進(jìn)行破壞性操作的時候紧武,上拉菜單成為一個確認(rèn)性質(zhì)的存在,防止用戶誤操作引起了破壞性結(jié)果敏储。?比如刪除照片時??
有心的好奇寶寶(比如筆者)這里可能就會想了:之前介紹過的警告框(Alerts)阻星,在進(jìn)行一些重要操作的時候也會有再次提示的作用,那么它和上拉菜單有什么區(qū)別呢已添?筆者經(jīng)過研究妥箕,終于在一個英文論壇上找到了答案:
警告框比較打擾用戶的使用,一般是告知出現(xiàn)的問題更舞、希望用戶來處理一下畦幢;而上拉菜單,往往出現(xiàn)在在用戶點(diǎn)擊了刪除按鈕之后缆蝉,用戶比較對此有預(yù)期宇葱。
其實(shí)這兩者在功能上差別不是太大瘦真,警告框打擾更大一些。
另外黍瞧,對于這種破壞性操作的上拉彈框诸尽,蘋果建議在設(shè)計上突出那個破壞性的操作。比如上面那張圖的“刪除照片”按鈕印颤,就文案的顏色被設(shè)計成了紅色您机。此外,上拉菜單必須要在底部有個“取消”按鈕年局;同時际看,應(yīng)盡量避免出現(xiàn)滾動條。
活動視圖
這里的“活動”矢否,指的就是浮層里包含的每一個操作仲闽。活動視圖里包含的操作兴喂,必須是在對當(dāng)前場景有用的操作蔼囊。
iOS規(guī)范里提到焚志,活動視圖衣迷,可以是從底部出現(xiàn)的浮層,也可以是從按鈕處展現(xiàn)的彈出框(popover)酱酬,如下圖所示??
至于使用哪一種,蘋果建議是根據(jù)尺寸和屏幕的放置方向決定膳沽。其實(shí)汗菜,原來手機(jī)屏幕較小時,popover這種控件挑社,是專屬于iPad設(shè)備的陨界,現(xiàn)在隨著手機(jī)屏幕尺寸越來越大,popover也開始出現(xiàn)在手機(jī)應(yīng)用的設(shè)計里痛阻。這也是合理的情況菌瘪。
另外,在設(shè)計活動視圖的時候阱当,需要注意圖標(biāo)要能表現(xiàn)出操作的意義俏扩,文案要盡量簡短明確。如果是系統(tǒng)自帶的一些操作弊添,如復(fù)制录淡、黏貼,蘋果建議直接使用系統(tǒng)自帶的樣式油坝,不要創(chuàng)造新樣式嫉戚。規(guī)范里還特別指出刨裆,點(diǎn)擊活動視圖里的操作,不可在原有活動視圖之上疊加出現(xiàn)活動視圖或者上拉菜單彼水,最多可以出現(xiàn)警告框這種控件崔拥。
以上介紹了iOS設(shè)計規(guī)范中上拉菜單和活動視圖這兩種控件。我們來總結(jié)一下:
上拉菜單可以展示操作(文字形式)凤覆,也可以對用戶的破壞性操作進(jìn)行二次確認(rèn)链瓦;?而活動視圖也可以展示操作,只是展示的操作數(shù)量更多盯桦,且可以使用圖標(biāo)+文字的展現(xiàn)形式慈俯。
所以,當(dāng)操作數(shù)目較少的時候拥峦,可以考慮使用上拉菜單贴膘,而數(shù)目較多的時候,最好使用活動視圖略号;對破壞性操作的二次確認(rèn)刑峡,則必須使用上拉菜單。
對于Android MD規(guī)范中底部浮層——“底板(Bottom Sheets)”感興趣的小伙伴玄柠,可以查看下面的鏈接:iOS和Android規(guī)范解析——底部浮層(上)
最后順提一句突梦,討論會使我們更清楚地認(rèn)識這個控件。歡迎大家留言討論羽利。
相關(guān)閱讀
iOS和Android規(guī)范解析——提示框(Toast)對比
iOS和Android規(guī)范解析——警告框(Alerts)對比
德國海龜一枚?? 宫患,曾任職于騰訊微生活、網(wǎng)易这弧、宜信等公司⊥尴校現(xiàn)為愛奇藝高級交互設(shè)計師。歡迎關(guān)注匾浪。