Android 設定設計指南

本文件將重點說明,正在設計 Android 平台設定、GMS 核心設定 (Google 設定) 或任何用於設計 Android 應用程式設定的開發人員適用的原則和指南。

設計原則

提供清楚的說明

使用者應能快速瀏覽設定畫面,瞭解所有個別設定和值。

圖 1 設定和其目前的值會顯示在頂層畫面

輕鬆整理項目

將常用設定放在畫面最上方。因此請限制一個畫面中的設定數量。顯示超過 10-15 個項目可能會相當吃力。 將部分設定移到其他畫面,建立直覺易用的選單。

圖 2. 常用設定會顯示在畫面頂端

讓設定更顯眼

在某些情況下,建議您在兩個不同螢幕上複製個別設定。不同的情況可能會觸發讓使用者變更設定,因此在多個位置納入設定可協助使用者找到該項目。

針對重複的設定,請為設定建立獨立的畫面,並具有來自不同位置的進入點。

圖 3 和 4.「通知」和「音效」畫面都會顯示「預設通知音效」

使用明確的名稱和狀態

設定標題應簡短有意義。避免使用模糊的標題 例如「一般設定」在標題下方顯示狀態會醒目顯示設定值。顯示具體細節,而非直接描述名稱。

標題應遵守下列準則:

  • 將標籤中最重要的文字放在最前面。
  • 將「不要」或「永不」等負面字詞改為中性用語,例如「封鎖」。
  • 使用非個人標籤,例如「通知」而非「通知我」。 例外狀況:如果必須提及使用者以便瞭解設定,請使用第二人稱 (「您」),而非第一人稱 (「I」)。

標題應避免:

  • 一般字詞,例如設定、變更、編輯、修改、管理、使用、選取或選擇。
  • 重複分隔線或子畫面標題中的字詞。
  • 技術專業術語。

頁面類型

設定清單

這是最常見的螢幕類型。這樣可以一次放置多項設定設定清單可以混用不同控制項,例如切換按鈕、選單和滑桿。

如果同一個類別中有多項設定,可以將這些設定歸為一組。詳情請參閱分組和分隔線

圖 5. 設定清單範例

清單檢視

清單檢視畫面用於顯示應用程式、帳戶、裝置等項目清單。你可以將篩選器或排序控制項新增到畫面上。

圖 6. 清單檢視範例

實體畫面

實體畫面用於呈現不同項目的設定,例如應用程式、帳戶、裝置、Wi-Fi 網路等。

實體會顯示在頂端,並附帶圖示、標題和副標題。這個畫面中的所有設定都必須與這個實體相關。

圖 7. 「應用程式資訊」中使用的實體畫面範例

圖 8. 儲存空間中使用的實體畫面範例

主要設定

Wi-Fi 或藍牙等功能可以開啟或關閉時,最適合使用主要設定。使用者可以透過畫面頂端的切換鈕控制這項功能。如果使用主要設定停用這項功能,也會一併停用所有其他相關設定。

如果某項功能需要較長的文字說明,可使用主要設定做為此螢幕類型,允許更長的頁尾文字。

如需從多個畫面複製或連結設定,請使用主設定。由於主要設定是獨立畫面,因此同一個設定可以避免在不同位置使用多個切換鈕。

圖 9.應用程式通知畫面使用的主要設定範例;關閉主要切換按鈕,會關閉該應用程式的整個功能

圖 10.應用程式通知畫面使用的主要設定範例,已關閉主切換鈕

圓形按鈕選取畫面

當使用者需要選擇設定時,就會使用這個畫面。圓形按鈕可能會顯示在對話方塊或獨立畫面中。圓形按鈕不應與滑桿、選單或切換按鈕一起使用。

圓形按鈕螢幕的頂端可包含圖片,底部可包含頁尾文字。個別圓形按鈕可以和標題搭配副文字。

圖 11. 設定清單不應使用圓形按鈕

圖 12. 以下說明如何在設定中正確使用圓形按鈕

元件

從 Android 8.0 開始,動作工具列會顯示搜尋、說明以及其他相關動作。不建議使用溢位選單,因為使用者可能無法發現隱藏在這些選單中的動作。

適用於沒有螢幕專屬動作的工具列。顯示搜尋和說明動作。

圖 13. 內含搜尋和說明動作的工具列

具有單一動作的工具列:在搜尋前顯示動作。

圖 14. 內含一個動作的工具列,以及搜尋前和說明動作

針對含有超過 1 個動作的工具列:建議在搜尋之前放置主要動作,同時將進階動作放入溢位選單中。

如果所有動作皆為進階,或只對少數使用者有用,請考慮將所有動作納入溢位選單中。

圖 15.含有動作溢位選單的工具列

實體標頭

實體標頭可以只顯示標題,或包含副文字的標題 (子文字可以使用多行)。以下為選擇性動作。您最多可以執行兩個動作。

圖 16.實體標頭

圖示和標題 (App1) 部分會捲動至標頭 (應用程式資訊) 下方。

圖 17. 這裡的應用程式資訊標題是工具列的一部分,其餘畫面則會捲動至其下方

必須提供標題。您也應該顯示醒目顯示設定狀態的子文字。您可以選擇是否要使用圖示。

讓標題文字保持簡明扼要。如果標題過長,可繼續顯示在下一行,不會截斷。請勿長按啟用選單或動作。

例如:

圖 18. 含有圖示、標題和子文字的選單連結

圖 19. 含有標題和子文字的選單連結

圖 20. 僅含標題的選單連結

包含圖示、標題、副文字和獨立的命中目標的選單連結

其他輕觸目標則應使用主題顏色。

圖 21. 輕觸兩下目標選單範例

含有圖示、標題、副文字和統計資料/數字/快訊圖示的選單連結

百分比和時間等數值可以與子文字一併顯示,而長條圖則會顯示在下方。

數值通常會顯示在右側,方便使用者查看並比較。

圖 22. 包含圖示、標題、統計資料和圖表的選單範例

分組和分隔線

如果畫面有多項設定,可以使用分隔線分組和分隔。 與舊版 Android 不同,分隔線現在用於對群組中的設定進行叢集設定,不會區隔個別設定。

如果群組中的設定密切相關,您可以新增群組標題。如果使用群組標題,也應一律加入分隔線。

圖 23. 以分隔線分組的設定

切換

含有圖示、標題和子文字的切換鈕

圖 24. 顯示圖示、標題和子文字

使用標題和子文字進行切換

圖 25.使用標題和子文字進行切換

只切換標題

標題可以與左側圖示一起顯示。

圖 26.只切換標題

清單項目 + 切換按鈕

你可以使用切換按鈕合併清單項目。輕觸垂直線左側就像連結,會將使用者帶往下一個畫面。右側按鈕的運作方式與標準開關相同。

左側的清單項目必須為標題。圖示和子文字為選用項目。

圖 27.清單項目和切換按鈕

滑桿

滑桿中的圖示為選用項目。

圖 28.滑桿

螢幕上的按鈕

肯定動作會使用主題顏色,而負動作則為灰色。正面操作可能包括開啟應用程式、安裝應用程式、新增項目等。負面操作包括清除資料、解除安裝應用程式、刪除項目等。

圖 29.「解除安裝」和「強制停止」的灰色按鈕

圖 30.「立即開啟」的藍色按鈕

漸進式揭露 (進階)

請隱藏不常使用的設定。只有在至少 3 個項目才能隱藏時,才使用「進階」選項。

下方的子文字會顯示隱藏設定的標題。子文字只能包含一行。額外文字會以刪節號遭到截斷。

圖 31.用於「螢幕」畫面的進階模式

雖然提供下拉式選單,但最好還是使用對話方塊或圓形按鈕選取畫面。建議簡化設定,因為單一選擇有三種不同的模式。

如有需要,下拉式選單可在設定有簡單選項的情況下使用。

圖 32.下拉式選單

核取方塊

請盡可能使用切換按鈕取代核取方塊。

你可以使用核取方塊:

  • 適用於負面動作,例如限制應用程式或封鎖服務。
  • 避免螢幕上的開關數量過多。

圖 33.核取方塊可用來減少這個畫面上的切換鈕數量

我們不建議在設定中使用連結。只有在絕對必要的情況下才使用連結。連結應使用強調色,且不要加上底線。

圖 34.設定中使用的連結

註腳文字可用來加入說明內容。頁尾一律應在頂端加上分隔線。頁尾會顯示在畫面底部。 如有需要,註腳可加入連結。

圖 35.頁尾文字

圖案

資料

重要資料可透過長條圖或圓餅圖等圖表顯示,這項資料可以顯示在實體標頭中。例如行動數據和儲存空間。

其他較不重要的資料可以使用一般清單檢視來呈現。

圖 36.儲存空間範例

圖 37.範例顯示網路

使用者教育

部分功能可能需要提供說明或使用者說明。您可以使用動畫或圖片搭配文字。動畫或圖片應顯示在畫面頂端,而頁尾文字可用來加入說明。

圖 38.設定使用動畫和頁尾文字

表單

如果表單有一個輸入欄位,請使用一般對話方塊。讓使用者能輕鬆輸入單一輸入內容。

不過,如果表單有多個欄位,建議您使用全螢幕對話方塊。這樣能騰出更多螢幕空間,以清楚的模式排列欄位。

圖 39.包含一般對話方塊的表單

搜尋結果

搜尋結果會顯示設定的標題、子文字 (如有),以及設定的導覽標記位置。

圖 40.搜尋結果