恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
实战案例!如何从0到1为Apple Vision Pro设计
66.2°
2023-08-20 自译外文 经验/观点 原作者: 未知 举报 15070 42 175 3

新一轮的设计风格趋势又来了!不能错过的新趋势,新机会。

随着苹果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 

译者:彩云Sky

本文翻译已获得作者的正式授权(授权截图如下)

 

Powered by Froala Editor

微信公众号:彩云译设计

更新:2023-08-20

收藏

42人已收藏

彩云Sky

腾讯ISUX高级视觉设计师

  • 177

    作品

  • 1.3w

    粉丝

  • 13

    关注

  • 苹果Vision Pro上到底有哪些设计亮点?| 视觉篇
  • 抢先体验苹果visionOS的方法
  • 深度解读VisionOS设计原则,掌握下一代设计趋势!
  • Apple Vision OS最全设计规范

    猜你喜欢

      2023-08-20 自译外文 经验/观点 原作者: 未知 举报 15070 42 175 3

      实战案例!如何从0到1为Apple Vision Pro设计

      66.2°

      你确定要举报实战案例!如何从0到1为Apple Vision Pro设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2023年08月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      175
      42
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录