Apple VisionOS設(shè)計(jì)規(guī)范速覽

0 評(píng)論 4232 瀏覽 20 收藏 10 分鐘

本篇文章主要分析Apple VisionOS 的設(shè)計(jì)亮點(diǎn),作者以圖標(biāo)、界面材質(zhì)、文字、效果及色彩五個(gè)方面舉例,分析Apple VisionOS 的交互方式,能給產(chǎn)品設(shè)計(jì)的同學(xué)提供一些數(shù)字化產(chǎn)品設(shè)計(jì)的參考建議。

在WWDC2023大會(huì)的“One More Thing”環(huán)節(jié)上,蒂姆 · 庫(kù)克正式發(fā)布了蘋果的首款MR設(shè)備,名為Apple Vision Pro,并宣布了即將開啟空間計(jì)算新時(shí)代的消息。

不久之后,Apple設(shè)計(jì)團(tuán)隊(duì)推出了VisionOS的Design for spatial user interfaces(空間用戶界面設(shè)計(jì)),這給我們?cè)O(shè)計(jì)師帶來(lái)了很多啟發(fā)。

現(xiàn)在,讓我們從設(shè)計(jì)的角度來(lái)看看VisionOS有哪些令人矚目的設(shè)計(jì)亮點(diǎn)。

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

在visionOS中,App圖標(biāo)采用了與iOS接近的風(fēng)格,但最大的區(qū)別在于形狀從圓角矩形變成了圓形。這種設(shè)計(jì)變化的主要原因是為了讓注視點(diǎn)更準(zhǔn)確地瞄準(zhǔn)圖標(biāo)。

除了形狀的變化,visionOS的App標(biāo)志還具有立體效果。當(dāng)從側(cè)面觀察時(shí),標(biāo)志表面會(huì)凸起,呈現(xiàn)出一種立體感。

更重要的是,這些標(biāo)志還與用戶的注視點(diǎn)進(jìn)行動(dòng)態(tài)交互。當(dāng)用戶盯著一個(gè)標(biāo)志時(shí),標(biāo)志會(huì)展開,并顯示高光和陰影,以增強(qiáng)微妙的視覺層次。

這樣的設(shè)計(jì)變化使得App標(biāo)志在視覺上更加吸引人,并為用戶提供了更加沉浸式的體驗(yàn)。通過(guò)立體效果和動(dòng)態(tài)交互,標(biāo)志能夠吸引用戶的注意力,并呈現(xiàn)出更加生動(dòng)和豐富的視覺效果。

簡(jiǎn)單來(lái)說(shuō),visionOS的App標(biāo)志為了呈現(xiàn)更加逼真的深度效果,通常由三個(gè)平面的圖層組成:一個(gè)背景層和兩個(gè)表面層。這樣的設(shè)計(jì)旨在實(shí)現(xiàn)雙目視差效果,使得標(biāo)志在視覺上具有更強(qiáng)烈的立體感。

除了三個(gè)平面的組成,系統(tǒng)還會(huì)疊加一個(gè)“玻璃層”效果,用于渲染深度、高光和陰影。這個(gè)玻璃層的加入進(jìn)一步增強(qiáng)了標(biāo)志的真實(shí)感,使得標(biāo)志看起來(lái)更加立體、有質(zhì)感。

需要強(qiáng)調(diào)的是避免使用大面積的半透明效果,因?yàn)閕con的投影是系統(tǒng)底層自帶的,透明的圖層將會(huì)和投影混合在一起難以分辨。

二、磨砂玻璃材質(zhì)

界面整體采用了磨砂玻璃的材質(zhì)效果,這種材質(zhì)會(huì)隨著環(huán)境的變化產(chǎn)生光影變化,比如當(dāng)外界光線發(fā)生變化時(shí)玻璃邊緣光也會(huì)發(fā)生變化。

蘋果指出,這種設(shè)計(jì)的好處是具有輕盈感、物理空間感,并可適應(yīng)各種不同的使用場(chǎng)景,比如狹小的空間、夜間或明亮的日光下等等。

亮色

暗色

玻璃材質(zhì)還可以通過(guò)明度變化及對(duì)比來(lái)表現(xiàn)信息層級(jí)。

在菜單上,做了流光的選擇效果:

三、文字排版

為了提升文字的易讀性并增加與背景的對(duì)比度,visionOS對(duì)iOS字體進(jìn)行了加粗和加重的處理。

盡管如此,即使在放大窗口的情況下,一些較小的說(shuō)明性文字仍然難以辨別。因此,建議盡可能地增加字體的加粗和加重效果,以提高可讀性。

此外,值得注意的是,蘋果還為visionOS引入了兩種全新的字體樣式,這些樣式的特點(diǎn)是基于較寬的編輯樣式布局。

這樣的設(shè)計(jì)選擇為用戶提供了更好的閱讀體驗(yàn),使得文字更加清晰可見,并且更加符合視覺美感。

四、活力效果

VisionOS通過(guò)突出文字的光線和色彩來(lái)提升其可讀性,并增加與背景的對(duì)比度。開啟該功能后,文字會(huì)呈現(xiàn)更亮的效果,從而提高其可讀性。

考慮到visionOS菜單的窗口背景會(huì)根據(jù)周圍環(huán)境而改變外觀,文字的活力模式會(huì)實(shí)時(shí)調(diào)節(jié)亮度,確保文字清晰可見。

除此之外,活力模式還提供了三種不同的亮度選項(xiàng),以展現(xiàn)不同字符之間的層次結(jié)構(gòu)。

這種設(shè)計(jì)讓用戶能夠更好地識(shí)別和理解文字內(nèi)容,同時(shí)提供更豐富的視覺層次感。

通過(guò)活力模式,文字在不同背景下都能夠保持清晰可見,為用戶帶來(lái)更好的閱讀體驗(yàn)。

未使用

已使用

五、色彩

蘋果建議開發(fā)者將文字色彩設(shè)為系統(tǒng)默認(rèn)的白色,因?yàn)樘O果已經(jīng)對(duì)白色文字的易讀性進(jìn)行了校準(zhǔn)。

這樣的設(shè)定可以使文字動(dòng)態(tài)適應(yīng)背景窗口的色調(diào)和對(duì)比度,確保文字在各種情況下都能清晰可讀。

當(dāng)在按鈕等元素上使用顏色時(shí),開發(fā)者需要注意與背景做出明顯的區(qū)分。

這是為了確保按鈕上的文字與背景之間有足夠的對(duì)比度,使用戶能夠清晰地辨認(rèn)和理解其中的信息。通過(guò)正確的顏色選擇,開發(fā)者可以提升按鈕的可用性和易用性,為用戶提供更好的界面體驗(yàn)。

六、結(jié)語(yǔ)

Apple VisionOS 的設(shè)計(jì)亮點(diǎn)包括直觀的交互方式、強(qiáng)調(diào)視覺體驗(yàn)、3D立體標(biāo)志設(shè)計(jì)、漸變背景與動(dòng)效以及簡(jiǎn)潔與一致性。

這些設(shè)計(jì)亮點(diǎn)使用戶能夠更自然地操作設(shè)備,提升文字易讀性和對(duì)比度,增加應(yīng)用標(biāo)志的立體感,創(chuàng)造豐富的視覺效果,同時(shí)保持界面簡(jiǎn)潔和一致。

VisionOS的設(shè)計(jì)以其創(chuàng)新性和精巧的細(xì)節(jié)成為了一次突破,為用戶帶來(lái)了沉浸式、智能化的體驗(yàn)。

通過(guò)突出直覺式交互、優(yōu)化可讀性和引人入勝的視覺效果,VisionOS在UI設(shè)計(jì)領(lǐng)域樹立了新的標(biāo)桿。隨著其推出的不斷演進(jìn)和創(chuàng)新,我們可以期待VisionOS將為未來(lái)的數(shù)字體驗(yàn)開辟全新的可能性。

以上為我對(duì)Apple VisionOS 空間設(shè)計(jì)規(guī)范一些亮點(diǎn)的提煉與總結(jié),更詳細(xì)的介紹大家可以自行前往:

https://developer.apple.com/videos/play/wwdc2023/10076

看英文原版講解。

文中配圖來(lái)自官方視頻:《Design spatial userinterfaces》

作者:張健

來(lái)源公眾號(hào):58UXD(ID:i58UXD),58UXD,全稱58同城用戶體驗(yàn)設(shè)計(jì)中心。

本文由人人都是產(chǎn)品經(jīng)理合作媒體 @58UXD 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!