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

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

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

從設(shè)計(jì)理念來看，喬布斯一直追求一種極致簡約的風(fēng)格，這種簡約除了體現(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ì)以及對我們后續(xù)設(shè)計(jì)的啟發(fā)。

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

在主場景和其他界面上的應(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)對圖層進(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ì)，包括：

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

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

1. 熟悉感

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

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

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

就像我們在做其他產(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ì)跟隨用戶的眼睛。雖然為了讓用戶對新的圖標(biāo)有熟悉感，但在延續(xù)性的基礎(chǔ)上也做了一些新的變化，把圖標(biāo)的背板做了從矩形到圓形的變化。

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

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

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

3. 一致性

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

但其實(shí)就算看最新的系統(tǒng)，也依然會(huì)有線面組合的情況，哪怕在一個(gè)控制中心也會(huì)有這樣的不一致。

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

蘋果對于一致性的理解是功能的一致性高于視覺的一致性，識(shí)別的效率性，系統(tǒng)級的圖標(biāo)永遠(yuǎn)是為了更好的服務(wù)于用戶。

比如手機(jī)上計(jì)算器和相機(jī)的應(yīng)用圖標(biāo)，映射到系統(tǒng)級圖標(biāo)時(shí)，保持了最大程度上的一致性，都應(yīng)用了面型圖標(biāo)，雖然這與系統(tǒng)全局的一致性相比就弱一些。

4. 清晰性

熟悉的隱喻。當(dāng)一個(gè)圖標(biāo)使用了一個(gè)不熟悉的隱喻，它很難被理解。圖標(biāo)在發(fā)展歷史中，抽象的符號(hào)被反復(fù)使用，逐漸標(biāo)準(zhǔn)化，從而建立了共同的理解。

比如像下面這個(gè)例子，從左到右，圖標(biāo)的清晰度是越來越差的，因?yàn)閳D標(biāo)所代表的含義越來越復(fù)雜，不容易被理解。

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

5. 深度感

系統(tǒng)通過增加陰影和高光來體現(xiàn)各層之間的深度感并使用上層的 Alpha 通道打造 3D 感外觀，增強(qiáng) App 圖標(biāo)的視覺維度。

深度感是 XR 場景特有的設(shè)計(jì)，利用多圖層設(shè)計(jì)出 3D 層次感。在 vision os 這里的深度感是為了強(qiáng)化圖標(biāo)帶來的反饋，提升易用性。

6. 易讀性

恰當(dāng)?shù)丶?xì)節(jié)和對比度易于閱讀。保持圖標(biāo)簡潔，左邊的圖標(biāo)比較復(fù)雜，反而表達(dá)的含義是不易讀的，右側(cè)提煉后的圖標(biāo)會(huì)有更高的易讀性。

在 XR 中，因?yàn)橛薪鼒龊瓦h(yuǎn)場的關(guān)系，圖標(biāo)中的縫隙也需要注意，縫隙太小會(huì)造成易讀性降低。

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

7. 平衡性

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

圖標(biāo)的平衡性非常重要，為了確保每個(gè)圖標(biāo)視覺平衡，需要在視覺上對齊元素。

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

就像字體設(shè)計(jì)師做精細(xì)的調(diào)整來設(shè)計(jì)字體視覺平衡一樣。不能單純的相信嚴(yán)謹(jǐn)?shù)臄?shù)字，最終要以人的感受為主。

8. 模組化

蘋果把應(yīng)用圖標(biāo)的設(shè)計(jì)做成了模組化，利用 2D 設(shè)計(jì)流程和底層 3D 模組效果，降低制作成本。一個(gè)優(yōu)先的設(shè)計(jì)必須兼顧到商業(yè)，服務(wù)好整個(gè)生態(tài)是優(yōu)秀設(shè)計(jì)的必要條件。

圖標(biāo)不僅要對用戶友好，對生產(chǎn)端也需要友好，某種程度上生產(chǎn)端也是用戶，他們也需要好的體驗(yàn)，這樣整個(gè)生態(tài)系統(tǒng)才會(huì)是良性發(fā)展。

在制作上仍然保留了很多我們熟知的設(shè)計(jì)手法和元素，使得內(nèi)容生產(chǎn)的成本降低，把盡可能多的效果進(jìn)行組件化，比如投影，玻璃材質(zhì)等這些復(fù)雜的效果用程序?qū)懙搅讼到y(tǒng)層。

除了自身的內(nèi)容生產(chǎn)成本較低，在第三方應(yīng)用兼容上也非常方便易用，能盡可能地讓更多生產(chǎn)用戶入局設(shè)計(jì)。

二、UI 設(shè)計(jì)

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

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

分析發(fā)現(xiàn)它的制作流程，使用軟件，甚至連尺寸大小都和 2D 手機(jī)上的設(shè)計(jì)保持了一致性，這進(jìn)一步降低了內(nèi)容制作和遷移成本，把一些復(fù)雜的效果進(jìn)行剝離，在系統(tǒng)級上進(jìn)行添加。

關(guān)于 UI，也按前面的分析框架總結(jié)出了 8 個(gè)最主要的設(shè)計(jì)原則，包括：

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

可以看到有不少是和圖標(biāo)設(shè)計(jì)相類似的。

1. 熟悉感

通過延續(xù)熟悉的設(shè)計(jì)方法，降低用戶的學(xué)習(xí)成本。在 UI 元素排布上，能看到 Mac 和手機(jī)的布局在 visionOS 中得到了統(tǒng)一和延續(xù)。

2. 突出內(nèi)容

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

這個(gè)設(shè)計(jì)在 XR 場景中是一個(gè)比較創(chuàng)新的設(shè)計(jì)方案，因?yàn)樗膱鼍皶?huì)比在 PC 或手機(jī)中的顯示范圍會(huì)大的多，如果把操作欄和內(nèi)容都放在同一個(gè)界面中，可能會(huì)造成操作欄過大，干擾內(nèi)容不說還會(huì)不方便操作。

在 Safari 中，導(dǎo)航欄與網(wǎng)頁分開，讓網(wǎng)頁成為焦點(diǎn)。

3. 以人為中心

減少用戶移動(dòng)幅度，提升舒適性。

內(nèi)容設(shè)計(jì)在布局上盡量居中，比如在 Safari 中，當(dāng)人們想要一次看到他們所有的標(biāo)簽時(shí)，蘋果將它們展開成一個(gè)網(wǎng)格。以配合人們的視野。標(biāo)簽按比例縮小，這樣它們就不會(huì)離中心太遠(yuǎn)，而兩側(cè)的標(biāo)簽向內(nèi)，這樣更容易閱讀。

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

考慮到用戶心理，太多不透明的窗口會(huì)讓人感覺狹窄，讓界面感覺沉重。這個(gè)在 MR 場景中的設(shè)計(jì)非常關(guān)鍵。

4. 空間感

通過透明、光照環(huán)境和陰影效果，打造很強(qiáng)的空間感。比如在移動(dòng)窗口時(shí)，窗口變得更加透明，很棒的小細(xì)節(jié)。

當(dāng)看電影的時(shí)候，環(huán)境光照會(huì)發(fā)生變化，調(diào)光是一種簡單而有力的最大化空間的方法，即使電影可能會(huì)重疊在物理房間里，調(diào)暗也能幫助人們專注于內(nèi)容。

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

3D 相冊設(shè)計(jì)，通過邊緣模糊，制造空間感。

5. 深度感

通過對界面進(jìn)行分層，利用深度創(chuàng)建層次結(jié)構(gòu)和引導(dǎo)用戶關(guān)注。

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

操控元素可以保持小，但仍然比遠(yuǎn)處的大物件具有視覺優(yōu)先權(quán)。

元素之間輕微的深度利于引導(dǎo)用戶的注意力，當(dāng)一個(gè)模態(tài)出現(xiàn)時(shí)，窗口會(huì)稍微向后推以引起用戶的注意。

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

6. 自適應(yīng)

UI 能適配不同內(nèi)容大小，自由伸縮。沒有固定的界面尺寸，按內(nèi)容大小進(jìn)行最合適的默認(rèn)尺寸設(shè)計(jì)。

這里的默認(rèn)尺寸設(shè)計(jì)需要結(jié)合人因的研究，具體多大才是合適的，可能和手機(jī)和 PC 端是不同的。

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

7. 易讀性

合適的對比度易于閱讀，這里的一些對比度策略是按 mac 和手機(jī) OS 上的類似的 WCAG 標(biāo)準(zhǔn)來做的。更多的建議可以去蘋果的設(shè)計(jì)規(guī)范中查看。

8. 模組化

蘋果也把 UI 這里的設(shè)計(jì)進(jìn)行了模組化，按 2D 設(shè)計(jì)流程+系統(tǒng)級玻璃材質(zhì)+動(dòng)態(tài)光影變化+投影。

同圖標(biāo)一樣，也是把簡單的設(shè)計(jì)流程留給了生成者，把其他各種復(fù)雜的效果做到了系統(tǒng)層，然后可以自動(dòng)添加這些效果。

這樣做保持了系統(tǒng)的風(fēng)格一致性和可控的設(shè)計(jì)品質(zhì)。相對于安卓端的百花齊放，apple 這邊是其獨(dú)有的優(yōu)勢。

三、字體設(shè)計(jì)

字體設(shè)計(jì)，由于在玻璃材質(zhì)可能會(huì)導(dǎo)致字體的可讀性變差，所以蘋果也做了一些規(guī)范限定。在字體上也繼續(xù)沿用了蘋果字體，只不過在把普通應(yīng)用遷移到 vision OS 上時(shí)，需要加粗一號(hào)。

比如在手機(jī)上是 Regular 字體，那么在 vision OS 中就用加粗一號(hào)用 Medium。

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

因?yàn)樵?XR 的環(huán)境中，毛玻璃需要兼容各種不同亮度環(huán)境，為了保證其可讀性，蘋果還專門對文字的顯示做了動(dòng)態(tài)變化。

在不同環(huán)境下，文字的亮度會(huì)動(dòng)態(tài)變化，通過實(shí)時(shí)調(diào)節(jié)文字的亮度，確保文字清晰易讀。

開了動(dòng)態(tài)效果：

沒有使用：

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

四、顏色設(shè)計(jì)

蘋果也給出了系統(tǒng)級推薦的色彩體系，我也對這些色彩進(jìn)行了分析，大部分的色彩飽和度都比較高，當(dāng)然有一些顏色也進(jìn)行了校準(zhǔn)，飽和度略低一些。

顏色的豐富性是為了保證在各個(gè)場景下，都有合適的顏色可以選用，因?yàn)槭窍到y(tǒng)級的顏色，需要保證足夠的通用性。

5. 設(shè)計(jì)啟發(fā)

蘋果對設(shè)計(jì)進(jìn)行了重新思考，但其實(shí)好的設(shè)計(jì)原則是具備通用性的，在新平臺(tái)中提到的這些原則，是不是都是我們熟知的一些設(shè)計(jì)原則？

在設(shè)計(jì)的時(shí)候需要多去思考設(shè)計(jì)背后的原因，比如想想蘋果為什么在這里會(huì)選擇毛玻璃效果？那是因?yàn)樵?MR 場景下，毛玻璃解決了 3D 關(guān)鍵問題：

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

優(yōu)秀的設(shè)計(jì)，其背后一定是它設(shè)計(jì)的理由的，優(yōu)秀的設(shè)計(jì)也一定是有意義的。

想清楚其原因，從中就能發(fā)現(xiàn)規(guī)律，并指導(dǎo)自己后續(xù)的設(shè)計(jì)，避免犯錯(cuò)。

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

作者：彩云譯設(shè)計(jì)