Vision Pro 設計原則 X 空間UI界面設計(三)

0 評論 3647 瀏覽 8 收藏 15 分鐘

本篇蘋果將從討論 UI 基礎設計和設計原則開始,講述他們是如何創(chuàng)建符合條件并可在環(huán)境中使用的應用程序。從這篇文章內(nèi),我們看到了蘋果基于人因(眼動)設計的尺寸規(guī)范,這里面具體的描述了很多尺寸的數(shù)值;而我們在設計的時候我們的交互方式并不相同,所以我們采取的視覺策略也不盡相同,但是這篇依舊給了我很多值得考慮的因素,現(xiàn)在我和大家一起分享一下我的觀后總結(jié)。

了解如何為空間計算應用程序設計出色的界面。我們將分享您現(xiàn)有的基于屏幕的知識如何輕松轉(zhuǎn)化為visionOS的卓越體驗。探索UI組件、材料和排版的指導原則,并了解如何設計熟悉、易讀且易于使用的體驗。

基于此他們也總結(jié)了以下幾條原則。

  • UI foundations——繼承性的 UI?特性
  • Layout——創(chuàng)建符合人體工學的布局
  • form screen to spatial——如何將屏幕設計過渡到空間設計

在 Vision Pro 內(nèi),UI 設計的重要性被進一步提高,相較于傳統(tǒng)的終端設備,UI 設計師需要考慮的是好看又好用不同,在 Vision Pro 中他們還要考慮環(huán)境的影響,內(nèi)容與內(nèi)容之間的影響。

一、UI foundations——繼承性的 UI?特性

繼承性的主要體現(xiàn),他們用圖標來進行舉例;

蘋果希望保持熟悉的視覺風格,所以在設計時,他們進一步在空間中制作三維和逼真的圖標。

正常情況下,建議使用圓形的構(gòu)圖方式;在之前的分享中,我已經(jīng)闡述了為何要使用圓形(可以看第一篇);用戶在使用眼動選擇時,UI 的圖標會有光影、縱深的反饋,加強層與層之間的關(guān)系。那么如何設計空間中的應用圖標呢?

1、use multiple layers:使用多個圖層,通過使用多個圖層來創(chuàng)建視差效果,但是圖層不要超過?3?層,分別是:背景層、前景層?1、前景層?2

從上面的圖片可以看到,一個圖標的完成,需要 3 層,需要配合光影進行設計,但是要注意的是要避免使用大區(qū)域的半透明像素來繪制。

2、Materials—質(zhì)感:因為用戶的環(huán)境是不受控制的,APP 應該很容易的放置在你周圍的空間里;所以在任何距離和照片條件下,如何通過設計模擬好用的質(zhì)感來解決這一問題顯得很有必要。

玻璃材質(zhì)

這種材質(zhì)的好處是,讓應用窗口更加明顯,它就像一塊畫布,讓你的眼睛在觀看的時候感覺更加輕盈和實體化的感覺。這種材質(zhì)也可以讓用戶大致感覺到被遮住的物體是什么。但是值得注意的是要避免使用純色的背景,這樣對用戶來說顯得沉重和外面事物的不可控。

玻璃材質(zhì)也可以支持更多的帶有透明度的敏感變化,可以使用暗色來進行強化,使用暗色一般是為了引起人們對互動元素的注意。

大家可以對比一下:淺色的材質(zhì)描述,會讓信息的易讀性降低。

3、Typography:在這一段中,蘋果舉了字體的例子,在 Vision Pro 的設備中,蘋果是用了粗體來作為自己的主要字體顯示,我猜想這是為了內(nèi)容的可讀性做出的考量,這顯得很有必要。

4、Vibrancy:本意是活力的,我這里給翻譯成動態(tài)調(diào)節(jié)的從蘋果的官方文檔來看,因為是玻璃材質(zhì),當用戶的環(huán)境不斷發(fā)生變化時,所以它對于信息的可讀性依然有著比較好的支持。

5、Colors:我把這里翻譯成色彩構(gòu)成,而不是簡單的顏色那么簡單;

如果要使用顏色,請在背景層或者整個按鈕中進行顏色的填充,這樣可以保證他們的清晰可見,并且盡可能的使用系統(tǒng)顏色而不是自定義顏色來使用,因為系統(tǒng)顏色已經(jīng)經(jīng)過了對易讀性的校準和調(diào)研。并且這些顏色與玻璃材質(zhì)進行了適配。

二、Layout:創(chuàng)建符合人體工學的布局

說到基于符合人體工學去設計布局那就不能不考慮以下的原則。

1、Ergonomics:工程學,主要是探索一些放置內(nèi)容的最佳方法,使其在使用時感覺到舒適,由于眼鏡的交互方式是眼睛+手指,所以如何創(chuàng)作出舒適和安全的體驗是非常重要的,要確保有意的放置內(nèi)容,保證用戶的眼睛和頸部不會疲勞。

對于大多數(shù)人來說,人們更容易將頭向右或者向左轉(zhuǎn)動而不是向上或者向下轉(zhuǎn)動,因此保持你的用戶界面在人們的視野中,所以要注意不要把內(nèi)容放的太高或者太低。如果你需要一個較大的畫面,你首先要考慮的是選擇更寬的寬高比。

2、Sizing:尺寸如何正確調(diào)整內(nèi)容的大小,使其易于在空間中展示,優(yōu)先將最重要的信息集中在你的應用程序中。每個人都是獨一無二的,我們的眼睛從一個人到另一個人都有細微的變化,這就是為什么元素應使用容易瞄準的尺寸。

交互元素必須具有至少60point的空間點擊目標,這樣他們才可以容易的去選擇和點擊,當然這也意味著你可以在這個區(qū)間里設計更好的元素。

與此同時,在60point的范圍之下,具體元素的設計至少有8個point的空間。而如果出現(xiàn)多個按鈕,則之間的間距需要16point,而這個間距是可以進行調(diào)整的。

3、Focus feedback:焦點反饋,不打擾確可以被感知的實時的焦點反饋:會顯示微妙的視覺變亮或者懸停效果,這種懸停效果可以讓用戶一眼就發(fā)現(xiàn),讓用戶知道哪些元素可以進行交互。如果是不支持交互的則不會有任何反饋。

在考慮反饋時,為了可以讓反饋更清晰,除了微妙的動效以外,適當間距可以更好的讓反饋被感知和操作。

三、form screen to spatial:我這里翻譯成平面化設計如何從二維設計到 3 維設計

首先先說說輸入:他們可以通過手和聲音與設備進行交互,也可以通過觸摸直接與設備進行交互。此外也可以鏈接藍牙鍵盤進行輸入。?如何將屏幕設計過渡到空間設計,這是一個很難的問題,所以蘋果通過以下的控件設計來進行切入。

1、window、tab bar、side bar

Vision pro?和手機的布局都是非常相似的:有一個固定的窗口,在窗口建立內(nèi)容,tabbar?也是和?ios?一致,只是這里官方建議,最多放置?6?個。

ornaments–輔助控件,輔助控件:即蘋果官方的系統(tǒng)是不提供這些硬性要求的,用戶可以根據(jù)自己的場景需求根據(jù)規(guī)范自己去添加這些輔助控件用以達成自己的業(yè)務需求。但是可以看到在?Vision Pro?將這樣的輔助控件放在了底部,這得益于Vision Pro?的不受約束性。

輔助控件往往是一些可交互的集合,所以在?UI設計上要考慮到懸停的問題。所以盡量不要加入背景,這也會影響用戶的判斷。

輔助控件要注意的是要與窗口進行一個重疊,這里利用的是深度關(guān)系。

2、menus、popovers、sheets

大家可以看看?iPad?和Vision Pro?對于彈框的設計,iPad os?上的菜單與調(diào)用按鈕的前邊緣對齊,點具體的按鈕后,菜單會變成不可用狀態(tài),這是為了讓用戶聚焦在底下的選項中。而在?Vision Pro?中,菜單的彈框可以不受屏幕的限制彈出窗口之外,并且里面的元素始終與菜單對齊,在這種狀態(tài)下,用戶依舊可以通過眼睛隨意的去切換菜單。

層級的設計,如果遇到多層級那么就是利用深度這一維度來進行設計,但是也要保持可讀性,所以會把后面的層級變暗,來保證最新一層的可讀以及可操作性

總結(jié):

從我看來,蘋果基于 Vision Pro 的 UI 設計遵循以下幾個重要的原則:

1、可讀性:不論是利用材質(zhì)、還是考慮周圍的物理環(huán)境,蘋果的設計都要為其兜底,

2、可操作性:要設計出的 UI 反饋要符合用戶的預期且是可以被用戶察覺和理解的狀態(tài)樣式,

3、低成本的視覺培養(yǎng):Vision Pro 的視覺風格在去貼近或者從其他終端拾取部分的 UI 元素并進行放大和重構(gòu),但是他們厲害的地方在于用戶在用的時候是幾乎不需要進行二次視覺適應的。

4、層級意識:Vision Pro 的設計不再是基于二維屏幕了,它是完全的空間界面,所以層級意識,一直貫穿在整個 UI 設計中。

個人觀點:

空間設計不再是拘泥于方寸之間,它要設計的是人與真實世界的關(guān)系和感知。從現(xiàn)在開始,我們的設計內(nèi)容將超越屏幕本身,基于技術(shù)、人因:它將會包括但不限于環(huán)境,空間以及地理位置。物理世界正在朝著數(shù)字世界轉(zhuǎn)化,而我們將做的,是對其他終端、人類習慣以及環(huán)境的整合體驗設計,這便是空間設計所需要的設計內(nèi)容!

作者:海鮮不設計,微信公眾號:海鮮不設計

原文鏈接:https://developer.apple.com/videos/play/wwdc2023/10076

本文由 @海鮮不設計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自蘋果官網(wǎng)截圖

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!