iOS和Android規范解析——簡易菜單、簡易對話框和彈出框
今天的這幾個控件的中文名字,在網上查了半天,沒有找到統一的叫法,所以自己翻譯了一下:簡易菜單對應的是MD(Material Design,下同)中的Simple Menu;簡易對話框,對應的是MD中的Simple Dialog,彈出框對應的是iOS中的Popover。
按照慣例,我們還是從MD的控件開始說起。
Google Material Design Guideline
首先,什么是簡易菜單呢?先放一個例子出來嚇唬嚇唬人:
簡易菜單(Simple Menu)
好像例子沒有任何可怕的點。就是想說個冷笑話,你管我。分析上面的例子,簡易菜單,就是在用戶當前操作的位置出現的選項集合。它有以下幾個規則:
- 消失規則:當用戶選擇了某個選項,簡易菜單立刻消失;當用戶點擊簡易菜單之外的區域,或者點擊安卓系統的返回按鈕,則簡易菜單消失。
- 展現規則:簡易菜單應該出現在入口的正上方,也就是覆蓋住入口。
這一條在國內的安卓系統中經常被錯用,比如下面這種情況:
點擊右上角的三個點,則菜單覆蓋在三個點的正上方
國內很多安卓版本的應用,點擊三個點之后,菜單是出現在三個點的下方。如果僅僅是從MD規范的角度來說,這是不太規范的做法。
選項中的第三個,是當前已選擇選項。點擊入口后,第三個選項位于入口的正上方。
另外,簡易菜單還有一個展現原則,要把當前已經選擇的選項展現在入口的正上方,就像下面這樣:
下面是一個反例:
在上圖中,當前已選擇的是第二個選項。但是點擊入口打開簡易菜單,是第一個選項出現在入口的正上方,所以是錯誤的。
但是,也有例外,如果菜單的入口剛好位于頁面的邊緣位置,導致當前頁面展現不下簡易菜單了,則不必遵循“當前已選選項必須在入口正上方”這個原則,比如下面這個例子:
點擊Voice search,在當前位置無法展現完整的簡易菜單,因此當前已選選項“English”沒有覆蓋在入口(Voice search)的正上方
以上就是簡易菜單的用法。
簡易對話框和簡易菜單是很相似的,因為它們的功能都是一樣的:提供一系列選項。
所不同的是,簡易對話框除了可以提供選項之外,還可以提供一些相關的操作。另外,在簡易對話框中,可以展現頭像、圖標(icon)、一條選項中的說明性文字、其它操作(比如上圖中的“添加聯系人”按鈕)。簡易對話框的呼出方式,可以是點擊或者長按,而簡易菜單一般是點擊。
由于簡易對話框出現在屏幕的中央,比簡易菜單更加打擾用戶。所以MD規范簡易,盡量使用簡易菜單而不是簡易對話框。
iOS Human Interface Design Guideline
彈出框(Popovers)最開始是只建議用在iPad上的一種控件,最近由于手機屏幕越來越大,也由于安卓和iOS兩種規范的混用,也越來越多地出現在iOS應用里,比如下面這個例子:
可以看到,iOS的彈出框和Android的菜單比較相似,但iOS的彈出框是出現在入口的下面的,且要有箭頭,指示入口的位置。
關于彈出框,需要注意以下幾點:
- 一次只能出現一個彈出框。如果一個操作激發了另一個彈出框,則進行該操作的時候,立即關閉當前彈出框,然后再出現新的彈出框。
- 彈出框上面不能覆蓋別的控件,警告框除外。
- 一般來說,在彈出框上進行了操作,則彈出框關閉。如果需要增加“放棄操作”或者“確認操作”的功能,則可增加“取消”、“完成”這樣的按鈕。如果在彈出框里可以進行多項選擇的操作,則需用戶點擊了“取消”、“完成”或者點擊彈出框以外的區域關閉彈出框。
以上對比了MD中的簡易菜單和簡易對話框,他們的功能相似,只是簡易對話框中還可以加入頭像、圖標(icon)、關于選項的說明性文字以及其它操作,所以功能性更強。但簡易對話框出現的形式,導致了它對用戶的打擾更大,因此MD簡易盡量使用簡易菜單,除非有使用簡易對話框的必要再使用它。
另外,在iOS中,彈出框是與上面兩個控件較為相似的控件。有個細節需要注意:MD中的簡易菜單,形式上是一個矩形,沒有箭頭指示入口位置;iOS的彈出框,規范里強調要有箭頭指示入口位置。這個區別需要提醒一下。
最后順提一句,討論能讓我們的認識更深刻,也更全面。歡迎大家留言討論。
相關閱讀
iOS和Android規范解析——警告框(Alerts)對比
#專欄作家#
沐風,微信公眾號:“沐風與體驗設計”。人人都是產品經理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝Phone和PC端交互團隊負責人。留德海龜,曾任職騰訊微生活、網易、宜信。6年交互設計經驗,專注設計領域,歡迎關注。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
- 目前還沒評論,等你發揮!