Vision Pro交互規(guī)范:空間設(shè)計(jì)原則(一)
Apple面向開(kāi)發(fā)者更新了vision的相關(guān)設(shè)計(jì)建議和規(guī)范,作者也在看完相關(guān)設(shè)計(jì)指導(dǎo)后,結(jié)合自己的XR的經(jīng)驗(yàn)以及項(xiàng)目中遇到的設(shè)計(jì)問(wèn)題,與其設(shè)計(jì)原則拋出自己的理解和質(zhì)疑。希望對(duì)你有所幫助。
Hi 大家好,Apple面向開(kāi)發(fā)者更新了vision的相關(guān)設(shè)計(jì)建議和規(guī)范,我最近也在看,并且發(fā)現(xiàn)目前市面上對(duì)其定義的設(shè)計(jì)原則的相關(guān)分享比較少,所以借著這一次的學(xué)習(xí)和大家一起分享一下。后續(xù)也會(huì)陸續(xù)把這一個(gè)系列更新完成。
在看完所有的相關(guān)設(shè)計(jì)指導(dǎo)之后,我通過(guò)自己的整理和理解對(duì)其進(jìn)行了分類。這其中我也會(huì)根據(jù)自己從也XR的經(jīng)驗(yàn)以及項(xiàng)目中遇到的設(shè)計(jì)問(wèn)題,與其設(shè)計(jì)原則拋出自己的理解和質(zhì)疑。
寫(xiě)在最前
因?yàn)槭亲约旱姆g,恐有自己的理解,所以我將原文的鏈接貼入文章中:https://developer.apple.com/videos/play/wwdc2023/10072/
在AR或者VR的設(shè)計(jì)過(guò)程中,不再僅僅是符合“屏幕”上的交互設(shè)計(jì)原則,而是在此基礎(chǔ)上,不僅考慮使用者的心理舒適與預(yù)期外,要考慮使用者的生理舒適和習(xí)慣甚至是安全問(wèn)題。
而從我自己的從也經(jīng)驗(yàn)來(lái)說(shuō)我也是非常認(rèn)同這樣的觀點(diǎn);在之前的從業(yè)中,我經(jīng)常收到一些其他業(yè)務(wù)方的挑戰(zhàn):例如這是一個(gè)新的終端,我們應(yīng)該使用更炫酷的交互方式來(lái)讓用戶感覺(jué)到不一樣,我們的視覺(jué)應(yīng)該和手機(jī)、pad長(zhǎng)的不一樣,應(yīng)該完全重繪,我們的動(dòng)效應(yīng)該更加的跳脫,因?yàn)樗鼪](méi)有了邊界等等。
原文引言
Discover the fundamentals of spatial design. Learn how to design with depth, scale, windows, and immersion, and apply best practices for creating comfortable, human-centered experiences that transform reality. Find out how you can use these spatial design principles to extend your existing app or bring a new idea to life.
探索空間設(shè)計(jì)的基本原理。學(xué)習(xí)如何以深度、規(guī)模、窗口和沉浸感進(jìn)行設(shè)計(jì),并應(yīng)用最佳實(shí)踐來(lái)創(chuàng)造舒適的、以人為中心的體驗(yàn),從而改變現(xiàn)實(shí)。了解如何使用這些空間設(shè)計(jì)原則來(lái)擴(kuò)展現(xiàn)有應(yīng)用程序或?qū)⑿孪敕◣肷睢?/p>
以下原則:
Familiar—–熟悉的/通用的
Human-centered—–以人為本
Dimensional—–維度Immersive—–沉浸Authentic—–真實(shí)的
一、Familiar—–熟悉的/通用的
框架層-窗口從我的理解來(lái)說(shuō),“熟悉的通用的”是對(duì)于用戶來(lái)說(shuō),是完全沒(méi)有問(wèn)題的,熟悉框架的遷移意味著用戶在空間中相應(yīng)的學(xué)習(xí)成本也會(huì)降低。
可操控:蘋(píng)果提供了明確的操控組件,支持用戶對(duì)窗口進(jìn)行直接的拖動(dòng)和縮放,移動(dòng)時(shí),窗口始終跟隨用戶的手,拖動(dòng)完成后,則停留在最后的移動(dòng)位置。
框架大?。合噍^于固定的屏幕二維設(shè)計(jì),頁(yè)面的尺寸已經(jīng)不再局限于屏幕本身;AR尺寸更加自由靈活,設(shè)計(jì)者往往可以根據(jù)內(nèi)容的舒適程度或者類型去設(shè)計(jì)窗口的大小。
空間多任務(wù):窗口的設(shè)計(jì)更多是為內(nèi)容服務(wù),窗口的功能操作則使用分層的設(shè)計(jì)方式進(jìn)行排列或者疊加的方式進(jìn)行擺放;亦或者通過(guò)隱藏的方式進(jìn)行設(shè)計(jì)來(lái)避免用戶的視覺(jué)中心被干擾。因?yàn)槭窃诳臻g中,用戶可以真正意義上實(shí)現(xiàn)多任務(wù)并行。
大家可以看到上圖,像我們的mac和移動(dòng)端一樣,他們的結(jié)構(gòu)框架并沒(méi)有進(jìn)行很大的改變,依舊維持著我們?cè)谌粘J褂脩?yīng)用的心智模型:瀏覽器的位置在頁(yè)面的垂直方向,keynote則是和mac端在框架上幾乎是一致的。
我在進(jìn)行相關(guān)的業(yè)務(wù)設(shè)計(jì)時(shí),也一直帶著這樣的準(zhǔn)則去思考每一個(gè)場(chǎng)景的流程,但是需要注意的是:“降低用戶的學(xué)習(xí)成本”這件事不止是熟悉通用就可以足夠的,我們除了框架的遷移以外,我們也做了大量的用戶操作的窮舉,以此在其中選出合適用戶也合適業(yè)務(wù)的交互方式,我們始終認(rèn)為:“我會(huì)操作”和“我看的懂”都很重要,所以在這一層,我自己定義了我的交互原則——-獨(dú)立直達(dá)
視覺(jué)表現(xiàn)層(UI)重點(diǎn)特征的遷移:在視覺(jué)表現(xiàn)上,他們遷移了其他終端最具有代表性的設(shè)計(jì)表現(xiàn)—毛玻璃;除了通用性的考慮以外,毛玻璃也有很好的與現(xiàn)實(shí)世界區(qū)分的特性,這讓我聯(lián)想到手機(jī)上毛玻璃效果與其他頁(yè)面的關(guān)系,蘋(píng)果這里只是把“現(xiàn)實(shí)世界”當(dāng)做了手機(jī)里的那個(gè)被毛玻璃壓蓋的頁(yè)面。
這樣的繼承性很好的被蘋(píng)果給用到了空間設(shè)計(jì)中,而這樣毛玻璃的效果也顯得更加有質(zhì)感(我們當(dāng)時(shí)也有考慮過(guò)用這樣的設(shè)計(jì)風(fēng)格,但是受限于各個(gè)方面最后沒(méi)有實(shí)現(xiàn),還是有點(diǎn)遺憾)尺寸元素:隨著用戶在移動(dòng)窗口時(shí),窗口可能存在不同大小樣式,因?yàn)橛脩舻奈恢煤筒僮鞫疾还潭ā?/p>
那么基于此原因,在設(shè)計(jì)尺寸時(shí),需要具備完善的人因資料來(lái)進(jìn)行設(shè)計(jì),Vision Pro 主要是通過(guò)視覺(jué)進(jìn)行選擇和交互的,基于用戶的瞳孔調(diào)節(jié)是非常有必要的,所以蘋(píng)果引入了新的尺寸規(guī)范。
二、Human-centered—–以人為本
基于人類真實(shí)物理環(huán)境的設(shè)計(jì)。
相對(duì)于空間設(shè)計(jì),Vision Pro 會(huì)提供給用戶更加直接的交互方式:通過(guò)他們的眼睛和手,通過(guò)自己的視角與應(yīng)用進(jìn)行直接的互動(dòng)和體驗(yàn)。而在設(shè)計(jì)應(yīng)用的時(shí)候,我們需要始終帶著兩個(gè)問(wèn)題:
- 他們會(huì)看到什么
- 他們會(huì)如何移動(dòng)
視覺(jué)集中:那么不管他們會(huì)看到什么,會(huì)如何移動(dòng);當(dāng)用戶打開(kāi)應(yīng)用時(shí),用戶看到的始終包含 2 個(gè)部分:
- 真實(shí)世界
- 虛擬世界
不管在哪個(gè)視界中,他們優(yōu)先看到的都是中間區(qū)域,所以在設(shè)計(jì)時(shí)需要把最重要的內(nèi)容放在視覺(jué)的中心(如下圖)。
但是人們不會(huì)固定自己的位置,用戶的位置是隨時(shí)變化的,所以這意味著我們可以進(jìn)一步的擴(kuò)展沉浸式的體驗(yàn)內(nèi)容,但是要時(shí)刻注意要把最重要的內(nèi)容放在明顯的位置上。
人體工學(xué)在空間設(shè)計(jì)中是無(wú)處不在的,你的內(nèi)容位置對(duì)人們的身體反饋有很大的影響,所以在不同的層面上去合理的擺放顯得非常有必要。在多數(shù)情況下,鼓勵(lì)把內(nèi)容放置在稍遠(yuǎn)的地方,讓用戶進(jìn)行交互;避免把內(nèi)容放在身后或者極高、極低的位置,除非它是沉浸體驗(yàn)的一部分。
而在用戶的使用過(guò)程中,因?yàn)槲恢玫牟粩嘧兓?,?yīng)用窗口本身需要跟隨變化;但是跟隨不應(yīng)該是實(shí)時(shí)的,這會(huì)讓用戶覺(jué)得應(yīng)用卡住了,基于劃?rùn)M線的這一點(diǎn),我在之前的業(yè)務(wù)中也有涉及到,我也是這樣去推動(dòng)我們的設(shè)計(jì)團(tuán)隊(duì)來(lái)做這樣的設(shè)計(jì),這里就涉及到了分層的概念,后面可以單獨(dú)開(kāi)一篇,和大家聊一下分層設(shè)計(jì)。
所以蘋(píng)果建議在設(shè)計(jì)時(shí),最好提供需要最少運(yùn)行的靜止體驗(yàn),這使得應(yīng)用會(huì)更容易讓每個(gè)人使用。
三、Dimensional—–維度
這里的維度指的是深度和大小。
畫(huà)布是無(wú)限的,但是人的空間是有限的,所以要保證你的窗口不能與真實(shí)世界有穿插,窗口應(yīng)該服務(wù)于用戶的視覺(jué)感知。不同的類型內(nèi)容,系統(tǒng)本身也可以通過(guò)調(diào)節(jié)眼鏡的光線來(lái)營(yíng)造用戶的沉浸感。也就是說(shuō)雖然 有的場(chǎng)景可能無(wú)法避免穿插的情況,但是也可以通過(guò)眼鏡本身的光線進(jìn)行弱化這一不舒適的體驗(yàn)。
而深度,則是一個(gè)很好用來(lái)創(chuàng)建層次的工具。這里的深度提供了設(shè)計(jì)無(wú)限的創(chuàng)意和想法,你可以想想如果有了深度這一條件,不論是應(yīng)用的層級(jí),甚至是系統(tǒng)層級(jí),都可以使用這樣的模式進(jìn)行設(shè)計(jì)。
四、Immersive—–沉浸感
舒服是沉浸感的第一象限舒服的:提到沉浸感你或許可以想到自己戴著眼鏡去看 3D 電影的場(chǎng)景;沉浸感與光是無(wú)法分離的,如何設(shè)計(jì)沉浸感,首要的第一元素是如何讓人舒服。它們?cè)谠O(shè)備上實(shí)現(xiàn)了一套完整的光影系統(tǒng),為了應(yīng)對(duì)不同的場(chǎng)景,他們提供了不同的光影策略利用光影和窗口的配合,他們可以增強(qiáng)所處環(huán)境的氛圍,甚至讓用戶處于其他空間;空間設(shè)計(jì)沉浸感的另一個(gè)特點(diǎn)則是通過(guò)光影和窗口,讓用戶感覺(jué)它們是和物理環(huán)境聯(lián)系在一起的。
物理聯(lián)系性而要保證物理聯(lián)系性,則始終需要考慮每個(gè)人的生理指標(biāo):不一樣的身高,不一樣的面容,空間往往隨著時(shí)間的推移而變化,所以設(shè)計(jì)的應(yīng)用體驗(yàn)需要很好的去適應(yīng)現(xiàn)在的任何地方。
五、Authentic—–真實(shí)的
逼近現(xiàn)實(shí)的微動(dòng)效和聲音用戶在使用眼鏡時(shí),用戶可能隨時(shí)觀察周圍的情況,但是如果太多事情的同時(shí)發(fā)生,這個(gè)時(shí)候用戶容易出現(xiàn)不知所措或者不確定怎么辦的情況。
所以在設(shè)計(jì)時(shí)需要引導(dǎo)用戶去關(guān)注某些重要的部分(這里其實(shí)在上面提到:蘋(píng)果已經(jīng)提供了較為直接顯示方式,在這里再一次強(qiáng)調(diào)具體的關(guān)注設(shè)計(jì),我是有點(diǎn)保留意見(jiàn)的,原因是因?yàn)楹颓懊娴膸讞l規(guī)則有點(diǎn)違和:以人為本–我們應(yīng)該更加關(guān)注用戶真實(shí)環(huán)境的情況,而不是要與用戶的真實(shí)環(huán)境去搶奪用戶的視野)。
如果你想設(shè)計(jì)一款與真實(shí)世界融合的應(yīng)用,那么平緩的動(dòng)畫(huà)和身臨其境的聲音時(shí)必不可少的;動(dòng)畫(huà)與真實(shí)世界的動(dòng)畫(huà)盡量貼合,聲音則是與真實(shí)世界的聲音的方向和深度類似。
如上如蘋(píng)果不僅渲染了電影畫(huà)面的本身,連電影院里的反光都進(jìn)一步去進(jìn)行了渲染,但是它并沒(méi)有把電影院所有的細(xì)節(jié)都渲染出來(lái)。所以>在設(shè)計(jì)這種空間應(yīng)用時(shí),可以根據(jù)應(yīng)用類型,對(duì)應(yīng)用以外進(jìn)行適當(dāng)克制的渲染。
避免大幅度的快速移動(dòng)。
大幅度的快速移動(dòng)非常容易給用戶帶了難以聚焦的體驗(yàn),并且容易給用戶帶了不安全的心理預(yù)期,所以如果一定需要運(yùn)動(dòng)的話,則推薦漸入漸出的動(dòng)畫(huà)。
以上就是 Vision Pro 基于空間設(shè)計(jì)提出的一些基本原則。
個(gè)人觀點(diǎn)
空間設(shè)計(jì)不再是拘泥于方寸之間,它要設(shè)計(jì)的是人與真實(shí)世界的關(guān)系和感知。從現(xiàn)在開(kāi)始,我們的設(shè)計(jì)內(nèi)容將超越屏幕本身,基于技術(shù)、人因:它將會(huì)包括但不限于環(huán)境,空間以及地理位置。
物理世界正在朝著數(shù)字世界轉(zhuǎn)化,而我們將做的,是對(duì)其他終端、人類習(xí)慣以及環(huán)境的整合體驗(yàn)設(shè)計(jì),這便是空間設(shè)計(jì)所需要的設(shè)計(jì)內(nèi)容!
作者:海鮮不設(shè)計(jì),微信公眾號(hào):海鮮不設(shè)計(jì)
本文由 @海鮮不設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來(lái)自蘋(píng)果官網(wǎng)截圖
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!