台北共享工作空間交流論壇

標題: Apple Vision Pro 空間設計基本原则拆解 [打印本頁]

作者: admin 時間: 2023-7-19 23:24
標題: 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 协定

歡迎光臨台北共享工作空間交流論壇 (https://bbs.tdudu.com.tw/)