深度解讀VisionOS設計原則，掌握下一代設計趨勢！

上一期分享了 Vision pro 上的一些視覺設計亮點和案例，今天想和大家聊聊 UI 方面的設計規范和原則。新的計算平臺帶來了新的設計原則，需要你提前做好準備。

或許短期內你不會涉及到新平臺的具體設計，但設計底層邏輯都是相通的，從蘋果的這些設計思想中，一樣可以學以致用到你的現在項目中。

蘋果這次發布會后，我也去網上搜了下，大部分人對這個產品在軟件 UI 上的視覺印象，最直觀的記憶點就是毛玻璃。

它的學名是叫類玻璃柔光材質，在設計中也叫玻璃擬態。可以預見的是，在接下來的 XR 中會是一個主導地位的設計趨勢。

從設計理念來看，喬布斯一直追求一種極致簡約的風格，這種簡約除了體現在產品設計上，連店面設計上也體現出高水平的協同。其中，玻璃擬態風格貫穿了整個蘋果系列，甚至統一到了線下實體店。

蘋果的設計不止步與玻璃擬態，其 System UI 同樣具備很多值得學習借鑒的優秀設計原則。

如何分析設計風格？我將從 icon 設計、UI 設計、顏色以及字體 4 個維度，由表及里的思考它的設計以及對我們后續設計的啟發。

一、圖標設計

在主場景和其他界面上的應用圖標設計和系統圖標設計，整體上能看到蘋果設計體系下的高度一致性。

由于應用圖標的效果看起來和其他平臺有些不一樣，所以 Apple 官方也有給出了它的設計流程。

從分解過程中能發現，基本上還是按 2D 的設計方法去做，只不過為了加強它的深度感，配合眼動的交互效果。通過圖層分層來體現它的 3D 層次感，把圖標分為至多 3 個層：一個背景層和 2 個前景層。

然后，把分層的圖標切圖放進蘋果圖標系統里，VisionOS 就能自動對圖層進行圓形裁切和增加玻璃材質。

從蘋果分享出來的設計效果和設計流程拆解，我從中思考了關于 VisionOS 圖標設計的 8 個最主要的設計原則，原則具備通用性和可借鑒，在其他項目中很多也是可以用上的。

這些設計原則可以幫助我們更好的在 XR 中進行設計，包括：

1. 熟悉感
2. 跟隨眼動
3. 一致性
4. 清晰性
5. 深度感
6. 易讀性
7. 平衡性
8. 模組化

下面我也逐一和你分享要如何思考和應用這些設計原則幫助我們自己的設計。

1. 熟悉感

熟悉感，這個設計原則旨在降低用戶學習成本，尤其對于新設備來說，這一點尤其重要。

雖然是全新的空間計算設備，但仍然保留了很多我們熟知的設計手法和元素。

不論是對于用戶來說，還是專業的設計師或開發者來說，都有一種熟悉感，便于普通用戶和專業用戶上手。

就像我們在做其他產品的設計改版一樣，斷層的變化會讓用戶不知所措，無端增加用戶的學習成本。

很多用戶習慣和認知，經過這么多年的互聯網產品的推廣與應用，已經被教育地相當成熟，所以在蘋果這里的設計也應用了這一原則。

應用圖標的延續

2. 跟隨眼動

新的圓形應用圖標更適合眼動 ，兼容了全新的眼動交互，交互動效上更符合人類直覺的設計。在熟知的 2D 設計方法上新增了 3D 效果，以圖層的分離突出這種設計新形式。

圖標在動畫和角度上都會跟隨用戶的眼睛。雖然為了讓用戶對新的圖標有熟悉感，但在延續性的基礎上也做了一些新的變化，把圖標的背板做了從矩形到圓形的變化。

圓形相較于之前的圓角矩形，更容易讓用戶眼神聚焦。

當用戶的眼睛看向圖標時，圖標也會給與用戶角度和分層的變化，再通過投影和高光進行空間感的強化。

這就像是你看向朋友，然后朋友也會對你回眸一笑，符合用戶的功能訴求和情感訴求。

3. 一致性

在 iOS13 之前，當把系統圖標放在一起看時，從設計專業上看會有不少問題。比如線面穿插也就算了，粗細也各不相同，在視覺上的一致性其實并不算嚴謹。這些問題在后續的更新中也得到了優化。

但其實就算看最新的系統，也依然會有線面組合的情況，哪怕在一個控制中心也會有這樣的不一致。

是蘋果不用心做視覺嗎？它的策略到底是什么？我覺得其實是蘋果一直在做取舍和平衡。

蘋果對于一致性的理解是功能的一致性高于視覺的一致性，識別的效率性，系統級的圖標永遠是為了更好的服務于用戶。

比如手機上計算器和相機的應用圖標，映射到系統級圖標時，保持了最大程度上的一致性，都應用了面型圖標，雖然這與系統全局的一致性相比就弱一些。

4. 清晰性

熟悉的隱喻。當一個圖標使用了一個不熟悉的隱喻，它很難被理解。圖標在發展歷史中，抽象的符號被反復使用，逐漸標準化，從而建立了共同的理解。

比如像下面這個例子，從左到右，圖標的清晰度是越來越差的，因為圖標所代表的含義越來越復雜，不容易被理解。

圖標被設計最成功的情況是不僅對一群人來說很容易理解，且在不同文化，年齡和背景下都是通用的。Apple icon 大多用到了非常熟悉的隱喻，它很容易被理解。在 vision OS 中，這種清晰性得到了繼承。

5. 深度感

系統通過增加陰影和高光來體現各層之間的深度感并使用上層的 Alpha 通道打造 3D 感外觀，增強 App 圖標的視覺維度。

深度感是 XR 場景特有的設計，利用多圖層設計出 3D 層次感。在 vision os 這里的深度感是為了強化圖標帶來的反饋，提升易用性。

6. 易讀性

恰當地細節和對比度易于閱讀。保持圖標簡潔，左邊的圖標比較復雜，反而表達的含義是不易讀的，右側提煉后的圖標會有更高的易讀性。

在 XR 中，因為有近場和遠場的關系，圖標中的縫隙也需要注意，縫隙太小會造成易讀性降低。

圖標的對比度也需要注意，使用透明度的圖層后造成對比度較小，造成圖標不易讀。

7. 平衡性

圖標視覺平衡，對齊視覺元素。以眼睛檢查，用戶的感受為準。蘋果不允許圖標中心物件太靠近底板邊緣。

圖標的平衡性非常重要，為了確保每個圖標視覺平衡，需要在視覺上對齊元素。

在播放這個圖標中，三角形雖然在數字上對齊了，但眼睛告訴我們并不平衡。三角形較寬的部分感覺比較“重”，使得它好像在向左傾斜。

就像字體設計師做精細的調整來設計字體視覺平衡一樣。不能單純的相信嚴謹的數字，最終要以人的感受為主。

8. 模組化

蘋果把應用圖標的設計做成了模組化，利用 2D 設計流程和底層 3D 模組效果，降低制作成本。一個優先的設計必須兼顧到商業，服務好整個生態是優秀設計的必要條件。

圖標不僅要對用戶友好，對生產端也需要友好，某種程度上生產端也是用戶，他們也需要好的體驗，這樣整個生態系統才會是良性發展。

在制作上仍然保留了很多我們熟知的設計手法和元素，使得內容生產的成本降低，把盡可能多的效果進行組件化，比如投影，玻璃材質等這些復雜的效果用程序寫到了系統層。

除了自身的內容生產成本較低，在第三方應用兼容上也非常方便易用，能盡可能地讓更多生產用戶入局設計。

二、UI 設計

接下來我們一起來看看 UI 界面的設計，我截取了最有代表性的一些 UI 設計。

蘋果官方也給出了它們的 UI 組件庫，包括 sketch 和 figma 源文件。

分析發現它的制作流程，使用軟件，甚至連尺寸大小都和 2D 手機上的設計保持了一致性，這進一步降低了內容制作和遷移成本，把一些復雜的效果進行剝離，在系統級上進行添加。

關于 UI，也按前面的分析框架總結出了 8 個最主要的設計原則，包括：

1. 熟悉感
2. 突出內容
3. 以人為中心
4. 空間感
5. 深度感
6. 自適應
7. 易讀性
8. 模組化

可以看到有不少是和圖標設計相類似的。

1. 熟悉感

通過延續熟悉的設計方法，降低用戶的學習成本。在 UI 元素排布上，能看到 Mac 和手機的布局在 visionOS 中得到了統一和延續。

2. 突出內容

把界面中的操作和內容分開，保證內容顯示最大化。

這個設計在 XR 場景中是一個比較創新的設計方案，因為它的場景會比在 PC 或手機中的顯示范圍會大的多，如果把操作欄和內容都放在同一個界面中，可能會造成操作欄過大，干擾內容不說還會不方便操作。

在 Safari 中，導航欄與網頁分開，讓網頁成為焦點。

3. 以人為中心

減少用戶移動幅度，提升舒適性。

內容設計在布局上盡量居中，比如在 Safari 中，當人們想要一次看到他們所有的標簽時，蘋果將它們展開成一個網格。以配合人們的視野。標簽按比例縮小，這樣它們就不會離中心太遠，而兩側的標簽向內，這樣更容易閱讀。

玻璃材質的運用，降低了用戶心理壓力，提升掌控感與舒服度。為什么這么說？玻璃材質讓人們對周圍環境有更多的掌控力，能清楚的知道自己所處的位置，并讓 UI 適應不同的照明條件。

考慮到用戶心理，太多不透明的窗口會讓人感覺狹窄，讓界面感覺沉重。這個在 MR 場景中的設計非常關鍵。

4. 空間感

通過透明、光照環境和陰影效果，打造很強的空間感。比如在移動窗口時，窗口變得更加透明，很棒的小細節。

當看電影的時候，環境光照會發生變化，調光是一種簡單而有力的最大化空間的方法，即使電影可能會重疊在物理房間里，調暗也能幫助人們專注于內容。

UI 窗口會投射出陰影，讓用戶覺得界面似乎就真實的擺放在空間中，更直觀自然。

3D 相冊設計，通過邊緣模糊，制造空間感。

5. 深度感

通過對界面進行分層，利用深度創建層次結構和引導用戶關注。

盡管控件很小，依然能一眼就看出它是能控制電影的。如果把控件放在電影屏幕上，它們會顯得太大，會干擾內容。

操控元素可以保持小，但仍然比遠處的大物件具有視覺優先權。

元素之間輕微的深度利于引導用戶的注意力，當一個模態出現時，窗口會稍微向后推以引起用戶的注意。

換句話說，用戶需要聚焦的窗口距離并沒有發生改變。這樣在觀感上更為舒適，無需在窗口變換是反復聚焦。

6. 自適應

UI 能適配不同內容大小，自由伸縮。沒有固定的界面尺寸，按內容大小進行最合適的默認尺寸設計。

這里的默認尺寸設計需要結合人因的研究，具體多大才是合適的，可能和手機和 PC 端是不同的。

一般來說，在 MR 場景中中心視野最好，重要的內容優先放中間。用戶的視野在場景中也比較寬，橫向的布局可能會更好一些。

7. 易讀性

合適的對比度易于閱讀，這里的一些對比度策略是按 mac 和手機 OS 上的類似的 WCAG 標準來做的。更多的建議可以去蘋果的設計規范中查看。

8. 模組化

蘋果也把 UI 這里的設計進行了模組化，按 2D 設計流程+系統級玻璃材質+動態光影變化+投影。

同圖標一樣，也是把簡單的設計流程留給了生成者，把其他各種復雜的效果做到了系統層，然后可以自動添加這些效果。

這樣做保持了系統的風格一致性和可控的設計品質。相對于安卓端的百花齊放，apple 這邊是其獨有的優勢。

三、字體設計

字體設計，由于在玻璃材質可能會導致字體的可讀性變差，所以蘋果也做了一些規范限定。在字體上也繼續沿用了蘋果字體，只不過在把普通應用遷移到 vision OS 上時，需要加粗一號。

比如在手機上是 Regular 字體，那么在 vision OS 中就用加粗一號用 Medium。

在 XR 中，對字體加粗的目的就在于可以給到用戶更高的易讀性。

因為在 XR 的環境中，毛玻璃需要兼容各種不同亮度環境，為了保證其可讀性，蘋果還專門對文字的顯示做了動態變化。

在不同環境下，文字的亮度會動態變化，通過實時調節文字的亮度，確保文字清晰易讀。

開了動態效果：

沒有使用：

在蘋果 vision os 中，官方給到的文字色彩是白色，然后通過不同亮度來體現層次變化。如果你要對文字自定義顏色，盡量別用到文字上，而是通過改變文字的容器來實現顏色變化，不然易讀性會有問題。

四、顏色設計

蘋果也給出了系統級推薦的色彩體系，我也對這些色彩進行了分析，大部分的色彩飽和度都比較高，當然有一些顏色也進行了校準，飽和度略低一些。

顏色的豐富性是為了保證在各個場景下，都有合適的顏色可以選用，因為是系統級的顏色，需要保證足夠的通用性。

5. 設計啟發

蘋果對設計進行了重新思考，但其實好的設計原則是具備通用性的，在新平臺中提到的這些原則，是不是都是我們熟知的一些設計原則？

在設計的時候需要多去思考設計背后的原因，比如想想蘋果為什么在這里會選擇毛玻璃效果？那是因為在 MR 場景下，毛玻璃解決了 3D 關鍵問題：

1. 讓用戶時刻對自己的位置有掌控感
2. 能適配各種真實復雜光照環境
3. 半透明讓用戶避免封閉感

優秀的設計，其背后一定是它設計的理由的，優秀的設計也一定是有意義的。

想清楚其原因，從中就能發現規律，并指導自己后續的設計，避免犯錯。

如果你有學到，記得分享到你的朋友圈哦~

歡迎關注作者的微信公眾號：「彩云譯設計」