蘋果的Vision Pro發(fā)布之后，隨之而來的討論之一，就有如何才能在新的計(jì)算平臺上做好相應(yīng)設(shè)計(jì)。在本篇文章里，作者就從icon設(shè)計(jì)、UI設(shè)計(jì)、顏色和字體等四個維度，對VisionOS設(shè)計(jì)原則進(jìn)行了深度解讀，一起來看看吧。

今天想和大家聊聊UI方面的設(shè)計(jì)規(guī)范和原則。新的計(jì)算平臺帶來了新的設(shè)計(jì)原則，需要你提前做好準(zhǔn)備。

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

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

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

從設(shè)計(jì)理念來看，喬布斯一直追求一種極致簡約的風(fēng)格，這種簡約除了體現(xiàn)在產(chǎn)品設(shè)計(jì)上，連店面設(shè)計(jì)上也體現(xiàn)出高水平的協(xié)同。其中，玻璃擬態(tài)風(fēng)格貫穿了整個蘋果系列，甚至統(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個維度，由表及里的思考它的設(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)的效果看起來和其他平臺有些不一樣，所以Apple官方也有給出了它的設(shè)計(jì)流程。

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

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

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

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

• 熟悉感
• 跟隨眼動
• 一致性
• 清晰性
• 深度感
• 易讀性
• 平衡性
• 模組化

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

1. 熟悉感

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

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

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

就像我們在做其他產(chǎn)品的設(shè)計(jì)改版一樣，斷層的變化會讓用戶不知所措，無端增加用戶的學(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. 跟隨眼動

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

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

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

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

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

3. 一致性

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

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

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

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

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

4. 清晰性

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

比如像下面這個例子，從左到右，圖標(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)會有更高的易讀性。

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

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

7. 平衡性

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

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

在播放這個圖標(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模組效果，降低制作成本。一個優(yōu)先的設(shè)計(jì)必須兼顧到商業(yè)，服務(wù)好整個生態(tài)是優(yōu)秀設(shè)計(jì)的必要條件。

圖標(biāo)不僅要對用戶友好，對生產(chǎn)端也需要友好，某種程度上生產(chǎn)端也是用戶，他們也需要好的體驗(yàn)，這樣整個生態(tài)系統(tǒng)才會是良性發(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個最主要的設(shè)計(jì)原則，包括：

• 熟悉感
• 突出內(nèi)容
• 以人為中心
• 空間感
• 深度感
• 自適應(yīng)
• 易讀性
• 模組化

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

1. 熟悉感

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

2. 突出內(nèi)容

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

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

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

3. 以人為中心

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

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

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

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

4. 空間感

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

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

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

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

5. 深度感

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

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

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

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

換句話說，用戶需要聚焦的窗口距離并沒有發(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)先放中間。用戶的視野在場景中也比較寬，橫向的布局可能會更好一些。

7. 易讀性

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

8. 模組化

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

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

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

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

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

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

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

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

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

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

沒有使用：

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

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

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

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

五、設(shè)計(jì)啟發(fā)

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

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

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

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

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