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

上次的文章,介紹了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)注匾浪。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末皇帮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子蛋辈,更是在濱河造成了極大的恐慌属拾,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梯浪,死亡現(xiàn)場離奇詭異捌年,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)挂洛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門礼预,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人虏劲,你說我怎么就攤上這事托酸“保” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵励堡,是天一觀的道長谷丸。 經(jīng)常有香客問我,道長应结,這世上最難降的妖魔是什么刨疼? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮鹅龄,結(jié)果婚禮上揩慕,老公的妹妹穿的比我還像新娘。我一直安慰自己扮休,他們只是感情好迎卤,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著玷坠,像睡著了一般蜗搔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上八堡,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天樟凄,我揣著相機(jī)與錄音,去河邊找鬼秕重。 笑死不同,一個胖子當(dāng)著我的面吹牛厉膀,可吹牛的內(nèi)容都是我干的溶耘。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼服鹅,長吁一口氣:“原來是場噩夢啊……” “哼凳兵!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起企软,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤庐扫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后仗哨,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體形庭,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年厌漂,在試婚紗的時候發(fā)現(xiàn)自己被綠了萨醒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡苇倡,死狀恐怖富纸,靈堂內(nèi)的尸體忽然破棺而出囤踩,到底是詐尸還是另有隱情,我是刑警寧澤晓褪,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布堵漱,位于F島的核電站,受9級特大地震影響涣仿,放射性物質(zhì)發(fā)生泄漏勤庐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一好港、第九天 我趴在偏房一處隱蔽的房頂上張望埃元。 院中可真熱鬧,春花似錦媚狰、人聲如沸岛杀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽类嗤。三九已至,卻和暖如春辨宠,著一層夾襖步出監(jiān)牢的瞬間遗锣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工嗤形, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留精偿,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓赋兵,卻偏偏與公主長得像笔咽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子霹期,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容