上一期分享了 Vision pro 上的一些視覺設(shè)計(jì)亮點(diǎn)和案例，今天想和大家聊聊 UI 方面的設(shè)計(jì)規(guī)范和原則。新的計(jì)算平臺(tái)帶來了新的設(shè)計(jì)原則，需要你提前做好準(zhǔn)備。

或許短期內(nèi)你不會(huì)涉及到新平臺(tái)的具體設(shè)計(jì)，但設(shè)計(jì)底層邏輯都是相通的，從蘋果的這些設(shè)計(jì)思想中，一樣可以學(xué)以致用到你的現(xiàn)在項(xiàng)目中。

蘋果這次發(fā)布會(huì)后，我也去網(wǎng)上搜了下，大部分人對(duì)這個(gè)產(chǎn)品在軟件 UI 上的視覺印象，最直觀的記憶點(diǎn)就是毛玻璃。

它的學(xué)名是叫類玻璃柔光材質(zhì)，在設(shè)計(jì)中也叫玻璃擬態(tài)。可以預(yù)見的是，在接下來的 XR 中會(huì)是一個(gè)主導(dǎo)地位的設(shè)計(jì)趨勢(shì)。

從設(shè)計(jì)理念來看，喬布斯一直追求一種極致簡(jiǎn)約的風(fēng)格，這種簡(jiǎn)約除了體現(xiàn)在產(chǎn)品設(shè)計(jì)上，連店面設(shè)計(jì)上也體現(xiàn)出高水平的協(xié)同。其中，玻璃擬態(tài)風(fēng)格貫穿了整個(gè)蘋果系列，甚至統(tǒng)一到了線下實(shí)體店。

蘋果的設(shè)計(jì)不止步與玻璃擬態(tài)，其 System UI 同樣具備很多值得學(xué)習(xí)借鑒的優(yōu)秀設(shè)計(jì)原則。

如何分析設(shè)計(jì)風(fēng)格？我將從 icon 設(shè)計(jì)、UI 設(shè)計(jì)、顏色以及字體 4 個(gè)維度，由表及里的思考它的設(shè)計(jì)以及對(duì)我們后續(xù)設(shè)計(jì)的啟發(fā)。

一、圖標(biāo)設(shè)計(jì)

在主場(chǎng)景和其他界面上的應(yīng)用圖標(biāo)設(shè)計(jì)和系統(tǒng)圖標(biāo)設(shè)計(jì)，整體上能看到蘋果設(shè)計(jì)體系下的高度一致性。

由于應(yīng)用圖標(biāo)的效果看起來和其他平臺(tái)有些不一樣，所以 Apple 官方也有給出了它的設(shè)計(jì)流程。

從分解過程中能發(fā)現(xiàn)，基本上還是按 2D 的設(shè)計(jì)方法去做，只不過為了加強(qiáng)它的深度感，配合眼動(dòng)的交互效果。通過圖層分層來體現(xiàn)它的 3D 層次感，把圖標(biāo)分為至多 3 個(gè)層：一個(gè)背景層和 2 個(gè)前景層。

然后，把分層的圖標(biāo)切圖放進(jìn)蘋果圖標(biāo)系統(tǒng)里，VisionOS 就能自動(dòng)對(duì)圖層進(jìn)行圓形裁切和增加玻璃材質(zhì)。

從蘋果分享出來的設(shè)計(jì)效果和設(shè)計(jì)流程拆解，我從中思考了關(guān)于 VisionOS 圖標(biāo)設(shè)計(jì)的 8 個(gè)最主要的設(shè)計(jì)原則，原則具備通用性和可借鑒，在其他項(xiàng)目中很多也是可以用上的。

這些設(shè)計(jì)原則可以幫助我們更好的在 XR 中進(jìn)行設(shè)計(jì)，包括：

熟悉感

跟隨眼動(dòng)

一致性

清晰性

深度感

易讀性

平衡性

模組化

下面我也逐一和你分享要如何思考和應(yīng)用這些設(shè)計(jì)原則幫助我們自己的設(shè)計(jì)。

1. 熟悉感

熟悉感，這個(gè)設(shè)計(jì)原則旨在降低用戶學(xué)習(xí)成本，尤其對(duì)于新設(shè)備來說，這一點(diǎn)尤其重要。

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

不論是對(duì)于用戶來說，還是專業(yè)的設(shè)計(jì)師或開發(fā)者來說，都有一種熟悉感，便于普通用戶和專業(yè)用戶上手。

就像我們?cè)谧銎渌a(chǎn)品的設(shè)計(jì)改版一樣，斷層的變化會(huì)讓用戶不知所措，無端增加用戶的學(xué)習(xí)成本。

很多用戶習(xí)慣和認(rèn)知，經(jīng)過這么多年的互聯(lián)網(wǎng)產(chǎn)品的推廣與應(yīng)用，已經(jīng)被教育地相當(dāng)成熟，所以在蘋果這里的設(shè)計(jì)也應(yīng)用了這一原則。

應(yīng)用圖標(biāo)的延續(xù)

2. 跟隨眼動(dòng)

新的圓形應(yīng)用圖標(biāo)更適合眼動(dòng) ，兼容了全新的眼動(dòng)交互，交互動(dòng)效上更符合人類直覺的設(shè)計(jì)。在熟知的 2D 設(shè)計(jì)方法上新增了 3D 效果，以圖層的分離突出這種設(shè)計(jì)新形式。

圖標(biāo)在動(dòng)畫和角度上都會(huì)跟隨用戶的眼睛。雖然為了讓用戶對(duì)新的圖標(biāo)有熟悉感，但在延續(xù)性的基礎(chǔ)上也做了一些新的變化，把圖標(biāo)的背板做了從矩形到圓形的變化。

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

當(dāng)用戶的眼睛看向圖標(biāo)時(shí)，圖標(biāo)也會(huì)給與用戶角度和分層的變化，再通過投影和高光進(jìn)行空間感的強(qiáng)化。

3. 一致性

在 iOS13 之前，當(dāng)把系統(tǒng)圖標(biāo)放在一起看時(shí)，從設(shè)計(jì)專業(yè)上看會(huì)有不少問題。比如線面穿插也就算了，粗細(xì)也各不相同，在視覺上的一致性其實(shí)并不算嚴(yán)謹(jǐn)。這些問題在后續(xù)的更新中也得到了優(yōu)化。