|车载UI如何制定基准尺寸，如何进行适配？

编辑导读：在进行车载UI工作前，我们需要了解清楚不同的度量单位，不同的度量单位对尺寸会有影响，根据尺寸进行适配。本文将从三个方面对车载UI的尺寸和适配进行分析介绍，希望对你有帮助。

本文插图

在谈车载UI基准尺寸之前，老生常谈的说一下各度量单位：
我们先了解最基本的尺寸了。在设计中我们一般会碰到的度量单位有：dpi、ppi、dp、sp、px、pt ，其中px是我们经常使用也最为熟悉的单位。
简单了解一下各自的定义：

px：像素。图像分辨率，即屏幕上组成一幅图或照片的最基本单位。
pt：点，印刷常用单位。 1pt=1/72英寸。
ppi：每英寸像素数，值越高，屏幕越清晰。
dpi：每英寸多少点，值越高，图片越清晰。
dp：安卓开发用的长度单位。在160ppi的情况下1dp=1px 。
sp：安卓开发用的字体大小单位。

各个单位之间的换算就不再文本中重点阐述了，网上有很多大量的换算文章。这里只稍微补充一下，安卓端屏幕大小各不相同，根据像素密度，分为几种规格：

本文插图

以上， 1dp定义为屏幕密度值160ppi时的1px ，即在mdpi时， 1dp=1px ，以mdpi为标准，这些屏幕的密度值比为0.75：1：1.5：2：3；即以xhdpi为标准， 1dp=2px 。
就目前市场状况而言，各个车厂车机尺寸粗略判断。虽然不太全面，至少有一些参看意义：

本文插图

本文插图

车机图片来源于网络
综上所述， xhdpi,xxhdpi是主流车机屏幕分辨率。
一、设计稿尺寸
根据目前市场主流设备尺寸来看，我们要用1280*720来做车机UI设计稿尺寸。

本文插图

为什么会选择1280*720作为设计稿标准尺寸的原因有三：
原因一：从中间尺寸向上向下适配的时候界面调整的幅度最小，最方便适配。而1280*720正好是常用分辨率的中间数值。
原因二：大屏幕时代应该选用大尺寸设计，依然使用小尺寸会限制设计的设计视角，而且很大程序小尺寸会局限信息结构的排版布局，以及内容展示。
原因三：用主流尺寸来做设计稿尺寸，极大的提高了视觉还原和其它机型适配。
所以，我们把基准尺寸设定为1280*720px来设计。 sketch里面可以按照640*360尺寸设计。
二、前端适配方案
从市面大多车机系统设计研究表明， 70%左右的车机左侧导航为常驻导航， 25%的微桌面卡片式， 5%的是桌面应用图标。
用户反馈和测试研究也发现，左侧栏更靠近驾驶员，更利于操作。事实上， Android Auto 之前一直把快捷按键放到屏幕底部，除了增加了司机的操作负担之外，还压缩了车载导航可视区域的高度。不过在2017年的 Google I/O 上，谷歌展示的奥迪定制车载导航也把快捷键放在了左边，这也侧面印证了这种交互方式的可行性。
产品框架和设计尺寸都已经定好。在研发阶段唯一不可缺少的是适配方案，设计稿在不同设备上到底怎样表现？假设遇到了更宽的设备，是横向拉宽？还是等比缩放？还是再设计一个截然不同的布局？这些前提基本确定了该设计稿会如何实现，这样在写代码时就不会出现反复更改和适配单独做的情况。