江苏龙网

  1. 首页 > 资讯 > 科技 > >

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


前端的适配方案大致分为四种：按照比例缩放、根据页面宽度百分比适应、响应式方案以及REM缩放方案 。 每个方案都有自己的优缺点 ， 可以同时使用多种适配方案 ， 规定规则 。
以听伴车载产品为例 ， 简单阐述一下前端适配方案：
【|车载UI如何制定基准尺寸，如何进行适配？】 以高度为基准 ， 等比例缩放尺寸中高度不变的情况下 ， 横向宽度缩放只需要填充内容 。
比如：1280*720设计稿要适配到1824*1200时 ， 高度按比例缩放到1200的尺寸为2133*1200 ， 高度不变 ， 只需要把横向内容2133压缩至1824.横向的占比按照1824处理 。
特定情况下适配导航会出现运营文案少的情况 ， 针对于此可以单独针对此车机删减右侧的功能入口icon 。
|车载UI如何制定基准尺寸，如何进行适配？
本文插图

其中制定迷你播放器的最低高度90px ， 如果达到最低高度那就取消播放器 ， 放置成悬浮按钮 。
比如：hdpi基准下800*450 ， 播放器高度为90px ， 播放器上的文本内容已经显示已经小于16px了 ， 车主查看的辨识度很弱 。 所以 ， 在车机高度<450时 ， 播放器消失到左下角变成常驻悬浮按钮 。
先以安卓自有的适配规则适配 ， 再满足以上两个条件 。
以上需要技术评估方案的可行性 ， 在逐步进行方案的优化 。 所以 ， 设计师跟研发之间要有成熟的设计规范和相对应的研发规范支撑 。
三、需要注意
从设计稿尺寸建立和蓝湖上传问题上需要注意：
设计稿建立1280*720 ， 蓝湖上传时一定要按照xhdpi 上传 。
设计稿做的是@2倍图 ， 上传蓝湖确实按照@1倍图（mdpi)的通道上传 。 导致蓝湖上的数值各项都会偏大 ， 在适配的时候就会出现模糊 ， 图片过大过小的问题 。
设计稿输出阶段要及时跟研发沟通适配方案 。
如果适配方案双方达成一致 ， 就可以着手研发 ， 如果存在问题 ， 调整完再进行 ， 不然事倍功半 。
设计时要思考界面的延展性和易通性 。
规范一定要在项目研发前完成（除非特殊情况） ， 这样才能在做一个项目之初全盘考虑需要做的事情 ， 规避后续适配问题的发生 。
本文由 @Crystal 原创发布于人人都是产品经理 ， 未经许可 ， 禁止转载 。
题图来自 Unsplash ， 基于CC0协议


推荐阅读


上一篇：DeepTech深科技|来自西安的青年科学家突破芯片材料极限，发明可拉伸微芯片，让高性能半导体材料“软”下来｜专访

下一篇：|OPPO 手环 时尚版测评报告：颜值在线，功能够全