车载信息娱乐系统的图形界面设计研究 - UXPA中国2015行业文集

2016-08-03 | 文集,入选论文

 

车载信息娱乐系统的图形界面设计研究

徐杰,傅炯
上海交通大学

 

摘要:研究目的在于通过分析车载信息娱乐系统(车载系统)涉及的硬件与软件的色彩、造型与肌理设计,寻找方法提升其整体的软硬件视觉协调感,从而改善车载系统设计在当下缺少的高级感。研究过程中,先借对移动系统界面的文献研究,探讨了作为软件部分的用户图形界面的视觉变化趋势以评估方法。深度访谈调研中,探讨了作为硬件部分的内饰、中控等部分在色彩、肌理方面以及与车载系统的搭配给车主带来的感受。分析这些研究的结论后最终提出一款视觉上高度协调的车载系统图形界面设计方案,从而尝试理清车内软硬件设计间的关系、寻求未来车载系统设计形式上的突破。

关键词:车载系统,图形界面,交互设计,协调感

 

1. 引言

车载信息娱乐系统(in-vehicle infotainment,IVI,以下简称车载系统)是交互方式多样、图形功能强大的智能系统。近年来谷歌、苹果等科技公司的产品线延伸进汽车行业,为原本封闭保守的车载系统迎来了竞争的新热潮,它们对未来车载系统市场格局的影响仍是未知数,但车载系统市场的格局与产品形态定将会迎来一次大转变。高端车市场中,如何通过独到的车载系统设计帮助自己占有一席之地是各大厂商值得思考的问题。[1]

 

图1-1常见的厂家与对应车载系统

 

本次研究目的在于分析车载系统图形界面与汽车内饰环境这两者间的设计搭配,通过营造具有相同设计语言、视觉上高度自然的车载系统产品来为消费者营造协调感、高级感的体验,也为设计工作者提供遵循相同逻辑展开界面设计与内饰设计的协调设计思路。

 

用户是需求车载系统产品中的高级感体现的。相关机构年报显示,2014年度国内多内乘用车总销售数量达到1970万,同比增长了9.89%。这样的市场规模扩展将使得消费者在有朝一日满足产品本身基本的功能需求后,提出高于功能层面的心理享受需求的。而眼下国内车载信息娱乐系统发展太快,客观上导致其视觉设计完善度一直很低,时尚性不足,高级感不足,甚至连美观都没有解决。过去的设计活动中设计师对于汽车内饰的CMF(Color,Material& Finishing,色彩、材质、肌理)方面有着较为详尽的探讨,而在对应车载系统图形界面的设计上显得不同步、不搭配,存在搭配不合理、缺乏协调感的现象。鉴于眼下车载系统市场面临的发展格局,有必要加快对车载信息娱乐系统设计的探索。

 

2. 车载系统图形界面中的协调感

2.1车载系统图形界面定义

图形用户界面(GUI,Graphical User Interface,以下简称图形界面)是屏幕产品中视觉体验以及互动操作的部分,控制显示设备与输入设备,利用多窗口、菜单和丰富的图形构成的图像化用户界面[2]。车载系统图形界面目前的主流形式是位于汽车中控台位置中央的10英寸左右的液晶屏幕。相对于加装屏幕的后装车载系统,原装车载系统界面是本次研究的主要目标,原因在于其具有保持品牌设计语言更好实现协调的优势,也在于使用原装系统的车一般都为中高档车。

 

2.2车载系统图形界面与内饰坏境间的协调感

协调感主要为车载系统界面与车内环境在视觉上的融洽一致、以及风格上的对应。具体包括在色彩上具有合理的搭配、在材质上具有相近的光泽和肌理,并在整体视觉效果上有着贯穿全局的清晰设计语言。本次研究中提到的协调感的对象有:视觉界面(屏幕内)、控制面板(屏幕外的面板)以及内饰这三者。

 

协调感由能够使得车载系统产品产生一种高级感与专属感,是一种产品具有高品质的体现,给用户带来高档的享受,这是迎合当下国内消费者追求直观外在美意识的形态的。同时,根据格式塔理论,协调感营造下可能带来的视觉连贯性能够提升驾驶者对车载系统的认知效率,降低车辆使用过程中的压力与负担。故营造协调感从车辆驾驶的安全性问题上来考虑也是一个有意义的话题。[3]

 

3. 车载系统图形界面软件与硬件设计的研究

3.1对软件部分的视觉要素分析

3.1.1研究思路与过程

为解车载系统中析作为软件部分的图形用户界面的各要素,此处通过建立系统的方法得到评估视觉界面设计的关键词系统。笔者选取了手机系统界面作为最初文献研究的对象,原因有二:一是手机系统界面比车载系统界面更具规模与活力,有着大量的设计工作者不断推出最新的产品,是能够反映当下视觉设计的通用语言与流行趋势的,这对于从封闭开始走向开放的车载系统市场是有着很好的参考价值的。二是手机界面在功能尺寸上与车载系统接近,安卓与苹果也在开发以手机系统为本体的适配式车载系统界面,未来两者的边界将更接近。

 

基于本次研究探讨协调感设计的目的,研究手机系统图形界面的设计是高效而有益的,其中存在着许多适用于车载系统界面设计中的通用要素。而对于手机系统界面与车载系统界面间的差异也将在之后的环节中加以考虑。

 

在这一环节中所收录的手机界面有四个线路,分别是苹果ios、三星andorid、索尼android与小米andoriod(MIUI)。在此具体整理了前两者:

(1)苹果:

苹果ios作为一度领跑业界的代表,最具有历史意义的一次升级是在2013年9月的ios7正式版中,其图标迎来了从拟物风格到扁平化抽象风格的巨大改观。在图标上使用了单色填充或弱渐变取代了原来富有材质的光感图标,采用全新的设计来抽象化或符号化表现者亦存在。

 


图3-1 ios各个版本图标

 

图标之外,ios弱化了界面立体感的呈现,将原本通过阴影与透视营造的强烈层级关系体现转变为使用半透明模糊背景的弱程度层级体现。色彩上整个界面中的阴影与黑色大幅减少,高明度色彩图标的运用让整个界面鲜亮明快。

 


图3-2 ios6(左)与ios7待机界面比较

 

在待机解锁界面下同样可以看到消除立体、削弱层级的变化思想体现。在交互方式上,增加新的上推菜单并通过一个折现箭头在屏幕下端提示。

 


图3-3 ios6(左)与ios7解锁界面比较

 

 (2)三星:

2014年12月推出的三星android5.0系统中也传递出了反应图形界面设计趋势变化的重要信息。以主界面的变化(4.4.2到5.0)为例,画面中的阴影消失不见,图标保持着与原来相似度的琴体下也趋3于扁平。

 


图3-4 三星android4.4.2(左)与5.0主界面比较

 

拨号界面与原装计算器应用界面统一取消了数字按键的边框并使用了白底黑字(计算器部分具有彩色)的设计,产生了与原来截然不同的视觉效果。值得一提的是顶部用以选取分页面的图标高亮显示也由提亮图标变成了图标换色加上细线的弱化高亮显示的方式来呈现。

 


图3-5 三星android4.4.2(左)与5.0计算器界面比较

 

3.1.2整理并归纳用以描述视觉界面特征的关键

总结以上这些不同品牌的手机界面在版本更新中的改动可以捕捉到一些用以描述手机图形界面特征的关键词,将它们经过几次整理概括后得到三个方向下的六个关键词,具体如表格中所示。

 

表2-1 用户图形界面要素关键词与具体涵盖内容

 

这些关键词基本涵盖了一个手机系统图形界面的各个要素,也可用于评估不同系统在视觉要素的具体表现。而本次研究最终的研究对象车载系统在功能需求、使用环境等方面上是与手机系统存在着不同,例如:

(1)行驶或短暂停车时的操作需要可靠的准确性与操作效率;

(3)操作依赖触觉反馈,不适宜大面积触控;

(4)更多实体键与更少的层级来实现功能;

(5)屏幕的亮度对驾驶者的影响以及对环境明暗变化的适应;

(6)屏幕边界外存在的面板以及内饰部分的色彩与肌理设计。

 

考虑到以上的车内环境特征之后得到用以描述车载系统图形界面特征的关键词系统:

 

表2-2 用户图形界面要素关键词与具体涵盖内容(车载)

 

 

3.2对硬件部分的色彩、肌理设计研究

3.2.1基于深入访谈的消费者研究

本次车主访谈的目标是听取车主对于自车车载系统与汽车内饰协调的感受,也包括询问一些车载系统功能上的使用感受、美观程度上的评价、理想的设计配置等问题。访谈前确定了寻找被测车主的限制:一线高档车的新车车主。这一档车厂是业界中重视车载系统研发、拥有自己车载系统品牌的一类,车主也往往对于车内各处对于技术与美感的体现会相比一般人更加重视。

 

最终通过笔者相关亲友渠道寻找到合适的车主八名,情况分别如下表格所示:

 

表3-1 被试车主状况表

 

访谈的问题设计分为三个部分,第一部分为缓和气氛,了解一些购车信息与生活状况;第二部分引入话题,谈及车内车载系统的使用情况与材质和色彩;第三部分告示研究目的并询问关于内饰与车载系统协调性的核心问题。整个访谈时长20-30分钟左右,其中遵循车3主自愿参与、自由回答的原则,尽可能得到车主最真实自然的回答并作笔录。

 

在结束全部访谈之后将笔录进行多次整理与阅读后,能够寻找到一些对研究目标而言值得关注的点,主要有以下七点。

 

表3-2 车主重要意见表

 

3.2.2针对车内色彩与肌理设计实地调研

第十六届上海国际汽车工业展览会不久前在本市举行,吸引来自18个国家和地区近2000家国内外知名企业,展出整车1343辆。前去2015上海车展做实地调查前,笔者确定了实地调查的目标:观察展出新车的外观与内饰,思考有哪些材质与色彩可以从硬件使用到屏幕中去。

 

本次车展过程中笔者游历多个整车馆,试坐了宝马、奔驰、捷豹、凯迪拉克、DS等诸多内饰设计质量较高的车辆,进行对色彩、材质以及一部分灯光效果的近距离观察,最终整理得到了十六个值得深入思考,实现本次研究中实现车载系统协调感设计的可能方向:

 

表3-3 十六个前沿汽车设计方向

 

4. 车载系统图形界面设计方案

4.1设计过程

整个设计方案是车载系统软硬件协调设计的一次探讨,将内饰设计与界面设计自始自终保持在同一逻辑之下。完整的设计流程包括草图、筛选、细化、建模、调整、制作模型等过程。过程中出现过两个深入发展的设计方向:“全皮料环境”与“连接屏幕的按键”。前者的关注点在于通过皮质材质的衍生来营造协调感:在显示屏的背景显示上与周围内饰面料所接近的皮纹在控制器的处理上则采用将按键植入皮料下表面的手法。连接屏幕的按键的实体造型与色彩与屏幕内的虚拟形态与色彩的同一互通,高度准确互动。

 

界面本身应该具有的逻辑性也是对车载系统可用性进行评估的一个重要参考。结合相关理论与调研环节中对用户行为的观察,可以得到一些设计图形界面时的依据[4]

(1)功能快捷键是比较符合用户使用习惯的形式,访谈中部分用户流露出对触摸功能在准确性上的担忧。不少用户希望精简快捷键,因为他们可能具有两点一线的生活形态,常用的功能实则不多。

(2)经过观察,箭头、旋钮、加减号等实现调整、选择操作的按键是符合用户心智的形式,用户往往能通过自己的经验来进行对这些按键的正确使用。

(3)车主反映驾驶过程中需要集中注意力,不会去刻意看车载系统,往往使用方向盘上的快捷键或者等停车时再操作。因此简化步骤的设计原则在这里更加重要。

 

笔者在这里设想的系统逻辑为一个三层的关系,用以实现图形界面的排布并引导后续的内饰与面板造型设计。这个逻辑之下将屏幕作为“显示层”,将紧贴屏幕的按键用作实现选取和调节等操作的“操作层”,将快速选择功能的按键安排在最外围作为“功能快捷层”。如此一来用户实际需要掌握和学习的操作系统逻辑便成为了“先用外围按键选择功能,再内围按键进行操作”或者“只使用外围按键一键操作”这样的模式。

 

图4-1 DUALINK车载系统图形界面逻辑示意图

 

根据这个层级逻辑,对控制器层次的理解在此处体现在:六条长条形按钮中靠外侧的六个半边作“快捷功能层”,从左边顶端起分别表示着六个快捷的功能通道,并且分别用图标表示。六条银色的长条形按钮中靠内侧的六个半边则算作“操控层”,实现选择和调整的操作。

 

图4-2 DUALINK车载系统图形界面与层级逻辑的对应

 

4.2最终方案

图4-3 DUALINK车载系统渲染效果图

 

综合考虑视觉效果与操作功能上的要素,最终完成的设计方案如下图所示。屏幕背景使用了周围内饰材质上使用的碳纤维纹纹理,同时具有一定的光感,使得整个界面在视觉效果上有了软硬件在材质上的交融,增强了界面的协调感。在配色上主要使用反差大的黑底白字,结合少量的红色主题色。形态上在屏幕内的突出与实体按键互相连接组成了完整的狭长条状形态。整体的曲线走势都来自屏幕中央,六条按键的分割线也沿着红色高亮部分的下曲线走势,使得整套系统的系统处在一个有主要形体引导的状态下。待机的数字字体选择了较为时尚又富有科技感的极细黑,增加了少量阴影确保了可读性。

 


图4-4 DUALINK车载系统模型实物图

 

屏幕上下部分与图形界面关联较少,不作重点设计,用较为简单的形体表示,重点研究与设计部分主要为屏幕与两侧。

 


图4-5 DUALINK车载系统图形界面

 

以下是各个主要界面介绍:

(1)导航界面

点击快捷功能层的导航按钮进入导航。这时可以使用 “加”与“减”或“快进”与“快退”按键进行光标的移动,并通过“暂停/继续”按键确认一级“返回”按键回到上一层。根据前期研究中大量车主两点一线的行车规律,导航的目的地往往是可以根据挡墙时间点和位置来确定的,因而可以连按两次“导航”案件开始将自动选择的位置设为导航目的地并开始导航。从设计的合理性与用户的认知角度而言,这样使用频率高的操作是值得使用特定专属的简单输入来实现的。[5]

 


图4-6 DUALINK车载系统图形界面-导航 

 

通过“加”和“减”的操控层按钮便可以实现地图的缩放功能。

 


图4-7 DUALINK车载系统图形界面-导航 显示比例调整

 

(2)收音机界面

按键贯通屏幕的视觉设计风格在这里的收音机界面中,一部分虚拟按键延伸部分上形成了对应宽度的收音机调节刻度,确保了整个视觉风格时刻的一致。这里的“加”与“减”用作收音机的音量调节,之后的CD音乐功能中也起到相同作用。可以只使用一个功能键实现选择四个预存的频道。

 

图4-8 DUALINK车载系统图形界面-收音机

 

(3)CD音乐界面

基本同收音机界面,“快进”、“快退”有着直接功能。快捷功能区的CD音乐按钮按两次以上是切换CD。

 


图4-9 DUALINK车载系统图形界面-CD音乐

(4)通话/语音界面

在这个界面下通过触控输入数字,或者通过“快进”、“快退”选择常用的联系人。触摸屏幕中间的虚拟按钮或按下“暂停/继续”按键可以拨通号码。使用“减”来撤销输入。

 


图4-10 DUALINK车载系统图形界面-通话

 

再按一次“语音/通话”按键可以进入语音功能,这时候说出语音指令可执行想要的操作。

 

图4-11 DUALINK车载系统图形界面-语音

 

(5)行车记录界面

按一次“行车记录”快捷功能键显示行车记录的工作状态,再按一次可进入浏览历史录像记录。

 


图4-12 DUALINK车载系统图形界面-行车记录

 

5. 结束语

本次研究通过调研和方案探讨了车载系统图形界面设计,而车载系统市场在未来将会有更大的发展空间,功能和形式上的设计也会有着更多的可能。作为与内饰紧密相连的部分,车载系统图形界面在实现自身美观的同时要考虑与内饰环境间的协调性问题,这是高端车产品能否给用户带来高级感体验的一个重要因素。

 

未来笔者的进一步研究的方向可能有两点:一是进一步考虑触控操下的交互模式以及对图形界面的影响,二是考虑更多的功能层面要素问题,实现车内软硬件在更大范围内的协调一致、打造高度专属定制的车内设计。也希望同行们能够从中有所受益,提出关于这个问题更独到的看法。

 

参考文献

[1]  殷建红.国内车载娱乐信息系统发展现状及趋势[J].汽车与配件:技术与市场,2009(11):40-42. 

[2]   [美] Alan Cooper.李松涛译. About face3交互设计精髓[M].北京:电子工业出版社,2008

[3]  [美]唐纳德•A•诺曼.付秋芳,程进三 译.情感化设计[M].北京:电子工业出版社,2005

[4]  [美] Dan Saffe.陈军亮,陈媛嫒 译.交互设计指南[M].北京:机械工业出版社, 2010

[5]  马钧,谈行执.车载人机界面可用性评估方法研究[J]:上海汽车,2014,2:16-19

 

0   喜欢

操作成功!
请登录您的邮箱获取新密码,请尽快修改您的新密码!