在本文中，我們將探索蘋果新的空間設(shè)計(jì)操作系統(tǒng)背后的用戶體驗(yàn)原則。
注：本文中所用到的空間設(shè)計(jì)均由?Spatial Design 翻譯而來(lái)。
空間設(shè)計(jì)：為用戶而設(shè)計(jì)
為了確保在我們使用這種技術(shù)設(shè)計(jì)的平臺(tái)上有一個(gè)平穩(wěn)的用戶體驗(yàn)，在創(chuàng)新和熟悉之間取得平衡是至關(guān)重要的。
用戶已經(jīng)很熟悉的元素，如側(cè)邊欄、標(biāo)簽和搜索字段，需要設(shè)計(jì)成用戶熟悉的樣式，減少用戶的學(xué)習(xí)成本。
空間設(shè)計(jì)：設(shè)計(jì)Windows
在空間操作系統(tǒng)中，Windows 采用了新的可視化語(yǔ)言，增強(qiáng)了用戶體驗(yàn)。
毛玻璃背景可以通過(guò)透明度感知后面的空間，給用戶一種真實(shí)空間中浮動(dòng)窗口的感覺(jué)。
此外，對(duì)于窗口管理，還有 UI 組件允許用戶：
●?移動(dòng)
●?關(guān)閉
●?調(diào)整大小
空間設(shè)計(jì)：窗口尺寸和可擴(kuò)展性
Windows可以適應(yīng)不同的尺寸，且具有高度的靈活性和可擴(kuò)展性。
用戶可以選擇自己想要的尺寸并完全操控它。
然而，用戶體驗(yàn)設(shè)計(jì)師應(yīng)該根據(jù)正在查看的內(nèi)容設(shè)置標(biāo)準(zhǔn)尺寸。
例如，Safari 上的網(wǎng)站應(yīng)該在垂直方向的窗口中打開(kāi)，因?yàn)橛脩袅?xí)慣于垂直使用網(wǎng)頁(yè)內(nèi)容。而Keynote或PPT應(yīng)該采用更水平的窗口。
空間設(shè)計(jì)：Windows 中的控制管理
根據(jù)蘋果的空間設(shè)計(jì)技術(shù)，窗口選項(xiàng)和命令應(yīng)該設(shè)計(jì)在窗口本身之外。
空間設(shè)計(jì)：使用像素來(lái)適應(yīng)窗口
在空間設(shè)計(jì)中，將界面適應(yīng)于不同的屏幕是至關(guān)重要的。
蘋果在設(shè)計(jì)中引入了像素的概念作為標(biāo)準(zhǔn)測(cè)量單位，允許界面元素根據(jù)用戶距離進(jìn)行調(diào)整和縮放。用戶體驗(yàn)設(shè)計(jì)師可以確保任何距離的可讀性和可用性，創(chuàng)建一致的用戶體驗(yàn)。
在基于空間設(shè)計(jì)用戶體驗(yàn)的應(yīng)用程序設(shè)計(jì)中，我們必須考慮以下與用戶相關(guān)的地方:
?● 用戶周圍的環(huán)境
?● 眼睛和手的交互?
● 人機(jī)工程學(xué)?
例如，界面的設(shè)計(jì)應(yīng)該允許用戶從不同的位置查看內(nèi)容，例如躺著或坐著。
考慮到基本的人機(jī)工程學(xué)原理，界面不應(yīng)設(shè)計(jì)得太靠近用戶或位于用戶后面。
蘋果的指南還涉及最小化的移動(dòng)。
空間設(shè)計(jì)指南建議允許最小的移動(dòng)，甚至重新定位。用戶可能需要更換房間或移動(dòng)并轉(zhuǎn)向房間的其他部分。在這種情況下，可以通過(guò)在查看器上按一個(gè)按鈕來(lái)重置中央視圖。
6.空間設(shè)計(jì)：空間、深度和比例?
空間管理：指南?
關(guān)于空間管理，蘋果已經(jīng)研究了使兩種類型的環(huán)境共存的最佳方法：
●?數(shù)字環(huán)境，如網(wǎng)站、窗口、音樂(lè)應(yīng)用等?
●?真實(shí)環(huán)境，如墻壁、吊燈、沙發(fā)、椅子等
雖然展示來(lái)自真實(shí)環(huán)境的元素可以為用戶提供與現(xiàn)實(shí)的連接感，但也可能分散注意力，阻礙放松。
解決方案是一個(gè)混合方案，考慮到兩種情況：
●?主動(dòng)交互動(dòng)作
●?被動(dòng)交互動(dòng)作
對(duì)于主動(dòng)交互動(dòng)作，例如移動(dòng)窗口或放置元素和微小移動(dòng)，可以使用透明度來(lái)顯示兩個(gè)環(huán)境。
在上圖的中，用戶將窗口拖動(dòng)到右側(cè)。
像椅子這樣的真實(shí)元素在這個(gè)活動(dòng)操作期間是可見(jiàn)的，因?yàn)楫?dāng)移動(dòng)窗口時(shí)，窗口具有透明屬性。
當(dāng)窗口被釋放并且所需的視頻開(kāi)始播放時(shí)，透明度將完全消除，為用戶提供最大的沉浸感。
而在被動(dòng)交互動(dòng)作階段，用戶放松，他們的動(dòng)作很小甚至是靜止不動(dòng)的。
在這種情況下，空間設(shè)計(jì)指南建議用戶使用耳機(jī)上的按鈕選擇沉浸程度。
在上圖中，背景中的真實(shí)元素仍然可見(jiàn)，而在下圖中，背景已被隱藏，并且已經(jīng)過(guò)渡到完全沉浸。
深度控制：指南
2D和3D體現(xiàn)在界面上最大的差別在于深度（depth）。在設(shè)計(jì)周圍空間環(huán)境中的用戶體驗(yàn)時(shí)，有必要使用深度設(shè)計(jì)來(lái)避免創(chuàng)建太大而繁瑣的UI。
通過(guò)深度設(shè)計(jì)，即使在遠(yuǎn)離用戶眼睛的環(huán)境中，也可以創(chuàng)建層次結(jié)構(gòu)并專注于內(nèi)容。
深度顯著影響我們對(duì)空間物體的感知。
在下圖中，我們可以看到視頻控制元素（可以調(diào)整、暫停、快進(jìn)等聲音）的位置比視頻本身更靠近用戶，從而保持了畫面比例。
如果上圖中的操作區(qū)被放置在視頻中，它會(huì)更大并且對(duì)用戶來(lái)說(shuō)更不可用。
另一個(gè)可用于實(shí)現(xiàn)深度的 UI 元素是光照和陰影。例如，在觀看視頻時(shí)，您可以看到上下反射的燈光和陰影，從而營(yíng)造出令用戶愉悅的沉浸感。
空間設(shè)計(jì)：沉浸感
沉浸式體驗(yàn)代表了空間設(shè)計(jì)的巔峰。
根據(jù)蘋果的空間設(shè)計(jì)準(zhǔn)則設(shè)計(jì)用戶體驗(yàn)，可以讓我們創(chuàng)建吸引用戶注意力的應(yīng)用程序，同時(shí)尊重周圍的物理環(huán)境，從共享空間窗口到全屏體驗(yàn)。
這樣，我們可以創(chuàng)建與現(xiàn)實(shí)融為一體的數(shù)字體驗(yàn)。
為了確保用戶保持參與感，引導(dǎo)他們?cè)诔两襟w驗(yàn)中的注意力是至關(guān)重要的。
推薦的引導(dǎo)注意力的技巧包括：
●?運(yùn)動(dòng)
●?動(dòng)畫
●?空間音頻
●?以及對(duì)物料的謹(jǐn)慎使用
空間設(shè)計(jì)：設(shè)計(jì)用戶界面
在這個(gè)部分，我們將根據(jù)蘋果的空間設(shè)計(jì)原則討論用戶界面設(shè)計(jì)。
開(kāi)發(fā)的視覺(jué)語(yǔ)言將一致性與熟悉感相結(jié)合，適應(yīng)沉浸式和空間體驗(yàn)。
有五個(gè)基礎(chǔ)：
●應(yīng)用圖標(biāo)
●材質(zhì)
●物料
●飽和度
●顏色
空間設(shè)計(jì)用戶界面：應(yīng)用圖標(biāo)
通過(guò)空間設(shè)計(jì)，蘋果將主屏幕圖標(biāo)的概念提升到更加逼真和立體的水平。
當(dāng)用戶查看某一個(gè)圖標(biāo)時(shí)，系統(tǒng)通過(guò)添加鏡面反射和陰影來(lái)強(qiáng)調(diào)這種效果，從而在圖層之間體現(xiàn)縱深感。
應(yīng)用圖標(biāo)：多圖層
對(duì)于空間設(shè)計(jì)中的圖標(biāo)，建議使用多個(gè)圖層來(lái)實(shí)現(xiàn)3D效果。
每個(gè)應(yīng)用程序圖標(biāo)最多可以包含三層：
背景
最多兩層前層。
在方形背景圖上設(shè)計(jì)圖形icon，并使圖形居中以獲得最佳視覺(jué)吸引力。
系統(tǒng)將自動(dòng)應(yīng)用圓形裁剪并以 3D 形式渲染它們。
不建議在圖層上使用透明度。
空間設(shè)計(jì)UI：毛玻璃效果
在設(shè)計(jì)空間界面時(shí)，考慮所使用的材料至關(guān)重要。
應(yīng)用程序應(yīng)適應(yīng)不同的照明條件，并易于在各種環(huán)境中定位和查看。
毛玻璃材質(zhì)非常適合這種用途，因?yàn)樗哂幸曈X(jué)吸引力和適應(yīng)性。它與物理世界無(wú)縫銜接，讓周圍環(huán)境的光線與虛擬內(nèi)容進(jìn)行交互。
即使是黑暗效果，例如夜間光線昏暗的房間，毛玻璃效果也是最佳的視覺(jué)形式。
使用毛玻璃效果，可以創(chuàng)建輕量級(jí)且視覺(jué)上感知更沉浸的界面，營(yíng)造縱深感和現(xiàn)實(shí)感。
需要考慮的一項(xiàng)準(zhǔn)則是在淺色層和深色層之間交替。
例如，在此界面中，正確的做法是在淺色圖層之上使用深色圖層來(lái)突出顯示元素，并在視覺(jué)上像卡片設(shè)計(jì)一樣。
將一個(gè)淺色圖層放在另一個(gè)淺色圖層上等未經(jīng)處理的效果，在對(duì)比度和視覺(jué)可訪問(wèn)性方面效果不佳。
空間設(shè)計(jì)UI：字體
在我們的視覺(jué)和用戶界面設(shè)計(jì)課程中所學(xué)到的內(nèi)容中，文字在界面中起著至關(guān)重要的作用，應(yīng)該具備可訪問(wèn)性、易讀性，并能夠適應(yīng)不同的情況。
這些原則同樣適用于空間設(shè)計(jì)，但設(shè)計(jì)技巧建議稍微增加字體的粗細(xì)。
在iOS中，建議在正文元素中使用“regular”字體類型，在標(biāo)題中使用“semibold”字體類型。而在空間設(shè)計(jì)中，建議增加字體的粗細(xì)：
·正文使用中等粗細(xì)的字體；
·標(biāo)題使用粗體字體。
空間設(shè)計(jì)UI：飽和度
飽和度是保持可讀性的另一個(gè)重要元素。
通過(guò)飽和度，我們可以照亮前景內(nèi)容并動(dòng)態(tài)適應(yīng)背景變化，確保文本保持清晰易讀。
Apple 使用不同級(jí)別的飽和度：一級(jí)、二級(jí)、三級(jí)等。
空間設(shè)計(jì)UI：顏色
還應(yīng)重點(diǎn)考慮顏色如何使用。
除了可訪問(wèn)性原理，對(duì)于空間設(shè)計(jì)，我們需要謹(jǐn)慎對(duì)待對(duì)比度，特別是在使用玻璃等非平坦背景時(shí)。
如果我們想使用顏色，建議將它們應(yīng)用于整個(gè)元素，而不僅僅是文本。否則，強(qiáng)烈建議使用白色文本和圖標(biāo)。
空間設(shè)計(jì)UI：布局
為了在空間設(shè)計(jì)中創(chuàng)建符合人體工程學(xué)的布局，必須考慮使用者的舒適性和安全性。
為了實(shí)現(xiàn)這個(gè)目標(biāo)，我們當(dāng)然可以記住我們之前看到的關(guān)于窗口設(shè)計(jì)和圖標(biāo)間距的規(guī)則，同時(shí)考慮用戶的視野、眼睛和脖子的運(yùn)動(dòng)，目的是在設(shè)計(jì)階段將內(nèi)容定位在他們的視野范圍內(nèi)。
空間設(shè)計(jì)指導(dǎo)方針更喜歡更廣泛的元素和集中的信息。
關(guān)于交互式元素定位，確保它們有至少60個(gè)像素的選擇區(qū)域。即使在視覺(jué)上較小的元素也可以通過(guò)在它們周圍添加足夠的空間來(lái)滿足這一要求。
最后，利用視覺(jué)焦點(diǎn)來(lái)指示 UI 組件的交互性，并考慮懸停效果的填充。
空間設(shè)計(jì): 輸入
在空間界面中，人們通過(guò)眼睛、手和聲音進(jìn)行交互。
也有可能在“空間”內(nèi)創(chuàng)建鍵盤，并使用手指打字，就好像它是真實(shí)的。
當(dāng)然，也可以連接藍(lán)牙鍵盤或觸摸板，正常寫入和交互。
理解輸入模式對(duì)于設(shè)計(jì)直觀體驗(yàn)是至關(guān)重要的。
通過(guò)使用系統(tǒng)組件，您可以快速創(chuàng)建對(duì)用戶操作作出平穩(wěn)響應(yīng)的接口。
至于導(dǎo)航元素或選項(xiàng)，最好使用一個(gè)沒(méi)有邊框或背景的簡(jiǎn)單設(shè)計(jì)，因?yàn)樾Ч峭ㄟ^(guò)用戶的眼睛或選擇框架添加的。
對(duì)于較大的類似窗口的元素，這些裝飾應(yīng)該顯示在窗口的邊緣(例如底部、側(cè)面或頂部)。
在這個(gè)“播放器”欄的例子中，建議將其放置在被控制的主窗口上方20像素的位置。
空間設(shè)計(jì): 眼睛和手
空間設(shè)計(jì)引入了與用戶界面交互的新方式,
利用眼睛和手。通過(guò)空間設(shè)計(jì)，用戶可以通過(guò)查看 UI 元素和使用手勢(shì)輕松地控制他們的設(shè)備。這使得用戶體驗(yàn)更加個(gè)性化、舒適和精確。
適配眼睛的設(shè)計(jì)
眼睛在空間體驗(yàn)中起著基礎(chǔ)性的作用，是空間定位的主要機(jī)制。為了確保舒適的交互，將 UI 內(nèi)容放置在用戶的視野中是至關(guān)重要的，要注意中心位置。
可以將外圍區(qū)域保留給使用頻率較低的內(nèi)容，例如輔助操作，同時(shí)保持主要內(nèi)容易于訪問(wèn)和居中。
在空間設(shè)計(jì)中也應(yīng)該考慮深度。將交互式內(nèi)容維護(hù)在一致的深度上，可以輕松地在 UI 元素之間進(jìn)行轉(zhuǎn)換。通過(guò)使用微妙的深度變化，設(shè)計(jì)師可以有效地傳達(dá)層級(jí)，同時(shí)減少眼睛疲勞。
為了優(yōu)化眼球定位，設(shè)計(jì)師可以利用圓形的形狀，如圓形和圓形矩形，這自然引導(dǎo)注意力到中心。避免運(yùn)用尖銳的方形，會(huì)導(dǎo)致眼睛的注意力被四個(gè)直角分散。
此外，元素和文本之間的充足間距提高了視覺(jué)精度和可用性。
正如前面提到的，維持一個(gè)最小的目標(biāo)面積為60個(gè)像素點(diǎn)的眼睛為基礎(chǔ)的互動(dòng)是至關(guān)重要的。該系統(tǒng)提供的標(biāo)準(zhǔn)組件方便了定位，但是在設(shè)計(jì)定制元素時(shí)，堅(jiān)持尺寸指南是至關(guān)重要的。
眼睛的交互可以通過(guò)微妙的懸停效果來(lái)增強(qiáng)，這表明用戶的凝視正在驅(qū)動(dòng)交互。懸停效果應(yīng)該是謹(jǐn)慎的，并與內(nèi)容協(xié)調(diào)，添加到 UI 元素的響應(yīng)。
適配手的設(shè)計(jì)
手是另一種與空間輸入交互方式。
手勢(shì)應(yīng)該是直觀和自然的。識(shí)別常見(jiàn)的手勢(shì)，如手指縮放或拖動(dòng)移動(dòng)，使用戶感到舒適，并迅速上手學(xué)習(xí)并互動(dòng)。
元素尺寸和間距必須考慮到用戶手的大小來(lái)設(shè)計(jì)。太小的元素會(huì)很難交互到，而太大的元素會(huì)讓人難以觸及 UI 界面上的某個(gè)特定區(qū)域。
測(cè)試和迭代是確定最佳單元尺寸的關(guān)鍵。
空間設(shè)計(jì)最令人興奮的體驗(yàn)之一就是眼-手交互的結(jié)合。例如，在這個(gè)屏幕上，用戶可以在一個(gè)窗口中查看圖像中的特定點(diǎn)，并使用他們的手只放大選中的區(qū)域。
文章參考：
圖片來(lái)源：Apple Developers
