比例、大小和視覺設計

您可以使用 OpenXR、原生 Android API 或 WebXR,建構沉浸式 Android XR 應用程式。無論選擇哪個平台,本頁面列出的視覺設計最佳化建議都適用。

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

  • Android 應用程式:2D 行動裝置或大螢幕 Android 應用程式可運用全螢幕功能,且幾乎不需要額外開發工作。如要達到高 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 建議,目標大小會符合最低要求,但建議使用 56 dp。

範例圖示:建議的目標為 56 dp,可供性為 48 dp。

所有互動式 UI 元素都應考量下列事項:

  • 建議目標:56 dp x 56 dp 以上
  • 視覺提示 (圖示):48dp x 48dp 以上
  • 目標與視覺效果之間的位移:4dp
  • 為確保互動準確,不同 UI 元素的指標目標不應重疊
  • 視需要,目標和圖示會隨著父項容器或標籤縮放。

請務必新增懸停狀態

為提升無障礙程度,請在互動式元件中加入 懸停和焦點狀態,以及基本互動狀態。懸停狀態對所有使用者都有幫助,對於依賴指標輸入選取 UI 元素的使用者來說,更是至關重要。

懸停狀態在系統中啟用眼動追蹤功能方面扮演重要角色。不過,啟用眼動追蹤功能後,應用程式就無法存取懸停狀態,以保護使用者隱私並防止資料共用。系統會繪製僅供使用者查看的醒目狀態,傳達哪些 UI 元件可互動。

目標之間的距離

根據 Material Design 建議,目標之間應至少間隔 8dp,包括按鈕。確保使用者能輕鬆區分互動元素,避免意外選取。

按鈕之間的具體距離會因按鈕的背景和大小而異。請考量以下因素:

  • 按鈕大小:按鈕越大,可能就需要更多空間,才能維持視覺清晰度。
  • 按鈕分組:功能密切相關的按鈕可以分組,並靠得更近,不相關的按鈕則應分開。
  • 版面配置:畫面的整體版面配置可能會影響按鈕間的間距。舉例來說,工具列中的按鈕間距可能會比對話方塊中的按鈕間距更小。

面板大小和比例

Android XR 的設計宗旨是讓應用程式舒適好讀,且能觸及廣大目標對象。為提供最佳體驗,Android XR 會使用 0.868 dp-to-dmm。

視覺化圖片:使用者距離 XR 應用程式 1.75 公尺,面板大小為 1024 dp x 720 dp,圓角為 32 dp。

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

建議

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

面板深度行為

  • 主畫面:應用程式會在距離使用者 1.75 公尺處啟動,開發人員無法覆寫這項設定。
  • 全螢幕:應用程式預設會啟動於「主畫面」中的相同位置。您可以根據使用者的位置,使用空間邏輯放置面板,但建議啟動距離為 1.75 公尺。

應用程式與使用者相距 1.75 公尺時:

  • 1024 dp 相當於 1556.24 公釐
  • 720 dp 相當於 1093.66 公釐
  • 實體世界中的 1 公尺 = XR 中的 1 公尺

按鈕和圖示

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

如果決定自行建構按鈕或圖示,請選擇簡單的形式、乾淨的線條、基本形狀和有限的調色盤。避免設計過於複雜。 確保這些元素在不同解析度和觀看距離下,都能清楚顯示且可擴充。 為確保無障礙功能,請確保元件與背景之間有足夠的對比度,並為使用螢幕閱讀器或其他輔助技術的使用者提供文字說明或工具提示。

顏色

Android XR 遵循 Material Design 的色彩系統,確保介面一致且美觀。如要打造適合 XR 的沉浸式視覺風格,請設計足夠的對比度、選擇平衡的色調、使用色盲者可辨識的顏色,並避免使用不協調的組合,以免造成眼睛疲勞或迷失方向。

Material Design 系統使用名為 HCT 的色域,透過色調、色度及色調這三個維度定義所有顏色。

針對顯示差異調整最佳化色彩

有線 XR 眼鏡的螢幕與 XR 頭戴式裝置的螢幕不同,有線 XR 眼鏡不會取代檢視畫面,而是將光線投射到透明鏡片上,就像投影機一樣。

  • 頭戴式裝置會取代現實世界:頭戴式裝置會使用攝影機拍攝房間,並在不透明的螢幕上顯示。如果應用程式想顯示黑色,就會關閉像素,形成真正的黑點,遮住後方的世界。
  • 有線 XR 眼鏡會疊加在現實世界:你可以直接透過鏡片看到房間。顯示器會在該檢視區塊上疊加光線。 雖然你無法使用像素投射「黑暗」,但硬體調暗功能可以調暗鏡片,阻擋現實世界的光線。

以資訊公開為設計目標

有線 XR 眼鏡的螢幕是加成式顯示器,因此您選擇的顏色會直接影響介面的實心或透明程度。

  • 黑色會顯示為透明:你無法顯示純黑色。全黑像素會關閉,也就是說,使用者可直接透過該部分鏡片看到現實世界。
  • 亮度可提高可見度:顏色越亮,越能呈現實心效果。 深色發出的光線較少,看起來也較透明。加入白色可提升可見度,但請避免過度明亮,以免眼睛疲勞。
  • 環境混合:UI 顏色會與真實世界在視覺上混合。使用明亮的高對比度色彩,有助於 UI 在不可預測的背景中脫穎而出。
  • 調暗鏡片可增加實體感:鏡片越暗,數位內容的透明度就越低,實體感就越強。增加電致變色調光可阻擋更多背景光,讓色彩看起來更飽和,並凸顯深色元素。

XR 中的深色和淺色主題

使用深色和淺色主題的方式與 Android 行動應用程式相同。使用者可以在 Android XR 中切換深色和淺色主題,選擇最符合個人偏好的視覺風格。

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

XR 字體排版

字體易讀性對於 XR 舒適的使用者體驗至關重要。建議使用字型大小為 14 dp 以上的字體比例選項,並將字體粗細設為「一般」或更粗,以提升可讀性。

如要建立操作直覺的應用程式,請考慮遵循 Material Design 的排版指南。

特寫的大寫 R 和小寫 o,底部有印刷體數字。深紫色字母與淺紫色背景形成鮮明對比。

XR 中的字體排版

  • 不同距離的字體大小:請注意,使用者會移動,且從不同位置觀看文字。確認字型大小夠大,可從遠處閱讀。
  • 將文字放在使用者自然視野內:避免頭部過度移動和頸部拉傷。
  • 考量深度和比例:使用深度提示和比例在 3D 空間中建立階層。
  • 確保文字在使用者背景上清晰易讀:較粗的字體可提供更高的對比度。請根據環境的色彩、光線和複雜度進行調整。請注意,較亮的文字值有助於在有線 XR 眼鏡上維持可讀性。
  • 使用可調整的排版:面板可能太近、太遠,或使用者觀看的角度不佳。
  • 限制附加至移動物件的文字:這可能會導致動暈症。

XR 中的無障礙字體排版

  • 選取容易辨識的字型:優先選用在小尺寸和遠距離下,字母形狀仍清晰可辨的字型。
  • 使用句首字母大寫格式:句首字母大寫格式的文字比全大寫文字更容易閱讀。
  • 限制行長度:盡量縮短行長度,提升可讀性。
  • 選取無障礙顏色:使用色覺辨識障礙者可辨識的色彩組合。
  • 避免過於擁擠:文字之間應有足夠的空間。
  • 允許文字縮放:讓使用者調整文字大小,滿足個人需求。

OpenXR™ 和 OpenXR 標誌是 The Khronos Group Inc. 的商標,已在中國、歐盟、日本和英國註冊為商標。