比例、大小和視覺設計

如果您有 Android 應用程式,且想要保留其視覺風格,可以在 Android XR 中維持該設計語言。對於新應用程式或重新設計的應用程式,建議您遵循 Material Design 指南,針對 UI 大小、無障礙功能、字體、色彩配置和元件進行調整。

2D 行動或大螢幕 Android 應用程式可利用 Full Space 功能,而不需要額外進行太多開發工作。如要提高 XR 影響力,建議您將面板轉換為空間化,並建立空間 UI。如要打造更身歷其境的使用者歷程,建議您加入3D 模型環境

如果您已建構或正在建構 Unity、Open XR 或 WebXR 應用程式,可以自由採用任何所選設計語言。Material Design 提供的設計建議可協助您套用顏色、間距、比例、按鈕和字體排版。

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

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

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

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

視覺設計測試檢查清單

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

收集使用者意見回饋

進行使用者測試,找出有待改善之處。納入不同程度的 XR 使用者,以便全面掌握使用者視覺能力。

Android XR 中的目標

在 XR 應用程式中,目標是使用者可互動的可點選或可指向的區域。目標越大,精準度、舒適度和可用性就越高。如要讓應用程式更易於存取,請遵循 Material Design 目標指南。這些 API 可與 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。您可以覆寫這項預設值。

面板深度行為

  • Home Space:應用程式會在距離使用者 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 中的無障礙字體排版

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