蘋果「Vision Pro」空間用戶界面設計規則是什麼?

薛定諤d家肥貓 發佈 2023-06-15T08:23:20.780790+00:00

2023 年 6 月 6日舉行的蘋果全球開發者大會(Worldwide Developers Conference簡稱為「WWDC」 )的主題演講中,發布了蘋果首款 MR 設備 Vision Pro,蘋果正在倡導,用於Vision Pro在真實空間中顯示應用程式窗口和內容「空間用


2023 年 6 月 6日舉行的蘋果全球開發者大會(Worldwide Developers Conference簡稱為「WWDC」 )的主題演講中,發布了蘋果首款 MR 設備 Vision Pro,蘋果正在倡導,用於Vision Pro在真實空間中顯示應用程式窗口和內容「空間用戶界面設計」,蘋果的設計團隊解釋了開發人員應該知道的空間用戶界面設計的原則。

Design for spatial user interfaces - WWDC23 - Videos - Apple Developer

https://developer.apple.com/videos/play/wwdc2023/10076/

Vision Pro中安裝的visionOS作業系統的是其最大的特徵是應用程式圖標是三維呈現的。

應用程式圖標由一個背景層和一兩個前景層組成,最多三個:各層為正方形,1024×1024像素。重疊後切成直徑1024像素的圓,成為圖標。

窗體使用半透明玻璃特效。 蘋果的設計團隊表示,「應用程式需要適應周圍的照明環境,它們需要易於放置在周圍的空間中,易於在任何距離使用,並且在任何照明條件下都易於查看。」

蘋果的設計團隊還表示,應該避免使用不透明普通窗體,因為它們會在界面中感到侷促或沉重,而不會與周圍環境融為一體。

半透明玻璃窗體對照明做出動態響應,並自動調整對比度和色彩平衡,因此當您從白天移動到夜晚時,窗口也會作為空間的一部分發生變化。

因此,visionOS 中窗口不如 iOS 和 iPadOS中的窗口那樣明暗分明。 窗口中的單元格由半透明玻璃特效的濃淡來表示。 此外,默認情況下,窗口上顯示的字符是白色空心的。

至於系統字體,類型與iOS和iPadOS相同,但為了提高可讀性,稍微變粗了。

由於字體尺寸變大或變小的會使閱讀變得困難,因此標題基本上是通過調整Vibrancy(鮮艷度)而不是字體大小來強調的。

至於顏色,仍然建議基本上使用白色文本。


蘋果的設計團隊說:「visionOS主要是用眼睛和手進行操作,所以創造一種身體舒適和安全性優先的體驗是很重要的。比以往任何時候都要考慮到人體工程學來配置內容,以免引起眼睛和脖子的疲勞。」UI 設計要求上、下、左和右留出足夠的空白區域,以方便人們查看。

此外,如果您需要比應用程式更大的畫布,建議基本上不要在垂直方向而是在水平方向擴展。

對於按鈕,建議將其高度和寬度設置為至少 60pt的大小。 對於 44 pt大小按鈕(這是一種常見尺寸),您可以在頂部、底部、左側和右側設置 8 pt的邊距。

這將在視覺上提供按鈕之間的 16pt分隔。 這個縱橫60pt的個設置,可以更輕鬆地在 visionOS 窗口中進行選擇。

例如,此按鈕在 28 pt處看起來很小。

但是,實際上,按鈕的面積是長度和寬度為 60 pt。 通過這樣做,即使是小按鈕也可以毫無問題地選擇。

按鈕是處於活動狀態還是非活動狀態,通過按鈕的色調直觀地指示。

還可以使用懸停效果,使其在選中時從周圍環境中顯示。 這種懸停效果使用戶可以輕鬆查看界面的哪些部分是交互式的。

建議懸停效果中出現的單元格部分至少間隔 4 pt。

蘋果的設計團隊還表示,每個元素的形狀應該保持一致。 例如,在以下情況下,外部容器和內部嵌套元素是帶有圓角的矩形: 此時,必須注意確保角的半徑已設置並彼此同心。

換句話說,重要的是要注意嵌套元素的拐角半徑 + 邊距寬度 = 容器的拐角半徑的公式。

接下來,關於輸入。 使用 visionOS,您無需使用滑鼠或鍵盤等物理設備,而是使用手和眼睛進行打字。 例如,您可以通過在膝蓋上做捏右手的動作,來將其添加到收藏夾中。

此外,通過用手指直接觸摸出現在空間中的虛擬鍵盤,您可以像使用物理鍵盤一樣使用它。

也就是說,visionOS需要空間輸入設計時, 就是「系統組件」的用武之地。

例如,當您在 iPhone 上打開「照片」應用程式時,就會有一個水平放置在窗口上標籤欄控制器,以便快速訪問應用程式的每個部分。

另一方面,visionOS Photos應用程式將標籤欄縱向放置在左側的固定位置。

它位於左側,以便平時不受妨礙,但是如果您查看此選項卡欄,它將自動展開以顯示每個部分的標籤。 當您將視線從放大的標籤欄移開時,它會自動關閉,讓您再次專注於內容。

當您在iPad屏幕上查看「照片」應用程式時,這就是它的外觀。

如果你看一下visionOS中的「照片」應用程式,你可以看到為了符合人體工程學,上下左右都有很好的空白,標籤欄顯示在窗口的左側。

此外,visionOS還提供了一個名為「裝飾品」的功能。 它被用作工具欄,以便輕鬆操作內容。

關鍵是裝飾品被用作工具欄略微遮住窗體。 根據蘋果設計團隊的說法,將它們放在彼此之上重疊20pt會讓他們感覺它們與主窗口集成在一起,但它們不會阻檔內容。 裝飾品可以完全顯示和刪除,只需輕點一下即可快速訪問重要操作,使其成為更直觀內容操作的必要元素。

當您在iPad上顯示菜單時,菜單部分將彈出如下。

在visionOS的類似的情況下,彈出菜單的按鈕突出顯示為「白底黑字」。 這樣可以更輕鬆地直觀地查看哪個按鈕調用了彈出菜單。 這就是為什麼蘋果的設計團隊敦促人們「不要在visionOS中使用白色背景的按鈕,除非是為了表示'已選擇'」。

此外,顯示內容信息的模態窗口 (Modal Window)以與上級窗口相同的 Z 坐標顯示,當顯示模態窗口時,上級窗口被推得更深並變暗。

蘋果的設計團隊表示,模態窗口中的關閉和後退按鈕應始終位於左上角。

關鍵字: