HMI汽车全设计流程复盘

原文：www.zcool.com.cn/article/ZMTM3NDkxNg==.html#kuak

今天为大家分享的是「HMI教程分享」。文章来源于设计师hgege根据设计流程全复盘，希望此整理的经验过程与方法论对大家入门HMI行业有所帮助。

HMI汽车全设计流程复盘

smart design system 服务于smart#1新一代智能化车载系统，通过前期的设计思维的分析、0到1搭建smart design system 车载自身控件库、到运用提供规范设计指南于组件化搭建来协助设计师与工程师使用，再到更新迭代整个设计流程全复盘，希望此整理的经验过程与方法论对大家入门HMI行业有所帮助。

从以下五个关键点入手:

(一)分析背景需求 

(二)提炼设计语言 

(三)搭建设计规范 

(四)原子组件协作 

(五)更新迭代

(一) 分析背景需求

1）以系统化的视角来分析业务

首先大部分我们在接到项目后会快速的把需求转化为界面，但是如果缺少分析和思考逻辑缓解，设计就多会停留在视觉表面，设计思维被限制在方法论里，甚至需求偏差。所以要以找到设计策略为目的做项目背景分析。（有些分析背景，但是也不知道分析完是为了什么），所以同样一个事物，独立的看，和把它放到一个系统中看，我们可能会有不同的理解。

我们可以把这个系统转译成如下模型：从抽象到具象，我们把整个模型分为三个指标类型：

1、核心指标：整个项目为之负责的目标，是评判所有项目行为的基本准则。

2、策略指标：影响核心指标的所有变量集合，是基于产品策略拆解出来的二级支撑性指标。

3、行为指标：随着策略指标的精细化，产品的策略指标最后都会对应到一个或者多个具体的用户行为指标。

我们可以通过模型找到影响业务核心指标的重点发力板块，也可以通过最底层的行为指标去反推上层的策略指标，进而量化设计价值我们也就可以在这个系统中，找到对核心指标影响较大的策略指标。以smart汽车为例，他们分别是：

1、核心指标：smart品牌全球合资公司现由梅赛德斯-奔驰和吉利汽车集团共同持股，smart以往是微型车，定位轻奢、年轻化，继承以往的品牌市场定位， 应市场发展，新一代smart力作是融入科技化、未来、潮流等品牌特性，打造一体的紧凑型纯电SUV车型。

2、策略指标:复用吉利的SEA浩瀚架构系统能力+品牌特征

3、行为指标：整车软硬架构布局 、内外造交互媒介 、创新亮点设计形态等

由此我们可以引入下一个步骤。

2）系统化流程定位人群目标

通过制定产品策略后，接下来是定位我们的目标群体。

B端产品服务于企业用户，根据车企提供相关车主数据，通过：

1、通过制定研究问卷投放，包含基础、社会、行为、消费、心理属性5个模块约60道题制定，然后进行定向投放与数据回收。

2、基于回收数据库数据，首先通过因子、聚类分析进行人群分类、后针对每一类车主进行详细的数据分析，描绘用户画像。

3、再通过研究投放问卷对车辆、城市、地域、购车类型进行配额，使研究样本符合中国汽车市场现状。

4、主要类型描绘人群，从人群的价值观念、基础属性、行为属性、消费属性等四个维度。

5、结合产品策略总结归纳显性人群的群体特征定位此产品的目标群体。

eg：smart车主人群在年轻化女性群体，理想汽车品牌依靠增程式（油转电）7座，精准的定位人群就是在BBA的奶爸第二辆车等。

3）以系统化的思维规划设计策略

基于业务诉求和用户人群特点，我们再结合服务模型，我们可以一步步推导出我们的设计策略

1、现存问题，从现存的出发点/问题分析，提取关键因素（我们最终是要面对/解决**问题）

2、结合业务目标与能力，明确项目目标，分析当前业务能力

3、服务模型，分析业务和用户对车载端的诉求，进而指导设计策略落地

4、收敛回归，价值-载体-用户收敛组织，进而明确设计策略

5、归纳设计策略，提炼总结出关键词，作为基础设计的切入点

smart #1通过上述方法，提炼纯粹、热爱、惊喜为设计关键词进行设计，通过以此绘制情绪版，为提炼设计语言做祭奠。

(二) 提炼设计语言

设计语言就是：把设计作为一种沟通的方式，用于在特定的范围/场景内，做适当的表达，进行特定的信息传递。当一个设计语言带有品牌或自己鲜明的体系特征，就可以叫做xx design，例如宝马设计语言、谷歌material design、苹果公司edge-to-edge design。所以，设计语言使品牌DNA的价值凸显，让设计更具有意义与价值

初衷：从“思维”的一致到“产出”的一致，全方位保障输出物的质量

进化：设计进化系统是不断变化、不断混合、不断自进的。未来随着智能和科技的发展，思考、意识、创意会更加扩大化，知识与实践也会更加混合

观点：从关键词中提取，进一步论证设计观点

原则：从整体的设计体验中出发，思考设计需遵守的设计准则，规范设计目的

价值观：作为设计需思考设计在传达的设计师怎样价值观，体现设计师的社会责任

应用：将设计语言融入到设计中应用，打造标志性设计特征

设计语言形成的过程是激活用户特性记忆，形成情绪共振，进而完成定位的过程。smart design system采用LOW POLY的设计手法，其中一个也是在设计表现上，突破传统HMI、拟物化、扁平化的设计风格，采用全场景3D设计，考虑技术实现的体量，因此用低模。另外就是smart design system采用全场景设计理念，从launcher就是一个星球场景，各个功能都有场景定义的概念，让用户声临其境，同时用虚拟助手小狐狸作为全线设计线索，提升用户的体验感。

(三) 设计规范搭建

1）规范搭建的目的：

设计体量：车载功能涉及到30多个功能模块、上千个界面，会有不同的设计师被分配不同的模块

设计元素：由于设计风格的无规范会导致界面元素不统一，设计手法多元，界面参差不齐的情况

设计规则：没有统一的输出规则，则导致开发会经常性的要资源，找资源，从而提高了沟通成本

设计体验：设计体验不一致割裂，导致体验感差

所以需搭建一套可指导、可延续、可拓展、可统一、可区分的视觉指导守则，是一种设计方法，也是思考模型，从而满足对内利于理解设计原则与指导设计落地，对外传递品牌的价值观并塑造品牌感。

2）规范制定步骤：

1、制定目标 ：规划制定周期，一般一个复用系统会通过多期制作，根据版本的控件重要性跟整体的项目目标确定内容的优先级。基础必要的内容线制作，特殊的通过后续曲补充，随着产品的迭代，规范会一直持续补充于迭代，把可复用，变化幅度少的组件做成开发组件库，提高复用率个开发效率。

制定规范标准目录，定义车载规范所需框架。

2、确认关键元素：确定关键页面交互方式与关键视觉元素（与设计语言保持一致），包括launcher、音乐、车控、负一屏等，通过对这些页面的绘制，能大体确定元素的类型等。

3、形成规范指导：确定规范指导格式，规范是为了提高效率，保持一致性，前期会跟根据主视觉页面制作基本的规范，同时会说明场景，后续继续迭代后会根据实际情况补充标注，保持规范文件易用，不因过于臃肿。

3）规范制定的内容：

车规级规范包括：字体、色彩、图标、圆角、间距、布局、栅格系统、阴影、动效。

基于「Design system」建立的规范对于保持统一性，减少用户学习成本，降低用户思维耗能。

4）字体样式：

使用不同的字号和字重来传递视觉信息层次，车载系统一般不会用太多字重太纤细的字体，以smart为例，我们采用的字体在28-48px之间，最低不小于28px，字号数是通过人眼到车屏幕的距离计算，距离D测量范围测量角度，计算得出H的数值，从而根据实际像素分辨率、ppi、计算最小区域范围。

在GUI领域的研究中，首先需要考虑不同设备上，用户的使用距离和视野范围。

5）色彩系统：

定义设计品牌色、中立色、功能色三部分色彩，定义七原色搭配、黑白灰色阶、三类预警色以及衍生出相关色板，可基本满足目前所需的颜色系统与多主题适配。同时色彩对比度根据人因研究需满足对比度易读舒适对比建模，符合WCA2.1标准。

6）图标规范：

图标是图形界面的重要组成部分，具有指导和标识性质的图形，它具有高度浓缩并快捷传达、便于记忆的特性

图标设计原则：图形具有两重功能，体现示能性与品牌定位的需求，引用现实中的物品，简化图标元素，帮助用户理解，具有指示和引导用户顺利完成操作体现，另一方面要表现品牌定位相符的设计风格

图标的风格：线性、面性、线面结合等

图形特征：描边粗细、终点样式、外圆角内圆角、断口宽度

图标的区域：活动区域、空隙区域、触控区域、重心区域

7）圆角定义

在设定圆角规则时，需要注意一个事项：大小种类不宜太多，不然显得杂乱无章。

8）间距规范：

间距常用格式塔定律中的临近原则，人们会把空间上邻近的视觉元素看成一组。在设计上，这也是最常见的布局手段之一，这种常见的空间邻近的同义视觉元素的邻近，也会有异义邻近，车载系统也不例外。

9）布局规整：

布局不是静态固定的，当显示环境发生变化时，如横竖屏切换、调节字体大小、应用分屏时，我们需要及时调整内容的布局方式以适应变化。了解布局的基础概念后，通过自适应布局和响应式布局就可以让你的内容更好地适配显示环境的变化。

自适应布局：自适应布局是通过设定元素与外部容器的相对关系达到的。当外部容器大小、位置等发生变化时，元素即可以根据相对关系自动变化以适应外部环境的变化。有拉伸、缩放、占比、隐藏、折行、延伸、均分。

响应式布局：当基本的自适应布局无法满足多终端上屏幕的体验要求时，我们需要针对不同终端的屏幕特点进行响应式的布局。常见的响应式布局样式有：分栏布局、重复布局、挪移布局和缩进布局。

10）栅格系统

栅格最早起源于平面设计,定义为“以规则的网格阵列来指导和规范网页中的版面布局及信息分布”这种平面排版的设计方式非常自然地迁移到UI设计中,车载界面也不例外。

栅格系统是一个多设备下通用的辅助定位系统，有 Margin，Gutter，Column 三个属性构成。其中 Column 是根据设备的水平宽度自动匹配的（规则见栅格断点系统）。通过栅格系统进行布局，可以达到多设备下布局的一致性。

搭建方法：在sketch里设置栅格，定义好3个数值，总宽度、列数和水槽，水槽的设定，最小原子宽度，可使用8作为常见分辨率宽度中整数除率最高（80%）的数值，我们视觉上也是感受最为明显差异的，因此可用整除率最高的8做为栅格系统的原子单位。

11）阴影规则

根据谷歌定义将界面UI隐喻纸张，通过光影投射在界面，所以阴影起到的作用是：1、拉开空间层级关系 2、体现光影关系。

12）动效：

动效需满足具有真实性、引导性、高效性、连贯性设计原则。

任何类型的动效都包含三大基本的动效属性：时长、曲线、帧率。这些基本属性形成了动效不可缺少的基本要素。通过组合这些基本的动效属性，可以塑造产品动效的不同风格特点，例如稳重、活泼、轻盈、舒缓等。

时长：时间是产生动效的基本要素，不同类型的元素、场景适用不同的时长，过短或太长都会让用户不适。影响时长包括1、形态的复杂程度，简单的图形应该比复杂图形时间来的短2、显示区域大小，区域面积小的应该比区域面积大的反应更快。

运动曲线：曲线与时长相互配合产⽣运动的韵律感。调整曲线能使物体实现加速和减速，⽽不是以恒定的速率运动。在自然定律下，物体不会突然开始或停止移动，它们需要一定的时间来加速和减速。

帧率：每秒钟显示的帧数即帧率（FPS）。由于人眼的特殊生理结构，所看画面帧率一般高于每秒约10~12帧，就会认为是连贯的，该现象为视觉暂留。但连贯不代表感知流畅，运动较快的动画需要更高的帧率来保障流畅度。

风格特征：通过调整时长、曲线的参数，在转场、特征等动效设计上的差异来表达品牌的动效设计语言。例如较多地使用弹性动画会让产品的动效风格显得更加灵动和活泼。

(四) 原子组件协作

为提高设计团队效率和组件复用率，我们使用sketch中的library或者figma的组件协作，其中symbols可以被其他sketch文件调用。如果你编辑了library中的symbols，那么调用该library的其他sketch文件便会收到更新通知，你可以变更进行预览、对比和确认，是这些sktech文件所调用的symbols自动更新至最新版本，保证了组件的统一和颜色系统以及文字系统的统一。

原子设计系统包含5个层面：原子、分子、组织、模版、页面。以原子理论为依据构建设计系统。（可查看我的文章hmi设计组件库）我们通过归纳基本元素，组件，页面分解和重组产品和应用程序所需基本元素，通过重组结合等方式组成相应的页面，让设计师专注于做更重要的事，详细见上篇文章《汽车HMI组件库的方法》

https://www.zcool.com.cn/article/ZMTM3NTY2NA==.html

(五) 更新迭代

以上的步骤都是为了这一步做积累，包括命名也是为切图资源规范化，以保证与开发的沟通协作提高效率，当然，不可能一次性就完美，通过沟通不停的补充与调整，但是基本上不需要单独去切图，通过我们制定的规则，可以刷新组件库更换主题、清晰的找到资源的位置，快速的替换资源，提高版本更新迭代的速度。