【技术贴】乐视汽车设计师谈:如何设计车联网系统?

CardesignPics汽车设计圈2019-01-16 04:12:22

本文由乐视汽车设计师Daisy独家刊发。


《如何设计车联网系统?这里有详细的行业分析供你参考》


近几年各大互联网公司争先涌入智能汽车领域,互联网+汽车一度成为科技新闻头条。传统汽车厂商互联网化,互联网公司进入汽车行业,掀起互联网圈的跨界风。在“互联网+”的行动计划下,汽车行业无疑是待被开垦的一块移动终端的沃土。“互联网汽车”将会是多个智能领域的混合体,包括无人驾驶、物联网、人工智能、大数据、新能源等一系列前沿科技。正如《失控》作者凯文凯利描述:“未来的汽车不再只是交通工具,而是一台拥有四个轮子的智能化电脑,是人类除了家里、上班、公共空间之外的第四空间”。可见未来的智能化汽车已不仅承担代步工具本身,而是更便利的出行方式,更贴心的生活服务、最懂你的私人助理,是拥有最强大脑的亲密伙伴。


跻身于造车大军的互联网公司在造车领域有两种制造模式,一是以阿里榜样的,通过与上汽合作打造的互联网汽车生态圈,只提供互联网终端的功能与服务,而不自己涉水造车,以与车企合作的模式推进互联网汽车的演进,包括腾讯、百度这样的互联网前三甲,都选择了与车企合作的模式。另一种是公司进行闭环造车,这类模式在互联网圈不占少数,蔚来、小鹏、车和家、乐视等等公司,都在都形成了各自的造车闭环,自主研发软件操作系统,整车研发,制造生产,供应链,销售等一系闭环造车创举,无疑造车这种费钱烧脑的行为,给处在创业环境中的互联网公司不小的压力,要承受的造车压力比与车企深度合作的模式要成倍增长。


汽车的智能操作系统是控制整个汽车的中枢大脑,承载着智慧交通、多媒体影音、社交通讯、车辆控制等所有应用和服务,是”智能终端“不可或缺的必要条件。其中的产品需求、交互方式、视觉风格是构成系统成败的重要因素。优秀的视觉风格可以为汽车增添品牌特征和个性化,更可以在汽车复杂的驾驶环境中增加安全系数和便利性。本文将对传统车企和互联网车企在智能操作系统的视觉设计层面进行剖析,对其在智能操作系统中的优劣点进行对比分析。


本文会从以下三个部分展开对互联网车机系统的理解以及行业内竞品的调研分析:一、互联车机操作系统简述;二、传统车企互联车机设计及总结;三、互联网车企互联车机设计及总结。下面就正式进入本文的调研分析报告:


一、互联车机操作系统简述:


智能车机系统,简单的理解就是人(驾驶&乘客)和车内一块或者多块屏幕通过语音、触摸、手势等方式进行交互,实现操作系统按照用户的指令来控制系统应用的一种智能化的操作系统。常见的车载终端包括:中控屏(驾驶员优先使用的屏幕,用来控制系统应用和汽车控制相关操作)、副驾娱乐屏(副驾乘客使用的多媒体娱乐的操作屏)、后座娱乐屏(后排乘客使用的偏娱乐功能的交互终端,主要为购物、多媒体、LBS服务等相关功能)、HUD平视显示器(多数汽车都加入了抬头显示屏,主要是使驾驶员快速、安全、有效的获取到导航信息、路况及车辆信息等)、IPC仪表盘(所有汽车都具备的一块交互屏,多为显示不可触摸,显示油表和里程,以及辅助自动驾驶等路况信息),其他车内操作终端还包括:智能后视镜、门窗显示屏、车身臂柱屏、进气格栅数字显示等。



常见车机互联有两种方式:一是手机投射方式,需要手机与车机通过USB连接,通过手机传输就可以在任何一个支持手机投射方式的车机上完成简单的车载系统功能。常见的手机投射方案的就是大家熟知的carplay(苹果)、Android Auto(谷歌)、carlife(百度)、ecolink(乐视)、windows in the car(微软)这几大手机投射方案品牌。二是前装车机系统,不通过其他任何媒介在整车出厂时自带的车机系统,这种方式的人机交互系统就非常常见,传统车企宝马的Idrive、奔驰的Comand、沃尔沃Sensus、奥迪的MMI等,以及互联网车厂的特斯拉、阿里斑马智行的AliOS等,以及目前先锋、阿尔派、clarion(歌乐)、JVC等公司可以实现将carplay改装为前装车机系统,2016谷歌I/O大会也为玛莎拉蒂改装了一款前装的android automotive,实现了android变为前装系统的可能性。


常见两种车机互联方式--手机投射和内置系统

这里也简单提一下常见的几大操作系统平台,winCE、linux、android、QNX、ios等五大常见的系统,最常见的还是基于android和linux开发的操作系统,其次是比较封闭的苹果ios。这里推荐大家读一下以下文章,会有更深入的了解。http://digi.163.com/17/0415/06/CI1S89UK001680NE.html(转载)


二、传统车企互联车机设计及总结:


下面进入正题,本文会按照传统车厂和互联网车厂这两部分来做竞品调研和分析,对比传统车厂在互联车机HMI的设计方向及互联网车厂在HMI上的设计方向,然后分析两大类车厂在设计上的共同点和不同点。下面先从传统车厂入手。


传统车厂几大著名的IOV系统包括奔驰Comand、宝马Idrive、奥迪MMI、沃尔沃Sensus、路虎In Control、福特SYNC等。


奔驰的comand系统在不同的车型上有不同的屏幕悬挂方式和尺寸,除了S/E级轿车使用了12.3寸两块内嵌屏之外,其余的型号都使用的是7/8.4英寸外挂的车机硬件。奔驰的IOV系统的操作方式不支持触摸屏幕,而是通过驾驶员右侧的触摸操控旋钮完成车机系统的选择和操作。在设计风格上,奔驰comand设计相对保守传统,拟物质感的金属风格,大面积使用大渐变大投影来表现空间感,主色使用相对保守的银色加高光橘色,整体系统还是呈现偏金属质感的色调。优点:与车内饰融合的较好,基本吻合车内高大上中控台的气质,不跳脱,首页用了叠加的布局形式,焦点放大,对于车内的驾驶环境而言非常清晰明了,识别性强。缺点:图标、设计样式过于传统,装饰元素复杂,过度展现拟物手法,和现在主流的设计风格不相符。



奔驰comand车机系统设计

相比目前奔驰comand系统,这几年的CES展览奔驰在未来概念IOV系统的展示上,体现了奔驰在视觉设计上的突破。奔驰2015年的概念车G-code,在IOV的设计理念上和整车设计结合非常紧密,软硬件在设计元素的使用上高度一致。该款概念车在前脸使用了星光流彩样式的进气格栅,由发光的无数圆点有秩序排列,科技感十足。在车机系统的设计上与进气格栅设计亮点相统一,也使用了圆点矩阵排列的设计元素,内外遥相呼应,可见设计元素的继承性在视觉角度使该款概念车展现了独特、高端、现代、奢华等特点。从奔驰近几年的概念设计可以看出,在IOV系统的设计中充分体现了科技感,设计元素大多运用了光、线等元素巧妙的展现系统的立体感,纵深感。而且与车身元素结合紧密,能从整车中提取设计元素,巧妙的运用在系统设计中,软硬件通过设计元素和色彩巧妙融合,增加了整车的一致性和独特个性。





奔驰2015年概念车G-code


宝马的Idrive系统,在整个车企里算做的很棒的IOV系统了,不仅有中控屏,还在高端车型中加入了后座影音娱乐屏。宝马Idrive系统也是通过换挡拨杆附近的操作旋钮对系统控制,同样也不支持触摸屏幕操作。在设计风格上,Idirve也采用较传统的拟物金属质感,大量使用拟物的图标及设计样式,颜色相对保守和陈旧,大面积使用灰色、银色,系统色为标志性的橘色高光样式显示。当然Idirve在设计上的优势在于结构布局清晰,以卡片形式展现内容,尤其切换当前页时卡片高亮橘色并放大,在车内的驾驶环境中简洁易懂,提高安全性。车辆相关界面中有车内饰直观表现,使功能的展现更有说服力。缺点是设计风格过重,使用过多装饰性元素使界面冗繁,不匹配当下设计流行趋势。



宝马idrive车机系统设计


宝马2016年i Vision Future Interaction和2017年HoloActive Touch在CES中亮相,对IOV系统有了全新的展示,引入了通过“全息虚拟触控”进行虚拟的人机交互,将信息投射在驾驶室内,把信息从中控位置投射到方向盘等高的地方,便于驾驶员手势操作。在视觉风格上也是较idirve有很大的突破,从金属质感变成微扁平的设计风格,颜色上引入了更具科技感和神秘色彩的蓝绿色,科技感十足。在设计元素的使用上偏爱多边形&不规则矩形,设计布局大胆,通过区块做内容的区分。可以看出在设计没有完全的扁平化,微质感加渐变的设计样式,使整个中控饱满不单调,在平面中体现了纵深感和立体感。


宝马i Vision Future Interaction&HoloActive Touch车机系统


沃尔沃sensus在我看来是传统车企里IOV做的相当不错的,她与前两个品牌不同,使用的是触摸的方式人机交互。优势是首先系统处理器的性能可以超过ipad的流畅体验,再就是触控反应相当灵敏,这两点比其他高端车的用户体验要好的多。sensus目前采用的是一块9英寸高分辨率电容屏,竖屏配置,在硬件上还配备了类似苹果的home键,这些大胆的尝试使智能车载交互系统进入智能交互大屏时代。在视觉设计上,整体视觉风格偏向目前主流的设计趋势,扁平带微质感,图标清晰,设计布局能突出功能的展现,没有过多复杂的装饰元素,整体呈简洁干净。不足之处在于设计过于中庸保守,没有犯大错但是没有太多亮眼之处,除此之外在颜色上,基本只有黑白灰三色,没有突出系统色的使用,导致系统缺少生机,缺乏个性。



沃尔沃sensus车机系统

最后说说捷豹路虎的incontrol系统,该系统的高端配置incontrol touch pro duo(智能驭领双屏尊享触控信息娱乐系统)目前在路虎揽胜星脉这款车型上可以看到。该系统最大的亮点在于使用了两块“双10英寸”的触摸屏上下排列,上面那块屏幕可以按照驾驶员位置调整角度,下面那块屏幕将物理旋钮和液晶屏有机结合,不仅在触摸屏幕的同时可以快速使用旋钮完成操作,可谓是物理和虚拟的科技结合,打造了非凡的用户体验。在功能上除了常规的导航音乐,还可以完成车辆相关的控制,尤其是空调温度,下方的旋钮和液晶屏显示完美结合,相互呼应。在视觉设计上incontrol更是亮点多多,在传统车企的设计中,路虎这款系统可谓向设计趋势迈进了一大步,不仅在人机交互上高度创新,在视觉设计上也是超越其他传统车企,扁平的设计风格让该款车型不仅是具备科技感,更多了一些时尚和年轻,在颜色上也用色大胆,主题鲜明,该突出表现的内容使用了图形展示,更为直观易操作。不足之处在设计上犯了装饰元素过多的大忌,有些不必要的元素可以避免,让内容优于装饰,避免不必要的喧宾夺主。想了解更多的同学可以在youtube上搜索该系统,有更为详细的功能介绍。


捷豹路虎incontrol touch pro duo系统



以上介绍了四个传统车厂的IOV设计,当然调研远不止这几个车企,就不在此一一列举了,这四个算是非常典型的传统车企当前与未来的IOV系统设计,从中可以找到很多相似点,其中设计上的优缺点在这里做一个小结。传统车厂目前IOV的设计风格还是偏重金属质感的拟物风格,大多显得厚重陈旧,在设计样式上没有什么创新,颜色上大多保守的使用黑白灰三色构建,缺乏大胆和对品牌色的运用。究其原因,传统车厂之所以用拟物手法,我推测是希望通过拟物的图形模拟现实生活中的场景,让用户能在虚拟的屏幕中找到真实的感官和触觉。但是目前国内外流行的设计风格快速迭代,以苹果为首的扁平风已经深入到各个领域和终端,好的设计和布局,可以引导消费者从扁平、简洁的图形元素找到物理体验。好在是传统车企已经逐渐意识到设计的重要性,也试图在概念设计中优化视觉风格,从视觉表现层面突出车本身的独特个性,向优秀的感官体验迈出了一大步。从传统车企的互联设计设计中可以看出,化繁为简,突出核心功能,从车身提炼设计元素,主色调符合驾驶场景和品牌色的运用,优秀的设计布局,用图形图案体现纵深和空间感,是汽车智能交互系统未来的主流趋势。


传统车厂IOV设计(包括概念设计)



三、互联网车企互联车机设计及总结:


智能互联网电动汽车在近几年是绝对大热的行业,不仅BAT跻身进入造车大军,包括滴滴、苏宁、格力等也加入造车行列,无论是传统企业还是互联网公司,都在造车领域试水,想抢占移动终端的最后一个大入口。也不乏很多新的创业公司也加入其中,包括蔚来、车和家、威马、小鹏、游侠、乐视等新兴的创业团队。当然在国内外知名度最高,驾驶体验最佳的已量产车企中,要当属特斯拉和斑马AliOS了。下面就对特斯拉和搭载AliOS的荣威RX5在设计层面做一个对比分析。


首先是特斯拉,无论是否从事汽车相关工作,都对特斯拉这个品牌不陌生。特斯拉(Tesla),是一家美国电动车及能源公司,首席执行官埃隆马斯克。2012年至今共发售了三款电动汽车:modelS、modelX和model3。其三代产品的IOV设计也发生了巨大的变化。试乘过早期特斯拉的车主都曾经吐槽过其UI设计,其系统版本在这几年中经历了6.0、7.0、8.0三个大版本的迭代,在其交互框架产品需求没有变的情况下,这三个版本在UI上的变化可以看出特斯拉开始注重用户的视觉感受,也接受了现阶段视觉的流行趋势。特斯拉车内有两块显示屏,一是驾驶员正前方的全液晶显示仪表盘,以及位于驾驶和副驾之间一块17英寸超大竖向中控屏,而第三代产品model3则取消了仪表盘的设计,而是通过中控台上一块横向15英寸屏幕完成绝大多数操作,对行业来说马斯克的这一次创举无疑颠覆了所有人对汽车驾驶的想象。



tesla6.0、7.0、8.0版本迭代


上图为特斯拉3个版本、两种屏幕尺寸的UI风格迭代,从视觉上可以分为三大块分解来看其中的变化:依次是顶部导航栏、中间内容区域、底部空调控制区三部分。先看顶部导航栏的变化,6.0用了很重的金属质感,在导航栏底部加了一个类似金属托盘的衬底,试图用形状将导航栏区域与其他区域做区隔,拟物质感加重投影的图标,使导航栏变成系统中最重的一个区域;在7.0的迭代中,取消了底部金属托盘造型,图标的样式上做了精简和优化,去掉了繁重的投影,图形样式上也作以简化;到8.0的时候,在历史版本基础上,对图标样式做了重新设计,图标的细节和造型达到了高度的一致性。


再看看中间内容区域的变化(因为未能找到三个版本相同的界面,故通过其他了解来阐述该区域的变化)。该区域的变化可以体现出整个UI风格的演进,从6.0强质感风格,渐变+大投影+拟物质感;到7.0作为中间的过渡版本,可以看到在设计细节上做了精简,去掉了一些复杂的装饰元素,使整体界面更趋于干净扁平,按钮等控件也减弱了渐变和投影的运用,页面逐渐清爽;到目前的8.0版本,已经将之前的版本遗留问题清理差不多了,首先是去掉了所有的复杂装饰,一切从简,从质感风格拍平到扁平风格,颜色上也变得清爽干净,之前灰白的颜色变为更纯净的白,升级到8.0后页面果然变得轻量、干净、简洁了许多,能更明确的突出产品功能。


最后是底部空调控制区域的变化,和其他两个模块一致,都是化繁为简,一切以突出功能为主,用来做区域分割的衬底、分割线、块面统统取消,改用图标之间间距、形状、颜色来做区域的划分。



teslaUI细节的变化



以上就是对特斯拉近几个版本UI风格迭代的分析,对特斯拉的研究还有更多值得深挖的点,后面可以专门分析一下在产品、交互、视觉三个方面的设计细节,model3横屏版本相较于竖屏版本也有非常大差异的交互逻辑和体验,感兴趣的同学可以深入研究一下。


最后简单的说一下搭载了AliOS的荣威RX5这款车型的IOV系统。荣威RX5搭载的AliOS是阿里和上汽合作下的产物,是新生代互联网智能车机系统中的领军人,无论从交互逻辑还是视觉风格,都有着浓浓的阿里yunOS的缩影。单从这个产品的角度来看,这款车机系统在众多跻身于互联网造车大军的一大片企业来讲,是相当出彩的一个产品,无论从产品形态、交互逻辑、还是视觉风格,都可谓是互联网车机浓墨重彩的一笔,为后续大片企业提供了很多有价值的参考依据。在这里主要分析的是AliOS的视觉风格。



AliOS UI界面



AliOS的UI风格一看就是近几年互联网设计风格的产物,也有着浓厚的阿里视觉风格的缩影。纵向排列的多彩卡片,是yunOS的标志性元素。系统的主色是蓝绿色,和斑马LOGO主色相呼应,有着强烈的家族特征和品牌化;内容上用色大胆,相较于特斯拉来说,AliOS的配色是非常青春靓丽的年轻色,符合荣威这款车型的用户定位;在内容的布局上,没有什么特别的形式,依然使用相对保守不会出错的卡片式做内容的区分,卡片式的设计在车机上是非常易识别实用性特别高的一类设计手法,点击范围广,颜色识别度高,很适合驾驶环境下盲操作。AliOS系统有两个特别值得学习的地方:一是完整性,从事车机设计几年,对于一个庞大的系统设计来说,设计的完整性是特别难保证的,首先得有非常详尽的设计规范,并落实到每一个模块每一个细节,尤其在项目时间紧的情况下,能保证设计的完整和一致性是非常大的挑战;其次是庞大的系统设计需要多人协作完成,从大风格的制定到细分到每个设计师,到交付工程师实现代码,整个过程设计师和工程师都得保证足够的细心和耐心,完成每一个细节的验收和联调。二是动效的实现,在AliOS系统设计中,加入了很多动效,页面的跳转、控件的转换、功能的展现等方面都加入了细腻的动画效果,增加了系统的趣味性和灵动感,也使系统变得具备科技感和独特性。


本文认为AliOS这款车机系统更像是一个平台级的产品,在设计细节上没有过多的定制化元素,虽然该系统最早是为荣威RX5定制,但是从整个系统的设计上并没有发现从荣威汽车中提取设计元素,系统还是保持着比较中规中矩的设计方案,可以适用在更多品牌的车型中,从设计的角度来说是非常平台化的一款产品。后续AliOS和神龙汽车牵手,甚至更多品牌,都是通用性非常强的设计,目前看来AliOS并不会单独为每个车企定制UI皮肤。


目前做车机系统的公司有太多,但大都没有量产的产品,都还处在概念设计中,只能在网络中找到个别公司的设计谍照,所以就不一一做详细的设计分析了,以下是特斯拉、小鹏汽车、游侠、斑马这几家公司IOV的设计对比:


依次为tesla、小鹏、游侠、斑马


目前能找到资料的这几家公司在设计上都大同小异,无论是交互层面还是视觉层面,都有类似之处,特斯拉最早进入大家视野,给未来的车机设计上提供了不少借鉴,很多车企甚至照搬特斯拉交互原型在其基础上换皮,几个版本迭代后在融入符合自己企业特质的元素。在屏幕的尺寸上都清一色选择15英寸及以上高分辨率触摸大屏;视觉设计上基本都以扁平设计为主,个别需要突出的样式用渐变和阴影强调主次关系,内容多以块面形式展现,颜色上每个品牌都有公司特质的系统色搭配深色调背景;细节上,各品牌在页面中需要强调与车相关的功能时,都会有整车3D渲染图,既直观又使得页面饱满有说服力;页面的布局上四个品牌都基本可以做到盲操,点击区域大,页面布局不拥挤,该突出的地方用色彩和图形表现,更为直观。总的来看,目前互联网车企在IOV系统视觉表现层变的设计趋势是类似的,究其哪一个品牌会在众多设计中脱颖而出,不光是要具备强有力的识别表现力,重要的还是要保证系统的完整性。拭目以待更多量产汽车的IOV系统设计吧!


以上就是本文对传统车企和互联网车企车机互联系统做的调研分析,主要从视觉设计的层面对几大知名车联网交互系统进行对比,无论是传统车企还是互联网车企,在视觉设计上还是紧跟了设计了流行趋势,更加扁平化的设计方向,更青睐化繁为简的设计元素,并能够结合车内驾驶场景,使用更易交互、操作的控件和设计元素,颜色上也能结合企业特征提炼系统主色。对视觉空间感的打造,显然传统车企的概念设计要做的更好一些,会利用车身元素结合背景制造纵深感。在视觉设计的表现上,我认为只要把握好用户使用场景,结合车本身的特殊属性,做到用颜色、形状、设计元素、布局来实现互联车机的个性化、科技感、易用性就能做出一款适合该款车的视觉风格。但是在产品需求的定义和挖掘、人机交互的便利性上,每个车企还需要付出更多的精力和时间,毕竟视觉设计是依托于产品本身需求的合理性所做出的锦上添花,还需要各个团队更多的付出才能够打造更完美的互联网车机系统,也期待未来有更多更优秀的人机交互车机产品出现,共同学习!


作者:DaisyShi

链接:http://www.jianshu.com/p/73415fc0601f

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。