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

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

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

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

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

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

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

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

一、圖標設計

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

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

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

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

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

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

熟悉感

跟隨眼動

一致性

清晰性

深度感

易讀性

平衡性

模組化

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

1. 熟悉感

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

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

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

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

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

應用圖標的延續

2. 跟隨眼動

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

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

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

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

3. 一致性

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