header_v0.7.32

YunOS Auto智能车载系统-动效设计方案

230天前发布

原创文章 / UI / 教程
TCWison 原创,如需商业用途或转载请与TCWison联系,谢谢配合。

YunOS Auto是阿里巴巴集团与上汽集团合作打造的智能车载系统,搭载在上汽的自主品牌荣威、名爵车型上。本文向大家介绍这套系统在动效设计方面的思路。

3d2e58d6566da801219c77ae4307.jpg


206158d64e3da801219c77cad747.jpg


        2014年7月,阿里巴巴与上汽集团在上海签署“互联网汽车”战略合作协议,双方将开展在“互联网汽车”和相关应用服务领域的合作,并基于YunOS开发涵盖中控、液晶仪表两块屏幕的车载操作系统。2016年7月6日,双方合作的首款量产SUV车型荣威RX5在杭州的云栖小镇发布。我主要在此项目中负责系统动效方案的设计。




f5f258d6572ba801219c77e7c4fa.jpg


cc4658d657f5a801219c7767b394.jpg


一、明确设计原则:

        车载的用户使用场景不同于手机,保证安全驾驶始终是设计的第一要务。动效应该遵循 高效、秩序、可感知 的设计原则,避免夸张的弹动效果,负责的运动路径。并在 运动时间、方向、顺序、加速曲线等 方面形成严谨的规范。


6b7a58d65903a801219c77b8f584.jpg


d99158d66abea801219c77aad54f.jpg



二、确定设计范围:

        结合动效的三大功能与作用(信息交互、操作反馈、品牌与情感)做取舍,明确哪些场景应该重点做动效,而哪些场景应该克制的使用动效。

9cb158d65d57a801219c77e6a78c.jpg



三、方案产出阶段:

        明确了设计原则,确定了设计范围,就可以结合具体的产品模块与功能开始方案设计了。下面按照设计范围的三个维度(信息交互、操作反馈、品牌与情感),展示一部分具体的设计方案。


a82e58d66d69a801219c7701d116.jpg


        1、系统空间关系

        根据交互层级关系,设计系统转场动画,表现系统主框架的空间结构。


1e9458d66e64a801219c772faeae.jpg


        b84958d6965ea801219c77030fd6.jpg  c23b58d695a7a801219c77d47519.jpg  e0bb58d69316a801219c7753f419.jpg

(从左向右依次为:呼出应用入口、打开/关闭应用、呼出空调面板)



        2、应用内元素编排

        通过动画衔接应用内页面元素状态发生变化时的切换过渡。

        0f3058d67297a801219c77d8c7d7.jpg  7c1658d680a7a801219c77dd2b25.jpg  0c1358d6755da801219c77432b9c.jpg

(从左向右依次为:上车欢迎卡片、地图图层切换、柔性导航)



a0be58d67836a801219c77f14245.jpg


        1、基础功能控件

        为用户经常操作的功能、控件等,设计反馈性动效,强化用户的操作触感。

        4e3d58d67bcea801219c77370891.jpg  96c258d67ceda801219c777e793b.jpg  a78c58d67d62a801219c77d8ec56.jpg

(从左向右依次为:车辆控制页、Tab切换、沿途搜)


        2、通知体系

        对于信息提示系统,做了统一规范的动效设计,包括系统通知、Toast、Dialog等。

            cf2058d68907a801219c7707dce0.jpg

(从左向右依次为:来电通知、路口车辆预警、Toast弹窗)



963558d68a6fa801219c7798120d.jpg


        1、语音形象

        针对车载场景中最常用的语音交互状态,设计表现型的动态效果强化用户认知,传达品牌调性。        

        4d7858d68e1fa801219c775acfc7.jpg  12ce58d69108a801219c772f5ef3.jpg

(从左向右依次为:语音动效前装版、后装版)


        2、动态Logo、开机动画

       结合公司的Logo品牌动态,延展出开机动画,便于品牌传播。

       6d8558d6991fa801219c7770a885.jpg258358f32ba7a8012049ef233c3f.jpg

(从左向右依次为:开机动画、动态logo展示)



142158d6a158a801219c775485ef.jpg


        AR-HUD显示技术能够根据真实道路情况匹配导航或提示信息,在车载领域的应用也逐渐成熟。在方案设计过程中,我们也针对这种技术的可行性做了概念设计的探索,有望在下一代互联网汽车中量产应用。

        700158d6a32ba801219c7738dfb2.jpg  1c6d58d6a387a801219c7766fa0e.jpg

(从左向右依次为:碰撞预警、并线超车提醒)




e65058d69c60a801219c778037a1.jpg


        为了更好的对设计进行测试与验证,我们也使用Flinto、Principle等工具为动效制作了可交互的高保真原型,最终效果见下面的视频:



总结:

以上节选了部分有代表性的设计,更多效果欢迎大家去荣威或名爵的4S店里实车体验,谢谢大家的观看~

44
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功