admin 發表於 2023-7-19 23:24:38

Apple Vision Pro 空間設計基本原则拆解

本篇文章将對 Apple Vision Pro 的空間設計举行拆解,作者以五大空間設計原则為根本對此產物举行阐發,能给產物設計的火伴们供给一些参考帮忙,但愿能對你有所開导。

AR 設計,是基于已有設計根本的一次設計升维,在短短 20 分钟的官方视頻中,给出了五個根基空間設計原则:認識感、以報酬中間、空間维度、沉醉感、真實可托。

用一句话归纳综合,就是基于本来沉淀的設計根本理论,加之新维度後的進级和利用。

用一個词归纳综合,就是 " 深度 "。也是我在本身的书和以前文章里所给出的 AUI 關头性區分之一。而在對 Vision Pro 空間設計基来源根基则的進修中,也加深了我對深度這一增长的维度,對全部界面設計所酿成的影响有了更深的理解。

如下文字,依照我的收成,拆解了這些基来源根基则,但愿對你有所帮忙。

官方视頻進修地點:

1、認識感

認識感的两點:窗口和點距。而此中很大一部門的翰墨,又给了窗口。

窗口的設計,沿用了咱们在電脑的應用上逐步構成的习气和認知。

以是,官方設計原则中的多窗口、窗口的巨细、窗口的摆放和封闭都傳承了屏幕界面的思惟。

1. 多窗口

AR 解决了屏幕巨细的限定,真正做到了想大就大。(想起了我 2 年多之前给 UXPA 录的课,有提到這點)

有一些更多的是:

尽可能讓一個利用在一個窗口里。

容许一個利用多窗口。

看似有點抵牾,不外若是基于對注重力的斟酌就不難理解了。

一個利用在一個窗口节流了注重力。一個利用多個窗口,也是节流注重力。由于,窗口不首要,首要的是内里的内容。

在容许一個利用多窗口這點里,提到的平级窗口、次级窗口、操作栏零丁安排,都是為了聚焦内容自己,從而节流用户注重力。

2. 窗口的巨细

窗口巨细必要按照利用内容来設置,這是官方给出的引导,也是 Mac 或 PC 上的設計持续。

3. 窗口的摆放

挪動、封闭和巨细调解。

窗口的挪動和封闭稍有點進修本錢,分歧于 MAC 上原本的,鼠標按住頂部栏便可以拖動,這里的拖動和封闭進口是放鄙人面,經由過程眼動触發。

巨细调解更隐藏,必要眼睛瞩目到角落才會呈現提醒性的 UI,不外對付已习气 Mac 或 PC 上操作的用户来讲,仍是比力轻易想到的。

在情况中但又能區分。

苹果利用了玻璃質感的界面材質来包管窗口與真實情况的區分性,又用光芒包管了它在情况中的交融感。

對付通用性的體系設計来讲,玻璃質感是一種很好的選擇,若是是特定的利用,却是也能够测驗考试纷歧样的气概。

對光芒的應用,则是 AR 界面設計里新的常識點。

固然設計原则這一节并無過量的阐明,但連系鼓吹视頻所見,要到达如许的结果必要設計和研發配合的精雕细琢,渺小的地方見真章,很敬佩他们在表示光芒應用上所支出的投入。

值得注重的是,多窗口這類設計固然看起来更容易用,但其實不是所有 AR 装备均可以利用的法子,必需要配备 3DOF 或 6DOF 的眼镜装备才行。

此外,窗口設計也是以前被吐槽的部門,由于認識感带来的另外一面就是不敷具备冲破性,全部界面看起来仍然是平面化的。以是,我仍是那句话,合适的才是最佳的。

2、以報酬中間

Vision Pro 設計原则的第二點,以報酬中間,重要讲了三個方面:FOV、人機工學和活動。

1. FOV

FOV,是视场角舒緩靜脈曲張噴劑,(Field of View)的意思,在《AR 界面設計》里我也有先容。

根本原则里供给了两點設計原则:

将最重要的内容放在显示區域中間。

利用宽屏的界面以适配人的视场角。

這两點不難理解。

第一點是人的注重力很窄小,并且集中在人视线的中間。你可以尝尝把手臂伸直,人的注重力相對付所有输入信息的比例,就同等于此時手的大拇指指甲盖巨细。

第二點是人的视场角,摆布可以达 230 度,上下 120 度,是一個宽屏。固然,今朝的 AR 装备的显示區域也都是宽屏的。

這内里有個典范的設計問題,因為今朝 AR 装备的显示區域都远远小于人的可视范畴,在虚像显示范畴有限的环境下,現實用户看到的界面和你假想的界面是略有差此外。

以视頻里的圖举個例。若是装备显示 FOV 不敷大,虚拟界面會被切掉一些。

被切掉一部門的虚拟界面示意

若何讓用户感知不到現實的显示區域是有鸿沟的呢?這内里有蛮多可以测驗考试和摸索的處所,是颇有意思的設計點,供给 2 點凭仗供参考:

第一個凭仗是對用户注重力的利用。

第二個凭仗是無邊框發生的無界感知。

2. 人機工學

Vision Pro 根基設計原则的第二點中的人機工學,内里先容的内容可以用另外一個词来说:用户位姿。

用户位姿,是指界面的設置,基于用户的位置和姿态而設定。

内里给出了 4 個准则,简略归纳以下:

設置界面的默许間隔。

把界面摆放在用户手臂范畴外以鼓動勉励用户操作。

界面的角度和間隔應當跟着用户的個性姿态有變革。

當用户头動的時辰,内容最佳锚定不動。

1)默许設置間隔

由利用的场景定位决议,一般體系级的界面會比咱们看電脑時的電脑屏幕远,若是是主打觀影類的會更远一些,如 Xreal 為 4M/6M,微软的 Hololens 是 2m 的默许間隔。

2)交互間隔

對付必要交互的界面,天然點来讲應當在手臂伸长的范畴内。不外,這是在手可以直接操作界面(比方手直接點击虚拟的按键触發相應)的环境下来讲的。

Apple 的手势交互更雷同于隔空交互,在手势可以辨認的范畴内,用户特定的手势可以對界面上的内容举行交互操作。

3)動态位姿

以用户的及時或個性位姿来設置界面相對于最好的位置。比方高一點的用户,界面會高一些,躺着的用户,界面朝向為斜下方等。

若是装备支撑 6DOF,可以界说的更邃密一點,比方用户可以略微走近或離远一點看虚拟界面内的文字,界面自己不會產生挪動。

但若用户决议换一個處所浏览,比方從床上到沙發上,用户挪動的間隔超越一個設定值,虚拟界面跟從挪動到新地址,再從新校准和用户的相對于間隔和朝向。

4)用户头動,内容锚定

在用户头動的時辰将内容固定在原地,可以给用户更多自由。這彷佛和上一點又是相反的。

可以理解為,在用户的注重力被情况中此外吸引時,讓内容不抢用户视线的镜头。

比方旁觀網页時,被房間里小狗小猫的声音吸引,用户可以回头看到视线下方的它们,而不消被跟從的界面阻碍。再比方,用户不自發的動動头部放松時,不會影响虚拟界面的摆放。

3. 活動

Vision Pro 举薦静态體驗,即在用户静止不動的环境去設計 AR 利用。

在我本身的履历中,用户行走進程下的 AR 界面設計,必要斟酌的設計點和碰到的技能難點都比静态時要增长很多,以是若是可能,尽可能斟酌讓用户在不動的环境下完成利用所必要转达的體驗内容。

3、空間维度

空間维度,是基来源根基则中占用篇幅中至多的一點,英文词是 "dimensional",中辞意思是 " 有尺法網直播,寸的 "、" 有维度的 "。

在数學和物理學中,维度是描写空間或物體特性的一個量,通經常使用长度、宽度和高度等尺寸来暗示。是以,"dimensional" 這個词可以用来暗示一個物體或觀點具备多個尺寸或特性,或必要斟酌多個方面才能完备描写。

這個颇有意思,阐明可讓咱们發生空間感的方面有不少,致使設計也能够從不少標的目的切入,固然,這也一样带来了設計的難度。

在官方先容里,這部門分了三個方面:

空間

深度

尺寸

1. 空間

空間,是操纵空間的上風去設計界面。

第一是不必要严酷被真實空間的物理特征限定,好比界面窗口可以和物理世界交織,好比界面巨细可以扩展到影院屏幕巨细,超越真什物理空間的容纳范畴。

這里不能不感慨下苹果的细节處置,這類挪動進程中交織部門的透明度低落,遏制後彻底显示的設計,在咱们的產物里可能彻底排不上優先级……

第二是可以缔造一個全新的空間,這里提到 Vision Pro 設定的一個模式:full space(全空間),與之相對于的另外一個模式是 share space(同享空間)。

2. 深度

深度,一個新的吸引注重力和表达层级感的設計维度。

對付深度的操纵,從 Vision Pro 的基来源根基则里可以总结為五個方面:間隔、层级、光影线索、微距感、厚度。

間隔:就直覺来讲,放在远處的虚像可以設計的比力大,而且合适做一些远間隔交互的操作設定。放在近處的虚像可以設計的比力小,而且合适做一些直接操作的設定,此外也便利用户 360 度环抱察看它。

层级:主内容前面小的操作栏,經由過程深度表达了层级。

光影线索:經由過程光芒和暗影来凸起内容和了了虚像的空間位置,讓虚像加倍交融在空間内。

微距感:聚焦的時辰可使用間隔来凸起激活态。

厚度:不是任何内容都必要厚度。也能够從另外一個角度诠释,模子的投入究竟结果比平面 UI 更多,以是若是都能到达目標,利用平面素材也是一種很好的方案。

3. 尺寸

尺寸:虚拟内容的尺寸,是一個新的設計方法。

分歧的尺寸會带给人分歧的感受。小的虚像會讓人感受更轻快和私家,大的虚像可以供给加倍沉醉的感受。某些内容,合适以它在物理世界的真實尺寸显示。

空間、深度、尺寸,是空間维度設計的三個切入點。但若只能記下一個,我举薦深度,由于不论是空間仍是尺寸,都是由于深度,才带来了與原有屏幕界面纷歧样的設計维度,名為空間的設計维度。

4、沉醉感

AR 内容要带来沉醉感,将用户彻底吸引在虚拟的空間内,更多的做法是像 VR 同样,讓虚拟内容尽量的包抄用户,盘踞 TA 的全数视线,尽量的彻底@轻%7t5Ol%忽掉實%DQ6qS%际@空間。

對付沉醉感,Vision Pro 给出了三個要點:

空間光谱

關头提醒

恬静感

1. 空間光谱

空間光谱,是對 AR 界面是一種空間界面設計的進一步利用,它可以展如今面前,也能够包抄,更可以包裹。

這就是空間画布和咱们以前画布最大的一個區分,其画布外形可以在三维空間發生各類變革。

這里,也先容了 Vision Pro 里同享空間(Share space)和全局空間(Full space)的两個觀點,在全局空間,咱们不但可以缔造出全新的空間,也能够連系現有空間来創造。

這里也有一個小提醒,可以用调光(diming),也就是咱们在屏幕界面設計中經常使用的蒙层来聚焦内容,指导用户的注重力。

若是能操纵實际空間来到达沉醉式體驗也是不错的做法,比方連系現實空間的 AR 遊戲。

2. 關头提醒

關头提醒,是在 AR 界面設計時一些設計建议,一共 4 點:

1)指导用户的注重力

實际 + 虚拟,带来分歧的體驗的同時必定會增长注重力的消耗,好的設計可以或许讓用户的注重力存眷在必要存眷的處所。Vision Pro 供给了 4 個可以指导用户注重力的設計角度:声音、材質、色采、渐變的動效

2)谨严思虑和實际的交融

Vision Pro 供给了情况的线索,虚拟的内容可以和真正的情况举行交融,但如许的交融要天然且成心义。

第一,在新情况和當前情况的切换上,必要有過渡。

第二,我再增长一點:虚拟内容要和真正的情况有逻辑联系關系。

3)活泼體驗

塑造活泼體驗,Vision Pro 供给三個建议:微動画、声音、少便是多。

微動画:這也不是甚麼新颖的設計伎俩了,現有的屏幕界面設計有不少可以鉴戒的處所。

用声音塑造空气:對付投入產出比来讲,我感覺是一個很是划算的設計點。但也會碰到一些問題,好比硬件终端自己的支撑(Vision Pro 大要不消担忧),喧闹情况下的低體驗度。

少便是多。可以用很小的設置来供给更大的體驗,好比官方案例中,利用细小的光照反射在地板上,而没必要大面积衬着来营建出片子院的真實结果。少便是多這個設計原则其實不是新颖事變,但 AR 界面中,必要有不少新的應用。

3. 恬静感

恬静感,是和节制感一块兒被提到的。

面临新的界面,讓用户感触全部體系界面在本身的节制下,是缔造利用恬静感的一個根基请求。

三個設計建议:

画面切换,不管基隆通馬桶,是虚到實,仍是實到虚,渐近渐出。

防止大的,快速的動画。轻易造成眩晕。

清楚的功效可视化和需要的指引。

5、真實可托

真實可托,是指充實操纵装备的能力,利用空間性缔造直觀、惹人入胜和丰硕的體驗。将設法聚焦成一個主題,從一個方面切入,用一個利用的空間来缔造出一個主題。

若何切入?

1)找一個關头的動作

這個關头動作,只可能在空間上建立,Vision Pro 的例子是相册,单张照片可以依照画面里真正的比例显現,和全景模式的展示,都是空間界面才能带来的體驗。

2)聚焦一個角度

要末是帮忙用户完成使命,要末是唤升引户豪情,要末……在這個根本上操纵空間来設計界面,聚焦一個重要的晋升點,讓已有的内容展示出新的活气。

真實可托這點讲述的内容很少,由于大部門必要基于現實利用和环境来思虑,這是一個新的画布上,有待後续的 AR 設計師弥补的部門。

6、总结

Vision Pro 五大根基設計原则:認識感、以報酬中間、空間维度、沉醉感、真實小雞玩具,可托。

認識感:對已有内容的驅蟑螂藥,再利用。

以報酬中間、空間维度、沉醉感:是空間設計的重點。增长一個维度後,带来了設計的進级和體驗的進级。

真實可托:理论简略,必要基于現實利用和环境,從實践中来领會。

專栏作家

題圖来自 Unsplash,基于 CC0 协定
頁: [1]
查看完整版本: Apple Vision Pro 空間設計基本原则拆解