Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

1 評論 4176 瀏覽 10 收藏 24 分鐘

本篇文章將分析Apple Vision Pro的空間設(shè)計,作者從五個基礎(chǔ)方向出發(fā),詳細分析其中的設(shè)計原則,能給產(chǎn)品設(shè)計的伙伴們提供一些參考,希望本篇文章能對你有所幫助。

在本篇中,我們將介紹Apple Vision Pro中的空間設(shè)計原則,探索空間設(shè)計的基礎(chǔ)知識,了解如何從深度、尺寸、窗口和沉浸感進行設(shè)計,并應(yīng)用最佳實踐來創(chuàng)造能夠改變現(xiàn)實的舒適、以人為本的體驗。

Vision Pro借助深度、尺度、自然輸入和空間音頻,創(chuàng)造了前所未有的空間設(shè)計體驗。

其核心的五大基礎(chǔ)設(shè)計原則,分別是:

  • Familiar:如何讓你的應(yīng)用保持熟悉感,讓用戶易于學(xué)習和上手。
  • Human-centered:如何打造以人為本的設(shè)計,更符合人因。
  • Dimensional:如何利用維度來打造獨特的空間體驗,讓界面更有層次感。
  • Immersive:如何打造更具有沉浸感的應(yīng)用體驗。
  • Authentic:如何打造更真實的空間體驗設(shè)計。

下面,讓我們圍繞著五大核心設(shè)計原則展開介紹。

一、Familiar

在ipad平臺上,我們可以看見許多熟悉的常見組件元素,比如側(cè)邊欄、選項卡、搜索欄等。

而在Vision Pro平臺上,我們依然能使用用戶認知和已經(jīng)熟悉的組件元素來設(shè)計你的應(yīng)用。我們將用戶熟悉的界面放置在Vision Pro的窗口中,這樣用戶就可以看到它們并快速使用它們。

不同的是,在Vision Pro平臺上,窗口只是你周圍環(huán)境空間的其中一部分。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

接下來,讓我們分別從Window、Sizing、及Points三個維度分別進行介紹如何打造具有熟悉感的界面。

1. Window

在窗口側(cè)Vision Pro引進了一種全新的視覺語言窗口,即玻璃材質(zhì)。用戶可以感知到他們周圍的環(huán)境,窗口也能適應(yīng)不同的光照條件。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

系統(tǒng)窗口提供移動,關(guān)閉和調(diào)整窗口大小的功能,人們可以捏住窗口移動欄將窗口移動至任何位置。

但不管如何移動,窗口的角度總是面對著用戶,以保持界面易于閱讀和易于使用。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

2. Sizing

在窗口尺寸側(cè),Vision Pro給出了非常靈活的尺寸,建議開發(fā)者可以根據(jù)自己的內(nèi)容來選擇舒適的窗口大小以更好適應(yīng)于用戶的視野。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

比如為了讓用戶在瀏覽網(wǎng)頁時看到更多的內(nèi)容,Safari瀏覽器的窗口尺寸很高;為了更沉浸式的進行全尺寸演示,Keynote的窗口被設(shè)計的很寬。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

當然,窗口也可以有其它靈活的形狀,窗口之外的區(qū)域還可以使用Tab bar和Tool bar。

比如在音樂app中,這些控件位于主窗口上方,總是易于被用戶關(guān)注到,并為內(nèi)容提供更多可操作空間。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

或者,也可以使用分離式界面將控件與主要內(nèi)容分開,比如在safari中導(dǎo)航欄與網(wǎng)頁分開,讓頁面主內(nèi)容占據(jù)視覺焦點。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

窗口也可以自動改變大小,當側(cè)邊欄在safari中打開時,窗口的會變大以顯示更多控件,而不會覆蓋網(wǎng)頁窗口,不受屏幕約束。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

如果你需要一個更大的畫布,像其他平臺一樣,應(yīng)用可以有多個窗口,在某些情況下它們可以并排顯示內(nèi)容,比如一次查看多個網(wǎng)頁。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

在播放演示文稿時,幻燈片在一個大而遠的窗口中,而演示者顯示在附近的一個較小窗口中,這可以讓人們將演示窗口放在他們想要的地方,同時保留幻燈片觀看的沉浸感。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

3. Points

為了確保用戶界面更好的伸縮性,我們用Points來進行設(shè)計,它是我們指定界面元素大小的方式。

當人們移動窗口時,界面會隨著遠離用戶而縮放得更大;相反,當界面靠近用戶時,尺寸會變小,這保持了界面的易讀性和可用性。

因此,蘋果在Vision Pro上設(shè)計按鈕時,需要至少60pt的響應(yīng)熱區(qū),這就需要圖標形狀至少為44pt,且按鈕與按鈕之間有16pt的間距。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

二、Human-centered

好的設(shè)計總是以人為本,在設(shè)計應(yīng)用時,需要結(jié)合用戶在自己空間中的可視區(qū),來考慮用戶可以看到什么,以及他們需要如何移動。

接下來我們將從Fied of view、Ergonomics、Movement分別來介紹如何進行以人為本的設(shè)計。

1. Fied of view

佩戴設(shè)備時,用戶可以看到他們面前的世界,這是他們的可視區(qū)(Fied of view),用戶最容易看到視野中間的內(nèi)容,所以把最重要的內(nèi)容盡量放在中心,人的橫向視野更寬,所以很多界面窗口都使用橫向布局。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

比如Safari,當用戶想一次看到他們所有的窗口標簽時,我們就使用更寬的布局來匹配用戶的視野,將這些窗口標簽分散在用戶面前的畫布中。

兩邊側(cè)面的窗口以用戶為中心向內(nèi)轉(zhuǎn)向,讓用戶更容易閱讀。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

但用戶不能完全保持頭部靜止,他們會環(huán)顧四周,這意味著我們可以進一步擴展內(nèi)容以獲得身臨其境的體驗。

但總的來說,要將您的主要內(nèi)容保持在視野內(nèi),否則很難閱讀或理解。

2. Ergonomics

以人為中心的設(shè)計也意味著設(shè)計時要考慮到人體工程學(xué)(Ergonomics)。界面位置對用戶的身體姿態(tài)影響很大,所以我們要考慮在各個維度上舒適的放置窗口。

在默認情況下,窗口沿著自然視線放置,鼓勵用戶在放置窗口時保持健康和舒適的姿勢,比如在相對于人的頭部面對的方向,這有助于用戶更舒適的看到界面內(nèi)容并進行交互。

同時也要考慮到不同高度和不同位置的人,比如躺在沙發(fā)上的姿態(tài)。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

大部分時間,把內(nèi)容放在離人們遠點的地方,比手臂更遠一點,以鼓勵人們在遠處進行交互,避免將內(nèi)容放在人的后面或非常高或低,除非它是沉浸式體驗的一部分。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

不是每個人都會坐著使用你的應(yīng)用,他們可以四處走動以使用, 所以避免將窗口錨定在用戶的視角中,這會讓事情感覺卡頓,并且會讓人迷失方向。

相反,應(yīng)該將窗口鎖定在用戶的空間中,這讓他們可以自由地環(huán)顧四周。

3. Movement

在使用設(shè)備時,用戶也可以站起來,四處走動,但我們建議創(chuàng)建需要最少移動的靜止體驗(Require minimal movement),這使您的應(yīng)用程序更易于為用戶使用。用戶應(yīng)該能夠在不用移動的情況下就能使用你的應(yīng)用。

有時用戶確實移動到新的位置和角度,但他們可以按住數(shù)字表冠,將內(nèi)容重新移回他們面前,所以你的應(yīng)用不需要提供一種特殊的方式來恢復(fù)窗口或重置場景,而是依靠此系統(tǒng)來重新定位您的應(yīng)用程序內(nèi)容。

三、Dimensional

接下來讓我們談?wù)勅绾卧趹?yīng)用中提供空間維度屬性,我們分別討論從Space、Depth和Scale進行深入探討。

1. Space

在用戶周圍,物理空間可能是有限的,但空間畫布是無限的,注意不要被有限的物理空間限制你的應(yīng)用,讓我們看看這是如何與電視應(yīng)用程序是如何工作的。

當窗口移動時,椅子仍然可見,以便于放置。當窗口被釋放時,內(nèi)容變得可見,這樣用戶就可以看到和使用窗口app,你不需要擔心他們?nèi)绾芜m應(yīng)用戶的空間,因為系統(tǒng)會在其時為你處理此問題。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

觀看電影時,視頻占據(jù)整個窗口,周圍環(huán)境光線自動變暗,幫助用戶專注于內(nèi)容,用戶可以感受到他們的周圍環(huán)境不受限制,并且在任何時候用戶都可以打開一個超越物理邊緣尺寸的環(huán)境。

如果你的應(yīng)用程序需要更多空間來適應(yīng)大窗口,你可以在這里創(chuàng)建自己的超越現(xiàn)實的體驗,比如我們創(chuàng)建了一個沉浸式電影院以適應(yīng)一個巨大的電影院。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

2. Depth

深度是一個新的變量,它是讓界面變得更有層次感。讓我們看一些例子,深度影響我們?nèi)绾闻c空間中的物體聯(lián)系起來,遠方的內(nèi)容可以讓用戶的瀏覽更沉浸,并鼓勵人們在遠處互動。

附近的物體會激發(fā)用戶互動,更容易從不同的角度觀察,微小的運動可以讓我們從各個角度看到物體,深度的一個很好的用途是創(chuàng)建層次結(jié)構(gòu)(Create hierarchy with depth)。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

讓我們再看看沉浸式影院中的電視應(yīng)用程序,播放控件可以很小,被放置在用戶附近,即使它們很小,它們?nèi)匀豢梢钥刂齐娪啊?/p>

如果它們被放置在電影屏幕上,它們看起來太大,就不太合適,像這樣的附近元素可以盡量讓它很小,而仍然優(yōu)先展示遠處的大物體。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

深度需要用光和影等視覺線索(Use light and shadow as cues)來加強,有些物體會像我們剛剛看到的電影屏幕一樣,在房間中有發(fā)光地板和天花板,任何出現(xiàn)在光下的物體都應(yīng)該將顏色投射到附近的物體上,大多數(shù)物體應(yīng)該像桌子上的窗口一樣投影,這使它們看起來更融入空間。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

您應(yīng)用中的任何自定義對象也應(yīng)該投影,在大多數(shù)情況下,用戶更喜歡微妙的深度(Prefer subtle depth)。

很多時候,它容易過度,會使物體看起來分散注意力或不切實際,元素之間的微妙深度通常足以引導(dǎo)人們的注意力。

注意當一個模態(tài)出現(xiàn)時,窗口會稍微向后推以引起注意。深度是微妙的,但有效的。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

并非所有東西都需要深度。

例如,3D文本可能會令人分心且難以閱讀,尤其是在角度上。當用作界面元素時,保持文本扁平化。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

3. Scale

尺寸是一種強調(diào)內(nèi)容的新方法,小的物體會感覺個性化和輕量化,大的物體感覺令人印象深刻,就像湖面上的巨型電影,增加比例完全改變了電影的感覺。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

有些物體最好以現(xiàn)實生活中的比例查看。

例如,購物應(yīng)用中用戶可能希望以現(xiàn)實生活中出現(xiàn)的產(chǎn)品 的大小進行顯示。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

四、Immersive

接下來讓我們談?wù)勅绾巫屇膽?yīng)用程序更加沉浸。

1. Immersion Spectrum

動態(tài)的應(yīng)用窗口它可以根據(jù)用戶在不同的沉浸式狀態(tài)之間流暢地過渡。

應(yīng)用之間的所有內(nèi)容都可以在共享空間的窗口中與其他應(yīng)用程序一起運行,或者如果它需要更多空間,它可以在一個完整的空間中運行,其他應(yīng)用被隱藏起來。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

讓我們看一個主題演講中的示例,應(yīng)用程序在窗口中打開,但是當播放此幻燈片時,我們使用調(diào)節(jié)亮度來使演示文稿更加聚焦。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

營造沉浸的環(huán)境氛圍當排練演示的時候,我們可以把用戶帶到舞臺上,讓他們完全沉浸在劇院真人大小的體驗中。

這樣的體驗需要更多的空間,應(yīng)用將某人帶到一個他們可以看到周圍的新地方。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

但是完整的空間時刻可能不會把某人帶到一個新的地方,他們依然可以存在于自己的空間里,在這里感覺就像你看著大海。而你仍然可以看到你周圍的房間,你可以設(shè)計豐富的沉浸式體驗,而不需要接管用戶的整個視野。

沉浸式應(yīng)用也會感覺到與人們的物理環(huán)境有聯(lián)系,一個巨大的歡迎時刻在桌子上投下了陰影,讓你好感覺就像真的在那里,如果你的體驗與某人的物理環(huán)境有關(guān),記得保持你的設(shè)計靈活。

2. Essential tips

引導(dǎo)用戶的注意力(Guide People’s focus)用戶在設(shè)計沉浸式體驗時,還是可以環(huán)顧四周,關(guān)注不同的事情。但是如果太多的事情同時發(fā)生,他們可能會感到不知所措或不確定該怎么做,這就是為什么在冥想應(yīng)用中引導(dǎo)人們將注意力集中(Guide People’s focus)是很重要的。

例如在冥想場景中,你的注意力被引導(dǎo)到空間中的一個物體上。你的注意力通過運動、空間化的音頻和彩色材料被吸引到這里,當深入思考的時候,我們輕輕地展開花朵,完全包圍你。要設(shè)計流暢,可預(yù)測的過渡,可以在你的體驗的不同狀態(tài)之間創(chuàng)造連續(xù)性,這將讓用戶感到舒適并意識到發(fā)生了什么。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

與現(xiàn)實融合(Blend thoughtfully with reality)如果你在一個完整的空間中使用應(yīng)用,你可以將應(yīng)用和現(xiàn)實環(huán)境進行虛實融合,使用柔和的邊緣來平滑地集成你的應(yīng)用,這避免了突然的過渡,讓用戶專注于你的內(nèi)容。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

讓事物感覺鮮活微妙(Make things feel alive)鮮活的動畫可以給場景帶來活力,比如湖上蕩漾的水或漂浮在天空中的云微妙的運動可以將靜態(tài)體驗轉(zhuǎn)化為生動和動態(tài)的體驗,并通過空間音頻進一步創(chuàng)造氛圍,您可以將聲音錨定在空間中的物體上,或創(chuàng)建完全圍繞人們的聲音場景。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

少花錢多辦事(Do more with less)你可以在電影院里用小效果創(chuàng)造出巨大的視聽感受,地板和天花板上反射的細微光線給人一種令人信服的空間感,你不需要渲染真實劇院的所有細節(jié)來傳達。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

3. Comfort

運動時淡出內(nèi)容(Fade out content in motion)如果你需要移動你的沉浸式應(yīng)用,要避免快速移動,這可能會讓人感到迷失方向。

因此我們建議在運動時淡出內(nèi)容,這將使用戶感覺穩(wěn)定。確保提供一個清晰的進出沉浸式體驗指南的方式,使用簡短,有用的標簽和可識別的符號,如展開和折疊箭頭。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

五、Authentic

最后,讓我們談?wù)勅绾未蛟旄鎸嵉捏w驗設(shè)計。

尋找關(guān)鍵時刻(Find a key moment)在設(shè)計出色的應(yīng)用時,應(yīng)該充分利用XR設(shè)備的獨特性。最好的應(yīng)用應(yīng)該是能讓用戶快速進入空間沉浸式體驗的。

想想你如何讓你的應(yīng)用程序有足夠的吸引力和獨特性,以至于用戶會持續(xù)的使用你的應(yīng)用。為了做到這一點,試著找到一個只能在空間上體驗的關(guān)鍵時刻(Find a key moment)。

讓我們看看Vision Pro是如何在照片應(yīng)用程序中做到這一點的,我們研究了已經(jīng)在現(xiàn)有平臺上熟悉的照片應(yīng)用程序的核心功能,瀏覽你的照片庫,重新發(fā)現(xiàn)特殊的記憶,通過全景重溫一個地方。

當你找到那個特殊的照片時,照片會在你的空間里變大,讓你的周圍環(huán)境變暗,這些都是你iPhone上同樣美好的回憶,但是以逼真的尺寸看到它們真的很驚喜。

當觀看全景的時候,我們有一個關(guān)鍵時刻帶你回到一個特殊的地方。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

只有在無限的空間中才有可能。通過專注于一個特殊功能來思考你自己應(yīng)用程序中的關(guān)鍵時刻,你可以用你已經(jīng)擁有的內(nèi)容讓你的體驗變得獨特和難忘,你可以用深度和尺寸來增強一個時刻,或者改變某人的空間,幫助人們專注于一項任務(wù),或者喚起一種感覺,你可以創(chuàng)造難忘的體驗。

Apple Vision Pro設(shè)計規(guī)范之空間設(shè)計原則篇

本文參考鏈接

Vision Pro空間設(shè)計原則篇:https://developer.apple.com/videos/play/wwdc2023/10072/

本文由 @Vicky。 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 正在學(xué)習。

    來自廣東 回復(fù)