Apple Vision Pro設計解析(第二集)-操作模式

更新於 發佈於 閱讀時間約 7 分鐘
raw-image

前言

如果你閱讀完本系列的第一篇文章,必定會對於Apple Vision Pro的產品更感興趣。本篇文章中,我們將介紹在空間性設計中,是怎麼樣進行互動的。

Design for spatial input

空間性設計的操作,除了用手以外,來多了眼睛作為操作工具。另外聲音(語音)也會是一個操作媒介。當然,使用者也可以結合搖桿來玩遊戲。不過在多數狀況下,空間性設計將會以眼(Eyes)手(Hands)為操作主角。

依照慣例,我們先為大家整理出本集的主題架構:

raw-image

空間性設計的操作行為,很清楚的有以下三個特性:

Personal(個人化)
Comfortable(舒適)
Precise(精確)

每個人的眼球運動與手勢動作,都會有自己的獨特性,Vision Pro的硬體將會根據使用者獨特的眼手動作進行行為追蹤與操作校正。當然,舒適且精確的操作,也會是空間性設計的特性。

眼球操作中,我們將針對以下幾項重點進行說明:

Comfortable(舒適性)

雖然在空間性設計中,空間是非常寬廣的,但大多時候使用者在瀏覽時,頭部大多是停留在正前方的位置。因此在設計畫面的寬度,儘量集中於前方30度至60度的範圍。

raw-image

而次要的操作介面,則可以安置在圍繞最適瀏覽範圍的附近

raw-image

除了最適瀏覽範圍,將主要與次要的介面安置在不同景深的位置,也能夠幫助使用者輕鬆且舒服的理解操作介面的部署。

raw-image

Easy to use(簡易操作)

為了讓眼睛簡易的辨識與操作介面,在icon設計上就必須以簡單為主,壁面太過複雜的icon繪製。

raw-image

在icon的外緣,也儘量以圓潤的線條進行包覆,因為如果選擇尖銳的線條,視覺焦點會放在外緣,而不在icon線條本身。同時外緣的設計,也必須避免增加額外的邊緣或者增加陰影,這些額外的設計都會讓眼睛操作時失焦。

raw-image

在icon設計上,切記整體間距加上尺寸總和範圍不應小於 60 pt(注)
(注):pt=Point=點,1pt=1/72 英吋。

raw-image

當我們已經瞭解了目標區域對眼睛的重要性之後,接下來,我們必須確保將目標區域保持在空間中的任何位置。這裡會涉及到介面的縮放。在空間性設計中,分別有動態比例(Dynamic scale)以及固定比例(Fixed scale)兩種。在動態比例的狀態下,介面如果距離使用者越遠,在真實空間中會自行的放大,讓使用者在遠距離下依舊能夠清晰地看到介面內容。如果採取固定比例,則介面遠離使用者時,真實介面比例式維持不變的,因此對使用者而言,看到的介面會變得比原來還要小。

raw-image

Responsive(響應式)

在空間性設計中,眼球的移動即象徵著滑鼠游標移動,因此在空間性設計上,必須做出研究移動位置的響應式介面提示。

raw-image

Intentional(意圖性)

為了更清楚地利用眼睛來進行操作識別,在空間性設計上,會把眼球停滯在特定焦點的時間作為意圖考量。例如當眼球集中於某一個特定icon打一定時間時,icon下方會出現icon的說明提示,而當眼球聚焦在麥克風icon上,即會啟動語音輸入功能,或者是眼球停滯在某一排icon排列區時,此排icon會展開呈現出所代表的功能說明。

raw-image

Conclusions(結論)

以上介紹了眼球相關的操作原則,下面為重點整理:

將主要內容設計在使用者前方
設計出容易引起眼球注意的UI元素
重視眼球的最小專注區域
運用hover效果來提供操作回饋
根據眼球停滯意圖來呈現額外的資訊

Hand gestures(手勢)

手勢的操作,是空間性設計操作的重大環節,必須運用不同的手勢來達成個別的操作目的。例如單手雙指的捏合,象徵著對物件的點擊。而雙手搭配雙指捏合,並且進行雙手的靠近及遠離,則可以實現元件的縮效與放大。

raw-image
raw-image

雖然在空間性設計系統中,已經內建了許多手勢操作,但仍然會有其他的特殊狀況,會需要設計客製化的手勢,以下為設計客製化手勢的幾項原則:

易於理解與操作
避免與系統既有手勢產生衝突
操作舒適與可靠
人人皆可使用
明確無誤、不含糊

Eyes and intent(眼睛與專注點)

眼球與手勢的搭配,能夠更彈性的進行更多更複雜的功能操作。以圖片瀏覽為例,當使用者眼球專注於照片中某一個區域時,同時進行縮放手勢的操作,此刻照片會特別針對視覺焦點區域進行縮放。

raw-image

另一個例子,眼球停滯在不同區域時,可以利用手勢在當下注視的區域進行文字書寫或者繪圖。

raw-image

Direct touch(直接觸摸)

除了遠程操作,使用者也可以將介面拉近,執行更直覺的操作行為,例如把瀏覽器拉近,用手指以類似觸控螢幕的操作方式滑動網頁,或者是呼叫出虛擬鍵盤進行打字,也能夠把3D物件如同玩具般拉近、轉動、縮放。

raw-image
raw-image

如同眼球的操作方式,手勢的操作也可以結合hover的提示,例如鍵盤打字時,手指頭指向的位置,可以使用明亮化的UI進行位置提示,而指頭點擊後則可產生出敲擊的視覺效果,當然如果搭配上敲擊的聲音,就會讓整體的操作更加真實。

raw-image

Conclusions(結論)

以上介紹了手部相關的操作原則,下面為重點整理:

使用熟悉的手勢語言
只在必要時客製化手勢
配眼球焦點進行互動
在適當的狀態下進行直接性操作
在互動操作時提供清楚的操作回饋

結語

透過這一集的解讀,讓我們更深入的了解到如何操作Vision Pro,對照目前的介面操作,在空間性設計平台中,眼球的任務取代了滑鼠,而雙手除了刷螢幕和打鍵盤以外,還要會比手勢(划拳?),相信未來的世界會更加有趣。

附註

本集原始影片連結:https://developer.apple.com/videos/play/wwdc2023/10073

關於Apple Vision Pro的其他設計重點介紹與更多數位設計相關文章,歡迎至ABLE部落格(https://blog.able.cool)閱讀與分享!

Able Studio
Founded in Taiwan, we emphasizes building the right image to take company’s international competitiveness to the next…blog.able.cool

第一集-設計總則

第二集-操作模式

第三集-使用者介面

第四集-共享體驗

第五集-空間音訊

最六集-無障礙設計

留言
avatar-img
留言分享你的想法!
avatar-img
ABLE 的沙龍
678會員
20內容數
Able Studio 以人為本,相信設計應該是人們使用的,而不是為設計而設計的,因此我們致力於創造美觀、易用、有意義的設計。我們希望能透過文章的分享,讓更多人認識到 UI/UX 的重要性,你的閱讀對我們來說將會是最大的支持。
ABLE 的沙龍的其他內容
2023/06/12
前言 在第二篇文章中,我們更明確的瞭解空間性設計的眼、手操作搭配,接下來本文章進入到UI介面的設計解析,本篇將詳細介紹空間性設計中的使用者介面核心原則。 Design spatial user interfaces 本篇將首先討論如何設計清晰易讀的App icon,以及設計時要考慮的UI基礎和設計原
Thumbnail
2023/06/12
前言 在第二篇文章中,我們更明確的瞭解空間性設計的眼、手操作搭配,接下來本文章進入到UI介面的設計解析,本篇將詳細介紹空間性設計中的使用者介面核心原則。 Design spatial user interfaces 本篇將首先討論如何設計清晰易讀的App icon,以及設計時要考慮的UI基礎和設計原
Thumbnail
2023/06/11
睽違8年,2023 年 6 月 5 日的WWDC蘋果開發者大會上,Tim Cook再次啟動了one more thing,這次介紹的產品為Apple Vision Pro — Apple 第一部空間運算設備。 在當天的Keynote speech中,Apple用了40分鐘來介紹Vision Pro
Thumbnail
2023/06/11
睽違8年,2023 年 6 月 5 日的WWDC蘋果開發者大會上,Tim Cook再次啟動了one more thing,這次介紹的產品為Apple Vision Pro — Apple 第一部空間運算設備。 在當天的Keynote speech中,Apple用了40分鐘來介紹Vision Pro
Thumbnail
2022/12/11
隨著網路的普及,數位時代的快速演進,人們接收資訊的方式也逐漸的在改變,不再是從實體的報章雜誌或是一張張的廣告傳單,而是手中小小的螢幕。根據2022年統計,現代人平均每日螢幕時間是6小時58分鐘,而年輕人的螢幕使用時間更是高達9個小時,社交、購物、學習,大概一天有三分之一的時間都在使用數位產品,網路已
Thumbnail
2022/12/11
隨著網路的普及,數位時代的快速演進,人們接收資訊的方式也逐漸的在改變,不再是從實體的報章雜誌或是一張張的廣告傳單,而是手中小小的螢幕。根據2022年統計,現代人平均每日螢幕時間是6小時58分鐘,而年輕人的螢幕使用時間更是高達9個小時,社交、購物、學習,大概一天有三分之一的時間都在使用數位產品,網路已
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
介紹朋友新開的蝦皮選物店『10樓2選物店』,並分享方格子與蝦皮合作的分潤計畫,註冊流程簡單,0成本、無綁約,推薦給想增加收入的讀者。
Thumbnail
很多AI只要輸入相關的鏡頭的關鍵字,視覺畫面會隨著鏡頭移動。 鏡頭與視角的關鍵字: 微觀|Microscopic view 焦點,對焦|Focus 第一人稱|First person perspective 第三人稱|Third person perspective 特寫|Close
Thumbnail
很多AI只要輸入相關的鏡頭的關鍵字,視覺畫面會隨著鏡頭移動。 鏡頭與視角的關鍵字: 微觀|Microscopic view 焦點,對焦|Focus 第一人稱|First person perspective 第三人稱|Third person perspective 特寫|Close
Thumbnail
前言 在第二篇文章中,我們更明確的瞭解空間性設計的眼、手操作搭配,接下來本文章進入到UI介面的設計解析,本篇將詳細介紹空間性設計中的使用者介面核心原則。 Design spatial user interfaces 本篇將首先討論如何設計清晰易讀的App icon,以及設計時要考慮的UI基礎和設計原
Thumbnail
前言 在第二篇文章中,我們更明確的瞭解空間性設計的眼、手操作搭配,接下來本文章進入到UI介面的設計解析,本篇將詳細介紹空間性設計中的使用者介面核心原則。 Design spatial user interfaces 本篇將首先討論如何設計清晰易讀的App icon,以及設計時要考慮的UI基礎和設計原
Thumbnail
前言 如果你閱讀完本系列的第一篇文章,必定會對於Apple Vision Pro的產品更感興趣。本篇文章中,我們將介紹在空間性設計中,是怎麼樣進行互動的。 Design for spatial input 空間性設計的操作,除了用手以外,來多了眼睛作為操作工具。另外聲音(語音)也會是一個操作媒介。當
Thumbnail
前言 如果你閱讀完本系列的第一篇文章,必定會對於Apple Vision Pro的產品更感興趣。本篇文章中,我們將介紹在空間性設計中,是怎麼樣進行互動的。 Design for spatial input 空間性設計的操作,除了用手以外,來多了眼睛作為操作工具。另外聲音(語音)也會是一個操作媒介。當
Thumbnail
常常聽到影像處理、Python、OpenCV等技術,最近又在流行機器學習、深度學習、CNN、人工神經網路,常常不知從何開始學習,如果有一本書能把這些知識從頭到尾講清楚有多好,再加上如果有最常用的案例實作,一定可以完整將這個現在最賺錢行業的領域變成一技之長。
Thumbnail
常常聽到影像處理、Python、OpenCV等技術,最近又在流行機器學習、深度學習、CNN、人工神經網路,常常不知從何開始學習,如果有一本書能把這些知識從頭到尾講清楚有多好,再加上如果有最常用的案例實作,一定可以完整將這個現在最賺錢行業的領域變成一技之長。
Thumbnail
這篇文章將會介紹 Unity 相機的不同空間座標。
Thumbnail
這篇文章將會介紹 Unity 相機的不同空間座標。
Thumbnail
自從Apple Pencil的問世,電繪變得更容易入門了,眾多iPad繪圖軟體中又以Procreate最為普及,我自己也是愛用者。但是不論使用什麼軟體,電繪與手繪存在許多根本的區別,這裡和大家分享5個使用Procreate前一定要知道的基本觀念和設置,事先了解這些概念,能幫助創作過程更加順利 (也就
Thumbnail
自從Apple Pencil的問世,電繪變得更容易入門了,眾多iPad繪圖軟體中又以Procreate最為普及,我自己也是愛用者。但是不論使用什麼軟體,電繪與手繪存在許多根本的區別,這裡和大家分享5個使用Procreate前一定要知道的基本觀念和設置,事先了解這些概念,能幫助創作過程更加順利 (也就
Thumbnail
蘋果的軟硬件發佈會,產品受注目以外,很多人也留意簡報的字體、配色、動畫,希望收歸己用。外在的模仿相對容易,然而在簡報學習路途上,更重要是去理解背後的設計思維。在剛剛過去的蘋果WWDC,軟件功能總結的投影片,設計看上去簡單直接,仔細分析之下,發現這不甚起眼的一頁,背後已經應用了十種排版的思量和和技巧。
Thumbnail
蘋果的軟硬件發佈會,產品受注目以外,很多人也留意簡報的字體、配色、動畫,希望收歸己用。外在的模仿相對容易,然而在簡報學習路途上,更重要是去理解背後的設計思維。在剛剛過去的蘋果WWDC,軟件功能總結的投影片,設計看上去簡單直接,仔細分析之下,發現這不甚起眼的一頁,背後已經應用了十種排版的思量和和技巧。
Thumbnail
這篇,是延續之前的視覺筆記創作出的圖解版 那就廢話不多說,直接看圖吧 更多視覺筆記、圖像思維知識或疑問,歡迎加入圖像思維研究室提問喔 https://line.me/ti/g2/Vo4qwpJiOjsKe8c29jpnAQ
Thumbnail
這篇,是延續之前的視覺筆記創作出的圖解版 那就廢話不多說,直接看圖吧 更多視覺筆記、圖像思維知識或疑問,歡迎加入圖像思維研究室提問喔 https://line.me/ti/g2/Vo4qwpJiOjsKe8c29jpnAQ
Thumbnail
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
Thumbnail
首先先注重於角色的臉部表情細節的動畫表現,臉部表情之中,眼睛的眨眼算是最重要的,將配合Animate的繪圖功能,快速準備好眨眼所需要的素材內容,最後搭配轉頭動作,角色的動作就更細膩了。 目標動畫效果:應用影片片段元件表現可愛動物四隻腳的走路,除了元件的準備與安排來表現動作
Thumbnail
這次我們要說到遊戲經常使用到的圖片指令系列。在不使用插件的情況下也可以使用來做對話框背景或是立繪顯示。
Thumbnail
這次我們要說到遊戲經常使用到的圖片指令系列。在不使用插件的情況下也可以使用來做對話框背景或是立繪顯示。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News