隨著蘋果 Vision Pro 的發(fā)布，新一輪的設(shè)計風(fēng)格趨勢又來了，現(xiàn)在在 Dribbble 上能看到非常多優(yōu)秀的空間設(shè)計作品。

那這些設(shè)計作品要如何從 0-1 去思考設(shè)計呢？今天這篇文章將詳細(xì)分享背后的設(shè)計思路。

如果你還保持著好奇心，愿意去探索新的設(shè)計領(lǐng)域，那么這將是一件非常有趣的事情。

有很多想學(xué)習(xí)空間 UI 設(shè)計的設(shè)計師都會按照簡單的玻璃效果卡片教程來進(jìn)行，但這并不能真正激發(fā)你的創(chuàng)造力，因為它只是重復(fù)性的技能而已。

一、確定設(shè)計目標(biāo)

我的想法是為現(xiàn)有的網(wǎng)絡(luò)平臺設(shè)計一個沉浸式的用戶界面。

給探索增加真實性。之所以這樣做，并不是因為我們百分之百確定這將成為更好的增強(qiáng)現(xiàn)實體驗。

而是我們帶著一個計劃去嘗試，希望能夠達(dá)到這個目標(biāo)，即使最后失敗了，這個探索過程仍然是值得的。

目前 2D 網(wǎng)頁界面效果

步驟 1 — 拉滿研究的沉浸感

為避免做的像 dribbble 上的飛機(jī)稿，我利用自己住的空間來設(shè)計。

無論你的房間是否好看，將整個設(shè)計就放在真實的空間中，使得設(shè)計更符合你自己的體驗，更加真實。

這種真實性使得案例研究更加有趣，因為它沒有被刻意美化。所以我拍了一張我臥室的照片。

當(dāng)然，保持真實性并不意味著照片都不需要 P 了，還是需要修下圖的。

步驟 2 — 設(shè)計

從草圖開始。記住，大部分的用戶體驗應(yīng)該保持扁平化。在 z 軸上加過多的圖層會增加用戶的認(rèn)知負(fù)荷，并不會使體驗變得更好。

從關(guān)鍵頁面開始設(shè)計。

設(shè)計空間界面的第一個原則是熟悉性。我們不必重新發(fā)明輪子。這樣做的目的是為了讓用戶感到熟悉和舒適，因為他們已經(jīng)習(xí)慣了這種界面布局。

我們可以利用已有的設(shè)計元素，以簡單而易于使用的方式設(shè)計界面。

然后我設(shè)計了一組主要的垂直選項卡，它們將用作次級導(dǎo)航。在這個項目中，主要的導(dǎo)航實際上是根據(jù)上下文來確定的，在主窗口中進(jìn)行導(dǎo)航。

我想，當(dāng)你進(jìn)入某個窗口類別時，你會獲得一種完全身臨其境的環(huán)繞體驗。

房間在你周圍變暗。

你在你面前滑動一個 180°視野的走馬燈界面，但主要焦點(diǎn)始終在最中心的設(shè)計上。

為了給設(shè)計作品打一個分?jǐn)?shù)，你會將焦點(diǎn)放在它上面，然后向上滑動（加分）或向下滑動（減分）。

從側(cè)面看，它會有點(diǎn)像這樣：

大部分界面都是 2D 的，但是我想象這種將設(shè)計移動到不同層次的互動可以在 3D 空間中很好地實現(xiàn)。

二、主要空間交互

在我獲得主要的"空間"啟發(fā)時，我決定給卡片設(shè)計加一些細(xì)節(jié)。

這張卡片可以被旋轉(zhuǎn)，以顯示作為 UI 設(shè)計基礎(chǔ)的低保真線框圖。

我還加了一組額外的控件，用于打開此設(shè)計的層級條和間距規(guī)范線。

目前這個功能還不存在，但我們計劃在未來版本的平臺中實現(xiàn)它，所以為什么不提前展示它在混合現(xiàn)實中的效果呢？

你可以同時打開兩者，或者分別打開/關(guān)閉它們，以查看 UI 設(shè)計的更多細(xì)節(jié)。

三、中保真設(shè)計

繼續(xù)設(shè)計中等保真度的主界面，看看它們是如何結(jié)合在一起的。

主界面相當(dāng)簡單。一個網(wǎng)格的設(shè)計，作者的名字和照片，可以點(diǎn)"喜歡"。

我還加了一個篩選框，只顯示喜歡或所有項目。

通過 3D 轉(zhuǎn)換的卡片，瀏覽體驗變得相當(dāng)不錯。其他卡片也變暗了，這樣用戶就會有更多的視覺焦點(diǎn)放在中間的那張卡片上。

當(dāng)目光完全集中在卡片上時，它更接近用戶并顯示額外的功能。

四、材質(zhì)探索

下一步是探索材質(zhì)效果。蘋果在這方面有他們自己的建議，并且已經(jīng)發(fā)布了他們的 UI 工具包。但我想嘗試一些更定制的東西，看看它會給我?guī)硎裁础?/p>

我把玻璃材質(zhì)面板貼到我的房間照片上，立刻意識到這并沒有那么簡單。

Vision OS 能根據(jù)環(huán)境光照條件和場景環(huán)境實時調(diào)整窗口現(xiàn)實效果。

但我做的效果圖的時候，卻沒法利用這一點(diǎn)，所以必須要調(diào)整。

經(jīng)過一些調(diào)整，它顯得更清晰，更容易閱讀了。下一步就是對細(xì)節(jié)進(jìn)行微調(diào)。

因為我的房間在左邊有窗戶，所以我修改了漸變和高光，使其從那個方向發(fā)光。

這是一個我們可能看不到的細(xì)節(jié)，但我們的大腦確實注意到并處理了所有這些信息。像這樣的小細(xì)節(jié)可以增加沉浸感。

五、實驗

但我對這個大方向并不完全滿意。這讓我進(jìn)行了一些額外的材質(zhì)探索，并設(shè)計了兩種更圓的玻璃面板，如上面的例子所示。

這就產(chǎn)生了一個非常有趣的用戶界面。然而，對于所選圖標(biāo)來說，它確實存在一些清晰度問題。

再進(jìn)行更多這些探索，我把界面放到更豐富多彩地背景下，為了確保這些新材質(zhì)在這種情況下也能工作得很好。

模擬物理按鈕設(shè)計的范例，我想象它在玻璃上被按下是什么樣子。

坦白地說，我喜歡這個造型！它是獨(dú)特的，在現(xiàn)實空間中是有意義的，是一個非常明確的選擇指標(biāo)。

六、繼續(xù)嘗試優(yōu)化

如果我只在菜單和覆蓋層上使用更圓潤的樣式，并使主窗口更簡單呢?

當(dāng)主窗口顏色較深時，它看起來更干凈，并且可以更容易地將焦點(diǎn)從主窗口移到導(dǎo)航面板，然后再移回來。

七、交互映射

我想象著在 3d 空間中滑動和輕彈，互動也會發(fā)生?？ㄆ粫唵蔚叵蛏弦苿樱喾?，它會在 3d 空間中沿著圓形路徑移動。

就在那時，我意識到有兩個獨(dú)立的 3d 移動平面（包括周圍和上下）有點(diǎn)太多了。

我修改了主要的交互，使其可以在空間中水平觀看。

3d 環(huán)繞體驗在紙面上聽起來不錯，但在 3d 中呈現(xiàn)出來時，它似乎令人困惑。

所以我修改了我最初的概念，只保留了一種互動(向上/向下滑動)，因為它發(fā)生在完整的三維空間中。

這對于沉浸式體驗來說已經(jīng)足夠了。

八、想法

我發(fā)現(xiàn)空間設(shè)計非常有趣。蘋果分享的原則之一是：平臺中的體驗必須是真實有效的。

當(dāng)我第一次聽到這個詞的時候，我記得史蒂夫·喬布斯推出 iPad 的時候，他說這種新類型的設(shè)備在某些任務(wù)上必須比電腦和手機(jī)做得更好。否則，它就沒有存在的理由。

所以你應(yīng)該問自己的第一個問題是：在混合現(xiàn)實中這種體驗會更好嗎？或者使用手機(jī)或平板電腦應(yīng)用仍然是一個更好的選擇。

我苦思冥想了很久

我認(rèn)為，要真正分析一組這樣的設(shè)計，用戶需要全神貫注。通過調(diào)暗房間光線來減少干擾，并使設(shè)計在真實空間中變得巨大，這有助于專注于所有小細(xì)節(jié)。

當(dāng)然，我們還需要對體驗進(jìn)行更多的探索，看看它在實際設(shè)備上的表現(xiàn)如何。

但在那之前，有點(diǎn)創(chuàng)意是很好的。通過從頭到尾專注于整個體驗，我能夠更好地把握空間互動的一些缺點(diǎn)，以及我們自己的認(rèn)知極限等等。

還是得多實踐呀！

歡迎關(guān)注作者的微信公眾號：「彩云譯設(shè)計