(3)Menus & Dialogs

Image Source: Google Material Design Guideline

菜單(Menus)

是Android平台的元件。iOS並沒有相似的元件,但可依呈現的資訊不同,以其他不同的元件來代替。或是直接開新的頁面。

而菜單有兩種形式,分別是“簡單的菜單(Simple menus)”和“層疊式菜單(Cascading menus)”。因“層疊式菜單”不適合用在手機上,所以不在這次討論的範圍。

“菜單”主要用於顯示一系列選擇,而每行只顯示一個選擇。菜單可以根據應用程序的當前狀態動態地更改其可用菜單項。不相關的選項可以直接隱藏或disable。不會動態變更的選項應該置於上方。展開時,“簡單菜單”會嘗試將當前選擇的菜單項與列表項垂直對齊。並不會因為點擊的位置偏右,而改變顯示的位置。

在Material Design中,與“簡單菜單”對應的是“簡單對話框”。 雖然它們可以顯示相同的內容,但簡單的菜單比簡單的對話框更適合,因為簡單的菜單對用戶的當前上下文的影響較小。不過“簡單對話框”可以提供與列表項目可用的選項有關的其他細節,或提供與主要任務相關的導航或操作。

對話框(Dialogs)

有三種形式:簡單對話框(Simple dialogs)、確認對話框(Confirmation dialogs)、全屏對話框(Full-screen dialogs)、警告跳窗(Alerts)

“警告跳窗”主要用於警示用,不再這次比較的範圍內。

避免在對話框中使用“了解更多的按鈕”來訪問幫助文件, 應該直接在對話框內展開更多的說明,或是在進入對話框之前就提供說明。

另外,對話框應該避免從對話框中打開對話框或包含滾動內容。但是“全屏對話框”例外,“全屏對話框”可能會打開其他對話框或是選擇器。

某些對話框內容需要滾動,例如鈴聲列表。對於可滾動選項列表,請將標題固定在頂部。而不是隨內容滾動。

(1)簡單對話框:沒有明確的取消按鈕,在屏幕上垂直和水平置中顯示簡單的對話框。“簡單對話框”可取代“簡單菜單”(上面有提到)。

(2)確認對話框:要求用戶在提交選項之前明確地確認其選擇。 例如,用戶可以聽多個鈴聲,但只能在觸摸“確定”時進行最終選擇。確認對話框可以使用列表之外的佈局,例如日期選擇器,但仍然專注於指定單個值(挑選日期,但不選擇時間和日期)。

(3)全屏對話框:由一系列的任務組成(如輸入一個新創建的日曆)。會因導航欄左側顯示的不同,而有不同行為。 當左側是設置向上箭頭,則任何更改將在選擇後立即保存。 當左側是設置叉叉時,若點擊將放棄所有更改,僅在觸摸保存時才會保存更改。

相關文章_iOS vs. Android_次要資訊的呈現方式(1)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade