汽车人机交互界面设计案例-信息层级的整合设计

详细设计是界面效果塑造与部件细化的阶段，以软硬界面设计的内部迭代设计为主。详细设计阶段的核心设计任务是：（1）硬件界面的数字模型与工程可行性验证；（2）图形用户界面的设计与交互设计技术验证。

在电动汽车人机交互界面设计案例中，概念及系统构建阶段的设计方案输出作为详细设计的输入：（1）信息构架与手势集详细设计，输出图形用户界面（GUI）方案；（2）方案一、方案三硬件界面造型。详细设计的主要设计任务包括：（1）基于数字模型的硬件人机界面造型方案深化；（2）导航系统平视显示（HUD）的信息组织与视觉设计（图3.34）。

3.4.3.1 基于数字模型的硬件人机界面造型方案深化

在方案一、三草图的基础上，构建数字模型，反复调整体量、形面、细节的关系（图3.35）。

方案一（图3.35右），通过直线与折面以传达{简约、灵动}的造型主题，通过覆盖件包裹与材质分色的处理，将显示与控制界面布置于主驾驶的前方与右侧，形成软硬界面集中的人机交互区域。在界面色彩方面采用的是银色与蓝色的搭配，营造流畅灵动的设计感。

图3.34 电动汽车人机界面详细设计步骤

图3.35 硬件人机界面造型方案

方案三（图3.35左），通过硬朗的折线和形面嵌套的造型，突出仪表台“T”型特征，以强调手势传感器与换挡旋钮的交互区域。界面的银色材质与方向盘、侧门板的装饰条形成内饰材质的呼应，传达整车造型{简约：灵动、敏捷}、{科技：智能、优雅}主题。

基于以上方案的数字模型，进行详细的断面校核、人机校核，以确保工程与技术的可行性。

3.4.3.2 导航系统平视显示（HUD）的信息组织与视觉设计

（1）研究平视显示（HUD）的信息组织准则。所谓信息组织即对产品功能、数据元素的定义以及对产品功能模块和操作层级的界定。导航系统提供给用户的是基于空间认知的富信息（information-rich）体验，因此，驾驶者对导航复杂信息的识别和理解是HUD信息组织准则的核心。从识别性角度看，界面布局存在一致性和减少认知循环准则，即驾驶者在不同情境下保持一致性方向感和关联感。例如先锋HUD（图3.36右）显示界面中分为稳定信息显示区域和迭代信息显示区域。稳定信息区域的显示内容和位置相对稳定，如地名、方向、时间等；而迭代信息区域则随驾驶情境变化，实时推送外部驾驶环境信息。如当行驶接近交叉路口50米时，迭代区域会推送预选车道提醒图标，经过后则会消失。从理解性角度看，存在按驾驶者熟知的视觉元素进行信息组织的准则，以构成认知迁移（Cognitive migration）^[33]。例如：宝马HUD导航界面（图3.36左）的限速提醒标志与真实道路的限速标志设计一致；代表距离的数字和指代方向的箭头被布局在同一水平维度，与实际道路的指示牌设计非常相似。

图3.36 宝马、先锋HUD界面

图片来源：宝马bmw.com.cn，先锋pioneerchina.com

图3.37 宝马（右）、先锋（左）HUD信息内容与视觉符号

（2）研究平视显示（HUD）的信息构架。信息构架（information architecture）的目的是将若干信息有机地组织在一起，使用户能够快捷、准确地查询所需要的信息。HUD信息构架分为3个构件：即数据和功能元素定义、信息层级划分、信息模块构建。

构件1：数据、功能元素定义：

数据和功能元素是界面中要展现给用户的数据和功能，即内容。基于HUD导航系统所呈现的数据元素主要是数字、图标、文字和字符，在界面中通过视觉符号进行表征。功能元素是功能需求的转换，也是对数据元素的操作。导航系统的核心功能是目的地引导，在HUD界面上可以归纳成地点信息相关（地名、距离提醒）、航道信息相关（方向、车道选择）、以及其他的行车辅助信息（车速、进程信息提醒等）。

如图3.37左侧图所示，先锋HUD的功能元素分为5类，即：时间信息、地点信息、航道信息、前车锁定以及交叉路口信息，每一类下又进行了功能细分。以时间信息为例，又将功能元素细分为当前时间、到达时间、进度预览3项，界面所采用的数据元素是数字、字符、图标的组合。如通过数字与时钟图标的组合传达当前时间的功能含义；而数字与文字的组合传达到达时间的功能含义；通过旗帜、环形轨道的图标来传达目的地和进度预览的功能含义。如图3.37右侧图所示，宝马HUD的功能元素包括地名、距离、方向、航道、车速、限速以及辅助驾驶，每项功能对应相应的数据元素，如车速提醒对应的是数字而方向提醒对应的是图标。由此可见，先锋与宝马HUD在数据和功能信息的定义上具有一定共性，例如距离、方向、地名提醒等，这些元素构成了导航HUD的核心功能。

在电动汽车HUD导航设计过程中，定义信息内容，确定功能元素为方向、距离、地名、航道、预选车道、限速提醒。

构件2：信息层级划分：

划分信息层次即将功能元素与数据元素所组成的信息内容进行层级区分，图3.38所示。HUD导航界面的第一层级功能元素是方向引导；第二是距离提醒；第三是地名提醒；第四是时间、车速、航道提醒等驾驶辅助功能；各个层级采用不同的数据元素。例如在先锋HUD界面中，重要的功能元素（方向、距离、地名）以信息组合框的形式稳定的呈现于界面的中心位置；而在宝马HUD界面，方向与距离信息处于界面中心位置。由此可见，两者在信息层级划分上具有共同点，即方向、距离、地名为重要功能信息，布局于界面中心区域。

图3.38 信息层级

电动汽车人机交互界面设计案例中根据HUD信息层级的划分，将方向、距离、地名、航道、预选车道、限速提醒功能元素根据层级关系归纳为主航道信息相关、辅助信息相关，目的是为信息模块的空间布局提供依据。

构件3：信息模块构建：(www.xing528.com)

所谓信息模块构建，即将具有相似意义的功能、数据元素在空间布局上以模块化的处理方式分类组织在一起。从认知经济性（cognitive economy）^[34]的观点来看，通过模块化来归纳多样的视觉信息可以节约驾驶者有限的认知资源，且对视觉信息的处理更具及时性和准确性。以先锋HUD界面为例，信息模块分为时间信息、地点信息、航道信息，这些模块分别由不同的功能元素组成，例如航道信息模块包含了交通信号灯、实时路况、前车距离提醒等功能元素，如图3.39左侧图所示。宝马HUD界面的信息模块可以分为导航系统和辅助驾驶两个模块。导航系统模块主要由目的地名称、距离提醒、航道提醒、进程预览等功能元素构成，而辅助驾驶模块则由车道保持、主动巡航、限速提醒等功能信息组成，如图3.39右侧图所示。由此可见，信息模块是对信息内容的整合，而信息层级的划分则是信息模块界面布局的依据。

图3.39 先锋信息模块（上）宝马信息模块（下）

电动汽车的平视显示设计，将界面划分为两个模块，即主航道信息模块、辅助信息模块。主航道信息模块所包含的功能元素对于用户的驾驶决策具有重要意义，因此布局在界面的中心位置，与驾驶主视野重合，结构稳定，由方向、距离、地名、航道提醒功能组成。而辅助信息模块呈现的是迭代信息，只有在需要显示的情境下才会显示，因此布局在界面的右上方，以避免与A柱形成干涉。例如在超速行驶的情境下才会出现当前车速和限速提醒图标。图3.40所示电动汽车HUD导航信息组织。

（3）导航系统平视显示（HUD）的视觉设计策略。整体上，遵循视觉设计的通用规则，例如界面的清晰性、可读性、风格一致性、避免视觉噪声（Visual Noise）、具有审美愉悦感等。布局上应注意HUD的显示位置，投影在前挡玻璃易形成驾驶主视野干涉，因此视觉符号设计应采用简洁的形态，尤其注意大小比例，避免与背景物体形成冲突。而外置的第三方屏幕可能布局于驾驶主视野之外，易形成驾驶视线偏移，因此在设计时应注意视觉元素的稳定性，尤其在显示的位置、颜色上应具有统一性。如图3.41所示，根据感性工学对宝马、先锋HUD界面，进行字体、线型、辅助视觉符号、色彩、辅助色块等界面视觉元素的设计分析，反映其不同的设计策略^[35]。

图3.40 电动汽车导航HUD信息组织

笔者设计

图3.41 宝马、先锋平视显示视觉元素分析

根据以上定义的功能元素进行电动汽车平视显示视觉符号的设计，采用的数据元素是数字、字符以及图标的组合。遵循理解性原则，按驾驶者熟知的道路标志表示车道提醒、限速提醒等功能，如图3.42所示。根据人机交互界面总布置图，HUD显示位置处于驾驶主视野，为了减少干涉，遵循视觉设计策略，对箭头符号、数字、字符的大小比例、颜色均进行了反复推敲，如在处理视觉符号的比例关系时就以信息层级的划分为基础，方向提醒功能为首要信息，因此箭头符号相对于距离、地名提醒图标在主航道信息模块中所占比例较大。在处理航道提醒与路面变化关系时，采用的手法是通过三个渐变透明度的色带符号来表现道路延伸的远近空间关系。图3.43为界面低保真原型，图3.44为软硬界面整合的高保真原型。

图3.42 视觉符号

笔者设计

图3.43 低保真界面

笔者设计

图3.44 软硬界面整合的高保真效果图

笔者设计

详细设计阶段的案例分析表明，随着软硬界面设计对象的分解，设计活动呈现出软硬分化的特征。因此，设计活动发展包含整合与分化、分化与整合，是一种整合与分化构成的发展进化过程域特征^[36]。

3.4.3.3 详细设计的逻辑线索与时序节点

详细设计的案例分析，经历基于数字模型的硬件人机界面造型方案深化、导航系统平视显示（HUD）的信息组织与视觉设计的关键步骤，反映出详细设计的逻辑线索与时序节点。概念及系统构建是一种“整合”的设计；详细设计是一种“分化”的设计，这种整合与分化的设计交替，驱动软硬界面造型与界面、可用性与体验的进化。以案例分析和理论研究为基础，研究提出了详细的逻辑线索与时序节点图（图3.45）。

图3.45 详细设计的逻辑线索与时序节点图

逻辑线索，从方案演化节点到详细构造节点，详细设计的设计逻辑是从硬件界面详细设计到数字模型；从软件界面详细设计到高保真原型。通过软、硬界面分化的界面细节构造，逼近设计问题的最终解。

基于方案演化节点的设计方案输入，软、硬界面的详细设计任务分化。硬件界面分解为部件造型、灯光、材质、色彩、工艺处理等设计子任务；软件界面分解为交互行为、显示、控制、交互流程等设计子任务，在本书的案例中主要研究了导航系统平视显示的设计任务，总体具有分化与整合的特征。

时序节点，图3.45中，数字模型和高保真模型最后整合收敛为详细构造节点。通过数字模型与高保真原型的评估整合详细构造方案。其中，发散、变换、收敛节点连接成时序结构。通过硬件界面造型方案深化以及工程可行性验证，软件界面视觉与交互流程详细设计，交互技术的后台开发，软、硬界面的产品方案逐渐成熟。

值得注意的是，整合设计流程中，硬件界面设计与软件界面设计是一种整合与分化的设计活动，这种现象也反映在设计逻辑属性和时序属性中。