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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
快速指南之移动设备上的 AR (第三部分)
0.0°
2018-05-08 自译外文 经验/观点 原作者: Bushra 举报 1834 4 6 2

Image title

本文是正在进行系列的第三部分。


Image title

AR 是由行为和交互驱动的。本文将深入探讨不同类型的 AR 体验,以及当前 AR 应用中常见的设计模式和风格。


早期的定义使它很容易界定需要生成的内容类型。测试是设计过程中至关重要的一部分,理解每一步交互的重点将及时地经常地进行测试。


定义交互的重点

Image title

重点1:实时

例如:宜家 app

在首次登录 app 时,良好的交互依赖于用户实时预览 2D 或 3D 内容。

这种类型的体验在商业应用中最为常见。用户经常需要预览产品,以便更好地观察和理解它。他们可以放置、操纵或浏览内容。


重点2:先叙事
例如:Pokemon Go

叙事交互的成功依赖于用户可以执行一系列的操作以达到最终目标。

首次登录是叙事的体验最常用于游戏和故事性的 app,它们也非常依赖于设备的定位、位置和地图。


重点3:获取
例如:Instagram

首次登录进行获取信息的成功性依赖于用户所获得的视频或图像。首次进行获取信息的基础大多数是共享和基于平台的 app。这些体验通常涉及到对真实世界的分层数据,并经常对真实的空间或对象进行定位和跟踪。


设计

设计师应该设计与环境无关的元素,并调整色调和对比度。


Image title

在 AR 中,本质上是在实时摄像机的基础上对数据进行分层。我们无法控制每台摄像机的播放,因此必须针对性的进行设计。通过各种背景图片、视频预览和测试界面的方法进行设计。


Image title

阴影可以保证在面对明亮的东西时,UI元素不会丢失。


当前的预览

下面是当前 AR 环境中一些常见的设计模式。目前没有很多 AR app 可供用户使用,因此研究池的规模相对较小。以下内容将会更改!


颜色

Image titleInstagram的渐变标题,宜家品牌色,Pokemon Go 的红色警戒色。

  • 白色是文字、图标和向导最常见的颜色。
  • 有些 app 在顶部和底部上有额外的插图或渐变,使固定的元素更加清晰。
  • 在相机的视角中,很少使用品牌颜色或者根本不使用。
  • 品牌色外的颜色可用于错误、警告或完成状态。例如,红色表示警告。
  • 不透明的颜色通常用于调用操作按钮或功能,比如可能被用户所隐藏的触发器。


位置

Image title

Snapchat, Snow, Instagram

  • 固定的元素通常位于屏幕的顶部和底部。这样用户就可以集中注意力在摄像头和中心。
  • 不需要关注的附加提示仍然接近底部。例如:旋转和额外的选项。


文字

Image title

iOS竖屏模式,Instagram定位贴纸,Pokemon Go 统计

  • 文本通常被当作标题或标签,使用 sans-serif 因为它更容易阅读。
  • 文本通常是白色或黄色,除非这是背景色。
  • 文本通常有一个不透明或半不透明的背景框来提高易读性。
  • 没有背景框的文本使用柔和的阴影处理。


图标

Image title

Snapchat的图标是面性的,在一个不透明的背景框内被勾画出来。

  • 图标的形式有面性的、线性的和拟物化的。
  • 拟物化图标通常有背景框来区分它们和背景中的摄像头。
  • 图标的使用和文本一样。
  • 图标通常有轮廓或阴影来帮助他们凸显出来。


指示器

Image title

Image title

Volskwagen app 用了汽车本身的形象,House Craft 结合了gizmo和指示灯。

  • 指示器的范围从超级小的到复杂的和动画的。
  • 指示器通常是白色、黄色、蓝色或低透明度的黑色。
  • 指示器是动态的并会相应地进行调整,它们也不是持久的,当动作发生时就会消失。


混合模式

Image title

Blizzard 的 Overwatch

ideo 游戏 UI 与 AR 有很多相似之处:两个都是完成一个活动并且用户控制的摄像头。
视频游戏接口是动态不断变化以适应用户的需求。他们还大量使用图标和图形元素来保持用户的关注度。


Image title

Overwatch 中明暗背景混合模式下的图形元素


从游戏中得到启示,设计师可以在不透明和透明的情况下设计 UI,并考虑将混合模式添加到他们的图形元素中。这个方法下用户可以在不完全阻碍视图的情况下仍然可以看到背景的部分。混合模式也可以减少固定元素的视觉重量。


Image title


AR 界面的类型

AR 可以在几个不同的接口中显示。以下是一些常见的缩写:


Image title


  • GUI(Graphical User Interface):通过图形和可视化指示器进行交互。例如:点击 ❌ 是取消
  • HUD(Heads Up Display):在固定的透明显示器上进行交互。例如:在相机上的指南。
  • VUI(Voice User Interface):通过语音进行交互。例如:要求 Siri 设定一个闹钟。
  • FUI(Future User Interface):与未来数据进行交互。例如:钢铁侠的视图效果。
  • TUI(Tangible User Interface):受物理因素影响的交互。例如,用 fitbit 追踪你的日常步数。


在第四部分中,将探讨在 AR 中进行的 3D 设计。感谢阅读!

Image title


更新:2018-05-08

收藏

4人已收藏

  • 75

    作品

  • 2695

    粉丝

  • 65

    关注

  • 11个表单设计小Tips
  • 产品设计的期望与现实
  • 七个设计的基本原则
  • 为什么大团队失败反而小团队取胜

    猜你喜欢

      2018-05-08 自译外文 经验/观点 原作者: Bushra 举报 1834 4 6 2

      快速指南之移动设备上的 AR (第三部分)

      0.0°

      你确定要举报快速指南之移动设备上的 AR (第三部分)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年05月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      4
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录