UI设计规范

物理按键

针对配备硬件按键的车辆，界面需响应用户的按键操作，具体如下：

播放控制操作（必须支持）

媒体类应用播放必须支持物理按键的控制操作。包括：播放/暂停、上一首/下一首、音量调节、快进快退等。

目前快应用引擎已支持视频播控组件响应物理按键的控制，建议第三方合作伙伴直接调用。

界面元素交互（可选支持）

• 通过车载硬按键对界面元素依顺序进行焦点遍历，并完成系统导航操作（选择功能和退出界面）。
• 界面焦点遍历顺序依照从左到右，从上到下的基本原则，若界面有明显的左右区域划分，则先遍历左侧区域再依次到右侧。
• 若硬按键支持方向切换，可快速在界面不同控件区域间切换。例如：上下键翻页，列表区切换到页签区。
• 非触摸屏需要默认显示焦点，且始终显示；触摸屏默认不显示焦点，操作界面后显示。
• 焦点默认从内容元素起始，非系统DOCK区或导航栏。

  

语音交互

在驾驶过程中，驾驶员的视线是基本不会离开前方道路的。那么，在这种视觉通道被占用的情况下，利用听觉通道接收信息便成为了新的可能。所以，语音交互为安全驾驶提供了新的一种交互方向。在做语音交互时需要遵循以下4个原则：

• 量的准则：既要让人听得懂，又不要说太多废话。尽量少添加不必要的措辞，比如用户问什么天气，直接回答“深圳，晴”即可。
• 质的准则：在设计语音交互时，用语要准确，不可模棱两可。
• 关系准则：不要前言不搭后语，说话要有联系。
• 方式准则：清晰明了，井井有条不要拐弯抹角也就是在设计语音交互时，不要说自己做不到的事情，比如“有什么可以帮助到你？”，这显然是超乎能力范围了。

注：下图来自 https://color.review/可在此链接查阅色彩对比度关系。

饱和度与明度的合理搭配

车机配色尽量避免鲜艳色彩的大量使用，以避免对用户注意力的吸引和占用。

根据 Munsell Color 原理得出，饱和度和明度的两个数值越大，颜色越鲜艳。在车机配色选择上请遵循以下规则：

• 越靠右上角的色值越鲜艳，所以不建议选取。

• 取色时，同时考虑饱和度和明度，这两个因素的值之和尽量小于180（即：S + B ≤ 180）。

  

常见的车机屏幕分为横屏和竖屏两种形式，应充分利用屏幕“长”或“高”的特性设计布局。

横屏

竖屏

响应式设计与栅格

响应式设计可为每个自适应布局中的不同宽度和高度值提供快速响应的解决方案。通常用于指定容器中垂直居中或水平居中的元素，或指定可以根据相邻元素增长或收缩的距离。而使用栅格系统则可以帮助设计者更有效和一致的定义每个元素所占据页面的空间。

自适应布局能力

自适应布局是基于断点的静态布局。系统检测屏幕的大小并为其高度和宽度加载适当的布局。

设计者应当为横屏和竖屏设计不同的布局，以充分利用不同屏幕特性为驾驶者服务。

• 拉伸
  • 组件内元素随组件可以往四个方向拉伸。
  • 元素通过定义在组件内的四个边距，当控件发生宽度/高度变化时，保证边距固定的前提下对内容进行拉伸。
  • 允许定义组件拉伸的水平方向和垂直方向的最大值和最小值。

  

• 缩放

  • 组件内元素随组件等比缩放。

  • 组件本身只能等比放大。

  • 组件内元素根据当前和组件的横竖比例关系，当组件缩放时一起缩放。

  • 允许定义组件缩放的最大值和最小值。

    

• 隐藏
  • 当组件内元素横向布局，元素间的距离是固定时，布局可显示元素的数量随着显示宽度的改变而发生改变。

    

• 均分
  • 组件内元素根据个数均分空间。
  • 组件内元素根据当前个数和组件的宽度，均分各个元素之间的间距。
  • 允许定义组件最左端和最右端是否一起均分/指定固定值。
  • 限制均分的结果，间距必须大于等于0，开发者可以定义更大值。

    

• 占比
  • 组件内元素始终占据一定比例在组件中布局。
  • 允许定义元素在组件中占据的具体比例值。

    

• 拆行
  • 组件内元素根据组件的宽度选择左右or上下布局。
  • 定义参考宽度，判断父控件区域比例是否有明显宽高特征（例如：比例大于4:3）放不下就上下布局，放得下就左右布局。
  • 参考值不一定要和当前布局的layout一样，上下布局和左右布局两种状态分别定义元素准确位置和大小。
  • 参考值定义方式：参考dp值，参考位置+参考字符宽度等等。

    

• 延伸

  • 组件内元素随组件根据实际情况显示个数。

  • 定义元素和排列间距，可以横向排列也可以纵向排列。

  • 当组件宽度或者高度发生变化时，元素保持间距不变，根据实际的情况显示内容个数。

  • 未显示完整的部分可通过滚动显示更多。

    

    字符超长

    为确保用户短时间扫视获取有效信息，所使用文本简洁明了。若文本超长，应按照如下优先级进行处理：

    动态扩展控件宽度 > 调整布局 > 缩小文字 > 换行显示 > 精简界面用语 > 截断

    

文本字号推荐使用规则如下表：

媒体应用 - 横屏：

加油服务 - 横屏：