Android 設置設計指南

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

本文檔重點介紹了設計 Android 平台設置、GMS 核心設置(Google 設置)或任何為其 Android 應用程序設計設置的開發人員的原則和指南。

設計原則

提供一個很好的概述

用戶應該能夠瀏覽設置屏幕並了解所有單獨的設置及其值。

圖 1.設置及其當前值顯示在頂層屏幕上

直觀地組織項目

將常用設置放在屏幕頂部。限制一個屏幕上的設置數量。顯示超過 10-15 個項目可能會讓人不知所措。通過將一些設置移動到單獨的屏幕來創建直觀的菜單。

圖 2.常用設置位於屏幕頂部

使設置易於查找

在某些情況下,在兩個不同的屏幕上複製單個設置可能會有所幫助。不同的情況會觸髮用戶更改一個設置,因此在多個位置包含該設置將有助於用戶找到該項目。

對於重複設置,為設置創建一個單獨的屏幕,並具有來自不同位置的入口點。

圖 3 和 4. “通知”和“聲音”屏幕上都出現“默認通知聲音”

使用明確的標題和狀態

使您的設置標題簡短而有意義。避免使用模糊的標題,例如“常規設置”。在標題下方,顯示狀態以突出顯示設置的值。顯示具體細節,而不僅僅是描述標題。

標題應該:

  • 將標籤中最重要的文本放在首位。
  • 將“不要”或“從不”等否定詞改寫為“阻止”等中性詞。
  • 使用“通知”等非個人標籤,而不是“通知我”。例外:如果需要參考用戶來理解設置,請使用第二人稱(“你”)而不是第一人稱(“我”)。

標題應避免:

  • 通用術語,例如設置、更改、編輯、修改、管理、使用、選擇或選擇。
  • 重複部分分隔符或子屏幕標題中的單詞。
  • 技術術語。

頁麵類型

設置列表

這是最常見的屏幕類型。它允許將多個設置放在一起。設置列表可以是控件的組合,例如開關、菜單和滑塊。

如果一個類別中有許多設置,則可以將它們組合在一起。有關更多詳細信息,請參閱分組和分隔符

圖 5.設置列表示例

列表顯示

列表視圖用於顯示應用程序、帳戶、設備等項目的列表。可以將過濾或排序控件添加到屏幕中。

圖 6.列表視圖示例

實體畫面

實體屏幕用於顯示不同項目的設置,如應用程序、帳戶、設備、Wi-Fi 網絡等。

在視覺上,實體顯示在頂部,帶有圖標、標題和副標題。此屏幕上的所有設置都必須與此實體相關。

圖 7. App info 中使用的實體屏幕示例

圖 8.存儲中使用的實體屏幕示例

主設置

當可以打開或關閉整個功能(例如 Wi-Fi 或藍牙)時,最好使用主設置。通過使用屏幕頂部的開關,用戶可以輕鬆控制此功能。使用主設置禁用該功能會禁用所有其他相關設置。

如果某個功能需要更長的文本描述,則可以使用主設置,因為此屏幕類型允許更長的頁腳文本。

如果需要從多個屏幕複製或鏈接設置,請使用主設置。由於主設置是一個單獨的屏幕,因此您可以避免在不同位置為同一設置設置多個開關。

圖 9.應用通知屏幕中使用的主設置示例;關閉主切換會關閉此應用的整個功能

圖 10.應用通知屏幕中使用的主設置示例,主切換關閉

單選按鈕選擇畫面

當用戶需要選擇設置時使用此屏幕。單選按鈕可以顯示在對話框中或單獨的屏幕上。單選按鈕不應與滑塊、菜單或開關一起使用。

單選按鈕屏幕可以在頂部包含圖像,在底部包含頁腳文本。單個單選按鈕可以有字幕和標題。

圖 11.不應在設置列表中使用單選按鈕

圖 12.這是在設置中正確使用單選按鈕的方法

成分

從 Android 8.0 開始,操作工具欄會顯示搜索和幫助以及其他相關操作。不鼓勵使用溢出菜單,因為用戶可能不會發現隱藏在這些菜單中的操作。

對於沒有特定於屏幕操作的工具欄。顯示搜索和幫助操作。

圖 13.帶有搜索和幫助操作的工具欄

對於具有一項操作的工具欄:在搜索之前顯示操作。

圖 14.在搜索和幫助操作之前有一個操作的工具欄

對於具有超過 1 個操作的工具欄:考慮將主要操作放在搜索之前,同時將高級操作放在溢出菜單中。

如果所有操作都是高級操作或僅對一小部分用戶有用,請考慮將所有操作放在溢出菜單中。

圖 15.帶有用於操作的溢出菜單的工具欄

實體標頭

實體標題可以僅顯示標題,也可以顯示帶有子文本的標題(子文本允許多行)。以下操作是可選的。您最多可以有兩個操作。

圖 16.實體標頭

圖標和標題 (App1) 部分將在標題 (App info) 下滾動。

圖 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.搜索結果