比例、大小和視覺設計

您可以使用 OpenXR、原生 Android API 或 WebXR 建構 Android XR 應用程式。無論您選擇哪個平台，本頁所列的視覺設計建議都適用。

  • Unity、OpenXR 或 WebXR 應用程式：您可以自由選擇任何設計語言。雖然 Material Design 程式庫僅供 Android 應用程式使用，但您仍可遵循其設計建議，套用顏色、間距、比例、按鈕和字體排版。

  • 適用於 Android 應用程式：2D 行動裝置或大螢幕 Android 應用程式可利用 Full Space 功能，且不需要額外進行太多開發工作。如要提高 XR 影響力，建議您使用空間 UI。如要打造更身歷其境的應用程式體驗，您也可以在應用程式中新增3D 模型和環境。

    您可以在 Android XR 中維持現有 Android 應用程式的設計語言。如果是新應用程式或重新設計的應用程式，請考慮遵循 Material Design 指南，針對 UI 大小、無障礙功能、字體排版、色彩配置和元件進行調整，讓應用程式享有 Android 熟悉且經過驗證的設計和可用性。

    如果您使用 Material Design 3 程式庫建構 Android 應用程式，就能輕鬆在元件和自適應版面配置中新增空間 UI 行為。

如何測試應用程式的視覺設計

測試應用程式的視覺設計，是確保使用者享有舒適無障礙體驗的關鍵。以下說明如何在不同 XR 平台和環境中進行測試。

使用模擬器、模擬工具和實體裝置

  • 如果你正在開發 Android 應用程式，請在 Android XR 模擬器上測試應用程式。這有助於您找出潛在問題，並在沒有實體裝置的情況下快速進行疊代。

視覺設計測試檢查清單

  • 測試任何動作或動畫，確保不會觸發暈車症。檢查是否有流暢的轉場效果、穩定的畫面更新率和可預測的動作。
  • 請在實際環境中試用穿透功能，確保虛擬元素能與實體環境融為一體。
  • 在不同光源條件下測試應用程式，包括明亮和昏暗環境。
  • 檢查不同距離和角度下的文字可讀性。
  • 評估色彩配置是否符合無障礙和舒適性。

收集使用者意見回饋

進行使用者測試，找出有待改善之處。納入不同程度的 XR 使用者，以便全面瞭解使用者體驗。

Android XR 中的目標

在 XR 應用程式中，目標是使用者可互動的可點選或可指向的區域。目標越大，精確度、舒適度和可用性就越高。如要讓應用程式更易於存取，請遵循 Material Design 目標指南。這些功能可與 Android、Unity、OpenXR 和 WebXR 應用程式搭配使用。如果您的應用程式已遵循 Material Design 建議，則目標大小會符合最低要求，但 56dp 才是最佳大小。

圖示範例，顯示建議的 56 dp 目標和 4 dp 操作元素。

所有互動式 UI 元素都應考量以下事項：

  • 建議目標：56dp x 56dp 或更大
  • 視覺可用性：48dp x 48dp 或更大
  • 目標和視覺提示之間的偏移：4dp
  • 為確保互動精確，不同 UI 元素的指標目標不應重疊

請務必新增懸停狀態

為了提升無障礙性，請在互動元件中加入 懸停和聚焦狀態，以及基本互動狀態。滑鼠懸停狀態對所有人都有幫助，但對依賴指標輸入來選取 UI 元素的使用者來說，更是至關重要。

懸停狀態在系統中啟用眼球追蹤功能時扮演重要角色。不過，啟用眼動追蹤功能後，應用程式就無法存取懸停狀態，以保護使用者隱私並避免資料分享。系統會繪製僅供使用者看見的醒目效果狀態，以傳達哪些 UI 元件可供互動。

目標之間的距離

Material Design 建議目標 (包括按鈕) 之間至少保留 8dp 的間距。這可確保使用者能輕鬆分辨互動式元素，避免誤選。

按鈕之間的具體距離會因上下文和大小而異。以下列出一些考量因素：

  • 按鈕大小：較大的按鈕之間可能需要較大的間距，才能維持視覺清晰度。
  • 按鈕分組：功能上密切相關的按鈕可分組在一起，而無關聯的按鈕則應分開。
  • 版面配置：螢幕的整體版面配置可能會影響按鈕之間的間距。舉例來說，工具列中的按鈕與對話方塊中的按鈕之間的間距可能不同。

面板大小和縮放

Android XR 的設計可讓您的應用程式讓廣大的觀眾群感到舒適、易讀且易於存取。為提供最佳體驗，Android XR 使用 0.868 dp 至 dmm 的比例。

使用者與 XR 應用程式距離 1.75 公尺的視覺化呈現，面板大小為 1024 dp x 720 dp，圓角為 32 dp。

如果您使用面板，Xr 應用程式與使用者的距離很可能會比實體螢幕更遠。假設使用者戴著耳機。為提供最佳舒適度，請將主要內容放在 41° 的視野範圍內，讓使用者不必移動頭部即可進行互動。

建議

  • 面板的圓角為 32dp。您可以覆寫這項預設值。

面板深度行為

  • 首頁空間：應用程式會在使用者距離 1.75 公尺處啟動，開發人員無法覆寫這項設定。
  • 完整空間：根據預設，應用程式會在 Home 空間中相同的位置啟動。您可以使用空間邏輯，根據使用者的所在位置放置面板，但我們建議的啟動距離為 1.75 公尺。

應用程式距離使用者 1.75 公尺時：

  • 1024dp 會被視為 1556.24 公釐
  • 720dp 會被視為 1093.66 公釐
  • 實體現實中的 1 公尺 = XR 中的 1 公尺

按鈕和圖示

如果您已有 Android 應用程式，就不需要為 Android XR 設計特殊元件。請遵循 Material Design 的按鈕和圖示指南。如果您有 Unity、OpenXR 或 WebXR 應用程式，可以保留按鈕和圖示的原樣，也可以參考 Material Design 的設計。

如果您決定自行建立按鈕或圖示，請選擇簡單的形式、簡潔的線條、基本形狀和有限的調色盤。避免設計過於繁複。讓圖像可在不同解析度和觀看距離下縮放及閱讀。為了符合無障礙標準，請確保元件與背景之間有足夠的對比度，並為使用螢幕閱讀器或其他輔助技術的使用者提供文字說明或工具提示。

顏色

Android XR 遵循 Material Design 的色彩系統，確保提供一致且視覺吸引力的介面。如要打造專為 XR 設計的沉浸式視覺風格，請設計出足夠對比的色彩、選擇平衡的色調，使用色盲人士也能看見的顏色，並避免使用可能造成眼睛疲勞或方向感錯亂的刺眼組合。

Material Design 系統使用名為 HCT 的色彩空間，該色彩空間會使用三個維度定義所有顏色：色相、彩度和色調。

XR 中的深色和淺色主題

就像在 Android 行動應用程式中一樣，使用深色和淺色主題。使用者可以在 Android XR 中切換深色和淺色主題，選擇最符合個人偏好的視覺風格。

進一步瞭解 Material Design 色彩配置。

XR 字體排版

字體易讀性對於 XR 的使用者體驗至關重要。建議您使用字型大小為 14dp 或更大的型態縮放選項，並將字型粗細設為正常或更高，以便提高可讀性。

如要建立簡單易用的應用程式，請考慮遵循 Material Design 的字體排版指南。

特寫大大的 R 和 o，底部有排版數字。深紫色字母與淺紫色背景形成鮮明對比。

XR 中字體排版的最佳做法

  • 變化距離的大小：請記住，使用者會移動並從不同位置查看文字。確保字型大小足夠大，可在遠處閱讀。
  • 將文字放在使用者自然的視野範圍內：這樣可避免過度轉動頭部和頸部過度緊繃。
  • 考量深度和比例：使用深度提示和比例，在 3D 空間中建立階層。
  • 確認文字在使用者背景下可讀取：較重的字重可提供更強的對比度。視環境的色彩、光線和複雜度調整。
  • 使用可調整的字體：面板可能太近、太遠，或在使用者不便觀看的角度。
  • 限制附加至移動物體的文字：這可能會導致暈車。

XR 中的無障礙字體排版

  • 選取易讀的字型：優先選用字型大小較小且距離較遠時，仍能清楚顯示字母形狀的字型。
  • 使用句首字母大寫的文字：句首字母大寫的文字比全大寫的文字更容易閱讀。
  • 限制行長：請盡量縮短行長，以便讀取。
  • 選取無障礙顏色：使用色覺障礙使用者也能看得懂的顏色組合。
  • 避免過度擁擠：為文字留出充足的空間。
  • 允許縮放文字：讓使用者調整文字大小，以符合個人需求。