本文件將重點說明,正在設計 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.設定中使用的連結
Footer
註腳文字可用來加入說明內容。頁尾一律應在頂端加上分隔線。頁尾會顯示在畫面底部。 如有需要,註腳可加入連結。
圖 35.頁尾文字
圖案
資料
重要資料可透過長條圖或圓餅圖等圖表顯示,這項資料可以顯示在實體標頭中。例如行動數據和儲存空間。
其他較不重要的資料可以使用一般清單檢視來呈現。
圖 36.儲存空間範例
圖 37.範例顯示網路
使用者教育
部分功能可能需要提供說明或使用者說明。您可以使用動畫或圖片搭配文字。動畫或圖片應顯示在畫面頂端,而頁尾文字可用來加入說明。
圖 38.設定使用動畫和頁尾文字
表單
如果表單有一個輸入欄位,請使用一般對話方塊。讓使用者能輕鬆輸入單一輸入內容。
不過,如果表單有多個欄位,建議您使用全螢幕對話方塊。這樣能騰出更多螢幕空間,以清楚的模式排列欄位。
圖 39.包含一般對話方塊的表單
搜尋結果
搜尋結果會顯示設定的標題、子文字 (如有),以及設定的導覽標記位置。
圖 40.搜尋結果