Apple VisionOS設計規(guī)范速覽
本篇文章主要分析Apple VisionOS 的設計亮點,作者以圖標、界面材質、文字、效果及色彩五個方面舉例,分析Apple VisionOS 的交互方式,能給產品設計的同學提供一些數字化產品設計的參考建議。
在WWDC2023大會的“One More Thing”環(huán)節(jié)上,蒂姆 · 庫克正式發(fā)布了蘋果的首款MR設備,名為Apple Vision Pro,并宣布了即將開啟空間計算新時代的消息。
不久之后,Apple設計團隊推出了VisionOS的Design for spatial user interfaces(空間用戶界面設計),這給我們設計師帶來了很多啟發(fā)。
現在,讓我們從設計的角度來看看VisionOS有哪些令人矚目的設計亮點。
一、圖標分層設計
在visionOS中,App圖標采用了與iOS接近的風格,但最大的區(qū)別在于形狀從圓角矩形變成了圓形。這種設計變化的主要原因是為了讓注視點更準確地瞄準圖標。
除了形狀的變化,visionOS的App標志還具有立體效果。當從側面觀察時,標志表面會凸起,呈現出一種立體感。
更重要的是,這些標志還與用戶的注視點進行動態(tài)交互。當用戶盯著一個標志時,標志會展開,并顯示高光和陰影,以增強微妙的視覺層次。
這樣的設計變化使得App標志在視覺上更加吸引人,并為用戶提供了更加沉浸式的體驗。通過立體效果和動態(tài)交互,標志能夠吸引用戶的注意力,并呈現出更加生動和豐富的視覺效果。
簡單來說,visionOS的App標志為了呈現更加逼真的深度效果,通常由三個平面的圖層組成:一個背景層和兩個表面層。這樣的設計旨在實現雙目視差效果,使得標志在視覺上具有更強烈的立體感。
除了三個平面的組成,系統(tǒng)還會疊加一個“玻璃層”效果,用于渲染深度、高光和陰影。這個玻璃層的加入進一步增強了標志的真實感,使得標志看起來更加立體、有質感。
需要強調的是避免使用大面積的半透明效果,因為icon的投影是系統(tǒng)底層自帶的,透明的圖層將會和投影混合在一起難以分辨。
二、磨砂玻璃材質
界面整體采用了磨砂玻璃的材質效果,這種材質會隨著環(huán)境的變化產生光影變化,比如當外界光線發(fā)生變化時玻璃邊緣光也會發(fā)生變化。
蘋果指出,這種設計的好處是具有輕盈感、物理空間感,并可適應各種不同的使用場景,比如狹小的空間、夜間或明亮的日光下等等。
亮色
暗色
玻璃材質還可以通過明度變化及對比來表現信息層級。
在菜單上,做了流光的選擇效果:
三、文字排版
為了提升文字的易讀性并增加與背景的對比度,visionOS對iOS字體進行了加粗和加重的處理。
盡管如此,即使在放大窗口的情況下,一些較小的說明性文字仍然難以辨別。因此,建議盡可能地增加字體的加粗和加重效果,以提高可讀性。
此外,值得注意的是,蘋果還為visionOS引入了兩種全新的字體樣式,這些樣式的特點是基于較寬的編輯樣式布局。
這樣的設計選擇為用戶提供了更好的閱讀體驗,使得文字更加清晰可見,并且更加符合視覺美感。
四、活力效果
VisionOS通過突出文字的光線和色彩來提升其可讀性,并增加與背景的對比度。開啟該功能后,文字會呈現更亮的效果,從而提高其可讀性。
考慮到visionOS菜單的窗口背景會根據周圍環(huán)境而改變外觀,文字的活力模式會實時調節(jié)亮度,確保文字清晰可見。
除此之外,活力模式還提供了三種不同的亮度選項,以展現不同字符之間的層次結構。
這種設計讓用戶能夠更好地識別和理解文字內容,同時提供更豐富的視覺層次感。
通過活力模式,文字在不同背景下都能夠保持清晰可見,為用戶帶來更好的閱讀體驗。
未使用
已使用
五、色彩
蘋果建議開發(fā)者將文字色彩設為系統(tǒng)默認的白色,因為蘋果已經對白色文字的易讀性進行了校準。
這樣的設定可以使文字動態(tài)適應背景窗口的色調和對比度,確保文字在各種情況下都能清晰可讀。
當在按鈕等元素上使用顏色時,開發(fā)者需要注意與背景做出明顯的區(qū)分。
這是為了確保按鈕上的文字與背景之間有足夠的對比度,使用戶能夠清晰地辨認和理解其中的信息。通過正確的顏色選擇,開發(fā)者可以提升按鈕的可用性和易用性,為用戶提供更好的界面體驗。
六、結語
Apple VisionOS 的設計亮點包括直觀的交互方式、強調視覺體驗、3D立體標志設計、漸變背景與動效以及簡潔與一致性。
這些設計亮點使用戶能夠更自然地操作設備,提升文字易讀性和對比度,增加應用標志的立體感,創(chuàng)造豐富的視覺效果,同時保持界面簡潔和一致。
VisionOS的設計以其創(chuàng)新性和精巧的細節(jié)成為了一次突破,為用戶帶來了沉浸式、智能化的體驗。
通過突出直覺式交互、優(yōu)化可讀性和引人入勝的視覺效果,VisionOS在UI設計領域樹立了新的標桿。隨著其推出的不斷演進和創(chuàng)新,我們可以期待VisionOS將為未來的數字體驗開辟全新的可能性。
以上為我對Apple VisionOS 空間設計規(guī)范一些亮點的提煉與總結,更詳細的介紹大家可以自行前往:
https://developer.apple.com/videos/play/wwdc2023/10076
看英文原版講解。
文中配圖來自官方視頻:《Design spatial userinterfaces》
作者:張健
來源公眾號:58UXD(ID:i58UXD),58UXD,全稱58同城用戶體驗設計中心。
本文由人人都是產品經理合作媒體 @58UXD 授權發(fā)布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發(fā)揮!