车联网设计之路

汽车产业链正在进行一场自内而外的革新运动。随着自动驾驶技术的逐步成熟,汽车也正在从机械的1.0时代和电子的2.0时代,步入智能化的3.0时代。

过去人与汽车的关系是【人适应汽车】,现在变成【汽车服务于人】,用户从【驾】车演变成【玩】车,汽车与互联网的结合,正在变为载着“最强大脑”的巨型智能硬件,四个轮子+一部超强运算计算机,变革了用户的驾驶体验;互联网与汽车制造业的结合,更是加速了工业产品数字化转型和落地的可能性,改变了汽车产业的各个方面。

在3.0智能汽车时代,智能化的汽车操作系统作为决定用户体验的核心因素,各大主机厂也纷纷投入精力自研操作系统,押注于软件带来的升级服务成为新的盈利点,希望将对汽车的控制权、用户的数据掌握在自己手中。身处于车联网行业,我谈谈个人对车联网操作系统设计趋势的见解。

一、快

在行车场景下,面对复杂的路况,用户的注意力和视线必须聚焦在前方路面,如何更快速的在硕大的屏幕上快速找到想要的功能,与汽车进行更自然的互动,系统能更高效、更快速的做出反馈,这对操作系统的人机交互布局提出了很高的要求:

1.1、功能分类排序,最常用应用放置在最醒目、最易触达的区域;相同类型的功能整合;突出地图、多媒体的控制和显示;

图1.交互框架对比图

车载系统中,用户最频繁使用的应用为导航、多媒体、车辆、语音、通讯、更多应用等,在交互布局上应将此类功能放置在视线核心区,并将其排列优先级。地图作为用户驾车场景下最频繁使用的应用,在页面布局中应最大程度展示,进入其他应用时,也建议以小窗口显示地图的导航信息,并可以点击放大。多媒体也是行车场景下最易使用的应用之一,在交互布局上也应有快速控制播放器的入口,便于用户暂停播放或者切换音源。图1为三家新能源车企的车载智能系统,均将地图导航置于人机交互的核心区,并且最大程度显示地图信息;多媒体、通讯、车辆等作为次一级常用功能,整合归类于同一容器,通常以图标导航栏或者widget部件窗口展示。可以看出虽然三家车企的页面结构不同,但是都是遵循一个思路:功能分类、页面分区(视觉重心和人机工程学)、地图最大化、重点功能整合这几个重要步骤。

1.2、减少层级关系,页面流转顺畅有秩序;

驾驶的特殊场景下,车载系统需尽可能在主界面就完成大部分操作需求,需要进一步设置时,再跳转二级页面。二级页面的框架定义要清晰明了,简化操作流程,避免出现大量需要用户设置的选项;在页面之间切换时,避免将入口定义太深,需要用户不断重复【下一步】,返回时还要重复【返回】才能回到主页面。每一个应用都需要遵循通用的二级页面框架,在定义框架时要尽可能满足每一个预装应用以及第三方应用的需求。页面间的跳转也要讲究一致性,是转屏、还是浮窗,需要全盘考虑。

图2.二级页面布局对比

图中列举的三家新势力造车的车载系统,均使用了浮窗的形式进入二级页面,浮窗的特点在于更轻量,即用即走,关闭即可退出二级,不需要逐层返回;但也会出现浮窗叠弹窗的情况,会产生界面的错乱感,以及对第三方的适配性会差一些。不能单纯的评判浮窗的形式弹出应用二级,还是页面跳转进入应用二级孰好孰坏,需根据整体交互框架的定义和产品需求去全局性定义各个应用的弹出方式,只要保持一致性和秩序感就好。

1.3、凡事有交代,件件有着落,事事有回音;

汽车操作系统作为决定整车体验的核心,是驾驶者的贴心助理,对于用户的任何形式互动,都要做到事事有回音。一是在页面布局上,避免有“无价值”的【展示信息】,一个页面中,很多地方只可看,不可点,或者点击无响应,对于行驶中的用户是非常不友好的;二是在界面设计时,任何可交互可点击的区域,都要有设计反馈,包括图标的设计必须符合人机工程学,人的手臂长度大约为90厘米,手指平均宽度为1.5-2.0厘米(45像素),大拇指能达到72px,图标的大小不要小于单个手指触控范围。在点击样式上,也要有明显的反馈,比如放大、弹跳、变色或者加背景等形式;三是事件反馈上,通过细腻的动效给用户以成功失败、正确错误、完成取消的反馈,增加页面的设计细节和体验。

图3.material design图标点击样式

1.4 UI可视化程度高;

车载系统的UI风格定义和手机app不同,APP可以根据品牌和服务,设计充满多样性、个性化的视觉风格。但车载系统的设计风格,需要考虑通用性和集成性,还有驾驶场景的特殊性,在风格的设计上,以可视化作为视觉风格的标准,在增加品牌独特化,追求视觉炫酷效果的同时,需要考虑用户特殊场景下的界面识别度,在展示产品功能的基础上,化繁为简,不过多展示装饰化元素。那车载系统如何设计出又精美、又个性、识别度又高的界面风格呢?设计细节决定页面的精致感,字体、配色、图标、图形化、控件、动效均能体现高品质的设计感。无论是扁平化,还是质感化,都可以体现细腻的界面设计。最重要的还是设计元素的一致性,圆润还是硬朗,需要贯穿于整个设计细节,避免有些样式使用大圆角,有些使用直角,这就容易造成整体风格不统一;避免图标设计样式不统一,有些是实心icon,有些是描边icon,同一大小的图标线宽粗细也需要统一。图中是在进行界面设计之初Mood Baord情绪版创意收集,在其中寻找设计灵感并提炼关键界面元素, 不断优化设计细节,产生精美、可视程度化高的车载系统HMI界面,这里暂不具体展开描述了。

图4.mood board情绪版

二、多

用户在使用车联网系统时,除了关注系统的执行速度【快】之外,车载系统给用户带来的还有很【多】。出行场景下,车内不仅仅有驾驶员,还会有副驾、后排成员,不同身份的用户对于车机大屏的需求也不一样。车载系统需要移植用户对于手机的使用需求和习惯,在车内使用车机完成手机能完成的所有任务,并给予更多的服务和价值。

1.1、多应用;

为了不断满足用户的需求,车载系统需要集成更多更丰富的应用和小程序。不仅要求APP更好适配车机,还要在未来自动驾驶的趋势下,研发更多的车载应用,为车辆网赋能。这考验了庞大的互联网生态网络,车辆开放越多的数据,车联网越能提供更全面的服务,不仅是车辆的维修保养,还包括出行服务、支付场景,本地生活、移动社交、游戏等。

图5.大量的android应用

车载系统是用户在封闭的场景下沉浸式的驾车体验,驾驶员会更专注的聚焦于某个功能并快速的触达,希望每一个应用的进入、返回保持同样的操作逻辑,并有着一致的界面风格呈现。所以在多应用的趋势下,车载系统的设计需要秉承完整、一体化的使用流程和用户体验,在信息架构、导航方式、视觉界面上,需有一套详细完整的设计规范,让第三方应用更好的适配车机系统,保持体验的一致性。除了基础的色彩、文本、图标、动效、框架等硬性规范外,还应该有排版、图形、留白、层级、结构、窗口等规范的定义。这里提出模组化控件的概念,车载系统定义一套强大且完整的组件库,一套针对于设计师,一套针对于研发,第三方应用像搭积木一样快速搭建界面,并实时预览效果,既能快速自查,又能降低研发成本,最终保证整个系统使用的一致性。未来车载系统的设计规范,也会像IOS和Android一样,通用性、扩展性、一致性更强。下图为Uber的UI元素设计规范,感兴趣的可以详细了解细节:https://brand.uber.com/

Uber UI elements toolkits

1.2、多主题,场景化;

汽车的内饰结构决定了操作大屏的摆放位置和角度,受日间光照的影响,屏幕会出现不同程度的反光,导致信息阅读性降低,不利于用户视觉的聚焦和快速点击。为了有更好的视觉体验,车载系统定义了浅色模式、深色模式的主题切换,分别用于黑白天界面的显示,用户可以自定义主题切换,也可以根据日落时间自动切换主题。除了屏幕自身人机工程的因素决定了车机系统推出深浅色模式外,个性化设置也是提升用户体验的必要条件,随着智能汽车操作系统的普及,消费者对于定制的需求越来越强烈,车作为大号的电子产品,除了环境因素外,更要充满个性化,除了更换系统色彩外,车机系统还可以结合场景化提供不同的内容和个性化推荐,比如结合生活服务场景,分析用户的偏好,在功能入口显示不同的内容;或者在用户生日或者纪念日时,在系统界面以对应的祝福主题展示。尽管有很多自定义主题的需求,以及界面多样化的展现形式,但必须注意的是,汽车驾驶的特殊场景下,必须保证内容第一的原则,所有主题的设计不能干扰车载信息的展示,克制化的增加主题设计,一旦过于开放个性化,会严重影响用户体验及界面的美观性,预留几处可修改,可运营的入口即可,还是以用户在高速驾驶的情景下安全高效的使用系统为一切个性化的基础。目前特斯拉,小鹏、蔚来,包括车联网平台Android Auto以及Carplay,都使用了深浅色主题,相信未来会有更多个性化的主题出现,提升车机系统的用户体验。

图7.tesla黑白天主题

汽车智能座舱的操作系统还有很多可以挖掘的设计细节,未来也会像手机OS一样,形成一套非常完整的设计体系和规范,践行者特斯拉在不断的迭代和优化着车载系统的用户体验,还会有更多的颠覆者创造智能化,让汽车更懂人性。未来可期,智能化的操作系统势必会成为所有主机厂在百年汽车的发展长河中,最具竞争力的“武器”,期望未来每一个用户都能享受智能网联化在汽车行业的颠覆带来的个性化服务。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349