天天看點

Viosn Pro互動規範:空間設計原則(一)

作者:人人都是産品經理
Apple面向開發者更新了vision的相關設計建議和規範,作者也在看完相關設計指導後,結合自己的XR的經驗以及項目中遇到的設計問題,與其設計原則抛出自己的了解和質疑。希望對你有所幫助。
Viosn Pro互動規範:空間設計原則(一)

Hi 大家好,Apple面向開發者更新了vision的相關設計建議和規範,我最近也在看,并且發現目前市面上對其定義的設計原則的相關分享比較少,是以借着這一次的學習和大家一起分享一下。後續也會陸續把這一個系列更新完成。

在看完所有的相關設計指導之後,我通過自己的整理和了解對其進行了分類。這其中我也會根據自己從也XR的經驗以及項目中遇到的設計問題,與其設計原則抛出自己的了解和質疑。

寫在最前

因為是自己的翻譯,恐有自己的了解,是以我将原文的連結貼入文章中:https://developer.apple.com/videos/play/wwdc2023/10072/

在AR或者VR的設計過程中,不再僅僅是符合“螢幕”上的互動設計原則,而是在此基礎上,不僅考慮使用者的心理舒适與預期外,要考慮使用者的生理舒适和習慣甚至是安全問題。

而從我自己的從也經驗來說我也是非常認同這樣的觀點;在之前的從業中,我經常收到一些其他業務方的挑戰:例如這是一個新的終端,我們應該使用更炫酷的互動方式來讓使用者感覺到不一樣,我們的視覺應該和手機、pad長的不一樣,應該完全重繪,我們的動效應該更加的跳脫,因為它沒有了邊界等等。

原文引言

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.

探索空間設計的基本原理。學習如何以深度、規模、視窗和沉浸感進行設計,并應用最佳實踐來創造舒适的、以人為中心的體驗,進而改變現實。了解如何使用這些空間設計原則來擴充現有應用程式或将新想法帶入生活。

以下原則:

Familiar—–熟悉的/通用的

Human-centered—–以人為本

Dimensional—–次元Immersive—–沉浸Authentic—–真實的

一、Familiar—–熟悉的/通用的

架構層-視窗從我的了解來說,“熟悉的通用的”是對于使用者來說,是完全沒有問題的,熟悉架構的遷移意味着使用者在空間中相應的學習成本也會降低。

可操控:蘋果提供了明确的操控元件,支援使用者對視窗進行直接的拖動和縮放,移動時,視窗始終跟随使用者的手,拖動完成後,則停留在最後的移動位置。

架構大小:相較于固定的螢幕二維設計,頁面的尺寸已經不再局限于螢幕本身;AR尺寸更加自由靈活,設計者往往可以根據内容的舒适程度或者類型去設計視窗的大小。

空間多任務:視窗的設計更多是為内容服務,視窗的功能操作則使用分層的設計方式進行排列或者疊加的方式進行擺放;亦或者通過隐藏的方式進行設計來避免使用者的視覺中心被幹擾。因為是在空間中,使用者可以真正意義上實作多任務并行。

Viosn Pro互動規範:空間設計原則(一)
Viosn Pro互動規範:空間設計原則(一)

大家可以看到上圖,像我們的mac和移動端一樣,他們的結構架構并沒有進行很大的改變,依舊維持着我們在日常使用應用的心智模型:浏覽器的位置在頁面的垂直方向,keynote則是和mac端在架構上幾乎是一緻的。

我在進行相關的業務設計時,也一直帶着這樣的準則去思考每一個場景的流程,但是需要注意的是:“降低使用者的學習成本”這件事不止是熟悉通用就可以足夠的,我們除了架構的遷移以外,我們也做了大量的使用者操作的窮舉,以此在其中選出合适使用者也合适業務的互動方式,我們始終認為:“我會操作”和“我看的懂”都很重要,是以在這一層,我自己定義了我的互動原則——-獨立直達

視覺表現層(UI)重點特征的遷移:在視覺表現上,他們遷移了其他終端最具有代表性的設計表現—毛玻璃;除了通用性的考慮以外,毛玻璃也有很好的與現實世界區分的特性,這讓我聯想到手機上毛玻璃效果與其他頁面的關系,蘋果這裡隻是把“現實世界”當做了手機裡的那個被毛玻璃壓蓋的頁面。

這樣的繼承性很好的被蘋果給用到了空間設計中,而這樣毛玻璃的效果也顯得更加有質感(我們當時也有考慮過用這樣的設計風格,但是受限于各個方面最後沒有實作,還是有點遺憾)尺寸元素:随着使用者在移動視窗時,視窗可能存在不同大小樣式,因為使用者的位置和操作都不固定。

那麼基于此原因,在設計尺寸時,需要具備完善的人因資料來進行設計,Vision Pro 主要是通過視覺進行選擇和互動的,基于使用者的瞳孔調節是非常有必要的,是以蘋果引入了新的尺寸規範。

Viosn Pro互動規範:空間設計原則(一)
Viosn Pro互動規範:空間設計原則(一)

二、Human-centered—–以人為本

基于人類真實實體環境的設計。

相對于空間設計,Vision Pro 會提供給使用者更加直接的互動方式:通過他們的眼睛和手,通過自己的視角與應用進行直接的互動和體驗。而在設計應用的時候,我們需要始終帶着兩個問題:

視覺集中:那麼不管他們會看到什麼,會如何移動;當使用者打開應用時,使用者看到的始終包含 2 個部分:

不管在哪個視界中,他們優先看到的都是中間區域,是以在設計時需要把最重要的内容放在視覺的中心(如下圖)。

Viosn Pro互動規範:空間設計原則(一)
Viosn Pro互動規範:空間設計原則(一)

但是人們不會固定自己的位置,使用者的位置是随時變化的,是以這意味着我們可以進一步的擴充沉浸式的體驗内容,但是要時刻注意要把最重要的内容放在明顯的位置上。

人體工學在空間設計中是無處不在的,你的内容位置對人們的身體回報有很大的影響,是以在不同的層面上去合理的擺放顯得非常有必要。在多數情況下,鼓勵把内容放置在稍遠的地方,讓使用者進行互動;避免把内容放在身後或者極高、極低的位置,除非它是沉浸體驗的一部分。

Viosn Pro互動規範:空間設計原則(一)
Viosn Pro互動規範:空間設計原則(一)

而在使用者的使用過程中,因為位置的不斷變化,應用視窗本身需要跟随變化;但是跟随不應該是實時的,這會讓使用者覺得應用卡住了,基于劃橫線的這一點,我在之前的業務中也有涉及到,我也是這樣去推動我們的設計團隊來做這樣的設計,這裡就涉及到了分層的概念,後面可以單獨開一篇,和大家聊一下分層設計。

是以蘋果建議在設計時,最好提供需要最少運作的靜止體驗,這使得應用會更容易讓每個人使用。

三、Dimensional—–次元

這裡的次元指的是深度和大小。

畫布是無限的,但是人的空間是有限的,是以要保證你的視窗不能與真實世界有穿插,視窗應該服務于使用者的視覺感覺。不同的類型内容,系統本身也可以通過調節眼鏡的光線來營造使用者的沉浸感。也就是說雖然 有的場景可能無法避免穿插的情況,但是也可以通過眼鏡本身的光線進行弱化這一不舒适的體驗。

而深度,則是一個很好用來建立層次的工具。這裡的深度提供了設計無限的創意和想法,你可以想想如果有了深度這一條件,不論是應用的層級,甚至是系統層級,都可以使用這樣的模式進行設計。

Viosn Pro互動規範:空間設計原則(一)

四、Immersive—–沉浸感

舒服是沉浸感的第一象限舒服的:提到沉浸感你或許可以想到自己戴着眼鏡去看 3D 電影的場景;沉浸感與光是無法分離的,如何設計沉浸感,首要的第一進制素是如何讓人舒服。它們在裝置上實作了一套完整的光影系統,為了應對不同的場景,他們提供了不同的光影政策利用光影和視窗的配合,他們可以增強所處環境的氛圍,甚至讓使用者處于其他空間;空間設計沉浸感的另一個特點則是通過光影和視窗,讓使用者感覺它們是和實體環境聯系在一起的。

實體聯系性而要保證實體聯系性,則始終需要考慮每個人的生理名額:不一樣的身高,不一樣的面容,空間往往随着時間的推移而變化,是以設計的應用體驗需要很好的去适應現在的任何地方。

Viosn Pro互動規範:空間設計原則(一)

五、Authentic—–真實的

逼近現實的微動效和聲音使用者在使用眼鏡時,使用者可能随時觀察周圍的情況,但是如果太多事情的同時發生,這個時候使用者容易出現不知所措或者不确定怎麼辦的情況。

是以在設計時需要引導使用者去關注某些重要的部分(這裡其實在上面提到:蘋果已經提供了較為直接顯示方式,在這裡再一次強調具體的關注設計,我是有點保留意見的,原因是因為和前面的幾條規則有點違和:以人為本–我們應該更加關注使用者真實環境的情況,而不是要與使用者的真實環境去搶奪使用者的視野)。

如果你想設計一款與真實世界融合的應用,那麼平緩的動畫和身臨其境的聲音時必不可少的;動畫與真實世界的動畫盡量貼合,聲音則是與真實世界的聲音的方向和深度類似。

如上如蘋果不僅渲染了電影畫面的本身,連電影院裡的反光都進一步去進行了渲染,但是它并沒有把電影院所有的細節都渲染出來。是以>在設計這種空間應用時,可以根據應用類型,對應用以外進行适當克制的渲染。

避免大幅度的快速移動。

大幅度的快速移動非常容易給使用者帶了難以聚焦的體驗,并且容易給使用者帶了不安全的心理預期,是以如果一定需要運動的話,則推薦漸入漸出的動畫。

以上就是 Vision Pro 基于空間設計提出的一些基本原則。

個人觀點

空間設計不再是拘泥于方寸之間,它要設計的是人與真實世界的關系和感覺。從現在開始,我們的設計内容将超越螢幕本身,基于技術、人因:它将會包括但不限于環境,空間以及地理位置。

實體世界正在朝着數字世界轉化,而我們将做的,是對其他終端、人類習慣以及環境的整合體驗設計,這便是空間設計所需要的設計内容!

作者:香菜可以加,微信公衆号:海鮮君的設計物語

本文由 @香菜可以加 原創釋出于人人都是産品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協定。

該文觀點僅代表作者本人,人人都是産品經理平台僅提供資訊存儲空間服務。

繼續閱讀