Android 設置設計指南

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

設計原則

提供良好的概述

用戶應該能夠瀏覽設定畫面並了解所有單獨的設定及其值。

圖 1.設定及其目前值顯示在頂層螢幕上

直觀地組織項目

將常用的設定放在螢幕頂部。限制一個螢幕上的設定數量。顯示超過 10-15 個項目可能會讓人不知所措。透過將某些設定移至單獨的螢幕來建立直覺的選單。

圖 2.常用設定位於螢幕頂部

使設定易於查找

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

對於重複的設置,請為該設定建立一個單獨的螢幕,並具有來自不同位置的入口點。

圖 3 和 4. 「預設通知聲音」出現在「通知」和「聲音」畫面上

使用清晰的標題和狀態

讓您的設定標題簡短且有意義。避免使用“常規設定”等模糊標題。標題下方顯示狀態以反白設定的值。顯示具體細節,而不僅僅是描述標題。

標題應該:

  • 將標籤中最重要的文字放在前面。
  • 將“不”或“從不”等負面詞語改寫為“阻止”等中性詞語。
  • 使用“通知”等客觀標籤,而不是“通知我”。例外:如果為了理解設定而需要提及用戶,請使用第二人稱(「您」)而不是第一人稱(「我」)。

標題應避免:

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

頁面類型

設定列表

這是最常見的螢幕類型。它允許將多個設定放置在一起。設定清單可以是控制項的組合,例如開關、選單和滑桿。

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

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