中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

?Apple Vision Pro的出現為建立新的視覺語言帶來了可能性，那么在設計中，我們要如何才能適應新的視覺語言，并搭建適合空間體驗設計的交互界面？本篇文章里，作者聚焦于空間用戶界面，闡述了幾點設計規范，一起來看一下。

引言

在上篇文章《Apple Vision Pro設計規范之空間設計原則篇》中，我們了解到了Vision Pro的核心設計原則。本篇我們將介紹Vision Pro中如何設計UI界面，并探索設計規范中的UI組件、材質、字體等UI元素設計指導。

Vision Pro建立了一種新的視覺語言，即可以保持與現有平臺的一致性，同時也增加了一些元素來適應沉浸式的空間體驗設計。

本篇文章將聚焦空間用戶界面來介紹Vision Pro以下三點設計規范：

• 用戶界面的基礎設計原則（UI foundations)）：包含UI基礎設計的設計原理、可讀性和可用性等。
• 布局設計（Layout）：如何創建符合人體工學和易于用戶定位的布局。
• 從屏幕到空間中去（From screen to spatial）：如何將2D屏上應用組件帶入空間設計平臺中。

一、UI foundations

Vision Pro中大部分UI系統組件都是我們已經熟知的，但有些也是全新的，現在讓我們深入了解Vision Pro用戶界面的基礎控件。

1. App icons

在App圖標的設計上，Vision Pro進一步將圖標在空間中變得立體和逼真，當用戶看向它們時，圖標的層級會擴展，系統通過添加高光和陰影來增強這種空間效果，以加強圖層間的微妙縱深。

1）使用多個圖層

Vision Pro上真正三維的圖標最多有三層，一個背景層和最多兩個前景層。每個圖層都是1024*1024像素的矩形圖像，兩個前景層包含透明通道?？梢詫⒛愕谋尘皩釉O計為正方形圖像，然后所有層再裁剪為圓形蒙版，最后系統會為圖標自動添加深度，高光和陰影。

2）保持圖標圖形居中

嘗試保持圖形居中，如果它們太靠近邊緣，在展開時可能會偏離中心，同時避免使用大范圍的半透明像素。

2. Materials

1）應用應該易于在任何空間中放置、使用和閱讀

用戶可能會在任何地方使用設備，比如白天亮光下的房間，或夜間的小空間中，所以應用需要適應不同的照明條件或新環境，它們應該易于放置在你周圍任何的空間中（Apps should be easy to place），易于在任何距離使用（Apps should be easy to use），并且易于在任何照明條件下閱讀（Apps should be easy to view），這就是為什么我們設計了一種新的視覺語言玻璃材質，這種效果就像物理世界的一部分。

另外，鏡面高光和陰影增強了它在空間中的大小和位置，而玻璃材質也可以作為畫布來承載UI內容，讓界面感覺更輕盈，并增加一種物理質感。這種輕質感材料也讓人們感覺到窗口后可能有什么。比如其它應用或人。

2）避免使用不透明窗口

假設你要設計一個這樣的卡片，你想添加一個更亮的按鈕。把它放在玻璃材質上是非常易讀的。但如果你想增加對比度，可以在后面使用一個較暗的單元格背景，盡量不要把較亮的元素重疊在一起，這樣會影響可讀性并降低對比度。

3. Typography

1）增加字重以提升閱讀性

字體在我們的PointBase Unix系統經過調整，確保在任何距離都可以清晰地可見，我們還修改了一些字體的字重來提高易讀性。例如在iOS上正文使用的regular字體，需在Vision Pro上使用Medium。對于標題Vision Pro使用Bold而不是Semibold，以保持字體清晰。

即使窗口可以擴大到非常大的尺寸，較小或細字重的字體仍然難以閱讀，因此考慮增加重量（Use Bolder font weights）或使用系統字體從而為優化可讀性。

4. Vibrancy

這是保持整個系統可讀性的最重要細節之一。Vibrancy使顯示前景內容變亮，并通過將光線和顏色發揮作用。在Vision Pro上，由于背景可以不斷變化，Vibrancy也會實時更新，以確保您的文本始終清晰地顯示。Vibrancy在玻璃材料中發揮作用，增強易讀性，使系統材料感覺更豐富和復雜。

可以利用Vibrancy表示文本、符號的層次。Vision Pro提出三種模式：一級（Primary）、二級（Secondary）、三級（Tertiary）。正文使用一級，二描述文本、備注和字幕使用二級。

5. Colors

顏色上，我們通常使用白色的文字或符號以保證它們清晰可見。如果你需要使用其他顏色，請在背景層或整個按鈕中使用它，以便人們更容易注意看到它。盡可能使用系統顏色而不是自定義顏色，因為它們已經被校準為易讀性，并能自適應玻璃材質上的色調和對比度。

二、LayOut

在布局設計上，我們要考慮基于人因的最舒適布局方法，在元素大小上保證給予用戶最易于操作的點擊尺寸，以及在響應時基于眼球追蹤來提供視覺反饋。

1. Ergonomics

在Vision Pro上，用戶主要用眼睛和雙手互動，所以對于設計考慮符合人因的，舒適和安全的體驗比以往任何時候都更加重要，你需要確保內容的排布是有意圖的，不會導致眼睛或頸部疲勞。例如，對大多數人來說，相比抬頭低頭，左右轉更容易而且更遠，所以要把你的用戶界面在人們的視野中，并注意不要放的太高或太低。

如果你的應用需要一個更大的畫布承載界面，可以嘗試一個更寬的長寬比。例如在“Freeform”中，畫布可以盡量水平延伸。

優先將最重要的信息展示在你的應用中（Center important information），這樣用戶可以舒適地查看你的內容。

2. Sizing

1）保證所有交互元素至少60pt的點擊熱區

每個人的眼睛都有細微的差異，設計的元素應該容易被捕捉到。因此建議交互元素的點擊熱區必須至少是60pt,這樣它們可以很容易地被用戶選擇。你的圖標可以在視覺上更小，比如44pt，只要你在它周圍添加足夠的間距，這樣它就滿足了60pt目標區域的最小值。如果你需要在容器中放置幾個按鈕，請使用標準系統按鈕，按鈕之間至少有16個pt間距。

舉一個展開控件的例子，您可以使用一個迷你按鈕，它在部分標題這樣的區域中有28pt，即使這個按鈕看起來很小，但它周圍仍有60pt的空間，所以很好選中。

同樣，使用大的和超大按鈕需要減少周圍的間距，記住給所有交互元素至少60pt的點擊熱區（Give interactive elements 60 points of space）。

3. Focus feedback

1）提供焦點反饋效果

當用戶看向組件時，它們會自動顯示微妙的視覺高亮或懸停效果，這種懸停效果讓用戶理解界面的哪些部分是可交互的。當一個元素不可點擊時，它不再提供焦點反饋，這讓用戶將注意力集中在他們專注于預期的元素，并可以通過敲擊手指來選擇它。

當你創建布局時，考慮到懸停效果是很重要的。例如，如果您正在創建一個列表或菜單，您需要考慮每個元素之間保留一點間距，以避免懸停效果的重疊，建議使用4pt。

2）保證卡片的獨立交互區

在卡片的設計上，我們允許用戶關注它時顯示懸停效果，每個卡片是一個獨立的交互元素，你需要定義一個自定義區域，所以它可以在用戶看到它時變亮，這有助于用戶理解整個區域是一個可以選擇的元素。

3）確保嵌套元素彼此同心

確保嵌套元素有相對的圓角半徑和間距，使它們彼此同心，你可以使用嵌套元素的簡單公式，來調整圓角大?。篒nner corner radius +Padding=Outer corner radius

為了保證平滑圓角，一定要把他們設置成連續的圓角。整個系統中每一個從窗口到角落的元素的關系都是彼此同心的，所以請記住保持嵌套元素彼此同心（keep nested elements concentric），因為這將幫助它們感覺是彼此屬于一起的。

三、From screen to spatial

最后，我們將介紹如何將現有設備組件應用到空間計算平臺中。下文將介紹核心組件結構Window、Tab bar、Side bar，以及一種新的組件形態Ornaments和模態窗口的使用方法。

我們之前提到過，用戶用眼睛、手和聲音與設備進行交互，他們主要通過從遠處查看元素和敲擊手指來實現這一點。除此之外，用戶也可以通過觸摸直接選擇元素。當然，用戶還可以連接鍵盤或觸控板，從而與系統進行各種各樣的輸入。

我們所有的系統組件都已經提供適當的反饋機制，并支持各種輸入方式，所以當你開發你的應用時，使用系統組件（Use system Components），它們可以幫助您快速創建界面。

1. Window、Tab bar、Side bar

讓我們從iOS應用的核心結構Window開始，你的應用需要一個窗口，并為所有元素提供畫布，下面有一個可以在空間中流暢易懂的小橫條，允許用戶在他們的空間中流暢地移動你的應用程序。

在iphone窗口底部，水平排列著一個標簽欄，即主導航。只需輕輕一按，人們就可以快速訪問應用程序的主要部分。而在Vision Pro中，這里的標簽欄垂直浮動在窗口左側的固定位置，設計成易于訪問的，讓用戶可以快速找到應用導航標簽位置，又不會影響應用的主要內容。

為了讓標簽欄看起來更為輕盈，在入口數量上避免超過六個。當看向標簽時，用戶可以快速選擇一個項目。如果用戶看的時間更久一點，它會自動擴展，顯示每個部分的詳細標簽，當人們移開視線時，它會自動關閉，讓人們專注于內容。

如果你需要提供子導航，比如在相冊中，在這個例子中，側邊欄位于標簽欄旁邊的窗口中，這讓用戶清楚地知道他們現在在標簽欄中的位置。

2. Ornaments

Ornaments是Vision Pro上一個全新的組件。在相冊app，在底部中心有一個浮動的配件元素，可以切換年月和日，因為它不受屏幕的限制，ornaments可以放在在窗口前面的底部作為裝飾品，用戶可以更方便的進行與內容有關的快速操作。

因為ornaments通常是多個按鈕集合的獨立玻璃容器，當用戶看著它們時，仍然會有懸停效果。

下面是音樂應用中ornaments的另一個案例，用戶可以通過ornaments控制切換下一首歌曲，同時能夠控制他們的音樂進度。

Ornaments一般被放置在窗口底部，所以它們與底部邊緣重疊了20pt的位置，這使得ornaments感覺就像它們與主窗口集成在一起，但不會阻止太多的內容。當你滾動頁面時，ornaments的窗口背景會從玻璃中提取內容的顏色，讓其看起來更加和諧。

Ornaments可以選擇顯示或隱藏，所以只建議用于可聚焦的高頻操作內容上，例如，看照片或看電影，只需輕輕一點，我們就可以讓人們快速訪問重要的控件，而不會分散他們對主要體驗的注意力。

3. Menus Popovers Sheets

在Vision Pro上，菜單和彈窗可以在窗口外拓展展開，默認情況下它們居中顯示，確保用戶總是能看到內容。使用白色背景上的黑色圖標來顯示按鈕被選中，這有助于向用戶清晰的反饋哪個按鈕被調起了彈框。在按鈕的設計上，避免使用白色背景，除非是選中狀態。

4. Sheets

當多個窗口以sheets進行展示時，新的模態窗口出現在父窗口的中心,與父窗口保持相同的z位置，父窗口向后推并變暗，這有助于用戶集中注意力,并防止用戶與父視圖進行交互，直到sheets被關閉。

如果您需要呈現另一個sheets，次要模態窗口可以出現在最前面，并將所有內容向后推,如下圖所示。

參考鏈接 空間設計界面：https://developer.apple.com/videos/play/wwdc2023/10076/