在本文中泡态，我們將探索蘋果新的空間設計操作系統(tǒng)背后的用戶體驗原則官疲。
注：本文中所用到的空間設計均由?Spatial Design 翻譯而來袱结。
空間設計：為用戶而設計
為了確保在我們使用這種技術設計的平臺上有一個平穩(wěn)的用戶體驗，在創(chuàng)新和熟悉之間取得平衡是至關重要的途凫。
用戶已經(jīng)很熟悉的元素垢夹，如側邊欄、標簽和搜索字段颖榜，需要設計成用戶熟悉的樣式棚饵，減少用戶的學習成本。
空間設計：設計Windows
在空間操作系統(tǒng)中掩完，Windows 采用了新的可視化語言，增強了用戶體驗硼砰。
毛玻璃背景可以通過透明度感知后面的空間且蓬，給用戶一種真實空間中浮動窗口的感覺。
此外题翰，對于窗口管理恶阴，還有 UI 組件允許用戶：
●?移動
●?關閉
●?調(diào)整大小
空間設計：窗口尺寸和可擴展性
Windows可以適應不同的尺寸，且具有高度的靈活性和可擴展性豹障。
用戶可以選擇自己想要的尺寸并完全操控它冯事。
然而，用戶體驗設計師應該根據(jù)正在查看的內(nèi)容設置標準尺寸血公。
例如昵仅，Safari 上的網(wǎng)站應該在垂直方向的窗口中打開，因為用戶習慣于垂直使用網(wǎng)頁內(nèi)容累魔。而Keynote或PPT應該采用更水平的窗口摔笤。
空間設計：Windows 中的控制管理
根據(jù)蘋果的空間設計技術，窗口選項和命令應該設計在窗口本身之外垦写。
空間設計：使用像素來適應窗口
在空間設計中吕世，將界面適應于不同的屏幕是至關重要的。
蘋果在設計中引入了像素的概念作為標準測量單位梯投，允許界面元素根據(jù)用戶距離進行調(diào)整和縮放命辖。用戶體驗設計師可以確保任何距離的可讀性和可用性，創(chuàng)建一致的用戶體驗分蓖。
在基于空間設計用戶體驗的應用程序設計中尔艇，我們必須考慮以下與用戶相關的地方:
?● 用戶周圍的環(huán)境
?● 眼睛和手的交互?
● 人機工程學?
例如，界面的設計應該允許用戶從不同的位置查看內(nèi)容咆疗，例如躺著或坐著漓帚。
考慮到基本的人機工程學原理，界面不應設計得太靠近用戶或位于用戶后面午磁。
蘋果的指南還涉及最小化的移動尝抖。
空間設計指南建議允許最小的移動毡们，甚至重新定位。用戶可能需要更換房間或移動并轉向房間的其他部分昧辽。在這種情況下衙熔，可以通過在查看器上按一個按鈕來重置中央視圖。
6.空間設計：空間搅荞、深度和比例?
空間管理：指南?
關于空間管理红氯，蘋果已經(jīng)研究了使兩種類型的環(huán)境共存的最佳方法：
●?數(shù)字環(huán)境，如網(wǎng)站咕痛、窗口痢甘、音樂應用等?
●?真實環(huán)境，如墻壁茉贡、吊燈塞栅、沙發(fā)、椅子等
雖然展示來自真實環(huán)境的元素可以為用戶提供與現(xiàn)實的連接感腔丧，但也可能分散注意力放椰，阻礙放松。
解決方案是一個混合方案愉粤，考慮到兩種情況：
●?主動交互動作
●?被動交互動作
對于主動交互動作砾医，例如移動窗口或放置元素和微小移動，可以使用透明度來顯示兩個環(huán)境衣厘。
在上圖的中如蚜，用戶將窗口拖動到右側。
像椅子這樣的真實元素在這個活動操作期間是可見的头滔，因為當移動窗口時怖亭，窗口具有透明屬性。
當窗口被釋放并且所需的視頻開始播放時坤检，透明度將完全消除兴猩，為用戶提供最大的沉浸感。
而在被動交互動作階段早歇，用戶放松倾芝，他們的動作很小甚至是靜止不動的。
在這種情況下箭跳，空間設計指南建議用戶使用耳機上的按鈕選擇沉浸程度晨另。
在上圖中，背景中的真實元素仍然可見谱姓，而在下圖中借尿，背景已被隱藏，并且已經(jīng)過渡到完全沉浸。
深度控制：指南
2D和3D體現(xiàn)在界面上最大的差別在于深度（depth）路翻。在設計周圍空間環(huán)境中的用戶體驗時狈癞，有必要使用深度設計來避免創(chuàng)建太大而繁瑣的UI。
通過深度設計茂契，即使在遠離用戶眼睛的環(huán)境中蝶桶，也可以創(chuàng)建層次結構并專注于內(nèi)容。
深度顯著影響我們對空間物體的感知掉冶。
在下圖中真竖，我們可以看到視頻控制元素（可以調(diào)整、暫停厌小、快進等聲音）的位置比視頻本身更靠近用戶恢共，從而保持了畫面比例。
如果上圖中的操作區(qū)被放置在視頻中召锈，它會更大并且對用戶來說更不可用旁振。
另一個可用于實現(xiàn)深度的 UI 元素是光照和陰影。例如涨岁，在觀看視頻時，您可以看到上下反射的燈光和陰影吉嚣，從而營造出令用戶愉悅的沉浸感梢薪。
空間設計：沉浸感
沉浸式體驗代表了空間設計的巔峰。
根據(jù)蘋果的空間設計準則設計用戶體驗尝哆，可以讓我們創(chuàng)建吸引用戶注意力的應用程序秉撇，同時尊重周圍的物理環(huán)境，從共享空間窗口到全屏體驗秋泄。
這樣琐馆，我們可以創(chuàng)建與現(xiàn)實融為一體的數(shù)字體驗。
為了確保用戶保持參與感恒序，引導他們在沉浸式體驗中的注意力是至關重要的瘦麸。
推薦的引導注意力的技巧包括：
●?運動
●?動畫
●?空間音頻
●?以及對物料的謹慎使用
空間設計：設計用戶界面
在這個部分，我們將根據(jù)蘋果的空間設計原則討論用戶界面設計歧胁。
開發(fā)的視覺語言將一致性與熟悉感相結合滋饲，適應沉浸式和空間體驗。
有五個基礎：
●應用圖標
●材質(zhì)
●物料
●飽和度
●顏色
空間設計用戶界面：應用圖標
通過空間設計喊巍，蘋果將主屏幕圖標的概念提升到更加逼真和立體的水平屠缭。
當用戶查看某一個圖標時，系統(tǒng)通過添加鏡面反射和陰影來強調(diào)這種效果崭参，從而在圖層之間體現(xiàn)縱深感呵曹。
應用圖標：多圖層
對于空間設計中的圖標，建議使用多個圖層來實現(xiàn)3D效果。
每個應用程序圖標最多可以包含三層：
背景
最多兩層前層奄喂。
在方形背景圖上設計圖形icon铐殃，并使圖形居中以獲得最佳視覺吸引力。
系統(tǒng)將自動應用圓形裁剪并以 3D 形式渲染它們砍聊。
不建議在圖層上使用透明度背稼。
空間設計UI：毛玻璃效果
在設計空間界面時，考慮所使用的材料至關重要玻蝌。
應用程序應適應不同的照明條件蟹肘，并易于在各種環(huán)境中定位和查看。
毛玻璃材質(zhì)非常適合這種用途俯树，因為它具有視覺吸引力和適應性帘腹。它與物理世界無縫銜接，讓周圍環(huán)境的光線與虛擬內(nèi)容進行交互许饿。
即使是黑暗效果阳欲，例如夜間光線昏暗的房間，毛玻璃效果也是最佳的視覺形式陋率。
使用毛玻璃效果球化，可以創(chuàng)建輕量級且視覺上感知更沉浸的界面，營造縱深感和現(xiàn)實感瓦糟。
需要考慮的一項準則是在淺色層和深色層之間交替筒愚。
例如，在此界面中菩浙，正確的做法是在淺色圖層之上使用深色圖層來突出顯示元素巢掺，并在視覺上像卡片設計一樣。
將一個淺色圖層放在另一個淺色圖層上等未經(jīng)處理的效果劲蜻，在對比度和視覺可訪問性方面效果不佳陆淀。
空間設計UI：字體
在我們的視覺和用戶界面設計課程中所學到的內(nèi)容中，文字在界面中起著至關重要的作用先嬉，應該具備可訪問性轧苫、易讀性，并能夠適應不同的情況坝初。
這些原則同樣適用于空間設計浸剩，但設計技巧建議稍微增加字體的粗細。
在iOS中鳄袍，建議在正文元素中使用“regular”字體類型绢要，在標題中使用“semibold”字體類型。而在空間設計中拗小，建議增加字體的粗細：
·正文使用中等粗細的字體重罪；
·標題使用粗體字體。
空間設計UI：飽和度
飽和度是保持可讀性的另一個重要元素。
通過飽和度剿配，我們可以照亮前景內(nèi)容并動態(tài)適應背景變化搅幅，確保文本保持清晰易讀。
Apple 使用不同級別的飽和度：一級呼胚、二級茄唐、三級等。
空間設計UI：顏色
還應重點考慮顏色如何使用蝇更。
除了可訪問性原理沪编，對于空間設計，我們需要謹慎對待對比度年扩，特別是在使用玻璃等非平坦背景時蚁廓。
如果我們想使用顏色，建議將它們應用于整個元素厨幻，而不僅僅是文本相嵌。否則，強烈建議使用白色文本和圖標况脆。
空間設計UI：布局
為了在空間設計中創(chuàng)建符合人體工程學的布局饭宾，必須考慮使用者的舒適性和安全性。
為了實現(xiàn)這個目標格了，我們當然可以記住我們之前看到的關于窗口設計和圖標間距的規(guī)則捏雌，同時考慮用戶的視野、眼睛和脖子的運動笆搓，目的是在設計階段將內(nèi)容定位在他們的視野范圍內(nèi)。
空間設計指導方針更喜歡更廣泛的元素和集中的信息纬傲。
關于交互式元素定位满败，確保它們有至少60個像素的選擇區(qū)域。即使在視覺上較小的元素也可以通過在它們周圍添加足夠的空間來滿足這一要求叹括。
最后算墨，利用視覺焦點來指示 UI 組件的交互性，并考慮懸停效果的填充汁雷。
空間設計: 輸入
在空間界面中净嘀，人們通過眼睛、手和聲音進行交互侠讯。
也有可能在“空間”內(nèi)創(chuàng)建鍵盤挖藏，并使用手指打字，就好像它是真實的厢漩。
當然膜眠，也可以連接藍牙鍵盤或觸摸板，正常寫入和交互。
理解輸入模式對于設計直觀體驗是至關重要的宵膨。
通過使用系統(tǒng)組件架谎，您可以快速創(chuàng)建對用戶操作作出平穩(wěn)響應的接口。
至于導航元素或選項辟躏，最好使用一個沒有邊框或背景的簡單設計谷扣，因為效果是通過用戶的眼睛或選擇框架添加的。
對于較大的類似窗口的元素捎琐，這些裝飾應該顯示在窗口的邊緣(例如底部会涎、側面或頂部)。
在這個“播放器”欄的例子中野哭，建議將其放置在被控制的主窗口上方20像素的位置在塔。
空間設計: 眼睛和手
空間設計引入了與用戶界面交互的新方式,
利用眼睛和手。通過空間設計拨黔，用戶可以通過查看 UI 元素和使用手勢輕松地控制他們的設備蛔溃。這使得用戶體驗更加個性化、舒適和精確篱蝇。
適配眼睛的設計
眼睛在空間體驗中起著基礎性的作用贺待，是空間定位的主要機制。為了確保舒適的交互零截，將 UI 內(nèi)容放置在用戶的視野中是至關重要的麸塞，要注意中心位置。
可以將外圍區(qū)域保留給使用頻率較低的內(nèi)容涧衙，例如輔助操作哪工，同時保持主要內(nèi)容易于訪問和居中。
在空間設計中也應該考慮深度弧哎。將交互式內(nèi)容維護在一致的深度上雁比，可以輕松地在 UI 元素之間進行轉換。通過使用微妙的深度變化撤嫩，設計師可以有效地傳達層級偎捎，同時減少眼睛疲勞。
為了優(yōu)化眼球定位序攘，設計師可以利用圓形的形狀茴她，如圓形和圓形矩形，這自然引導注意力到中心程奠。避免運用尖銳的方形丈牢，會導致眼睛的注意力被四個直角分散。
此外梦染，元素和文本之間的充足間距提高了視覺精度和可用性赡麦。
正如前面提到的朴皆，維持一個最小的目標面積為60個像素點的眼睛為基礎的互動是至關重要的。該系統(tǒng)提供的標準組件方便了定位泛粹，但是在設計定制元素時遂铡，堅持尺寸指南是至關重要的。
眼睛的交互可以通過微妙的懸停效果來增強晶姊，這表明用戶的凝視正在驅(qū)動交互扒接。懸停效果應該是謹慎的，并與內(nèi)容協(xié)調(diào)们衙，添加到 UI 元素的響應钾怔。
適配手的設計
手是另一種與空間輸入交互方式。
手勢應該是直觀和自然的蒙挑。識別常見的手勢宗侦，如手指縮放或拖動移動，使用戶感到舒適忆蚀，并迅速上手學習并互動矾利。
元素尺寸和間距必須考慮到用戶手的大小來設計。太小的元素會很難交互到馋袜，而太大的元素會讓人難以觸及 UI 界面上的某個特定區(qū)域男旗。
測試和迭代是確定最佳單元尺寸的關鍵。
空間設計最令人興奮的體驗之一就是眼-手交互的結合欣鳖。例如察皇，在這個屏幕上，用戶可以在一個窗口中查看圖像中的特定點泽台，并使用他們的手只放大選中的區(qū)域什荣。
文章參考：
圖片來源：Apple Developers
