{{detailStore.author.is_follow?'已关注':'关注'}}
魅族「第二弹」 Flyme Auto 如何构建座舱新交互?
新出行原创 · 精品文章

继 Flyme Auto首秀后,魅族再次放出了 Flyme Auto  的第二弹。

相比第一弹,这次的爆料更凸显了 Flyme Auto 整个交互的核心设计,而这些新的「创新」都成为座舱上一大新的尝试。

接下来我们继续「列文虎克」看 Flyme Auto 车机第二弹!

第一弹回顾: 魅族首秀!列文虎克看 Flyme Auto 车机界面首次曝光 

视频上传成功

Flyme Auto 官方视频合辑

在这个官方曝光的视频合辑以及图片中,我们能看到什么呢?

我觉得可以分几个亮点分析:

  • 当 Flyme Auto “动”起来  交互动效曝光
  • Flyme Auto 桌面透露哪些亮点? 「」3D 桌面的细节 
  • 桌面 功能卡片 支持自定义调节?或许还能自动推荐?
  • 快捷车控也有「新玩法」?
  • 取消「分屏」,新增「小窗」模式
  • 小彩蛋

我们也结合第一弹曝光的内容,把 Flyme Auto 的「拼图」拼完整起来。

 一、当 Flyme Auto “动”起来

在上次的曝光中我们比较遗憾没有看到整个 Flyme Auto「动」起来的表现,而这次第二弹中 Flyme Auto 的动态交互终于迎来首次曝光。

手机上经过数代的“裂变”,设计师需要在 20 多平方厘米的手机屏幕中要让操作更加的舒适、高效,用户对于信息的感知更加及时、流畅。

而在车机上,这个视觉空间会被放大,带来的挑战自然也更高。

除了要实现多任务,在动效上比如页面和页面之间的切换和跳转,也是提升系统的流畅性和用户愉悦度的重要组成部分,也是影响用户体验的一大重点。

1、伸缩动画

视频上传成功

搜索框伸缩动画界面

集成了 Flyme 众多设计思路后 Flyme Auto  自然也表现的相当“顺手”。在展示的搜索框的切换中,当点击搜索框时,此时搜索框会向左延伸拉长,背景有一个毛玻璃隐藏面板,同时数字键盘从下往上弹出。而如果返回也是类似,也有同样的渐隐的转场效果。

这里的核心是 Flyme Auto 集成了魅族 Flyme 系统上的动画曲线。除了转场的动作外,也要确保动画的曲线更符合用户心理预期,才能确保视觉流畅度。

2、转场动画

在第二个转场效果中,首页的功能卡片在单次点击后也有出现伸缩后放大界面的效果,此时底部的 Smart Bar 的音乐状态会向右滑动,切换为“home”键状态。

视频上传成功

首页 UI 点击缩放动画展示

这里我们也可以通过「放慢镜头」来看看 Flyme Auto 和华为 HarmonyOS 系统的首页卡片效果切换对比。

视频上传成功

Flyme Auto 与 华为 HarmonyOS 交互对比

3、音乐播放动画

除了转场的效果,这次 Flyme Auto 也透露了另一个交互核心,也就是音乐界面的播放动画。

在音乐播放界面中,Flyme Auto 加入了全新动效,播放界面的色系会自动匹配专辑的封面图,并且背景呈现上会有毛玻璃的雾化效果。

伴随着 CD 光盘的转动,光影效果也会伴随着转动,加上呼吸动效,也让整个交互更为逼真和沉浸。

视频上传成功

音乐播放界面动画展示

而这里也有一个“小彩蛋”,专辑 CD 的封面是和真实 CD 尺寸保持了一致性,也是一个让人“讨喜”的设计细节。

二、「扣」3D 桌面的细节

聊完了动效,新的曝光视频中也把过去「犹抱琵琶半遮面」的桌面效果完全展示了出来。

第一弹中,Flyme Auto 透露了小憩模式下会采用 3D 情景桌面,当时我们就猜测 Flyme Auto 可能会保留目前主流的 3D 车控桌面,带来更多可玩性。

而在这次我们一览无余看到桌面正式采用了以车辆模型为底的车控桌面,桌面还有部分车控组建,首页的背景是一张城市建筑图。

目前许多车企的思路是支持车辆 360 度动态交互显示,同时结合了游戏引擎,在多面模型支持下无论我们放大缩小模型还是转换各个角度,也不会出现锯齿,模型越精细还原的细腻度会更高,包括近景的车辆细节到远处的场景细节。

Flyme Auto 车机首页例如桌面近景的路面细节以及远处的光影,建筑上的光影细节显示效果都非常细腻
高合 HiPhi  Z 车机首页

即使这次没有桌面车辆模型效果的动态展示,但例如桌面近景的路面细节以及远处的光影,建筑上的光影细节显示效果都非常细腻。

我们回顾在小憩模式主题下,桌面是一个 3D 模拟「夜间」草地以及萤火虫的场景桌面。

Flyme Auto 小憩模式下,萤火虫被开门惊扰的动画效果

我们也期待有了光照引擎、多面模型、音效以及动效等显示效果的加入,并不会只有车控桌面如此“简单”。

这也意味着 Flyme Auto 将会结合多种引擎来驱动不同情景,让整个桌面主题不再局限于“地图”为底、“壁纸”为底。

例如结合天气、季节以及动态行车中的“还原效果”,可玩性都有很高的期待。

三、「首页」卡片支持自定义调节?

相比上次的效果,这次曝光中 Flyme Auto 首页底部的功能卡片显示效果非常清晰。

这次我们看到了有天气预报、手机互联、音乐歌单推荐以及能耗信息等,同时支持左右链条滚动以及自定义编辑。

当然结合这四个卡片的布局,我们也猜测未来系统可能会根据用户以及手机使用场景来主动推荐卡片。

四、快捷车控也有「新玩法」?

除了桌面,进入车辆设置菜单后我们寻找快速的车辆设置菜单也非常重要。

过去,我们常见的快捷操控都仅有一个菜单界面,这时候相关的功能排版需要取舍。而我们这次看到 Flyme Auto 则采用“双界面”来满足快捷快捷车控的需求。

在「谁才是最好用的座舱系统」评测中,我们非常考虑菜单逻辑的编排,逻辑越复杂也意味着用户进入想要的指令步骤更复杂,学习成本高,也不符合用户的心理预期

一个好的方法就是避免用户多次进入二级菜单,降低用户的学习成本。FlymeAuto 的双界面有了一个好的解题思路。

FlymeAuto 划分了驻车以及行车两种状态的快捷界面:

其中驻车状态下我们看到车辆模型有相对应的遮阳帘调节、后备箱调节的 3D 展示,以及位于底部的后雾灯、后视镜、手套箱、座椅以及儿童锁的快捷操作。

驻车状态下的实况车控

行车状态下,我们看到功能调节范围变小,只专注基础的后雾灯以及驾驶模式的调节,取消了基础的座椅等调节方式,可能也基于安全操作的考虑。

行车状态下的实况车控

但我们认为在这个界面中可以加入更多的例如关于座椅舒适性、动能回收以及能源类型切换等快捷操作调节板块,结合动态场景会更为全面。

当然还有 one more thing...

虽然这次 Flyme Auto 只展示了快捷车控的界面,但我们看到了车辆设置的菜单编排以及 Flyme Auto 的 UI 设计,实际上左侧的 UI 是完全悬浮于背景之上。

包括更为扁平化的 UI 风格,统一的字体大小梯度以及字体间距,去掉多余的透视、纹理等效果,将“核心信息”凸显出来,我们也看看 Flyme Auto 与目前主流车型的 UI 对比。

大家会觉得哪个 UI 设计更好看?

另外是驻车以及行车状态下虽然车辆模型还是没有完全公布,但从界面可以看到驻车状态下车辆模型对车位识别、车辆模型识别甚至行人模型的识别。在行车状态下可以看到对车道线、动态车辆模型等环境实时渲染。

驻车下对周围车位、车辆以及行人的识别

五、打败「分屏」的「小窗」模式?

目前大家好评的「分屏」模式甚至逐渐成为车机好用的一大重要标准。

「分屏」可以很大程度释放屏幕的显示内容,例如在导航界面下可以利用分屏显示音乐等等。

而在第二弹中,我们似乎看到 Flyme Auto 在第一弹中把大家热议的「分屏」做了优化,优化成为了「小窗模式」

相比「分屏」,「小窗模式」有几个新的特点:

1、悬浮卡片式效果。首先它像一块卡片悬浮在地图底图上,相比固定尺寸显示效果的分屏模式,悬浮式的小窗更符合视觉逻辑,不会有“割裂”感,小窗没有边界显示效果更为沉浸。

2、多样性,可以适配更多应用。相比分屏,小窗模式就像一个多任务的显示窗口,例如这次展示的我们在手机打开音乐软件时,除了可以显示音乐界面、显示歌词以及打电话这种临时调用的功能。

小窗模式支持在导航下显示歌词
小窗模式下也支持窗口的左右拖动

3、灵活性,可以适配更多展示效果。相比分屏固定比例的分配,小窗模式的灵活性更大。例如这次展示的「来电功能」就有多种通知样式。

例如在行车状态下,来电显示的小窗模式会缩小成为小卡片式,接听时会把小卡片隐藏,不打扰地图显示。

在驻车状态下,来电显示就是小窗形态。

4、支持投屏。而除了基础功能,我们甚至能对 Flyme Link 做猜测,也就是通过小窗来拓展手机投屏。

在驻车情况下,我们可以全屏显示,而例如在驾驶状态上可以小屏投屏,通过自适应车机屏幕比例优化显示效果。

例如这次展示的飞书软件。

同样在驻车状态下手机的飞书软件有电话会议信息,也可以有小窗模式。而当我们回到驻车模式,这时候飞书会有一个全屏的界面展示。

六、总结

实际上,在末尾还有一个小彩蛋。

Flyme Auto 的 LOGO 也迎来了首次亮相。

作为 Flyme Auto 的首款产品, Flyme Auto 团队从底层设计到上层交互应用,到车机末端的互联生态,我们都看到了魅族在其中的野心,这其实不是魅族一场从手机到车机的转型,更像是魅族生态的一次拓展,也应证了“无界”的主题。

而在目前露出的素材中, Flyme Auto 打破了目前传统车机布局的方式同时提供了新的思路。一改过去传统的交互,进一步打破了边界,从而新立了一个标准与全新的交互方向。

Flyme Auto 上车后表现如何,敬请期待!

写评论
积分赞赏
点赞
评论区
  • 编辑
  • {{is_favourite ? '已收藏' : '收藏'}}
  • 举报
  • 加入黑名单
  • 删除
  • 取消置顶
  • 置顶推荐
    • 6小时
    • 12小时
    • 24小时
    • 3天
    • 一周
    • 长期
  • {{digest?'撤销精华':'设为精华'}}
回到顶部
  • 全部评论{{detailStore.commentnum}} 条
  • 只看作者
  • 最热
  • 最新
  • 最早

「待审核」

{{ comment.relativeTime }} 已被赞赏 {{comment.integral}} 积分 回复

暂无相关评论

发表一下个人看法吧

飞机先生 Lv.5

认证:新出行编辑

简介:可微信可电联,72小时为新出行用户服务。

25077

获赞

24

关注

2476

粉丝

3581

原创

{{recommend_circle[curIndex].series[0].name}}

指导价:
{{recommend_circle[curIndex].series[0].price.max>0?(recommend_circle[curIndex].series[0].price.min == recommend_circle[curIndex].series[0].price.max) ? `${recommend_circle[curIndex].series[0].price.min}万` : `${recommend_circle[curIndex].series[0].price.min}-${recommend_circle[curIndex].series[0].price.max}万`:'暂无报价'}}

{{item.title}}
进入社区