新UI設計趨勢：Apple vision pro 的UI界面設計

Sponsor

隨著蘋果vision pro的發布，新一輪的設計風格趨勢又來了，現在在Dribbble上能看到非常多優秀的空間設計作品。

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

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

有很多想學習空間UI設計的設計師都會按照簡單的玻璃效果卡片教程來進行，但這并不能真正激發你的創造力，因為它只是重復性的技能而已。

確定設計目標

我的想法是為現有的網絡平臺設計一個沉浸式的用戶界面。

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

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

目前2D網頁界面效果

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

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

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

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

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

步驟2 — 設計

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

從關鍵頁面開始設計。

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

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

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

我想，當你進入某個窗口類別時，你會獲得一種完全身臨其境的環繞體驗。

房間在你周圍變暗。

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

為了給設計作品打一個分數，你會將焦點放在它上面，然后向上滑動（加分）或向下滑動（減分）。

從側面看，它會有點像這樣：

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

主要空間交互

在我獲得主要的“空間”啟發時，我決定給卡片設計加一些細節。

這張卡片可以被旋轉，以顯示作為UI設計基礎的低保真線框圖。

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

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

你可以同時打開兩者，或者分別打開/關閉它們，以查看UI設計的更多細節。

中保真設計

繼續設計中等保真度的主界面，看看它們是如何結合在一起的。

主界面相當簡單。一個網格的設計，作者的名字和照片，可以點“喜歡”。

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

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

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

材質探索

下一步是探索材質效果。蘋果在這方面有他們自己的建議，并且已經發布了他們的UI工具包。但我想嘗試一些更定制的東西，看看它會給我帶來什么。

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

Vision OS能根據環境光照條件和場景環境實時調整窗口現實效果。

但我做的效果圖的時候，卻沒法利用這一點，所以必須要調整。

經過一些調整，它顯得更清晰，更容易閱讀了。下一步就是對細節進行微調。

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

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

實驗

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

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

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

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

坦白地說，我喜歡這個造型!它是獨特的，在現實空間中是有意義的，是一個非常明確的選擇指標。

繼續嘗試優化

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

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

交互映射

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

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

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

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

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

這對于沉浸式體驗來說已經足夠了。

想法

我發現空間設計非常有趣。蘋果分享的原則之一是:平臺中的體驗必須是真實有效的。

當我第一次聽到這個詞的時候，我記得史蒂夫·喬布斯推出iPad的時候。

他說，這種新類型的設備在某些任務上必須比電腦和手機做得更好。否則，它就沒有存在的理由。

所以你應該問自己的第一個問題是:在混合現實中這種體驗會更好嗎?或者使用手機或平板電腦應用仍然是一個更好的選擇。

我苦思冥想了很久

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

當然，我們還需要對體驗進行更多的探索，看看它在實際設備上的表現如何。

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

還是得多實踐呀！

如果你有學到，記得分享到你的朋友圈哦~

原文：https://betterprogramming.pub/mixed-reality-app-design-case-study-b9f123950e90

作者：Michal Malewicz

來源：彩云譯設計（ID：caiyunyisheji）

?

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。